Tuesday, December 9, 2014

TUTORIAL - ANIMATION (Frame by Frame)

Step 1:

Open a new flash file.

Step 2:

Draw any character in the stage.

Step 3:

Change the layer name to layer ‘cat’ by double-clicking on the word Layer 1.

Step 4:

Click on Frame 2 of the timeline. Select Insert > Timeline > Keyframe from the menu. This will put a new keyframe in Frame 2.

Step 5:

To create the animation, change the image in Frame 2, by adjusting the animal mouth by selecting the black arrow tool and moving it close to the mouth or other facial feature. It will change and you will be able to alter mouth or feature’s shape.

Step 6:

To check out the result of the animation, select Control > Test Movie.

The Result:

#   You can watch the tutorial of Animation (frame by frame) in here.


TUTORIAL - MOTION GUIDE (Ant Moving in The Tunnel)

Step 1:

Open a new flash file.

Step 2:

Select light brown colour for the background in the properties section.

Step 3:

Rename Layer 1 with the name: Background, by double-clicking on the text Layer 1.

Step 4:

Then, draw a large dark brown rectangle over the whole stage area by using the rectangle tool.

Step 5:

To make the tunnels in the nest, set the eraser to the largest size in the tool modifiers and rub out parts of the rectangle which will create a tunnel-like look similar to the image below:

Step 6:

Make a new layer on the timeline using the add layer button or by selecting Insert > Timeline > Layer. Name the new layer ‘Ant’.

Step 7:


On the ant layer, draw an ant. Then, select the ant and make it into a symbol in the library by choosing Modify > Convert to Symbol.
(7.1)

Name the ant symbol ‘ant’ and select the graphic option from the type options. Select the centre square in the Registration option.
(7.2)

Step 8:

To give guide to the ant, create a guide layer, then, select the ant layer on the timeline to add the guide layer. The timeline will look like this:

Step 9:

Using the pencil tool, draw the path for the ant to follow through the ant nest as the below example (the white line is the guide for the ant to follow, which referred as 'Motion Path' ):


Step 10:

Now, snap the ant to the guide by following these steps:
a)  Make sure the magnet icon in the tools options is pressed on.
b)  Select the ant on the frame 1 of the ant layer. Position the mouse on the centre of the ant where you will see a crosshair. Move the ant using the crosshair to the starting point of the guide.
c)  The ant is already positioned at the start of the guide. Now, position the ant at the end of the guide by Insert a Keyframe at the timeline (I positioned mine at frame 70 as below):
(10.1)

d) Click on frame 70 of the ant layer and drag the ant to the end of the guide. 
(10.2)

e) To make the ant move along the line, we need to add a motion tween. This can be done by; clicking between the two keyframes on the ant layer and select motion from the tween dropdown menu.

The result:
(The ant will move along the tunnel@white line.)


# You can watch the tutorial of Motion Guide in here.

TUTORIAL - SHAPE TWEEN (Text Form to Star Shape)

Step 1:

Open a new flash file.

Step 2:

Start by selecting Text Tool and then, type the text in it.

Step 3:

Break the text apart by selecting the text and choose Modify > Break Apart (this process will only break the word into individual letters. Therefore, you need to repeat the breaking apart process by once again selecting Modify > Break Apart).
(3.1)
(3.2)

Step 4:

Insert keyframe at the new frame that you selected (e.g. frame 50). At this new key frame, delete the letters that you made before and add new shape such as star.


After clicking at Polystar Tool at the properties panel, click Option > Style > Star > 
Number of Slide : 5 > OK. You can also choose different colour of the fill by clicking at 
Fill Colour.
 

Step 5:

If the shape has an outline, double click on the outline and remove it. It will make the 
Shape Tween look smoother.

Step 6:

Now, create the Shape Tween to morph the letters ‘FLASH’ into the star.


Click at any Frame between 1 and 50 and in the Properties panel at the bottom change Tween option from None to Shape.

#   You can watch the tutorial of Motion Tween in here.