Self Review : (Class Activity 3) -Part 3-

Tutorial 3 : Frame by frame animation (cell animation) - using movie clip symbol

Let's get started

1. Download frame by frame animation

2. File > New

3. Create a new symbol Insert > New symbol > Movie clip

4. File > Import file to stage (Import the first file only)

5. Click Yes of the following pop-up window

6. Automatically all images will be arranged on stage

7. Click Scene 1 > Drag bird symbol

8. To test movie. Select control > Test movie

 

 

Self Review : (Class Activity 3) -Part 2-

Tutorial 2 : Make a traditional animation

Let's get started

1. File > New

2. Draw character (Ex: Worm) > Name layer (Ex: Apple)

3. Click frame 2. Select Insert > Timeline > Keyframe or F6

4. Change image in frame 2

5. Click frame 3. Select Insert > Timeline > Keyframe or F6

6. Change image in frame 3

7. Add more frame to make animation longer

8. To test movie Select Control > Test Movie

Self Review : (Class Activity 3) -Part 1-

Tutorial 1: Using motion guides in Flash CS3 (The ant tunnel).

Let's follow the steps below.

1. File > New

2. Select Properties Panel > Background > Light green colour

3. Rename layer > Background

4. Choose rectangle tool > Draw a large light brown (the whole stage area)

5. Choose eraser > Draw a tunnel 

6. Make a new layer Insert > Timeline > Layer. Name the new layer > Ant

7. On the ant layer > Draw ant

8. Select ant > Modify > Convert to symbol

9. Name the symbol ant > Graphic > Select the centre square (Registration option)

10. Create a guide layer

11. My timeline look like this

12. Guide: ant layer > Click first keyframe > Use pencil tool > Draw the path

13. Snap the ant to the guide

      a) On the magnet icon

      b) Select ant layer > Frame 1 > Select ant > Position mouse at the  

          centre (see crosshair) > Move the ant to starting point

 

      c) Object has 'snapped' (if outline of circle just behind the crosshair)

      d) Select Insert > Timeline > Keyframe (Ex: Frame 50 at ant, guide: 

          snake and background layer)

      
      e) Select ant layer > Click frame 50 > Drag the ant to the end

      f) Select ant layer > Between the two keyframe > Tween > Motion

14. To test the movie, go to Control > Test movie or Ctrl + Enter.

Week 3 : 21 Jan 2011 (Reflection)...

Hye guys! On 3^rd week, we continue our lesson about:

1. Using motion guides in Flash CS3 (The ants nest)
2. Make a traditional animation
3. Frame by frame animation (Cell animation) – using movie clip symbol 

Let's look at my results during class with Dr Zaida.

Exercise 1

The Ant Nest (Using Motion Guides)

Exercise 2

A Traditional Animation

Exercise 3

 

Frame by Frame Animation

Self Review : (Class Activity 2) -Part 2-

Tutorial 2: Shape Tween in Flash

RULE 1:

The object to be tweened needs to be on it’s own layer.

RULE 2:

The object must not be grouped or converted into a library symbol. If the object has a blue outline around it when selected, it needs to be broken apart in order to be tweened. To do this, click on the object and select Modify > Break Apart.

RULE 3:

If you want to use a shape tween to morph text, you will need to break apart the text twice. The first time you select Modify > Break Apart, the text you have typed will be broken apart into individual letters. These letters will have a blue outline around them to indicate that they are grouped individually. To ensure that your shape tween will work, you will need to select Modify > Break Apart a second time.

Let's follow the steps.

1. File > New

2. Draw an object. Example PolyStar tool.

 

3. Select any frame you want. I choose 25. (The more frames you leave, the longer the polystar will take to tween or morph into our next shape). Insert > Keyframe

4. At this new keyframe, Delete the polystar. Add new shape. Example the Oval Tool.

5. My timeline now contains a polystar in Frames 1-24 and an oval in Frame 25.

6. To create shape tween, select Properties Panel > Tween > Shape.

 7. After that, click the first keyframe > Enter. You can see the polystar will transformed into an oval.

8. To test the movie, go to Control > Test movie or Ctrl + Enter. You can see the polystar transformed into an oval with non-stop. 

Self Review : (Class Activity 2) -Part 1-

In this class activity 2, we have to to try 2 tutorial which are:

1. Create a basic motion tween
2. Shape tween in Flash

Tutorial 1 : Create a basic motion tween.

RULE 1: 

The object that you are going to tween needs to be on it’s own layer. If other objects are on the same layer, Flash won’t know what to tween.

RULE 2:

Objects must be converted into a symbol or grouped in order to be used in a motion tween. 

Let's follow the steps.

1. File > New

2. Draw a ball on the stage and convert it into a symbol by choosing Modify > Convert to symbol.

3. The timeline contains a keyframe on frame 1. Click on frame 40 of the timeline and select Insert > Timeline > Keyframe.

4. Move your ball to another location.

5. To animate the ball so it moves across the stage gradually, click in the timeline between the two keyframes and select Motion from the Tween drop down menu in the Properties panel.

6. To remove the frame, right click > Remove frame

7. To test the movie, go to Control > Test movie or Ctrl + Enter. 

8. Now try onion skin.

Self Review : (Class Activity 1) -Part 3-

Tutorial 3: Working with gradient in Flash (Continue with Tutorial 1)

1. Import the image.

2. Select Window > Color.

3. In the color panel, change it from a solid color to a gradient, select either linear or radial gradient from the drop down menu.

4. When you select either linear or gradient, you will see the default gradient colours. You can customise the gradient by doing the following actions:

• To add more colours move your mouse underneath the gradient bar until you see a plus sign next to your cursor. Click to add a new colour box. You can drag this colour box along the gradient bar until you get the effect you desire. To change the colour of the box, double click on the box and select the colour of your choice from the colour change options.

•  To remove colours from a gradient click on the colour box of the colour you don’t want and then drag the colour box downwards until it disappears.

•  To make a colour in the gradient transparent click on the colour box and then change the Alpha Setting from 100% to the level of transparency your require. Note that you probably won’t see the transparency effect until you place the fill over another object on the stage.

5. My final result.

Self Review : (Class Activity 1) -Part 2-

Tutorial 2 : Colouring the tracing image (Continue with Tutorial 1)

1. Import the image.

2. Trace the image.

3. To colour the image, click icon Paint Bucket Tool. Then, click icon Fill Color. Choose the colour you wished.

 

4. My final colouring.