Dasar-dasar animasi menggunakan aplikasi flash

Mempelajari dasar-dasar animasi menggunakan aplikasi FLASH

1. Dasar Animasi
Muhammad Tanzil Furqon, S.Kom
Ilmu Komputer Brawijaya

2. 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

3. Contoh animasi
•Gambar animasi ditampilkan per frame :

4. Pembuatan Animasi
•Perencanaan :
–Audience
–Story Line
•Plot  event / kejadian
•Character
–Environment
–Sound & Music

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

6. Animating
•Teknik animasi :
–Gerakan
–Rotasi

7. Animating (cont)
–Ukuran
–Warna

8. Animating (cont)
–Bentuk
–Background

9. Animating (cont)
–Kombinasi

10. Timeline
•Timeline  control center of frames

11. 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.

12. 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

13. 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

14. 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

15. 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

16. 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.

17. Membuat Animasi (cont)

18. 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

19. Membuat Animasi (cont)

20. Membuat Animasi (cont)

21. 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

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

24. 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

25. 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.

26. 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.

27. 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.

28. 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.

29. 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.

30. 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'.

31. 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.

32. Latihan
•www.insidegraphics.com
•babaflash

33. 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.