Apps 3 : Creating Animation

Assalamualaikum dan Good Day Everyone..

In the previous entry, I have explained on how to draw in Flash. Now, we will learn on how to create simple yet interesting animations using Flash. There are four types of animation that we have learned in this class, Motion Tweening, Shape Tweening, Motion Guide, and Frame by Frame.

MOTION TWEENING

The first animation exercise that we have done is how to animate a bouncing ball. Here are the steps in animating a bouncing ball:

Step 1 : Create a new Flash file. Select the Oval Tool and draw a circle. You can choose any colour that you want. For this exercise, I choose pink colour.

Step 2 : Now, we will convert the circle into graphic symbol. Select the circle and go to Modify > Convert to Symbol or alternatively, you can just press F8. A ‘Convert to Symbol’ window will appear and set the properties as below :

Step 3 : Right click at the 10^th frame and click on Insert Keyframe. Select the 10^th frame, and drag the circle to another position. Right click in between first and 10^th keyframe, and select Create Motion Tween. Now, go to Control > Test Movie or alternatively you can press 'Ctrl+Enter' to preview your animation. You can see that your circle have move from initial position to the second position. 

Step 4 : Now, you can add more keyframes to make the circle bounce many times. Repeat step 3 by adding 10 frames in each bouncing (10^th, 20^th, 30^th, and so on). Actually, you can choose how many frame per bounce. The more frame length you use, the slower the movement of your circle/ object and the shorter your frame length, the faster your object will move or you can adjust the frame rate under the frame timeline.

Step 4 : You can save your work selecting File > Export > Export Movie and choose your file type. You can save it in .avi format or .gif format.

One more thing, in every keyframe that you inserted, you can modify the object size and colour brightness. To resize your object, select your object and choose Free Transform Tool. For each bouncing, you can change your circle size. As for adjusting the colour brightness, select your object, at the Properties panel, in the Colour section, choose Brightness. You can change the brightness percentage of your object. You may want it to be darker or lighter. And lastly, don’t forget to save your work every time you make changes. ^_^

Here are my animated bouncing ball that I’ve create using Motion Tween.

SHAPE TWEENING

Next animation is how to convert a text into an object. Actually, there are three types of shape tweening that is ‘Object to Object’, ‘Text to Object’, and ‘Image to Image’. In this activity, I will explain on how to convert the ‘FLASH’ word into the ‘STAR SHAPE’. Here are the steps:

Step 1 : Create a new Flash file. Select Text Tool and type ‘FLASH’.

Step 2 : Now, we want to break the text apart so that it can change to object later. Select Modify > Break Apart to break the words into individual letters. Again, we break the individual letters by selecting Modify > Break Apart.

Step 3 : Next, right click on frame 25^th and select Insert Keyframe. Select frame 25^th, delete the text. We will now draw a star shape. Select PolyStar Tool. In the Properties panel, click on the Options button and a Tool Settings window will appear. Change the properties as follow :

You can also change the colour if you want.

Step 4 : Click anywhere between frame 1 and 25, and in the Properties panel, change the ‘Tween’ value into ‘Shape’. Press ‘Enter’ to see your text change into star shape.

Step 5 : Save your file as .avi or animated .gif format.

Here are the Shape Tweening that I’ve done. 

MOTION GUIDE

Motion guide animation allows users to move an object on predefined path. In other words, in motion guide, your objects will move according to the path that you have been set. Here are the steps on how to help an ant to find its way out:

Step 1 : Create a Flash file. Draw the path as below picture:

Step 2 : Add a new layer and rename it as ‘semut’ or any other name that you like. Draw an ant or alternatively, you can just import an ant image into the library.

Step 3 : Right click on the 155^th frame and select Insert Keyframe. Since the path is long, I add a longer frame. But you can determined you own frame length considering your path length and how fast your ant will walk along the path.

Step 4 : Right click between the two keyframe and click on Create Motion Tween.

Step 5 : While you a selecting the ‘semut’ layer, click on Add Motion Guide under the layers. We can see that it add a new layer called ‘Guide: semut’ which it will now guide the ‘semut’ layer.

Step 6 : Select the Pencil Tool and select ‘Smooth’ options for drawing. Draw the path that the ant will go through later on. It doesn’t matter if your line drawing is not smooth/clean, because later on, it will not be seen. It is just as a guide for the ant to move.

Step 7 : Click on your 1^st frame of ‘semut’ layer, and point your mouse into the center of the ant. Drag the ant into the initial line that you just draw using Pencil Tool. Make sure that the cross at the center of the ant is exactly in the initial of the guide line. Click the last keyframe of your ‘semut’ layer and placed your ant in the end point of the guide line, also make sure that the cross at the center of the ant is exactly at the end of the guide line, or else, it will not work.

