Week 9 Topics

Chapter 11 - ActionScripting Basics

ActionScript enables buttons to control the Main Timeline or Movie Clips, create slideshows with back and forward buttons, and link to other URLs on the internet. ActionScript can be attached to a button or Movie Clip instance or a keyframe in the Timeline. It cannont be attached to a graphic symbol instance.

Example 1 - Controllling the Main Timeline (using stopAndPlayFinal.fla and stopAndPlay.fla)

  1. Open the final version of the movie and choose Control>Test Movie. Click the Play and Stop buttons. Close the Preview Window and open the other file. This contains everything but the ActionScript. Choose Control>Test Movie. Nothing happens. Close the preview window.
  2. Click on the Stop button to select it. Choose Window>Actions (F9) to open the Actions panel. It reads at the top Actions - Button because you have selected a button instance on the Stage.You can undock the Panel by using the gripper (series of dots to the left. If you want to restore panels to their default position, you can choose Window>Panel Sets>Default Layout
  3. In the Actions panel, click on the Actions Category and then on the Movie Control category and double click on the stop action to add it to the Script pane on the right side of the Actions panel. You should see on (release) {stop() }. If you don't see the on (release) you may be in Expert mode (click on the Options menu in the upper right hand corner and check) or you be adding ActionScript to a frame. Make sure you select the button so that this doesn't occur. You can also add an action by dragging it to the Script pane or by selecting the Add (+) button and choosing the action from the pulldown menus.
  4. Located in the white area above the information area is the Jump menu, which allows you to quickly move to different scripts that you have added to the movie. The Jump menu will display the actions for the selected object or frame. Unless you need to refer to an instance via its name in ActionScript, there is no need to name an instance for the ActionScripting to work. In the Script pane you will see the event (on (release), the parentheses hold the parameters for the action, the braces group statements, and the semicolon marks the end of a stagement. Choose Control>Test movie and the stop button should now work.
  5. Close the Preview window and click on the Play button on the Stage to select it. In the Actions panel, double-click on the play action under Action>Movie Control to add it to the script pane. Choose Control>Test Movie and test the Stop and Play buttons. Close the Preview Window.
  6. Click on Insert Layer button and name it actions. The author recommends putting all frame actions in their own layer, in a layer named actions, that is located on top of all the other layers.
  7. By default, the Main Timeline will play. We will now insert an action in the Timeline to tell the movie to stop before it starts to play. Select Frame 1 of the actions layer which contains a blank keyframe.. Double click the stop action. The jump menu will now explicitly state where the action is being placed. You can expand the Jump menu to quickly access any of the actions that have been added to frames or objects in the movie.
  8. In the timeline, there will be a small a that appears in frame 1, indicating that an action has been added to this frame. Choose Control>Test Movie. The movie begins in a stopped state, and when one clicks play, it plays and then loopsby default, but then encounters a stop action in frame 1.
  9. Close the Preview window and insert a keyframe in frame 10 on the actions layer. In the Actions panel, double-click on the goto add to add it to the Script pane. In the Parameters pane of the Actions panel, specify 2 for the frame field. This means that when you get to frame 10, you will go to frame 2 and play from there. This bypasses the stop action in frame 1, so the movie repeats. Choose Control>Test Movie to test this and save and close the file.

Mouse Events - press, release, releaseOutside, rollOver, rollOut, dragOver, dragOut, keyPress
Keyboard Events - To change the mouse event into a keyboard event, select the Key Press field and then enter a letter (case sensitive) for the event
Movie Clip events - When an action is added to a Movie Clip instance, the onClipEvent event handlers is added with the default event being load.
Time-based events - time-based events occur when the Playhead reaches a keyframe containing actions.

Exercise 2 - Controlling Movie Clips (using stopAndPlayMC.fla) - In the last exercise, we attached the stop and play actions to button instances to control an animation in the Main Timeline. To control the Timeline of a MovieClip, you must give it an instance name and it must be present in the Timeline.

  1. Open the file. The file is similar to that used in Exercise one except that there is a movie clip rather than an animation layer and there is only one frame in the Main Timeline. Choose Control>Test Movie to preview the movie. The Stop and Play buttons don't have any effect because no actions have been added to these buttons yet. Close the Preview Window.
  2. Click on the snow to select the Movie Clip instance and type boarder in the Instance Name field. Select the Stop button, open the Actions panel, and click on the Add (+) button and choose Object>Movie>Movie Clip>Methods>stop. You will see a "not yet set" message in red, indicating we need to name the object we want to stop. Type boarder in the Object field. Methods are functions that are assigned to an object. Choose Control>Test Movie and test the stop button.
  3. Click on the Play button on the stage. Click on the Add (+) button in the Actions panel and choose Object>Movie>Movie Clip>Methods>play. Click in the Object field and then click on the Insert a Target Path button above the Script pane (a circle with crosslines). In the dialog box, select boarder. Choose Control>Test Movie to test your buttons

The advantage of using target paths is that by clicking on something, you avoid spelling mistakes. If you want the movie to start in a stopped position, you would need to add a stop frame action to the MovieClip timeline. You can also create a loop by adding a gotoandPlay Frame 2 to send the Playhead to Frame 2 to create a loop. Dot syntax begins with the name of the object followed by a dot followed by the property, method, or variable you want to identify.

Exercise 3 - The goto Action to Create a Slideshow (using slideShowFinal.fla and slideShow.fla)

  1. Open the final version and select Control>Test Movie to preview it. Close the file and open the other file. Choose Control>Test Movie. The frames go by very fast. Close the Preview Window.
  2. Click the Insert Layer button to add a new layer, renaming it actions. Select the first keyframe and open the Window>Actions panel. Choose Actions>Movie Control>double click on stop to add a stop action. Click on the Insert Layer button to add a new layer, naming it controls and put it below the other layers.
  3. Lock the other layers and select the first keyframe in the controls layer. Open the Library (F11) and drag an instance of btnNext and btnPrevious onto the Stage. Position them side by side and select both of the buttons (Ctrl+A) and then open the Align panel to align the bottom edge of the buttons.
  4. Select the btnNext button in the Actions Panel, choose Actions>Movie Control and double click goto. Choose Next Frame from the Type drop-down list. This takes the Playhead to the next frame and stops.
  5. Click on the other button and repeat these steps, except now choose Previous Frame in the Type field. Choose Control>Test Movie to test these buttons. Note that when it gets to the last frame nothing happens when you try to advance the movie (same for Frame 1 when you try to select the Previous frame). [Note: When we put artwork (in this case buttons in frame 1), they persist through later frames until we put in a keyframe; this means that the back and go buttons will appear in all frames] We will now make things loop.
  6. On the Controls layer, add keyframes to Frames 2 and 5 by selecting each frame and pressing F6. All of the contents of Frame 1 are copied, including actions attached to the buttons. Move the Playhead to frame 1 and select the left button. In the Actions panel, select the line which reads prevFrame(). Choose frame number in the drop down list and then enter 5 in the frame field.
  7. Move the Playhead so that it is over the last keyframe in the controls layer. Select the next button instance and in the Actions panel, select the line that reads nextFrame() and in the Type field, select Frame Number and in the frame number field, enter 1. Also, select te Go to and Stop radio button. Preview the movie and save and close the file

Exercise 4 - On Mouse Event: getURL (using getURL.fla) - You can use ActionScripting to open other web sites from within a Flash movie.

  1. Open the file and select the More button at the top left. Open the Actions Panel (F9). Choose Actions>Browser/Network and double click on getURL. Enter the thescoop.html in the URL field -- one can enter either relative or absolute addresses here. In the Parameters pane, select _blank. This tells Flash to open the link in a new window. One can also specify _top which opens the link in the entire current window, removing any framesets. Choose Control>Test Movie
  2. As in HTML, one can use mailto to do an email link. Click on the Contact Us button and enter mailto: followed by an email address. Choose Control>Test Movie to test the email link. If this doesn't work, choose File>Publish Preview>HTML to open the .swf file in a browser window and test it there. Note that mailto won't work on computer where the email program hasn't been setup to work with the browser, as is often the case with lab computers. Save and close the file.

Introduction to Dreamweaver

Dreamweaver is the leading HTML editor. The current version is Dreamweaver 8. It is sold by itself and as part of Studio 8 (includes Flash 8, Fireworks 8, and Freehand). It is produced by Macromedia which was acquired in 2005 by Adobe, who makes the leading graphics programs Photoshop and Illustrator, Acrobat (creates PDF files), GoLive (an HTML editor), and other programs.

Initial topics covered:

Revised: March 27, 2006. Comments to William Pegram, wpegram@nvcc.edu