Week 10 Topics

Chapter 11 - ActionScripting Basics (continued)

In the main Timeline, you can have several timelines that play right after another -- these are called scenes. This allows you to break up a larger project into smaller, more manageable chunks. You can also use ActionScript to control the playing of scenes.

Exercise 5 - Targeting Scenes (using gotoSceneFinal.fla and gotoScene.fla)

  1. Open the final version of the file. If you see a dialog box about unavailable fonts, just choose default. Choose Control>Test Movie and click on each of the navigation buttons to see a different portion of the website. What is happening when you click a button is that the Playhead is moving to the appropriate scene in the Movie. Close the Preview window, and the final version and open the other fla file.
  2. Choose Control>Test Movie -- notice that the navigation buttons don't work because there are no actions on the buttons. Close the Preview Window. In the main Timeline, choose Window>Scene. The Scene panel shows a list of scenes in the movie -- right now there is only one. Double click the scene name and rename the scene main and hit enter. In the Scene panel, click on the Duplicate Scene button at the lower left to duplicate the main scene 5 times, and then doubleclick each of the names to rename these to match the navigation buttons on the Stage: background, gear, safety, learning, whatsNew.
  3. Click on the Edit Scene button on the right side of the information bar and select background. Click on the artwork and in the Property Inspector it should say "instance of mcMain". This indicates the artwork is contained in an instance of the mcMain Movie Clip. Because we are in the background scene, we want to change the artwork. In the Property Inspector, click on the Swap Symbols button and select the mcBackground movie clip. By swapping the symbol, you keep it in perfect alignment with the symbol that was there before (both symbols have the same dimensions).
  4. Repeat these steps for the other scenes: gear, safety, learning, whatsNew. When you are done, click on the Edit Scene button and choose main to open the main scene Timeline. Select the background button on the Stage by clicking on it.. Open the Actions Panel (Window>Actions) and choose Actions>Movie Control and doubleclick on goto to add it to the Script pane. In the Parameters pane, select the Go To and Stop radio button and choose background from the drop down Scene menu. Repeat these steps for the Gear, Safety, Learning, and What's New buttons. For these steps, you don't need to close the Actions Panel each time, but you may need to move it so that you can see the stage in order to click on the appropriate button.
  5. In the previous step, we created ActionScript for each of the nav bar buttons in the main scene. Now we will copy these buttons and the associated ActionScripting to the other scenes. Select Frame 1 in the nav bar layer to select all the content in Frame 1. Choose Edit>Copy Frames. Using the Edit Scene button to open the background scene, select Frame 1 in the nav bar layer, and choose Edit>Paste Frames. Repeat the paste step (select frame 1 in the nav bar layer and then choose Edit>Paste Frames) for the gear, safety, learning, and whatsNew scenes.
  6. Choose Control>Test Movie. Notice that the scenes play one after another. So we will add a stop action to a frame in the Timeline. Close the preview window and using the Edit Scenes button, choose the main scene. Click on the insert layer button to add a new layer, naming it actions. Move it to the top if it is not already. Select Frame 1 in the actions layer and in the Actions panel, select Actions>Movie Control and doubleclick on stop to add a stop action to the Script pane.
  7. Repeat this step for the other scenes. Choose Control>Test Movie and click on each navigation button to make sure it works. Notice there is no visual feedback on the button to let you know which scene you are in. We will change this next.
  8. Using the Edit Scene button, choose the background scene and click on the Background button on the Stage. In the Property Inspector, choose Graphic from the Symbol Behavior drop-down list. This will convert the behavior of the Background button instance in this scene to a Graphic Symbol. For Color, choose Tint, select white for the color and choose 100%. Explanation: A Graphic symbol cannot be clicked on and cannot have actions associated with it -- thus we are deactivating the link to the page we are on -- which is commonly done on web page. Another common step on web pages is to make the button for the current page look different; since there is triangle next to the word background in the Up state of the button, changing the tint to white will make the triangle appear.
  9. Repeat the previous step for the other scenes -- changing only the button that corresponds to the current scene. Choose Control>Test Movie to test the movie. Save and close the file.

