Apps 3: Creating Animation

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَن اارحِيم

Assalamualaikum semua ^_^

Minggu ini adalah minggu ke-13 untuk kelas Authoring ini.  Cepat sungguh masa berlalu.  Ya, benar, masa tidak menunggu kita bahkan kita yang perlu mengejar masa.

Maka, tanpa melengahkan masa lagi, rumusan untuk pembelajaran kali ini adalah:

Terdapat 3 jenis simbol dalam menghasilkan animasi antaranya adalah movie clip, button dan juga graphic.

1. Movie clip are reusable pieces of animation.  It consist of one or more graphic/button symbols, they are flash movie inside our flash project.

Langkah-langkah:

1. Insert new symbol - name as butterfly - choose movie clip type - OK.

2. Name first layer as body

3. Choose oval type -  draw body of the butterfly and fill with color

4. Insert new layer name as left wing.

5. Choose rectangle shape and oval shape to draw a left wing - fill with color

6. Select the left wing and convert it to symbol - name as left wing - choose graphis symbol type.

7. Transform the image - drag the center point of left wing to the butterfly body

8. In body layer, Insert frame at frame no 60.

9. Do same for the left wing layer.

10. In the layer left wing, copy first frame and paste it to frame no 10, 20, 40 and 60

11. Next, in frame no 10, we transform the wing, make it small compared with the original

12. Create motion tween between frame no 1-10.

13. Copy frame no 10 and paste it to frame no 30 and 50 - create motion tween between it.

14. Insert new layer name as right wing

15. Drag from the library the left wing image and transform to look like right wing

16. Attach the wing to the body and drag the center point of the wing to the body.

17. Do repeat the step like no 10-13 for the right wing

18. Click scene 1 and drag the butterfly movie to stage.

19. Control - test movie.

20. Save it.

   2.  Button is the only interactive symbol that can detect mouse events in flash.  Button symbol are used for timeline navigation.

Langkah-langkah: 

1. Insert new symbol - name as button - click button type - OK.

2. There will appear 4 type of button, (up, over, down and hit)

3. On Up keyframe, Choose rectangle shape tool - drag on stage

4. Choose text tool and put on top of the rectangle - type in 'HOME'

5. Copy frame 'up' and paste it to other 3 (over, down, hit)

6. Test movie

*You can color rectangle and text with color you want.

  3. While, graphic symbols are reusable static images that are used mainly to create animations.  They have only one frame in their timeline.

Convert object to graphic symbol:

Langkah-langkah:

1. Import image to stage.

2. Modify - covert to symbol - name as graphic - click graphic type and OK

Terdapat 4 jenis animasi antaranya, motion tweening, shape tweening, motion guide dan juga frame by frame.

1. Motion tweening -  Object motion position, method in motion tweening that allows objects to be change to different position also can change the brightness and color of tweened objects, and manipulate size of the tweened objects.
2. Shape tweening -  Can change objects from its original shape to a new shape, also allow text to be transform to an object and also apply in transforming 1 image to another image.
3. Motion guide - Allow user to move an objects on predefined path, such as circles or curves.
4. Frame by frame -  Animate a cartoon by drawing different movements in each frame.

What we call it as tweening?

Tweening is refer to animating a sliding movements of object in flash,  It call tweening because in between 2 frames, we can create a motion.

Di bawah ini saya sertakan sekali hasil aktivti menggunakan keempat-empat jenis animasi ini.

Task 1: Motion tweening

1. First layer, draw a wall.

2. Second layer, draw a Circle (ball)

3. Then convert the symbol (circle) to graphic.

4. Insert Key Frame (Example at key frame no. 10)

5. Right Click between the Key Frame and create Motion Tween 

6. Then, move the ball to the position that we want for certain key frame.

7. Besides that, we also can change brightness and the size of the ball..

8. Control-Test Movie

9. Save (Export Movie save to .avi)

Task 2: Shape tweening

1. First, create Text (change font,size, color, style)

3. Next, modify to Break Apart (repeat again)

4. Insert Key Frame (Example at key frame no.30)

5. Delete the Text

6. Draw Shape- star shape

7. In properties below, choose tween: Shape

8. Save (Export Movie and save to .avi)

Task 3: Motion Guide

1. First layer, draw the way for ant

2. Then, second layer,draw the ant.

3. Convert to symbol (ant) to movie clip.

4. Choose a key frame (Example key frame no.30)

5. Place the ant at the new position at key frame 30.

6. Right click between the key frame and create motion tween.

7. Next, create motion guide.

8. Use pencil to draw the guide

9. Select first key frame and click the ant and move it at the starting point of the guide.

10. For the last key frame, move it at the last point of the guide.

11. Use transform tool to adjust the position of ant for certain key frame,

12. Tick the orient to path at the first key frame.

13. Control-Test movie.

14. Save (Export movie and save to .avi )

Task 4: Frame by frame

1. First, create a cartoon design with different expression..

2. Then, convert every image to symbol (graphic) and save the image in the library.

3. After that, put the first cartoon image in key frame no. 1.

4. For next key frame which are key frame 2 and so on, insert another image.

5. Control - Test movie

6. Save (Export movie and save to .avi).

InsyaAllah akan saya perbaiki lagi skill flash ini.

Sekian sahaja celoteh minggu ini. (Mix language pulak..hehe..)

Wassalam..