Lab 07:  Flash Animation 2

Overview

In this lab assignment we will create a movie with several scenes. We will also introduce two new features of Flash: animated masking and shape tweening (morphing). 

Masks reveal a portion of an underlying image as the mask moves across the stage or on a path. We will use a mask with our digital photo to create a spotlight effect, where the spotlight focuses on one part of the photo. 

Shape tweening (morphing) seamlessly transforms one object into another object. To produce the credits, we will use a technique known as morphing. Morphing is a function which automatically transforms shapes. 

The movie will have 2 scenes (3 scenes if you submit work for the additional 5 extra credit points), and the first scene will have several layers. The first scene uses the masking technique, the second scene uses shape tweening. 

The instructions for this exercise are more "general" than in our first animation lab. If you are looking for exact directions, please refer to our "Animation 1" lab.

Required Materials:

·       A standard sized digital photo of yourself;

·       Macromedia Flash software

 

Note:  If you preview any of the student examples for this assignment over at https://tigerweb.towson.edu/webster/109/109_labs/examples/index.htm , you’ll see the animated opaque spotlight that goes between the dimmed photo image and the undimmed photo image.  Be forewarned: as you begin working your way through the instruction steps below – that spotlight will NOT be opaque – but just a colored round circle.  Simply continue working your way all the way through the assignment – and when the last steps have been completed – the spotlight will appear opaque – as in the provided student examples.

 

Procedure:

Note:  to access Flash on any of the COSC Lab PC, use . . .
          Start / All Programs / Adobe Animate CC

1. Start Flash per above. Select File / New / ActionScript 3.0 / OK.   To ensure that all controls are shown on the screen, select View / Magnification / Show All, and select View/Preview Mode/Full. The properties window should show to the right of your screen by default. If you don't see this window, select Window / Properties to open it.  
   
   
2. Let's look at our first scene, our spotlight using the masking. The first scene will have at least 4 layers.
• Layer 1 (of scene 1) features our digital photograph with dimmed brightness setting 
• Layer 2 (of scene 1) contains our digital photograph with regular brightness setting
• Layer 3 (of scene 1) is our mask layer, it contains a circle to function as the spotlight
• Layer 4 (of scene 1) shows text to explain our animated mask 

The total length of your movie will be  appr. 120 frames for the first two scenes.

