Building a simple Picture Viewer:Part One

In this exercise you will construct a simple slide show that uses images on the main timeline. This method is regarded as being quite inefficient but it does give you a good grasp of how to code simple timeline navigation.

 

Getting Started:

  1. Download the files to your Hard Drive and unzip them.
  2. Open Flash and import the images in the Exercise folder to the Library.
  3. Create Four layers named:
    • Actions
    • Buttons
    • Words
    • Images

 

Image 1: The layers are created.

 

  1. Select Frame 1 of the Images layer and drag copies of each of the photos to the stage. Resize them, using the Free Transform tool, to fit the top of the stage.
  2. Select the first frame in the "Words" layer, select the Text Tool , select Static Text" in the Property inspector, and enter the words "Orlando Hotel".
  3. Select Frame one of the "Buttons" layer.
  4. Select Window>Other Panels>Common Libraries>Buttons.
  5. Open the "Circle Buttons" folder and drag a copy of the "Step Ahead" and "Step Back" buttons to the stage.
  6. Double click the "Step Ahead" button on the stage to open the Button Symbol Editor.
  7. Select the Text in the Over state and change it to "Next" Repeat this for the remaining states in the Button editor.
  8. Repeat step 10 for the Step back button by changing the text to "Back".
  9. Select the Text Tool, click in the text for the "Step Ahead" button and enter "Next". Rename the text in the "Step Back" button to "Back".
  10. When finished, your stage should resemble Image 2.

 

Image 2: The first frame of the slide show is complete.

 

Finishing the assembly:

  1. Add key frames in frames 2 to 5 of the Image,Buttons and Words layers.
  2. Select Frame 2 of the Images layer and delete the images on the stage. Drag an image from the lirary to the selected frame.
  3. Select the text in Frame 2 and change it to something more descriptive of the image.
  4. Repeat these steps for frames 3, 4 and 5.

 

Image 3: The assembly is complete.

 

Wiring it up with ActionScript:

    If you were to play the movie at this stage, it would just "zip" through the movie. There will be no interactivity because there is nothing to stop the playback head from moving across the timeline.

    The technique that allows you to stop the playback head on a frame is the "stop()" function. What this function does is to stop the movieclip that is currently playing.

  1. Select Frame 1 of the Actions layer.
  2. Press the F9 key or select Window>Development Panels>Actions to open the Actionscript editor.
  3. Click once in the input area and enter stop(); .
  4. Add key frames in frames 2 - 5 of the Actions layer and add a stop action to the frame.

The first thing you will notice is the the small "a" above the keyframe - . This indicates the code has been added to a frame. The other thing you must keep in mind is the importance of the semi-colon at the end of the the line of code. It indicates the end of the "argument".

Having controlled the playback head you can now concentrate on clicking the buttons and moving the playback head to the next frame or the previous frame. This is accomplished through the use of the "gotoAndPlay(); function. This handy piece of code sends the playback head to a specified frame. The frame to which the playback head will be sent is be entered between the brackets. These brackets are used to "hold" the parameters of the action.

  1. Select the "Next "button in Frame 1 and open the Actionscript Editor.
  2. Click once in the text entry area and enter:

on(press) {
gotoAndPlay(2);
}

  1. Select the "Next' Button in Frames 2,3,4 and 5, open the Actionscript Editor and change the number in the gotoandPlay() to the next frame.
  2. Repeat these steps for the "Back" button"
  3. Save and test the movie.

By selecting a button on the stage, Flash recognizes this fact and presents you with a list of Event Handlers (Image 4). Press means- "When the mouse is depressed or pushed down." The next action- gotoAndPlay(2);- tells Flash to send the playback head to frame 2 of the timeline. Also note the use of curly brackets- { }. Any code placed between them will be executed as a "block". It is very important that these brackets be used in pairs or you will get a syntax error.

 

Image 4: The Actionscript Editor will let you choose from a list of events and code that relate to the selected object.

Creative Commons Licence