DASAR ANIMASI FLASH

Document Sample
DASAR ANIMASI FLASH Powered By Docstoc
					Dasar Animasi
Muhammad Tanzil Furqon, S.Kom Ilmu Komputer Brawijaya

Apakah Animasi?
• Teknik yg digunakan untuk membuat suatu ilusi gerakan pada suatu gambar diam dengan membuat perubahan pada tiap framenya. • Frame  halaman yang berisi gambar tetap • Animasi  kombinasi lebih dari satu frame

Contoh animasi
• Gambar animasi ditampilkan per frame :

Pembuatan Animasi
• Perencanaan :
– Audience – Story Line
• Plot  event / kejadian • Character

– Environment – Sound & Music

Perencanaan
• Storyboarding  setelah menuliskan jalan cerita kemudian menuangkan gambaran situasi ke dalam gambar

Animating
• Teknik animasi :
– Gerakan

– Rotasi

Animating (cont)
– Ukuran

– Warna

Animating (cont)
– Bentuk

– Background

Animating (cont)
– Kombinasi

Timeline
• Timeline  control center of frames

Timeline (cont)
• Some symbol’s meanings in timeline :
– Nothing  If there is no symbol in a selected rectangle, it means that there is no frame

– Empty circle  An empty circle represents an empty keyframe. Keyframe is a frame in which something—for example, an object’s position, size, color, or some other attribute—changes.

Timeline (cont)
– Solid circle  A solid circle indicates that the frame is a keyframe

– Empty rectangle  An empty rectangle denotes the last empty frame in a layer

Timeline (cont)
– Arrow  An arrow denotes the presence of a tween. Tweening, short for ―in between,‖ is a feature in Flash in which you create the start and end objects and Flash creates the animated frames in between.

– Dashes  Dashes indicate that a tween has been broken

Timeline (cont)
• Timeline header  This is the part of the Timeline that looks like a ruler. The numbers in the Timeline header represent the frame number. For example, the number 10 represents the 10th frame

• Playhead  The playhead is the red box in the Timeline header. It indicates the frame that is currently being displayed on the Stage. You can drag the playhead back and forth on the Timeline header to change which frame is being displayed

Timeline (cont)
• Indicators  Notice the boxes at the bottom of the Timeline. Going from left to right, the first box contains the frame number of the selected frame, the next contains the speed of your animation in frames per second (fps), and the last indicates how much time has elapsed in your animation up to the current point. • Onion Skin options  Flash’s Onion Skin feature enables you to see more than one frame at a time

Membuat Animasi
• Animasi Bola :
1. Click the Oval tool in the Tools panel. 2. If it is not already selected, click the Object Drawing button 3. Click a point to the left of the Stage toward the top of the screen and drag to create an oval. 4. Click frame 10 in layer 1 in the Timeline. The frame will be highlighted in blue 5. Press F6 on the keyboard to create a keyframe at frame 10. The frame in the Timeline will now contain a dark circle.

Membuat Animasi (cont)

Membuat Animasi (cont)
6. Repeat step 5 on frame 20. The Timeline of your animation should now appear the same as the one in step 5 7. Click frame 10 in the Timeline, and then click the Selection tool (the button with the black arrow in the top-left corner of the Tools panel). 8. Using the Selection tool, click the circle and drag it to the lower-middle portion of the Stage 9. Click frame 20 and, using the Selection tool, position the ball to the right of the Stage near the top of the screen

Membuat Animasi (cont)

Membuat Animasi (cont)

Membuat Animasi (cont)
10.Right-click frame 5 in the Timeline and choose Create Motion Tween from the menu that appears. An arrow should now appear in the Timeline between frames 1 and 10. 11.Repeat Step 10 on frame 15. You should now have two arrows in your Timeline

Memainkan Animasi
• Untuk memainkan animasi, tekan tombol Enter atau tombol Ctrl + Enter untuk meng-compile file .fla (flash document) menjadi .swf (flash movie)

Tween
• Motion Tween  animasi gerakan obyek
– Ex: Easing  kecepatan obyek (lambat/cepat), Rotate  diputar

• Shape Tween  animasi perubahan bentuk obyek
– Ex: Shape tween 1 , shape tween 2

Motion Tween
• Easing
1. You need to control the speed of the motion tween in this project. 2. Create a new file. View > Rulers. View > Grid > Show Grid. View > Grid > Edit Grid (10 X 10 px) 3. Drag the horizontal & vertical guide lines to get the center. View > Guides > Lock Guides 4. Create a ball with radial gradient. Convert it into symbol by pressing F8. 5. Right click on 15 th frame. Insert keyframe. Drag the ball at the bottom.