3. Create background. First, you create layer 1 (of scene 1) which is the background for the movie. This layer contains the "dimmed" photograph. We will reduce the brightness to a low level. Use File / Import to Stage to import the photograph. Navigate to the location of the photograph and select it. You may have to adjust the size of the photograph by using the Modify / Transform / Scale option. Drag one of the corner handles to adjust the size.   
   
   
4. Reduce Brightness. To reduce the brightness, the photograph needs to be converted to a symbol. Use Modify / Convert to Symbol (if you don't see the Convert to Symbol right-click on your image, then select Convert to Symbol from the shortcut menu) to turn this photo into a symbol and store it in the movie's library. Save this symbol as a Graphic. In the dialog box that appears, name your symbol "photograph". Click Ok. Select the drop-down box for the color effect in the properties window below, and select Brightness. Adjust the slider to the left to a value around -70%.  This adjusts the brightness for this instance of the symbol "photograph".   
   
   
5. Define length of scene 1. This layer should end at frame 60.  Click into frame 60 and Insert / Timeline / Keyframe.  
   
   
6. Label layer. It is possible to rename your layers by double-clicking on the layer name and entering a name of your choice.  For the purposes of this assignment though, it's best just to keep the default layer names (Layer 1, Layer 2, etc.)
   
   
7. Create second layer. The next step will create the second layer (of scene 1) containing the picture that will show through the spotlight. Insert a new layer using Insert / Timeline / Layer. You should now see Layer 2.  
   
   
8. Use the photograph symbol from the library . This will be a second instance of the the symbol "photograph" and we won't change the brightness this time. Click in frame 1 of the second layer. Use Window / Library to bring up the movie's library window. Select the symbol "photograph" by clicking on it (make sure to select the "graphic" one). Now drag the symbol from the library window directly onto the stage. This new instance should fit exactly on top of the dimmed photograph. This layer should also end at frame 60.  Click into frame 60 and Insert / Timeline / Keyframe.
   
   
9. Create third layer. Insert the third layer using Insert / Timeline / Layer. This is the layer for our spotlight mask (Layer 3).  Using the circle tool, draw a circle of appr. 1 inch diameter on the left side of the photograph (not “on” the photo – but to the left of it.) This will be our spotlight. Make sure that the circle has an actual fill color, don't use an "empty" circle.   
   
   
10. Animate the spotlight. Click in frame 1 of layer 3 and select Insert / Classic Tween  
    
    
11. Define final location for spotlight. Left-click once in frame 60 in layer 3, and select Insert / Timeline / Keyframe. Drag the circle to the particular item of your photo that you want to show in the spotlight (click on circle and ctrl/drag with mouse). You should now see a solid arrow pointing from the first keyframe to the last keyframe in layer 3. If you see any part of a dotted line, that indicates an incomplete or broken motion tween, and your spot light may not work as expected. 
    
    
12. Enlarge the spotlight. Modify / Transform / Scale. Drag one of the corner handles to enlarge the circle.   
    
    
13. Check your movie. Select Control / Play all Scenes, select Control / Rewind, then select Control / Play and check the path of your circle. You can adjust the path of your circle now. If you like, have your spotlight move around the photograph before it zooms in on the object of your choice.   
    
    
14. Mask Layer. Before you mask the layer, you want to make sure that your spotlight is exactly the way you want it. After masking the layer, the masked layer and the mask will be locked and you will have to unlock the layers first to make any changes. To mask the layer, right-click in layer 3 (the layer containing the spotlight) and choose Mask. Now the masking layer (layer 3) covers (masks) everything in the underlying layer (layer 2) that is outside of the masking shape. 
    
    
15. If your spotlight does not work as expected: If your motion tween is incomplete or incorrect and/or your spotlight does not work as expected, it is easiest to re-do the whole process. Unlock the masked layers, unmask the layers, then delete the spotlight layer and start over by re-inserting the layer. 
    
    
16. Add Text. Add a fourth layer, (Insert / Timeline / Layer) Enter some text into Layer 4 to illustrate your animation. The text needs to include your full name. For example, you could write: Introducing...........Joe Student (replace Joe Student with your own name).    
    
    
17. Finished with our First Scene!!  
    
    
18. Create second scene. The next step is our second scene, the credit scene. In this scene we will use a new technique called morphing. We will show credits as: This movie was produced by: and have these words then automatically transform into our name. Add a new scene to your movie using Insert / Scene.  
    
    
19. Create credits. Use the text tool to write some text on the screen. Text should be similar to: "Movie produced by:" (don't write your name). In the Properties window, select a large font and any color of your choice. Switch to editing mode by clicking on the arrow tool. Select Modify / Break Apart. Select Modify / Break Apart again. (Yes, it's correct, you use the modify / break apart command twice) The break apart command converts text to a shape by separating your block of text into small editable objects. 
    
    
20. Insert a blank keyframe at frame 40 using Insert / Timeline / Blank Keyframe. This inserts a blank keyframe without any content. Use the text tool to type your name anywhere on the canvas. Select a large font and any color of your choice. Switch to editing mode by clicking on the arrow tool. Select Modify / Break Apart. Select Modify / Break Apart again. De-select the text by clicking anywhere on the canvas.
    
     
21. Shape Tween the text. We will now instruct Flash to compute the in-between stages for the transformation of the two text items that we placed on the screen. Transforming from one shape into another is called morphing. Click on frame 1,  select Insert / Shape Tween. In the Properties Window, in the Tweening section, select Blend Type: Angular. Blend type: angular is used for shapes with sharp corners and straight lines. Blend type: distributive is used for smoother and more irregular shapes. Notice the solid arrow from frame 1 to frame 40 signifying a successful shape tweening. 
    
    
22. Insert an additional keyframe at frame 60 using Insert / Timeline / Keyframe. This will display your name in its final position for a few seconds (this will give me time to read your name). 
    
    
23. The total length of your movie including the two scenes should be around 120 frames. If you need to switch between scene 1 and scene 2,  or would like to change the order of your scenes, use the inspector under Window / Other Panels / Scene. 
    
    
24. For 5 extra credit points (if you like): Add an additional scene containing shape tweening (morphing). Add a new scene, create an object (make sure that this object is NOT a symbol, shape tweening works only on objects that are NOT symbols). Please note that, if you tween regular shapes (for example a rectangle into a circle), you will not have to use the Break Apart feature (it is only necessary for text).  
    
    
25. Check your work. Control / Rewind  and Control / Play your movie. Save your file in your COSC109/CompletedAssignments folder using the File / Save As option and name your movie Lab07_anim2.fla. Remember, you need the movie in native .fla format if you would like to make any changes at a later time. 
    
    
26. Export your movie for posting. Select Control / Play All Scenes (to show all scenes of your movie), select Control / Rewind (to make sure your movie starts from the beginning), select Control / Loop Playback (this option will continuously play your movie). Now we are ready to export the movie to Flash Player format. Select File / Export Movie. In Save as Type, select Flash Movie (*.swf), as file name type Lab07_anim2. 
    
    
27. You should now have two files saved, Lab07_anim2.fla and Lab07_anim2.swf. 
    
    
28. Check your work by going to your file directory and double-clicking on filename Lab07_anim2.swf.  Your movie should now be playing in a continuous loop.

 

Grading Criteria

• Movie must contain 2 scenes in total
• Scene 1 contains the digital picture with spotlight (using mask layer) 
• Scene 2 contains your credits (must be shape tweened)
• Movie must be saved in .swf format

 

Submitting your file:

Send an e-mail to webster@towson.edu and attach one file: Lab07_anim2.swf
with the Subject Heading “COSC 109: Submitting Lab Assignment #7”