Video in Macromedia Flash (Optional) – Lesson 121 Video in Macromedia Flash (Optional) Lesson 12

2 Video in Macromedia Flash (Optional) – Lesson 12 Objectives Import video into Flash. Create a new scene for a preloader. Develop the ActionScript and loading animation for a preloader. Create buttons to control video in Flash. Configure ActionScript to control the Timeline of another movie. Use the loadMovie command and a blank movie target to bring the video SWF into the main movie.

3 Video in Macromedia Flash (Optional) – Lesson 12 Importing video clips can be a challenge Video clips are usually large files, which increases the amount of time they take to download into your movie. To solve that problem, you can place the movie into a separate SWF file with a built-in preloader. The preloader can be used to let the user know that the movie is loading.

4 Video in Macromedia Flash (Optional) – Lesson 12 Place a video in an SWF file Open a new Flash file and set the width and height properties as needed. Select the layer to hold the video and click The File menu, point to Import, and then click Import to Stage. Locate the video file and click the Open button. In the Video Import Wizard, click the option to embed the video in Flash and click Next. Select other desired options in the wizard dialog boxes, click Next to move forward, and click Finish in the last box to embed the video in your Flash file. If the frame length warning box appears, click Yes. Select the video on the Stage and, in the Property inspector, make sure the video is lined up to x = 0, y = 0. Press the Enter key or the Return key to play the video (although sound will not play at this point).

5 Video in Macromedia Flash (Optional) – Lesson 12 Create play buttons to start your video You need to create buttons to allow the user to play and stop the video clip. To create a play button: Create a new layer for the button. Select the Rectangle tool and select a fill color of your choice. Click the Round Rectangle Radius button on the toolbar to specify rounded corners if desired. Draw the button where you want it to be. Double-click the button to select it and convert it to a symbol. Assign it a name and a behavior of Button.

6 Video in Macromedia Flash (Optional) – Lesson 12 Configure the button’s states After the play button has been defined as a symbol, you can set its states by: Double-clicking the button on the Stage to enter editing mode. Insert a keyframe in the Over state and choose a color for the button when in the Over state. Insert a keyframe in the Hit state. Add a new layer for the button text. Use the Text tool to enter the text for the button using the font, size, and other settings of your choice. You can also add sound for the Down state of the button by adding a sound layer, inserting a keyframe for the Down state, and dragging a sound onto the Stage.

7 Video in Macromedia Flash (Optional) – Lesson 12 The Play button being created These figures show the Play button as it is being created. Rounded corners make a button more attractive. Click this button to specify rounded corners. The button drawn on the Stage before text is added.

8 Video in Macromedia Flash (Optional) – Lesson 12 Create the Stop Video button To create a button to stop the video clip: Make a copy of the Play button symbol and name it Stop Video. Insert a keyframe in Frame 2 of the button layer. Note the x/y coordinates of the Play button in Frame 2, delete the Play button, and drag the Stop Video button to the Stage at the same x/y coordinates as the Play button was in. Double-click the Stop button to enter editing mode and change the ‘Play’ text to ‘Stop.’ When the user clicks the Play button to play the movie, as soon as Frame 2 begins, the Play button will be replaced by the Stop button.

9 Video in Macromedia Flash (Optional) – Lesson 12 Create ActionScript for the Play and Stop buttons (part 1) Insert a new layer called Actions. Select Frame 1 of the Actions layer and assign it a label in the Property inspector that will become a target frame for a preloader. Open the Actions panel, expand the Timeline Control category, and double-click the stop command. This prevents the video from playing automatically. Scroll down the Timeline to the last frame of the Actions layer and double-click the gotoAndPlay command, type 1 within the parentheses. This will return the movie to Frame 1 after it has played.

10 Video in Macromedia Flash (Optional) – Lesson 12 Create ActionScript for the Play and Stop buttons (part 2) Select the Play Video button on the Stage in Frame 1. In the Actions panel, click in the Script pane and enter the following script, and then collapse the Actions panel: on (release){ gotoAndPlay(2); with (_root){ gotoAndStop(“Video”); } {

11 Video in Macromedia Flash (Optional) – Lesson 12 Create ActionScript for the Play and Stop buttons (part 3) Select Frame 2 of the button layer and click the Stop Video instance on the Stage. In the Actions panel, click in the Script pane and enter the following script, and then collapse the Actions panel: on (release){ gotoAndPlay(1); with (_root){ gotoAndStop(“Video”); } {

12 Video in Macromedia Flash (Optional) – Lesson 12 Compare the Play and Stop scripts The figure on the left shows the script defined for the Play Video button. The figure on the right shows the script defined for the Stop Video button.

13 Video in Macromedia Flash (Optional) – Lesson 12 Create a new scene for a preloader A preloader is a short animation indicating that the main movie is loading. Creating a separate scene for it creates a new Timeline for that scene only. Click the Window menu, point to Design Panels, then click Scene. Click the Add scene (+) button at the bottom of the dialog box. Double-click the default name to assign a new name to it. Drag the new scene above Scene 1 so it will play first. Select the new scene and close the Scene panel. You will now have a blank Stage for the new scene.

14 Video in Macromedia Flash (Optional) – Lesson 12 Create ActionScript for the preloader (part 1) To create ActionScript for the preloader: Double-click the default layer 1 and name it Actions. Click the first keyframe of that layer and name it Start in the Property inspector. Click Frame 3 of the layer, click the Insert menu, point to Timeline, and click Keyframe. With Frame 3 selected, click on the new keyframe and open the Actions panel. Frames 1 and 2 will be a loop to check the status of the load. Frame 3 will contain the script that does the check.

15 Video in Macromedia Flash (Optional) – Lesson 12 Create ActionScript for the preloader (part 2) In the Actions panel, click in the Script pane and enter the following script, and then collapse the Actions panel: if (_framesloaded >= _totalframes){ gotoAndPlay(“Video”,”StartVideo”); } else { gotoAndPlay(“Start”); }

16 Video in Macromedia Flash (Optional) – Lesson 12 The preloader script This figure shows the final script for your preloader. It will check to see if the video clip is loaded and, if so, it will leave the preloader scene and start playing the main scene. If not, it will loop back and check again. You could also insert an animated message for the preloader to let the user know what is going on with the movie.

17 Video in Macromedia Flash (Optional) – Lesson 12 Create a blank movie as the target for a loaded video You use the loadMovie command to load the video into your Flash movie. Create a blank movie clip symbol to use as the target for the load, and assign it an instance name that can be used in script code. Create an ActionScript using the loadMovie command and the instance name of the blank movie symbol as the target.

18 Video in Macromedia Flash (Optional) – Lesson 12 Summary In this lesson, you learned: To import video into Flash. How to create a new scene for a preloader. To develop the ActionScript and loading animation for a preloader. How to create buttons to control video in Flash. To configure ActionScript to control the Timeline of another movie. How to use the loadMovie command and a blank movie target to bring the video SWF into the main movie.