Related Content









Bookmark and Share

Create an Interactive Movie with Flash MX and QuickTime

Post your comments below






With your QuickTime movie finished, create a new Flash project. Import the QuickTime movie to the Stage (File -> Import -> Import to Stage). When importing, choose to "link" to an external file instead of importing it into the Flash project. Make sure the layer with the QuickTime movie is long enough to accommodate the whole movie. Also, make sure the frame rate of the Flash project matches the frame rate of the QuickTime movie. For example, if the QuickTime movie is 15 fps, set the Flash project to the same. Rename the layer that contains the QuickTime movie by double-clicking the layer name and entering "QT Movie."

STEP 1: Import your QuickTime movie

STEP 2: Add a new layer for ActionScript code

Add a new layer in the Flash timeline and rename it "Code." This layer will have some keyframes and a little ActionScript code. On the first frame, add the following code: var myStop = 0. The "myStop" variable is used to determine whether playback should stop at certain points, or keep playing all the way through.

STEP 3: Add a layer for buttons

Add another new layer in the Flash timeline (for a total of three) and rename it "Buttons." This is the layer you’ll use for (can you guess?) buttons. To start with, let’s add a "Play" and "Pause" button by creating basic shapes using the drawing tools. Select each shape and select "Modify Convert To Symbol." Name each shape appropriately and make sure the selected Behavior is "Button."

STEP 4: Add code for the pause and play buttons

Select the Pause button you’ve created and add the following code as an action: on (release) {stop();}. Do the same for the Play button, but change "stop()" to "play()."

STEP 5: Tweak your publish settings

This whole thing works because QuickTime supports multiple tracks or layers, more than just audio and video. Using Flash, you can export your QuickTime movie from Flash with the Flash animation and buttons on a separate Flash track without re-compressing the movie. Before you do that, however, you need to tweak some settings in the "Publish Settings" dialog box ("File -> Publish Settings"). For Formats, turn on QuickTime, then click to the QuickTime Tab. Make sure "Paused at Start" is checked, then click to the "Flash" tab and make sure "Compress Movie" is not checked. If you want, you can click back to the "Formats" tab and turn off Flash exports. (You can also assign a better default name to your exported QuickTime movie.)

STEP 6: Test your movie

Click "Publish" at the bottom of the "Publish Settings" dialog box. The first version of your new movie has just been created and saved. Close the "Publish Settings" dialog box and click over to your desktop. Double-click the movie to open it in QuickTime Player and test it out. If all goes according to plan, the movie should play and pause when you hit the corresponding buttons.

STEP 7: Add chapter buttons

With the Buttons layer selected, add the graphics for the chapter buttons. This is identical to Steps 3 and 4 (above), but this time you’ll add different code for each button. Since each button will take the playhead to a different point in the Flash movie, you’ll need to scrub through the Flash timeline and make a note of the frame numbers where each chapter (section of the QuickTime movie) starts and stops. In the example, I’ve noted that the first section spans frames 63 through 133, the second section spans 234 through 267 and the last section covers frames 328 through 403.

STEP 8: Add stop marks

Using the information from Step 7, click to the last frame of the first section (frame 133 in our example) and select the CODE layer, the one we’re using for ActionScript code. Add a keyframe by selecting "Insert -> Timeline -> Keyframe" and add the following code as an action to the frame: if (mystop) {stop();}. Keep adding "stop" keyframes to your "code" layer on the last frame for each section.

STEP 9: Begin to add button actions

All that’s left now is to add the code to each of the buttons. Use the first button to play the whole thing from the beginning, and the other three buttons to play only sections. Select the first button and enter the following code as an action for the button on (release) {mystop = 0;gotoAndPlay(2);}. This ensures that the value for mystop is false, and that playback starts at the beginning of the movie (actually, the second frame). You need to set "mystop" to zero or false so that you can play through the stop marks you added in Step 8.

STEP 10: Add more button actions

Select the second button and add the following code as a button action: on (release) {mystop = 1;gotoAndPlay(63);}. This will start playing at the beginning of your first section, and setting mystop to "1" (or "true") ensures that the playhead will stop when it hits the end of the section keyframed in Step 8. Repeat this step for the remaining two buttons, replacing the frame numbers in the gotoandplay() function with the frames numbers for the end of the corresponding sections.

STEP 11: Test the movie

Select "File -> Publish" and open the exported QuickTime movie in the QuickTime Player. Using the same techniques, you can add buttons that click to a Web site by adding the following code:on (release) {getURL("www.animationbureau.com");}. You can also roll together multiple QuickTime movies, or use any of Flash’s animation features for adding more style. It’s a simple technique with limitless design potential. And all an end user needs to view it is QuickTime.

YOUR GUIDE

Mike Caputo, President, Animation Bureau, New York, NY

In addition to his traditional and computer animation work at the New York -based Animation Bureau, Mike shoots and edits video, authors CD-ROMs and DVDs and designs Web sites.

Mike Says Keep In Mind ...

Though I used Macromedia Flash MX on a Mac for this tutorial, the procedures should work just as well on a Windows PC, provided QuickTime is installed.

Animation Bureau
www.animationbureau.com
ph. 917.509.1246
e-mail: mcaputo@animationbureau.com


Bookmark and Share

Post a Comment

Name:
Email:
Comments:

Please enter the letters or numbers you see in the image.
Your message will be reviewed before it is posted

Subscribe to StudioDaily Podcast


         
  flash video mini-site   rich media tutorials   store  
 
flash video News, analysis, tips and tricks served up daily at the new Studio Daily blog.
 
video tutorials All New Video Tutorials on Softimage Face Robot, Avid Liquid, After Effects, FCP and more!
  downloadable tutorials final cut pro after effects motion  
           
HOME | SUBSCRIBE | TOOLS | TUTORIALS | REVIEWS | BUSINESS | CONTACT | ABOUT US | PRIVACY & TERMS | ADVERTISING



Related Content