Step 8 : You can preview your animation by selecting Control > Test Movie or alternatively press Ctrl+Enter. You can see that the ant was moving along the guide line. But, you will notice some weird movement of the ant.

Step 9 : To make the ant movement more realistic, select the Free Transform Tool and to rotate your ant according to the path direction. In the Properties panel, tick the ‘Orient to path’ option. You can test your movie by pressing Ctrl+Enter.

Step 10 : Save your work as .avi format or animated .gif format.

For your information, you can also increase/decrease the movement of your objects in flash by changing the Frame Rate at the Document Properties window. Double click on the Frame Rate below the frame timeline and change the frame rate value. Here are the motion guide that I’ve been done :

FRAME BY FRAME

The last type of animation is frame by frame animation. This type of animation allows you to create animation in easiest way. In this activity, I will try to animate the cartoon mouth. Here are the steps :

Step 1 : Create a new Flash file. Draw a cartoon image that you want to animate.

Step 2 : Right click on the 10^th frame and insert a keyframe. On the 10^th keyframe, modify the cartoon mouth.

Step 3 : Repeat Step 2 by adding 10 frame for every mouth changes.

After you have done, test your movie by pressing Ctrl+Enter. You can see the changes of your cartoons’ mouth along your movie.

Below is the example of frame by frame animation that I've done.

That's it for basic animation in Flash.. See you.. ^_^

Apps 2 : Drawing in Flash

Assalamualaikum dan Selamat Sejahtera...

OK! Once again, there is no for class this week. Prof. Zaidatun have to go to Macau together with other few lecturers. So, as a homework, we have to start practicing to draw using Flash. Benda pertama yang kitorng kena lukis adalah gambar pemandangan tepi pantai.. hehe.. So, hasilnya adalah tengok gambar kat bawah ni... (jangan gelak k.. sebab nampak macam budak baru belajar melukis.. haha..) ^_^

Gambar tepi pantai.. ahahaha.. macam budak-budak baru belajar melukis..

To draw the above picture, I have used several tools in flash. FYI, I used Adobe Flash CS3 to learn flash in this class. Among the tools that I have been used are Line Tool, Selection Tool, Pencil Tool and Oval Tool. 

"Objects that I have drawn using the Line Tool and Selection Tools is the clouds, birds, mountains, sun, umbrella, beach chair, shark, sand castle, boat, the flag in the boat and the hat of the man in the boat. Line tools dan Selection Tool adalah kombinasi tool yang sangat menarik kerana dengan hanya menggunakan 2 tools ni kita dapat melukis bermacam-macam jenis object. Kita cuma perlu lukis satu garis lurus dan boleh membuat lengkung/curve daripada garis lurus tadi menggunakan Selection Tools. For objects that I have drawn using Pencil Tools is the man in the boat, the line between the beach and the sea, and the sands around the sand castle."

While, the tools that I used to colour all the objects are Paint Bucket Tool, Brush Tool and Eyedropper Tool.

Haaaa.. dah selesai lukis-lukis guna flash, kita belajar plak macam mana nak tekap-tekap gambar guna tool yang ada kat dalam flash ni.. For those who never used Flash, they must be not aware that we can also "teka-tekap gambar" macam yang kita selalu buat masa kat tadika dulu using a software in computer. Tools yang kita boleh guna untuk tekap-tekap gambar ni adalah Onion Skin Tool. Hah? kulit bawang? YA, BETUL.. onion skin=kulit bawang.. kenapa nama tool ni kulit bawang? haaa.. kalau nak tau, kat bawah ni ada step-by-step cara-cara nak tekap gambar guna onion skin tool. Later you will know why this tool are named after the onion skin.

Step 1 : Open your Flash. Create a new Flash File. Select File > Import > Import to Library and choose a picture that you want to draw. In this example, I will draw a cartoon.

Step 2 : Go to Insert > Timeline > Keyframe. Now we have 2 keyframe. Select the second keyframe (the keyframe that we just added) and delete the picture. When you select the first keyframe, you can still see the cartoon picture that we added before, but not in the second keyframe because we have deleted the picture.

Insert the second keyframe

Select the second keyframe and delete the picture in the stage.

Step 3 : Now, locate the onion skin tool. It is located under the keyframe timeline. Refer the picture below to locate the onion skin tool. Click on the tools and you can now see the picture on the first keyframe. Now you must be understand why this tool are called onion skin tool. You can say that by activating this tool, it makes your current keyframe as thin as onion skin to able you to trace a picture in the previous keyframe.

Step 4 : Start tracing the cartoon image using tools in flash. For this activity I used Pencil Tool with WACOM to trace the cartoon.

Step 5 : After you have done tracing, select frame 1, right click on it, and select Remove Frame to remove the original picture.

Now, you should be able to see your drawing that you've done using tracing method.

