Flash Tutorial ‐ Preloading External Jpegs or SWFs  If you wish to preload Jpeg images or Flash Movies which are stored ou...
Step One: Setting up the documentWe need a new Flash file that matches the size of the Jpeg photo.   1.   Go to: File > Ne...
Step Three: Adding the Preloader Progress Bar   1. In the TimeLine rename Layer 1 to: Preloader   2. Go to: Window > Devel...
Loader Component. When the image is loaded it is resized but it retains its original     proportions. The image is simply ...
The Loader Component now fits the Stage exactly.Step Five: Adding the ActionScript   1. In the Timeline click on the Inser...
// Sets whether the content being loading into the loader component scales to fit the loader (true),or the loader scales t...
Upcoming SlideShare
Loading in …5
×

Flash, actionscript 2 : preloader for loader component.pdf

1,063 views

Published on

menambahkan preloader pada loader component

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,063
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flash, actionscript 2 : preloader for loader component.pdf

  1. 1. Flash Tutorial ‐ Preloading External Jpegs or SWFs  If you wish to preload Jpeg images or Flash Movies which are stored outside the Flash file usethis preloader tutorial. This tutorial will show you how to use the Flash MX04 LoaderComponent to preload and place external files into your Flash Movie. The tutorial also showsyou how to use the progressBar component.Cross Ref: There are several other Flash Pre-Loader tutorials on this site. To ensure that you arefollowing 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 148aFlash MX 2004 loading an external jpeg photo: Tasman Sea, New Zealand.Note: If you can see the photo and not the preloader press Refresh (F5) in your Browser. Once aFlash Movie has loaded the Browser may not truly refresh or re-load the Movie. Therefore if youdid not see the preloader in action: Click here
  2. 2. Step One: Setting up the documentWe need a new Flash file that matches the size of 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: OKStep 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 Movies content. In my experience compressing a Movie makes no difference to the performance. 6. Select: 7. Click: OK
  3. 3. 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: myProgressBarStep Four: Adding the Loader Component 1. In the Timeline click on the Insert Layer Button: 2. Rename this new Layer: Loader 3. If the Components are closed, open them: Window > Development Panels > Components (Ctrl F7) 4. Drag onto Stage a copy of the Loader: The Loader on Stage. 5. In the Property Inspector give the Progress Bar the Instance Name: myLoader 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. Proportions: You may note that the proportions of the Jpeg image are different to the
  4. 4. Loader Component. When the image is loaded it is resized but it retains its original proportions. The image is simply centred inside the loader: The image is not stretched. Note Reversal: You will see in the ActionScript below that it is possible to reverse this situation, so that instead of the image scaling to the Loader you can get the Loader to scale to the image. We now need to resize the Loader so that it matches the original image.6. In the Property Inspector set the following attributes: Width: 550 Height: 400 X: 0 Y: 07. Settings in the Property Inspector.
  5. 5. The Loader 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 it needs an objectfunction to workmyProgressBarListener = new Object();// When the progress bar is complete and has preloaded the loader component content, thelistener will call and run this code below:myProgressBarListener = function (eventObject) {// Hide the progress bar now as we don’t need it any moremyProgressBar._visible = false;// Closes the above function};
  6. 6. // Sets whether the content being loading into the loader component scales to fit the loader (true),or the loader scales to fit the content (false)myLoader.scaleContent = true;// Set the location of the content to be loaded. Examples are:// myLoader.contentPath = "http://www.YourWebSite.com/images/myImage.jpg";// myLoader.contentPath = "http://www.YourWebSite.com/myFlashMovie.swf";myLoader.contentPath = "http://www.webwasp.co.uk/images/Sea.jpg";// Declares a listener that detects when the progress bar component has loaded the loadercomponent content and is complete. Then calls the function myProgressBarListenermyProgressBar.addEventListener("complete", myProgressBarListener);// Set up the progress bar component variable to polled mode which determines the maths behindthe % counter.myProgressBar.mode = "polled";// The location of the Loader ComponentmyProgressBar.source = "myLoader";// Sets the conversion to 1. This basically means the component divides the current and totalvalues loaded and to be loaded. Then it floors them (works out the difference between them) anddisplays the converted value in the label propertymyProgressBar.conversion = "1";// Set the label to display the word loading followed by the percentage value loaded so farmyProgressBar.label = "LOADING %3%%";// The direction the progress bar moves when loadingmyProgressBar.direction = "right";// The location of the label that displays the percentage loaded so farmyProgressBar.labelPlacement = "bottom";// Stops the Playhead in the current frame until the Movie has been preloadedstop();Important Note: Do not save your Jpeg images as Progressive. Progressive Images do not loadinto Flash Movies. You can find the Progressive Image setting in the save dialog box of yourimage editor such as PhotoShop (or similar).Thats it!! 

×