|
Creating a movie in a movie
We are going to create two flash movies in one! That's right. If you are new to Flash you may not yet realize that the Flash programming environment is designed to create many small movies that are composed with actionscript to make one main movie presentation. I said the "Actionscript" word. That is an intimidating word if you are new to Flash. Good news here is that we are not using any! Different tutorial, different day. OK, to the tutorial. STEP 1 TASKS To begin open your Flash Program and open a new Flash document. With your new movie document open we want to first creat a button. This button will 'represent' your main movie time line--therefore--your main movie. Note: As you learn more about creating movie clips you will discover you can design an entire menu which is itself a movie clip that is called to the main timeline using one of Flash's many scripting functions. So draw a simple circle on the canvas. INSERT IMAGE 1 HERE
Next select everything on the canvas. Note: In the real world of editing in Flash there may be times when you will need to lock all layers except the one you are targeting. This way you are sure to select only the canvas objests you want to select.
In Flash 4 select F8 or go to the menu and select INSERT > CONVERT TO SYMBOL. Note: The editing features in other versions of Flash are layed out differently. For example in FLASH MX 2004 you will select either F8 or from the menu MODIFY > CONVERT TO SYMBOL.
Select BUTTON for this symbol type and name it anything you like (e.g., button_1) INSERT IMAGE 2 HERE Next right click in the new symbol and select 'Edit in Place.' Note: In the future you can edit in any mode you like. This tutorial is designed to simplify the tasks.
INSERT IMAGE 3 HERE In the last step the timeline transformed to the button symbol 'edit mode.' In this mode we want to: 1) Add a layer to the time line by clicking the "ADD LAYER" + button; and, 2) Add an additional key frame to the time line on both levels by selecting them one at a time and pressing the F6 key. Your movie should look like the image when you are finished here. INSERT IMAGE 4 HERE Next we are going to make a very simple movie clip using the 'Create symbol' function in the library panel. To do this you want to first open your library panel. Press Ctrl+L and your library panel will open. Once your library panel is open select the 'create new symbol' feature located on the bottom edge of the panel. It is located in the bottom right corner and it is shaped like a "+" sign. INSERT IMAGE 5 HERE Once you click the 'create new symbol' feature you will be prompted to select the kind of symbol you want to create. This time select 'Movie Clip.' Name the movie clip something which makes sence. Note: Remember in the real world of editing you may have quite a few small clips. You want to use a person system for remembering your clips in order to use them on the fly, and to keep your directory organized.
INSERT IMAGE 6 HERE Once you select OK you will enter the editing canvas for the new MovieClip timeline. It looks just like a main timeline! Here we are going to create a simple tween to act as our animation for the purpose this tutorial. On the canvas draw a box or and shape you like. It should be something different from the circle we made in Step 1. I will draw a box. Note: Keep in mind the simplicity of this MovieClip or the button we are creating are for tutorial purposes only. You can expand these simple concepts in Flash programming to add very powerful features to a Flash movie!
INSERT IMAGE 7 HERE Advanced Note: There is a "+" sign in the middle of the canvas. Pay close attention to this anchor point. Although it is not important in this tutorial, it is very important when you advance to loading MovieClips in emptyMovieClips for example. This anchor point is the reference point loading movies will use while placing themselves on the main timeline. For example MovieClip_A on the main timeline has its anchor point in the top left corner -- therefore when calling a seconf clip to replace MovieClip_A, MovieClip_B will load in the same exact place if its anchor point is also located in the same place - top left corner
3 tasks 1) Next add 9 frames to the time line by clicking on the first key frame and then pressing the F5 key 9 times. 2) Next select the first key frame again and make sure the image you drew is also selected. 3) Next we want to "Create Motion Tween!" In the menu of Flash 4 select INSERT > CREATE MOTION TWEEN Note: Other versions of Flash have different editing features here also. For example, in Flash MX 2004 select INSERT > TIMELINE > CREATE MOTION TWEEN
INSERT IMAGE 8 HERE If you completed the tasks correctly the timeline should have turned to a light purple color with dashes in it! Next select the last frame in the timeline and press F6. This task will add a final keyframe closing the timeline. The dashes are now one ling arrow pointing to the final keyframe. INSERT IMAGE 9 HERE The is a fun part. To make an animation which serves the purpose of the tutorial we will use the property inspectors box. Open the box in Flash 4 by selecting WINDOWS > INSPECTORS > TRANSFORM Note: Other versions of Flash have different editing features here. In FLASH MX 2004, for example, press Ctrl+T to open the transform dialogue box.
INSERT IMAGE 10 HERE With the timeline curson in the last frame position. and the image selected on the stage, change the setting in the transform dialogue box changing the size of the image. Although we are not done, you can test your tween by selecting the first frame of the timeline and then pressing the ENTER key. The animation should change the shape of your drawing according to the modifications you made to its size in the transform box. If you notice in the figure below, the box is much smaller! INSERT IMAGE 11 HERE 4 tasks Next we want to edit our button again! 1) Look above the timeline and notice the link "Scene 1" Click on this link to return to the main movie. You can also select from the menu EDIT > EDIT MOVIE. 2) Next right click on the button and select 'Edit in Place' again as you did in Step 3. 3) Next, lock layer 1 in the button timeline and then select frame two on the second layer. 4) With the library still open, select the MovieClip symbol you made and drag it to the stage, placing it on top of the round button already there. INSERT IMAGE 12 HERE Testing our movie in a movie! Click the 'Scene 1' link in the time line again to return to the main movie stage. Next select from the menu CONTROL > TEST MOVIE. Your animation MovieClip should play when you mouse over the button. If your button animation loops and you do not want it to, you can add a second layer to the MovieClip animation and an action stop script. It is coded in the added .fla file for this tutorial. This is a very simple yet powerful concept in Flash programming. When you stop to think about the potential of how you can use this simple programming task it is awesome. You will also want to check out tutorials of loading exterior movie clips to a main movie! Now you are programming in Flash! Good Luck!
|
