::17052012::

APPS 4: TYPES OF INTERACTION


CREATING MAIN MENU

Steps:

1. Open a new file
2. Create 3 buttons: MAIN PAGE, UPIN & IPIN , WEB
3. In button layer, drag the three buttons into stage
4. Click at MAIN PAGE button--> go to properties-->type the instance name
5. Repeat the step to the UPIN & IPIN and WEB button
6. Go to Window-->other panel-->scene
7. at scene window-->click duplicate scene
8. Double click at scene copy 1-->rename it as scene 2
9. @scene 2, insert upin & ipin image
10. @scene 1, insert upin & ipin’s text banner
11. At button layer -->right click at 1st frame-->choose action-->Type stop();
12. Click at 15th frame-->Insert frame to all layers
13. Repeat step 12 to scene 2
14. @scene 2-->insert new layer-->named as upin
15. At properties panel-->named the frame label as upin
16. Insert new layer-->named it as stop-->right click at 1st frame-->choose action-->Type stop ();
17. @scene 1-->click at upin & ipin button-->choose action-->type command:

On (release){

            gotoAndPlay("Scene 2", 1);

}

18.close action window.

19.@scene 2-->click at main page button-->choose action-->type command:

on(release){

            gotoAndPlay("Scene 1", 1);

}

20. Close action window.
21. Test the movie
22. @scene 2-->Create a new button-->name as members
23. Click on frame 10-->press F6-->named as kawanupin on frame label
24. Insert a picture of upin & ipin members
25. Click members button-->type the instance name for this button
26.@scene 2-->click at members button--> choose action-->type command:

 on(release){

            gotoAndStop ("Scene 2", "kawanupin");

}

27.close action window.
28.test the movie
29.@scene 1-->click at about button-->choose action-->type command:

On (release){

            getURL("http://www.lescopaque.com ");

}

30. Close action window.
31. Copy the coding and paste to news button in scene 2.
32. Save the file

 
click on the image to see the output

Animated upin.....
Juz took previous upin n animated him....


Steps:
1.Open a file. (use previous upin drawn b4)
2.Insert keyframe at 5th.Adjust his mouth a little bit
3.Insert keyframe at 10th. Repeat step 2 and make the mouth smaller. At the same frame, adjust the eye. Just make the eye become 1 line.
4.Adjust his hand.
5. To make it smooth (xnampak ulang yg sama je), repeat the steps (copy paste the frame) and adjust the mouth/eye/hand(ikut creativity)
6.ctrl+enter to test the movie
7.Save file.


This week, we have many tasks:

1st Task : Create an animated bouncing ball

2nd Task : Shape tweening (text --> shape)

3rd Task : animation using motion guide (semut merah cari gula)

**************************************************************

Below are the step by step completing the task.

1st Task : Create an animated bouncing ball

The steps:

1. Open new file
2. Select shape tool n choose oval..
3. Draw a circle. you can draw a real ball n color it using paint bucket tool
4. Select the ball-->right click-->convert to symbol-->choose graphic-->named it as ball-->click OK
5.Click at frame 10,then right click-->insert keyframe/ press F6
6.At frame 10, change ball position
7.Then, at frame 20, right click-->insert keyframe/ press F6 n again change the ball position..
8. Repeat step 7 until frame 60 (its up 2 u).
*U can change the ball size n color
9.Select the layer-->right click at the frame area( all frame in this layer will be highlighted-->choose create motion tween
10.Press ctrl+enter to test the movie
11. Dont forget to save your file :)



2nd Task : Shape Tweening (transform from text to shape)

1.Open new file
2. Use text tool then type a text e.g i typed “diyana”
3. Break apart the text twice/ press ctrl+B
4. Right click at frame 20-->insert keyframe/ press F6
5.Right click at frame 60-->insert keyframe/ press F6
6. At frame 60, delete text then draw a star
**can choose insert blank keyframe, means at frame 60, it will be blank.
7. Between frame 20-60, choose tween="shape" at properties.
8.Press ctrl+enter to test the movie
9. Dont forget to save your file :)

3rd Task : animation using motion guide (semut merah cari gula)

1.Open new file
2.Draw a background of underground and named the layer as bg
3.Insert new layer--> named it as ant
4.Draw an ant using shape tool. Select the ant-->right click-->convert to symbol-->choose movie clip-->named it as semut-->click OK
5.Click at frame 60-->insert keyframe
6.Drag the ant to the new position.
7.Click layer ant-->click motion guide
8.Click pencil tool-->choose smooth
9. Draw 'laluan semut'
10. Click at the frame between frame 1 to 60-->Create Motion Tween
11.At properties-->tweening-->click orient to path
12. ctrl+enter to test the movie
13. Save the file



::10052012::

Apps 3: Creating Animation

We have 2 know from the basic:

1. types of symbol are-->graphic, button and movie clip

Graphic symbol= static images that are used mainly 2 create an animation..

Button = an interactive symbol that can detect mouse events. Button has 4 states: up,over, down n hit

Movie clip = consist of 1 or more graphic / button sysmbols, they hv flash movie inside ur flash project. Its not a static images. Can b animated using tweening tecchnique or using actionscript command

-------------------------------------------------------------------------------------------

2. types of animation are -->motion tweening, shape tweening, motion guide frame by frame

motion tweening = allow objects 2 b change 2 different position

shape tweening = can change the shape....meaning you draw a vector shape at one specific frame in the Timeline, and change that shape or draw another shape at another specific frame

motion guide = moving your symbol in a predefined path such as curves or circles. can refer 2 this link:
http://www.entheosweb.com/flash/motion_guide.asp
Home task -using onion skin...I'm struggling to complete this task because i have to attend 'kursus induksi' @ Mersing for 3 days ......here the outcome



For this task, i used line tool to draw the upin....n use paint bucket tool to color him :)
Happy to see my 'Upin' is ready nk g raya....betul betul betul heheh...
::03052012::

Today we've learnt bout drawing n coloring....

I can conclude that.....
To draw: Use Pencil tool,pen tool, line tool, brush tool
To color: Brush tool, Ink bottle, paint bucket tool n using eyedropper tool to pick sample color

For the class activity, I use line tool, brush tool to draw this pic n  paint bucket tool to color the object...plus i use some gradient technique to the iobject eg 4 the blue sky...

Here the outcome :)


 Some reminders/tips:
1. The line must be closed all together b4 u can color it
2. To draw 2 same objects, u can juz select 1st object, copy then paste it
     For example the birds n chairs
3.U can modify the brush size n brush shape

About