Exercise 6 - Creating a Drop-Down Menu (using menuFinal.fla and menu.fla)

  1. Open the final version and choose Control>Test Movie. Click on the navigation buttons and notice that doing so for some of them will reveal a drop down menu. Close the file and open the preliminary version of the file
  2. Double click on the Stage to open the Movie Clip's timeline. There is one layer and five buttons. Choose Control>Test Movie and notice that there are no drop down menus. Back in the project file, click on the Insert Layer button to add a new layer to the timeline of the Movie Clip. Name it labels and put this above the buttons layer.
  3. Select the first keyframe in the labels layer, and in the Property Inspector give it a name of begin in the Frame Label field. In the timeline, you will notice a hollow circle and a flag in the Timeline, indicating that a label exists on this frame. As you add and delete frames in a movie, the frame numbers will change, which causes problems if you are referring to a frame number in ActionScript. Use of frame labels avoid this problem.
  4. On the labels layer, select Frames 5, 10, 15, 20, and 25 while holding down the control key to select all of them, then hit F7 to add a blank keyframe to each of these frames. Add the labels bkgd, gear, safety, learning, and new to these frames, respectively. Select Frame 30 and press F5 to add frames up to Frame 30 so that you can see the new label. (In order for a frame label to be visible in the Timeline, there must be enough frames to display the entire name therefore using short labels is recommended -- it also keeps overall file size low and is more convenient for use ActionScripting.)
  5. Click the Insert Layer button to add another layer, anming this layer actions, putting it above the labels layer. Select frame 1 in the actions layer and open the Actions panel and choose Actions>Movie Control and double click on the stop action.
  6. Select Frame 5 and press F7 to add a blank keyframe and add a stop action here as well. Select Edit>Copy Frames and click in Frame 10, and choose Edit>Paste Frames to copy the contents of Frame 5 to Frame 10. Repeat the paste for Frames 15, 20, and 25.
  7. Still within the Movie Clip, move the Playhead to Frame 1 and click on the Background button instance on the Stage to select it. In the Actions panel, choose Actions>Movie Control and doubleclick on goto. Select the Go To and Stop radio button. In the Type field, select Frame Label from the drop down men and then select bkgd from the drop-down menu in the Frame field. This means that as soon as the user releases the mouse on the Background button, the movie will go to the frame labelled bkgd and stop there.
  8. Repeat this step to add ActionScripting to the four remaining navigation buttons. In the Timeline, in the buttons layer, select frames 5, 10, 15, 20, and 25 by holding down the control key, release the control key, and then press F6 to add keyframes to each frame. This will copy the buttons and the ActionScripting from frame 1 to these other frames. Select Frame 30 and press F5 to add up to frame 30 on the buttons layer. Control>Test Movie -- nothing much happens because although the Action Scripting is working to send the playhead to a different frame, all the content looks the same.
  9. Move the Playhead to frame 5. Select the Background button on the Stage and open the Property Inspector.. Choose Graphic from the Symbol Behavior drop-down menu and for Color, choose Tint, select white for the tint color, and choose 100%. Repeat these steps -- i.e. in frame 10 change the gear button, in frame 15 change the safety button, etc. Control>Test Movie -- the buttons should change appearance and be deactivated when they are linking to the current "page". Close the Preview Window.
  10. Move the playhead to Frame 10 and open the Library. Shift click the Safety, Learning, and What's New buttons to select all these buttons and then move them down in unison using the down arrow key to create room for the submenu. Drag the btnGearSubBGCL and btnGearSubBoards on the Stage and position them (using the Zoom to do this). Choose Control>Test Movie. When you click on the Gear button, the arrow and the subnavigation buttson will appear.
  11. Move the playhead to Frame 15 and shift-click the Learning and What's New buttons to move them down together. From the library, drag an instance of btnSafetySubLessons and btnSafetySubRC onto the Stage and position them as before. Move the playhead to frame 20 and move the What's New button down to make room for btnLearningSubLesson1 and btnLearningSubLesson2. Choose Control>Test Movie to test the movie. Click on each of the buttons. Close and save the file.