Easing
6. Right click on 30 th frame. Insert keyframe. Drag the ball at the top. Create motion Tween. 7. The speed of the animation is same for all the frames. In the beginning, at the bottom and top, the speed is same. We need to slow the speed in the beginning. 8. Select 1 st frame. Select frame palette. Drag the easing slider to 100 i.e. In. We need to increase the speed when the ball hits the ground. 9. Select 15 th frame. Select frame palette. Drag the easing slider to 100 i.e. Out 10. Save the file. Check the difference between the animation before and after easing.

Motion Tween (cont)
• Rotating
1. Insert image object (axe) to stage. File > Import. Place the axe to the right of the stage. 2. Convert object to symbol by pressing F8 3. Right click on 20 th frame. Insert keyframe. Drag the axe to the left of the stage. 4. Select the 1 st frame. In the property pannel, switch the Rotate combo box to CCW. Set its value to 3 times rotation.

Shape Tween
• Shape tween 1
1. You need to draw different shapes with different colors. 2. Create a new file of 160 X 160 Pixels. View > Rulers . View > Grid > Show Grid. View > Grid > Edit Grid (10 X 10 px) 3. Drag the horizontal & vertical guide lines to get the center. View > Guides > Lock Guides 4. Select Oval Tool. Choose fill color. Stroke color should be none. Draw the circle. 5. Rightclick on the 5 th frame. Select insert keyframe to keep the same shape for next five frames. 6. Rightclick on the 15 th frame. Select insert Blank keyframe. 7. With the help of Line Tool (green marked) and Paint Bucket Tool (red marked) draw shape and fill it with different color.

Shape Tween 1
8. Click anywhere between 5 to 15. Modify > frame. Select 'Shape' in the Tweening drop down menu. 9. Rightclick on the 20 th frame. Select insert keyframe to keep the same shape for next five frames. 10. Rightclick on the 30 th frame. Select insert Blank keyframe. 11. Select Rectangle Tool. Choose different fill color. Stroke color should be none. Draw the Rectangle. 12. Click anywhere between 20 to 30. Modify > frame. Select 'Shape' in the Tweening drop down menu. Keep the same shape till 35 th frame. 13. Rightclick on the 45 th frame. Select insert Blank keyframe. Copy the circle from 1st frame and paste it on 45 the frame. 14. Click anywhere between 35 to 45. Modify > frame. Select 'Shape' in the Tweening drop down menu. All the shapes should be carefully placed at the center of the stage. Use guidelines and grid for this purpose. 15. Save the file.

Shape Tween (cont)
• Shape tween 2
1. You need to edit the shape for this tutorial. 2. Create a new file. View > Rulers. View > Grid > Show Grid. View > Grid > Edit Grid (10 X 10 px) 3. Drag the horizontal & vertical guide lines to get the center. View > Guides > Lock Guides 4. Type 'LOOK' with proper size and font. 5. Select Subselect Tool (white marked). Click on the inner border of 'O'. It will display the anchor points. 6. Drag the bottom anchor point little upwards for both 'O'. 7. Take the help of grid and guidelines to edit the shapes uniformly for both 'O'.

Shape Tween 2
8. Rightclick on the 5 th frame. Select insert keyframe. 9. Using Arrow Tool drag the shape little towards right. 10. Click anywhere between 1 to 5. Modify > frame. Select 'Shape' in the Tweening drop down menu. 11. Rightclick on the 10 th frame. Select insert keyframe. 12. Using Arrow Tool drag the shape little towards left. 13. Tween the frames from 5 to 10 using shape tweening. 14. Select 1st frame. Copy the frame. Paste it on 15th frame. 15. Tween the frames from 10 to 15 using shape tweening. 16. Save the file.

Latihan
• www.insidegraphics.com • babaflash

Tugas
• Tugas individu:
– Buat animasi kombinasi shape dan motion tween menggunakan flash (.fla dan .swf) – Tugas dalam bentuk softcopy dan hardcopy (contoh printout animasi 1 lembar kertas)

• Dikumpulkan minggu depan • Tugas yang dinilai baik akan dipilih untuk dipresentasikan didepan kelas.


				
DOCUMENT INFO
Shared By:
Categories:
Tags: animasi, flash
Stats:
views:15212
posted:6/26/2009
language:Indonesian
pages:33
Description: tentang dasar-dasar animasi di flash