Week 12 : Apps 3

بسم الله الرحمن الرحيم

Today we expose to apps 3. For introduction we learn to do an animation using Adobe Flash CS3. In flash, it's some important things to know before work with it.

• Stage size : dimension of the stage. Default stage size is 550px x 400px. For banner size normally use 200px x 600px.
• Frame rate : speed at which animation is played or the playhead moves across a Timeleine-is measured in the number of frames displayed per second. Default frame rate is 12fps. Too slow frame rate means your animation might not be appear to be smooth. Too fast might negatively affect the performance, shorten the animation's duration too much or use a lot of user'scomputer processing power.
• Timeline : organizes and controls a document's over time in layers and frames. The major components of the timeline are layers, frames and the playhead.
• Layers : are like multiple filmstrips stack on top of one another, each containing a different images that appears on the stage.
• Frames : Contained in each layer appear in a row to the right of the layer name.
• Playhead : indicates the current frame displayed on the stage.
• Keyframes : a frame where a new symbol instance appears in the timeline.
• Motion tween : a series of frames containing tweened animation from 1 place to another or change size or color.
• Shape tween : animation to change from shape to another shape or to text.
• Motion guide : moving your symbol in a predefined path such as curves or circles. Good reference in learning motion guide click here.

This is my animation using motion tweening.

Steps to develop Liz's Pacman :

1. Create new flash file with 2.0 action script. Save as pacman.fla.
2. Draw Pacman's road in layer 1. I choose to draw using line tool.
3. Insert new layer and rename it as action. Draw  pacman face using primitive oval, edit for pacman's mouth.
4. Insert new layer and rename it as food. draw the food along the road.
5. In all layers insert new frame at frame 120.
6. On layer action insert keyframes on layers 120. Between this frames insert motion tween. Change pacman's location depend on road angle. This step refer to the playhead. Quite difficult to do but fun!
7. On food layer. Insert keyframe after pacman over the food then delete the food one by one. Repeat it untill the food is over.
8. On layer 1, insert text "Liz's Pacman". Convert to symbol movie clip. Double click the symbol. In frame 20 insert key frames. Change the color. Insert keyframe at frame 10 and change the text color.
9. Now you can text your animation by click CTRL + enter keys.. Taraaaaaa

Second animation i mixed together using motion tween, shape tween and motion guide.

There are the steps to develop animation using motion tween, shape tween. motion guide and frame by frame.

1. Create new flash file. Save as basketball.fla.
2. Rename layer 1 as courts. Draw the basketball courts. In this case i trace from other picture using onion tool. Draw using pen tool, line tool.
3. Insert new layer and rename as ball. I import picture into stage.
4. Insert keyframes in frame 25. Between these frame insert motion tween
5. Add motion guide. Draw the motion guide for the ball bouncing movement.
6. To do the shape motion, place the ball on frame 26 and break apart it 2 times.
7. Insert keyframe in frame 35. In frame 35, insert text "GOAL!". 
8. Between frame 25 to 35 insert motion, change shape in properties.
9. To create frame by frame animation, insert new layer and name it player. Import 6 series of different angle of hand position.
10. Insert keyframe in frame 35, drag the 1st picture.
11. Repeat on frame 36 until frame 41 and drag picture 2 to 6.
12. Copy frame 35 untill 41 and paste it on frame 42 untill frame 50.
13. Test the animation by clicking ctrl+enter.. :)