Thursday, May 9, 2013

ft0003-How to create Ripple Effect in Flash CS6

Tutorial 5 of Chapter 4 (Creating Animation) from Adobe Flash Professional CS6 book:

In this tutorial, you will use the mask layer to create ripple effect. The final output is shown in Figure 1.

Figure 1
The following steps are required to complete this tutorial:

1. Open the link www.sxc.hu/photo/797111; a page is displayed. 

2. Download the image on your hard drive and then rename it as scene.jpg.

3. Rename Layer 1 to Image.

4. Select frame 1 and import scene.jpg to the Stage. Align scene.jpg exactly to the Stage.

5. Convert this symbol into a movie clip symbol and name it as scene_mc.

6. Set the value of Alpha to 99 of scene_mc.

7. Create a new symbol and name it as ripple_mc.

8. In the ripple_mc symbol-editing mode, drag the scene_mc movie clip from Library to the ripple_mc symbol-editing mode in the Scene area; an instance of scene_mc is created in the ripple_mc movie clip.

9. Set the value of Alpha to 0; the instance of the scene_mc movie clip turns transparent, refer to Figure 2. 


Figure 2
10. Right-click on frame 1 and choose Create Motion Tween. Decrease the frame span to frame 20. Place the Playhead on frame 5, select scene_mc in the Stage, and then set the value of Alpha to 99.

11. Insert keyframes on frame 15 and 20. Place the Playhead on frame 20 and select the scene_mc instance in the Stage. Set the value of Alpha to 0%.

12. Move the Playhead on frame 5 and select the scene_mc instance. In the Properties panel, set the value of W to 545 and the value of H to 395.

13. Place the Playhead on frame 20 and select the scene_mc instance. Set the value of W to 555 and the value of H to 405.

14. Create new layer (Layer 2). Lock the Layer 1. Set Layer 2 in the outline mode.

15. In Layer 2, move the Playhead on frame 1 and create an hollow oval horizontally. Select the oval and set the value of W to 47 and H to 19. Set the value of X to 83 and Y to 171; the oval is placed at the bottom of the scene_mc instance, refer to Figure 3.

Figure 3

16. Insert a keyframe on frame 20.

17. Choose Free Transform Tool, the transform box is displayed around the oval. Next, move the cursor on the middle right transform point. Press and hold the SHIFT+ALT key and drag the cursor outward. In the Properties panel, set the value of W to 173 and H to 19.

18. In Layer 2, right-click on a frame between frame 1 and 20 and choose Create Shape Tween

19. Right-click on Layer 2 and choose Mask; the layer is converted into the mask layer and the mask icon is displayed on the left of the layer name, as shown in Figure 4.
Figure 4

20. Click on Scene 1 to return to main Timeline.

21. Select frame 30 of the Image layer and press the F5 key.

22. Create a new layer. Drag the ripple_mc movie clip in the Stage.

23. Select the ripple_mc instance in the Stage.  In the Properties panel, set the value of X to 230 and Y to 203 to position the instance in the Stage, as shown in Figure 5.

Figure 5

24. Select frame 20 of Layer 2 (new layer) and press the F5 key to insert static frames.

25. Press CTRL+ENTER to preview the final ripple animation.






No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...