You will see something to the right of the Scene 1 text. It's a navigation convention by which you leave a trail to your directory structure. You can see this used on sites like Amazon when you navigate from one level to deeper levels.
These bread crumbs always lets you know where you are in the scheme of your website or Flash document and allows easy access out to the main page or scene. In Flash, we call Scene 1 the main timeline and we reference it with an underscore root as in _root.
There is a symbol icon for graphic symbol and the name mouse2 is bold. We are no longer in Scene 1's main timeline. Each symbol (graphic, button, and movieclip) has its own independent timeline. For now, just notice the indication at the top of the stage that is illustrated in the graphic below:
This mouse symbol is created from a mouse shape. If a symbol was created from grouped objects or other nested symbols, the object would be outlined in blue as below and we would need to break it apart before we can use it to shape tween.
Our mouse2 symbol is a shape in symbol editing mode. We can return to Scene 1 or the main timeline and drag a copy of the symbol onto the stage. To return to Scene 1, you can click on the Scene 1 text link on the navigation breadcrumb bar or click the blue arrow on the left of the bar to go up one level.
2. Drag a copy of the mouse2 symbol to the stage in frame 1 of the 'shape tween' layer and center it to the stage. To center to the stage, open the Align Window. Go to Window Menu - Window>Panels>Align or hit the align button on the main toolbar or Control + K. Select the symbol. Click the To Stage button on the right of the panel. Then click the Align vertical center button in the top row, button 2 from the left, and the Align horizontal button in the top row, button 4 from left (not illustrated in highlight). Since we want to shape tween, we can't use symbols or groups. So we have to Break Apart the mouse2 symbol.
3. With the symbol selected as above, go to Modify Menu - Modify>Break Apart. I use Control + B.
Break Apart so that your image looks like the one below. You'll notice that the image is no longer outlined in a blue rectangle, indicating that the symbol is broken apart into shapes. It is now selected the way a normal shape is selected - with a kind of dot pattern over the entire area of selection.
4. Select frame 20 and Insert a Blank Keyframe (F7) or right-click Insert> Blank Keyframe.
Drag a copy of the red circle symbol to the stage. Center the circle to the middle of the stage. To center to the stage, open the Align Window. Go to Window Menu - Window>Panels>Align or hit the align button on the main toolbar or Control + K. Select the symbol. Click the To Stage button on the right of the panel. Then click the Align horizontal center button in the top row button 2 from left. And the Align vertical button in the top row button 4 from left.
With the circle symbol selected, go to Modify Menu - Modify>Break Apart or Control + B. The circle should be completely selected. Remember this means that both the fill and the stroke are selected. Increase the size of your circle 130% in the transform panel by clicking the constrain box and entering to 130%. Save your work.
Here's the final step for creating your shape tween. Select frame 1 and open the Frame Panel. Go to the tweening drop-down menu and select shape. Your timeline should now have an arrow from frame 1 to frame 20 and the cells should be tinted green. Are yours? Go back to frame 20, select your red circle stroke only and delete the stroke. Look at the difference in my movies with and without the stroke.
red circle with stroke
red circle without stroke
We have centered both the mouse shape and the circle shape in our shape tween movie. You can tween shapes that have different locations on the stage and Flash will fill in the movement when you apply the tween. See below.
But, wouldn't it be more fun if the red circle would twin into a piece of cheese?
Please continue to the next section of this lesson.
