Loading External Images	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Loading External Images using Components

Free Tutorial

Step One: Building the Flash Movie

Cross Ref: You may wish to read these tutorials first so that you know how to build and use preloader's: Arrays, Preloader and Advanced Use of Preloader's

1. Open a new: Flash Movie
2. Go to: Modify > Document
3. Set the Movie to: 550 x 400
4. In the Timeline use the Insert Layer button to add 2 layers so you have a total of: 3 Layers
5. Name the top Layer (Layer 3): ActionScript
6. Name the middle Layer (Layer 2): Components
7. Name the bottom Layer (Layer 1): Border
8. Select all the Frames on all the layers (use the Ctrl Key for multiple selection) and right click (Mac: Ctrl click). Select: Insert Blank Keyframes
   
   
   Inserting Blank Keyframes into all Layers on Frame 2. Note the Layer Names.
   
   
   You should now see this:
   
   
   All Layers now have Blank Keyframes in Frames 1 and 2.
   
   
9. Select Frame 2 of the Layer: Components
10. Select the Text Tool:
11. Drag a Text box onto the stage: Create Text Box
12. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
13. In the Property Inspector set the Text Box to: Dynamic Text
14. Give the Text Box a Variable Name (Var): MessageDisplay
    
    
    Don't get the Variable Name (Var) mixed up with the Instance Name!
    
    
15. Go back to using the Selection Tool:
16. Open the Component Panel: Window > Development panels > Components(Ctrl F7)
17. Drag a Button Component to the stage and position it bottom left: Button Component on Left
18. Add a second Button Component to the bottom right of the Stage: Button Component on Right
19. Add a Progress Bar Component to the Stage and position in the center: Progress Bar Component
    
    
    Your Stage should look similar to this.
    
    
20. Select the Button Component on the right and in the Property Inspector give it an Instance Name: Next
21. In the Property Inspector change the Label to: Next
    
    
    Instance Name and Button Label are both set to: Next
    
    
22. Select the Button Component on the left and give it an Instance Name of : Previous
23. Change the Label value to: Previous
    
    
    Instance Name and Button Label are both set to: Pervious
    
    
24. Select the Progress Bar Component and give it the Instance Name: myProgressBar
25. Set the source to: MyImagesHolder
26. Change the mode to: polled
    
    
    Settings for the Progress Bar Component.
    
    
    Optional: If you wish to have a border around your Movie complete the next three points. Otherwise skip this bit and continue just below the illustration of the red border.
    
27. Select Frame 2 of the: Border Layer
28. With the Rectangle Tool draw a border around your Movie: Draw a Border
29. Use the Selection Tool to: Delete the Fill
    
    
    Flash Movie with a red border.
    
    
30. In Frame 2 of the Component Layer select your: Progress Bar
31. Copy the Progress Bar: Edit > Copy
32. Select Frame 1 of the: Components Layer
33. In Frame 1 paste it into the same position on Stage: Edit > Paste in Place
34. In the Property Inspector set the Movie to: polled
35. Set the source to: _root

Note: NOT _root. It's without the dot on the end.

36. Give the Progress Bar an Instance Name: myProgressBar
    
    
    The settings for the Progress Bar on Frame 1.