Step 6 : Now, it's time to colour our drawing. For this image, I will colour it using Brush Tool. Actually it is easier to colour an image using Paint Bucket Tool, but in this case, this tool cannot be used because the lines are hardly connected to each other.

Continue on colouring your drawing. Here are some pictures that I draw using tracing method in Flash.. ^_^

Another cartoon.......

Kalau entry sebelum saya ada mention bahawa susah nak gunakan WACOM, tapi bila dah try bnyak-banyak kali, sebenarnya hasil lukisan menggunakan WACOM lebih smooth berbanding melukis menggunakan mouse. OK! I take back my word.. haha.. Orait! That's it for Apps 2 : Drawing in Flash. Next entry we will discuss on how to do simple animation in Flash.. See you.. ^_^

WACOM & Drawing in Flash

Assalamualaikum & Hi everyone...

This week class continue as usual. This week we were introduced to a new device called WACOM. WACOM ni selalunya digunakan oleh artists, designers, cartoonists,  untuk melukis dengan cara yang lebih moden la. Kalau dulu-dulu, artists melukis kat kertas, tapi, nowadays professional art designers lebih prefer untuk menggunakan devices yang membolehkan design/art mereka ditransferkan terus ke dalam komputer. Fungsi WACOM ni lebih kurang macam mouse jugak. WACOM pad akan disambungkan ke computer through USB dan WACOM pen digunakan untuk melukis. Sekarang ni WACOM dah buat kerjasama dengan Samsung. Pen WACOM boleh digunakan bersama-sama dengan tablet dan smartphone. Hmm.. Amazing jugak WACOM ni kan? If we fully utilized this WACOM function, we can create a really great design/art tanpa perlu menggunakan kertas. Mesra alam bukan? WACOM ni ada banyak products. Kalau nak tau macam mana rupa WACOM yang kitorang dapat, tengok gambar kat bawah ni..

So, class minggu ni, kami berlatih melukis menggunakan WACOM ni. Agak susah jugak sebenarnya. Device ni memerlukan tangan yang lemah gemalai sikit. Bagi aku guna mouse lebih senang. Maybe sebab tangan aku ni keras, bukan tangan seni. haha. Device ni Prof Zaidatun pinjamkan kepada kami sepanjang class flash ni. Sama macam ipad jugak la. Kena return balik selepas habis kelas flash.

Dalam class minggu ni jugak, we learn on basic drawing in flash. An application on tutorial macam mana nak belajar basic drawing ni have been installed into our ipad. We learn all the basic tools such as line tool, selection tool, shape tool, pencil tool and pen tool through videos in the application. Other than that, we also learn about basic coloring in flash. Tools that were use in coloring are brush tool, ink bottle tool, paint bucket tool and eyedropper tool. After that, we also learn on how to apply all the tools that we have learn into drawing. We watch a video on how to draw building using line tool, draw cartoon using tool such as pen/pencil tools, shape tools and using onion skin tools (tracing images technique). And lastly, for Apps 2 leasons, we learn on how to create button using flash. 

 Dalam kelas aku tak banyak buat latihan cara nak lukis guna WACOM tu. Aku cuma tengok video-video tutorial disebabkan desktop yang aku guna tu kejap-kejap not responding. So, bila dah balik bilik tu, aku try  lukis-lukis ikut tutorial dalam video dan cuba lukis gambar macam kat dalam kertas Apps 2 activity. Next entry baru aku post hasil kerja lukis-lukis guna flash ni.. hehe..

See you in the next entry.. ^_^

I GOT AN IPAD!!

Assalamualaikum..

Selepas dua minggu kelas authoring postponed, minggu kelas berjalan seperti biasa. Classmate minggu ni bertambah berbanding 2 minggu lepas. Kalau 2 minggu yang lepas, hanya 4 orang sahaja yang baru mendaftar, tapi minggu ni dah bertambah seramai 6 orang, so total classmate authoring setakat ni adalah 10 orang.

Minggu ni adalah minggu yang agak busy disebabkan assignment-asignment yang banyak nak disiapkan (takda la banyak sangat tapi assignment Resource Center sangat banyak nak disiapkan + assignment dari 5 subjek yang lain). Phew! Tapi ada 1 benda yang menggembirakan aku. haha.. Minggu ni Prof Zaidatun pinjamkan kitorang sorang 1 ipad. YEAY! Walaupun cuma dipinjamkan selama sebulan lebih, tapi bila lagi kan nak merasa guna ipad ni. hehe..

Dalam class minggu  ni, we have a discussion on the 3 articles that we read 2 weeks ago (Read the entry here). Kesihatan Prof Zaidatun agak terjejas selepas balik dari mengerjakan umrah. We hope to see her get well soon to continue teaching us with her full energy.. ^_^

P/S : Get well soon Prof.! ^_^