403 247-2457  

 

The Multi-Layered Faux Onion-Skinned Effect
by Leen Kranenburg

This effect will look like a fan with trailing images of different transparencies. You can use this tutorial to create onion-skin motion effects on any animated object.

1. Draw a rectangle.

2. Convert the rectangle to a symbol.
Insert>Convert to symbol (leave Behaviour on Graphic)>OK

3. Move the registration point so the rectangle can be rotated like a fan. Modify>Transform>Edit Center

Place the mouse cursor over the edit center (the small symbol beside the mouse cursor should change to a cross like the edit center), click and drag the edit center to the middle of one of the short sides of the rectangle (if the "snap" magnet button is on, the edit center should snap to the exact middle of the short side).

4. Insert a keyframe at the 20 frame point.

5. While on the keyframe at 20 frame point, get into the rotate mode.
Modify>Transform>Rotate The rectangle should have small circles on the corners and the middles of each side. Place the mouse cursor over any one of the corners, click and drag the rectangle 180 degrees.

6. Double click the small black circle on the first keyframe. This will bring up the Frame Properties dialog box. Click on the Tweening tab. On the drop down menu, select Motion and click OK. This should create a motion tween between the 1st and the 20th keyframes. Play this part of the movie and you should see the rectangle sweep 180 degrees across the stage.

7. Now you have to make the rectangle fade in from zero to 100 percent. Double click on the rectangle (make sure you are on the 1st keyframe). This will bring up the Instance Properties dialog box. Click on the Color Effects tab. Select Alpha from the drop down menu and set the value to zero. Click OK.

Click on the 20th keyframe and then double click on the rectangle and repeat the above step, setting the alpha to 100 percent. Now when you play the movie, the rectangle should sweep 180 degrees across the stage while fading in.

8. At this time you have to turn the motion tween into single keyframe animation. Click on the 2nd frame in the timeline of Layer 1 and insert a keyframe Insert>Keyframe Repeat this for every frame between the 1st and the 20th frame (you can also use Shift-F5). If you play the movie, it should look exactly the same as the previous tweened animation.


9. Add one more keyframe at the 30 frame mark, this is necessary to enable the "fan" effect to complete itself. Click on the 30 frame mark on the layer 1 timeline.
Insert>Keyframe

10. Now here's where the work starts… You have to begin copying frames to make the "fan" happen.

Begin by inserting a new layer. Select the 2nd frame in the time line and insert new keyframe, move 10 frames ahead (keyframe 11) and insert a new keyframe in this position. Now select the 2nd keyframe in the first layer (i.e. frame by frame animation) Edit>Copy. Select the first keyframe you inserted into layer 2 (frame 2) and Edit>Paste in Place.

(The next time it will be on the third layer, choose the 3rd keyframe and so on, going up one number each time see figure below).

11. Repeat the steps in frames 3 through 19. Each time steps in 10 are repeated, you must copy the particular frame from Layer 1. When you add a new layer it will add the new layer just above Layer 1. The final result will make all the layers look like a staircase that steps up one frame at a time like that shown below.

Download Sample Flash movies - they are zip files
Example #1 Example #2 A-Channel logo #3

Simple onion skin effect on bar shown above