Learning Activity 3

Learning Activity 3 : Animation

Kelas minggu ini, kami diajar untuk menggunakan Apps 3 : Creating Animation. 

Sebelum ke applikasi, kita mesti memahami ape itu symbol di dalam FLASH. Terdapat 3 jenis symbol didalam FLASH:

a) Graphic - imej statik yang dicipta/direka untuk diguna berulang kali 

b) Movie Clip - digunakan untuk mencipta animasi flash

c) Button - digunakan sebagai navigasi untuk timeline

Terdapat juga library didalam flash. Ape itu library? (windows>library)

"Library is use to store media that you want to use again in Flash. The object that we dragged to stage from the library is not the original, it is a copy called an instance. if we drag second copy of a graphic from the library, we add a second instance in stage. we can drag a many as we like onto the stage. As we do this, we DO NOT increase the overall file size of the movie".

Ok. Setakat ini ape yang anda paham? Senang je Flash ini jika dibuat berulang kali mesti boleh ingat konsepnya. Sekarang kita fahamkan jenis2 animasi didalam Flash.

Terdapat 4 animasi di dalam Flash:

a) Frame-by-frame animation - ini kaedah lama dalam pembuatan animasi dimana setiap scene untuk setiap saat. Apabila disusun untuk satu turutan maka kita akan saksikan pergerakan objek yang seakan-akan hidup. Di dalam pembuatan animasi, pereka akan menggunakan objek yang sama berulang kali dengan untuk menjimatkan masa dan hanya membetulkan beberapa scen untuk kelihatan hidup.

b) motion tweening - untuk animasi jenis ini, terdapat pergerakan objek static dengan jarak didalam scene. untuk mengguna kaedah ini, pereka mesti meletakkan objek pada kedudukan mula dan kedudukan akhir. untuk menjadikan pergerakan lebih lancar, objek akan di ubah bentuk mengikut scene yang tertentu.

c) Shape tween -  animasi ini dilakukan dengan mengubah bentuk objek mengikut siri frames yang ditetapkan.

d) Guide Motion -  animasi ini lebih mudah dimana laluan objek ditetapkan. 

Contoh-contoh hasil kerja seni yg xberapa nak seni

Bouncing Ball

Steps to create:

1. Create a layer, draw a Circle (a ball)
2. Then convert the symbol (a ball) to graphic. Modify > Convert to Symbol > Graphic
3. Insert Key Frame (Example at key frame no. 10)
4. Right Click between the Key Frame and create Motion Tween 
5. Then, move the ball to the position that we want for certain key frame.
6. Besides that, we also can change brightness and the size of the ball.
7. Control > Test Movie

Star Shape 

Steps to create:

1. First, create Text (change font,size, color, style)
2. Next, modify to Break Apart (repeat again)
3. Insert Key Frame (Example at key frame no.30)
4. Delete the Text
5. Draw Shape- star shape
6. In properties below, choose tween: Shape
7. Control > Test Movie

Motion guide exercise The ant nest 
>

Steps to create:

1. First layer, draw the way for ant

2. Then, second layer,draw the ant.

3. Convert to symbol (ant) to movie clip.

4. Choose a key frame (Example key frame no.30)

5. Place the ant at the new position at key frame 30.

6. Right click between the key frame and create motion tween.

7. Next, create motion guide.

8. Use pencil to draw the guide

9. Select first key frame and click the ant and move it at the starting point of the guide.

10. For the last key frame, move it at the last point of the guide.

11. Use transform tool to adjust the position of ant for certain key frame,

12. Tick the orient to path at the first key frame.

13. Control > Test Movie

Frame by frame technique - Cat Expression 
>

Steps to create:

1. First, create a cartoon design with different expression.

2. Then, convert every image to symbol (graphic) and save the image in the library.

3. After that, put the first cartoon image in key frame no. 1.

4. For next key frame which are key frame 2 and so on, insert another image.

5. Control > Test movie

Learning Activity 2

1. Draw a view of the beach as in example below

Explain the tools that you are using during this activity.

I use pencil tool to draw above picture. to make a curve line, i've clicked on the subselection tool and drag the cursor to middle of the line until the icon curve appears, that means the line ready to drag to make curve.

2. Once you are done, color your drawn image with an appropriate tool in Flash. Describe the tools that you are using.
i was used paint bucket tool to color the closed loop area. i used ink bottle tool to color the outlines. for your information, the flash also got gradient color which consist the 2 types of gradient, gradial color and linear color.

Create a new flash file and draw the cartoon image by using Onion Skin tool and convert it into graphic symbol.

Original Photo

The result after using Onion skin Tool

Another tracing picture by using Union Skin Tool

What i've learn from this activity?

Wacom Tablet

1. We've provided by Prof Zaidatun with Wacom Tablet for drawing purposes. This tablet function as a tool to make the drawing easier and faster. This table is useful for the beginner/amateur developer who a trying to make the flash image attractive as much as possible. 
2. I've learn how to draw with flash by using pencil tool and how the subselection tool can help to create the shape from the single line.
3. I was learned the function of paint bucket tool  to paint the closed loop area and use of ink bottle tool to color the outline.

Tutorial: Upload .swf file in your blog

1) Go to webpage: SwfCabin to upload your flash file.

2) Write up your Flash title, choose and upload your selected flash file. After that, click Publish Swf.

 3) Your flash has been published and you will get it's respective URL.

4) On that URL, change word 'open' to 'swf-files' and add '.swf ' after the number.

eg: 
Before change: http://www.swfcabin.com/open/1364709846

After change:   http://www.swfcabin.com/swf-files/1364709846.swf < ---- This is your new URL

5) Lastly, copy this embedded code to your blog.

6) Replace the red words with your NEW URL.

This is what you will get...Happy trying!~

Flash introduction

What I understand on our 1st class of Authoring System  were;

1. What is authoring system?

• flash is not a heavy application, where non programmer can easily develop the multimedia -oriented application such as animation, games and video.
• the flash interface is what you see, is what you get. you only able to click on the appearance button

    2. Multimedia courseware vs Web page development? 

• multimedia - stand alone application (offline), can load heavy video/animation/ high bandwidth streaming
• web page - need to connect to internet, consist of information/ small video.
  
  
  
  

Introducing me :)

Nama diberi Mohd Asrul Azri. Berumur 25 tahun.Asal dari Taiping,Perak.Sudah berumahtangga..orang rumah sedang buat phD di FKE,UTM...

Master degree kali ini sy menyimpang jauh dari bidang asal...Bachelor saya adalah dalam bidang Mikroelektronik di Fakulti Kejuruteraan Elektrik,UTM... I love designing and animation..I love something moving...not static...

Saya mempunyai pengalaman sebagai Test Engineer selama 2 tahun di dua electronic industries...This 2 years experience built up my confidence level,teamworking skill and communication skill...

I am really hope that I can get some fruitful knowledge from the lecturer,trainers and fellow friends :)