Exercise 7 - Loading Movies (using loadMovie.fla) - A swf file has the capability of loading other .swf files into itself. This is similar to links on an HTML page, which repalces content with other HTML pages when clicked. Loading multiple .swfs into the main .swf is an efficient way to present large movies, since the user does not have to download the entire movie at the outset, but instead can do this on demand.

  1. Double click on any of the .swf files to preview them and then close it. Open the .fla file and choose Control>Test Movie. Double click on the menu to open the Movie Clip's timeline. Select Frame 1 in the actions layer and in the Actions Panel, select Actions>Browser/Network and doubleclick loadMovie to add it to the script pane. In the Parameters pane, type main.swf and in the location:level field, type 50. The main.swf is a relative address, so the file must be in the same folder as the main project file. The level of 50 is chosen just to provide lots of potential levels above and below. Choose Control>Test Movie. You will now see content inside the interface. Anywhere there is no artwork in the loaded movie, those sections will be transparent, and thus the original interface will show through.
  2. As you stack .swf files on top of one another, this simulates layers which are called levels in ActionScript. In the project file, select the line in the script pane with the loadMovie action. Click on the reference button (looks like a book) on the far right of the Actions Panel to open the Reference panel.
  3. Select Frame 5 of the actions layer and in the Actions panel, doubleclick loadMovie under Actions>Browse/Network and type background.swf in the URL field and set the level equal to 50. Choose Control>Test Movie and click on the background button. Notice that the main content is switched out for the background content. This is because we used the same level as before.
  4. Repeats these steps for Frames 10, 15, 20, and 25 using gear.swf, safety.swf, learning.swf, and whatsNew.swf, respectively, for the URL field. Choose Control>Test Movie. In the project file, move the Playhead to frame 10 and on the Stage, select the Board Gear Checklist button and in the Actions toolbox, choose Actions>Browser/Network and double click loadMovie and add gearCheckList.swf in the URL field and enter 50 in the Location:Level field. Repeat this step for the Boards button, using gearboards.swf as the URL.
  5. Repeat this step for each of the four remaining subnavigation buttons: two buttons in Frame 15 and two buttons in Frame 20 using safetyLessons.swf, safetyRc.swf, learningL1.swf, and learning2.swf respectively.
  6. In the information bar, click on Scene 1 to return to the main Timeline. Unlock the background layer and select the Home button in the bottom left hand corner of the Stage. In the Actions pane, add a loadMovie action with main.swf as the URL and a level of 50.
  7. Double click on the menu on the Stage to open the Movie Clip's timeline. Select frame 10 of the actions layer and in the Actions Panel, choose Actions>Browser/Network and doubleclick the loadMovie action. This will add a new script below the previous one we created. In the Parameters, type gearExtra.swf in the URL field and for Location:Level, enter 60. This will put this gearExtra.swf movie above (in front of) the other movie. Thus when the user clicks the Gear button, the Playhead will go to the gear label inside the main Timeline. The Playhead will stop, and the load the gear.swf movie and then the gearExtra.swf movie. Choose Control>Test Movie to test the movie.
  8. If one clicks on other buttons, the gearExtra.swf file appears because it has been loaded into Level 60 and will stay there. Movies loaded into level 50 will only swapout a movie in level 50. Select the Board Gear Checklist button on the Stage and in the Action Panel's Script pane select te loadMovieNum ("gearChecklist.swf". 50) code. Double click on the unloadMovie actins to add it to the Script pane. In the Parameters pane, type 60 for Location:Level. This wil unload the movie in level 60. Choose Control>Test Movie. If you click on the Board Gear Checklist button, the gearExtra.swf content is gone. Save and close the file.

Revised: April 1, 2006. Comments to William Pegram, wpegram@nvcc.edu