Overview

In this lab assignment we will create a movie with several scenes. We will also introduce two new features of Flash(or Adobe Animate CC): 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.

Material:

A digital photo that you have available to you. The photo should show you (and possibly friends and/or family).

Macromedia Flash

Procedure

1. Use Start / Programs / Adobe Animate to start Flash. Select Create / New/ ActionScript 3.0. 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. Check out the sample animation that is posted in the LearnOnline discussion board under "Animation 2". It will give you an idea what the final product will look like.
3. 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, and additional frames (for an appr. total of 160 frames) if you decide to submit the extra credit portion of this lab. 

 
4. 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. 
5. 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, and select Brightness. Adjust the slider to the right to a value around -70%. This adjusts the brightness for this instance of the symbol "photograph". 
6. Define length of scene 1. This layer should end at frame 60 (hint: Insert / Timeline / Keyframe at frame 60).
7. Label layer. Once a scene contains a number of layers it is usually easier when layers are  labeled appropriately. For example, "Background" instead of "layer 1". To label your layer, double-click on the layer name and enter a name of your choice.
8. 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. Label the layer by double-clicking on the writing "layer 2". You can now replace the default name "layer 2" with your own description. Name this layer "regular photograph". 
9. 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. 
10. Create third layer. Insert the third layer using Insert / Timeline / Layer. This is the layer for our spotlight mask. Label the layer appropriately. Using the circle tool, draw a circle of appr. 1 inch diameter on the left side of the photograph. This will be our spotlight. Make sure that the circle has an actual fill color, don't use an "empty" circle.

11. Animate the spotlight. Click in frame 1 of layer 3 and select Insert / Classic Tween
12. 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. 
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.
13. Enlarge the spotlight. Modify / Transform / Scale. Drag one of the corner handles to enlarge the circle. 
14. 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 (as of now we should see a filled circle moving around on our photograph).  
15. 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. 
16. 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.
17. Add Text. Add a fourth layer, label it appropriately and write text 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).  
18. Finished with our First Scene!!
19. 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.
20. Create credits. Use the text tool to write some text on the screen. Make sure to change the text color to something different than white so that it will be visible on the white background. Text should be similar to: "Movie produced by:" (don't write your name). In the Properties window, select a large font. 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.
21. 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.
22. 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. Notice the solid arrow from frame 1 to frame 40 signifying a successful shape tweening.
23. 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).
24. 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,  would like to change the order of your scenes or delete a scene, use the inspector under Window / Scene.
25. 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).
26. Check your work. Control / Rewind  and Control / Play your movie. Save your file using the File / Save As option and name your movie anim2.fla. Remember, you need the movie in native .fla format if you would like to make any changes at a later time.
27. 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 and select type (*.swf), as file name type anim2. 
    
28. You should now have two files saved, anim2.fla and anim2.swf.

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 posted in .swf format

For 5 extra credit points (25 points in total)

• All of the above 
• A 3rd scene
• Scene 3 contains an additional scene with an object of your choice that is shape tweened (morphed)

Submitting your file

1. Access LearnOnline and login.
2. Press Communication > Discussion Board
3. Select the Flash Animation 2 forum.
4. If you like, browse the other students messages and illustrations.
5. Press Add a New Thread
6. Subject: type one line to identify your posting
7. Message: tell something about your posting. What were your experiences creating this project?
8. Use the Browse button to select the location of your file. Select the file to be posted.
9. Press Submit
10. Check your work

©2020  by Gabriele Meiselwitz
Revision Date: 10/22/20 16:22