Flash Tutorials: Preload External Jpeg with Scroll Bars	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Preload External Jpeg with Scroll Bars

Free Flash Tutorial

This preloader tutorial shows you how to load an external image in to the Flash file and use Scroll Bars to move the image. This give you the opportunity to load over-sized or Panoramic images. This uses the Flash MX 2004 Scroll Pane component.

Cross Ref: There are several other Flash Pre-Loader tutorials on this site. To ensure that you are following the right tutorial for your needs, you may wish to read a brief description of each: Preloader Tutorial Listings

Example: Download the Flash file Int 149a

Flash MX 2004 Example of a preloaded photo with Scroll Bars: White Island, New Zealand, an active volcano.

Note: If you can see the photo and not the preloader press Refresh (F5) in your Browser. Once a Flash Movie has loaded the Browser may not truly refresh or re-load the Movie. Therefore if you did not see the preloader in action: Click here

Example: Download the Flash file Int 149b

Flash MX 2004 Example of a preloaded photo with a single Scroll Bars: Auckland, New Zealand.

Step One: Setting up the Document

We need a new Flash file that is smaller than the Jpeg photo.

1. Go to: File > New > General Tab > Flash Document > OK
2. Go to Modify > Document
3. Set the width to: 550 pixels
4. Set the height to: 400 pixels
5. Click: OK

Step Two: Setting up the Publish Settings

1. Go to: File > Publish Setting
2. Under the Formats Tab for Type Select: Flash
   
   
   
   
3. Click the: Flash Tab
4. Select: Flash Player 6 (or higher)
5. Select: ActionScript Version 2
   
   
   Selecting Player 6 and ActionScript 2.
   
   
   If you are using external Jpegs it is likely that your Flash Movie is small. All the same I would suggest that you also select Compress Movie. This can make a dramatic difference to the size of the final Movie. I have often seen up to 40% reduction in the file size, depending on the Movie's content. In my experience compressing a Movie makes no difference to the performance.
   
   
6. Select:
   
   
7. Click: OK

Step Three: Adding the Preloader Progress Bar

1. In the TimeLine rename Layer 1 to: Preloader
2. Go to: Window > Development Panels > Components (Ctrl F7)
3. Click on the Expand Button next to the UI Components:

Note: You should now be able to see a long list of UI Components.

4. Drag onto Stage a copy of the Progress Bar:
   
   
   The Progress Bar on Stage.
   
   
5. In the Property Inspector give the Progress Bar the Instance Name: myProgressBar

Step Four: Adding the Scroll Pane Component

1. In the Timeline click on the Insert Layer Button:
2. Rename this new Layer: ScrollPane
3. If the Components are closed, open them: Window > Development Panels > Components (Ctrl F7)
4. Drag onto Stage a copy of the Loader:
   
   
   The Scroll Pane on Stage.
   
   
5. In the Property Inspector give the Progress Bar the Instance Name: myScrollPane

   Notes on the Size: If we leave the Loader Component the default size the image will load at that small size even though original is much bigger. Like this:
   
   
   Default image size.
   
   We now need to resize the Scroll Pane so that it matches the Movie Size.

6. In the Property Inspector set the following attributes:
   

   Width:	550
   Height:	400
   X:	0
   Y:	0

   
   
   The Scroll Pane settings in the Property Inspector.
   
   
   The Scroll Pane Component now fits the Stage exactly.

Step Five: Adding the ActionScript

1. In the Timeline click on the Insert Layer Button:
2. Rename this new Layer: ActionScript
   
   
3. On frame 1 of this new Layer add the following ActionScript (if you wish you may leave out the gray code hints):

// Create a listener object event function. The progress bar is an object so needs an object function to work
myProgressBarListener = new Object();

// When the progress bar is complete and has preloaded the Scroll Pane component content, the listener will call and run this code below:
myProgressBarListener = function (eventObject) {

// Hide the progress bar now as we don’t need it any more
myProgressBar._visible = false;

// Closes the above function
};

// Set the location of the content to be loaded
myScrollPane.contentPath = "http://www.webwasp.co.uk/images/White-Island.jpg";

// Declares a listener that detects when the progress bar component has loaded the loader component content and is complete. Then calls the function myProgressBarListener
myProgressBar.addEventListener("complete", myProgressBarListener);

// Set up the progress bar component variable to polled mode.
myProgressBar.mode = "polled";

// The location of the Scroll Pane Component
myProgressBar.source = "myScrollPane";

// Sets the conversion to 1. This basically means the component divides the current and total values loaded and to be loaded. Then it floors them (works out the difference between them) and displays the converted value in the label property
myProgressBar.conversion = "1";

// Set the label to display the word 'loading' followed by the percentage value loaded so far
myProgressBar.label = "LOADING %3%%";

// The direction the progress bar moves when loading
myProgressBar.direction = "right";

// The location of the label that displays the percentage loaded so far
myProgressBar.labelPlacement = "bottom";

// Stop the movie at the frame until the move has been preloaded
stop();

Note: For addition notes on what Macromedia have to say about the some of the Keywords used in the above ActionScript:

• addEventListener
• mode
• source
• conversion
• label
• direction
• labelPlacement

 

Important Note: Do not save your Jpeg images as Progressive. Progressive Images do not load into Flash Movies. You can find the Progressive Image setting in the save dialog box of your image editor such as PhotoShop (or similar).

That's it