Activity 3

Hello and Hai,

In previous post, I had done my elaboration on  Activity 2. Today, I will talk about Activity 3. In Activity 3 I learned how to create animation. It was very fun and enjoy. Actually, it is not really hard to create animation using Flash. Just follow the step one by one and pooop... Here come the animation. I am very happy as I get new experience and knowledge in Flash.

I learn how to create animation from Apps that had been installed in my note. In that Apps, I learn about Types of Symbol and Types of Animation. There are three kind of symbols which are graphic, button and movie clip.

Graphic Symbol: A static images that used mainly to create an animation. Drawn vector, bitmap images or   any combination of drawn vector and bitmap images can be converted into a single controllable object which called graphic symbol. There are two ways to create graphic symbol. First by drawing the object by yourself or just import the desired image then converted it into graphic symbol. The steps is as following:

Import image from user computer:

File > Import > Import to stage > choose image from your file > open.

Convert into graphic symbol: 

Modify > Convert to symbol > Name the symbol > Choose graphic for  graphic types

Button: The only interactive symbol that can detect mouse events in flash. The following steps use to create simple button.

1. Insert> New Symbol > Rename button > Choose symbol type as button then OK. Flash will create the timeline for the button and consist of four frames. Up, Over, Down and Hit state. 
2. Draw your button. Example: Rectangle tool > Fill with your favourite colour > Put text on the shape using text tool.
3. Copy the button in Up state and copy the button to Over state. Right click the Up frame and choose copy frame. Right click on Over frame and paste frame. Do the same to Down state and Hit state.    
4. Change button appearance when mouse over the button. Go to over state and change the colour of the button. 
5. Click on Scene 1 and drag the button from the library to the stage. 
6. Click control and test the movie.

Movie Clip: Consist of one or more graphic/ button symbols. Flash movie inside the Flash project. Movie clips have their own number of layers or frames in the timeline. Movie clip is not a static image. It must be animated by tweening or using actionscript command.

Now, we move to Types of Animation. In Apps 3 there are four types of animation which are Motion Tweening, Shape Tweening, Motion Guide and Frame by Frame. Handout had been given and there consist of 4 questions which represent four types of animation. 

Question 1: Bouncing Ball ( Motion Tween)

The steps involve are as following:

1. Draw a circle using oval tool. Fill the colour with colour you want. I choose pink.
2. Convert the object into graphic symbol: Modify > convert into symbol > rename symbol as circle > select graphic for type > OK
3. Change the position: In my motion tween I put the circle on frame 10 and frame 20. Right click and select insert keyframe. In frame 10 change the position of the circle from upward to downward whereas in frame 20 I change the position from downward to upward. 
4. Create motion tween. Right click between frame 1 and frame 10 then select Create Motion Tween. Do the same between frame 10 to frame 20. 
5. In frame 10, I had change the brightness of the circle. Select the circle > from colour dropdown menu in properties panel choose the brightness and increase the brightness.
6. In frame 20, I change the size of the circle. It is done using transform tool. Then drag the circle to make it small. 
7. Then test movie. Control > Test Movie

Question 2: Shape Tweening (Text to object)

The steps involve are as following: 

1. Type Flash using Text tool.
2. Break the text apart. Select the text > Modify > Break Apart (Only break the word to individual letter. Need to break apart again) > Modify> Break Apart.
3. Choose frame 25, right click and select Insert keyframe. At this new keyframe delete the text and replace it with shape.
4. Draw star shape. Polystar tool > Option (in properties panel) select star for style > OK > draw the star
5. Click any frame between frame 1 and frame 25 and in properties panel change the tween option from NONE to Shape.
6. Press enter to see the text to change into star shape.

Question 3: Moving Ant (Motion Guide)

The steps are as following:

1. Draw the ant. I am using oval tool, line tool and selection tool. Turn on the snap to object option.
2. Select the drawing using Selection tool and create a movie clip. Modify > Convert to Symbol > Name symbol as ant > Choose movie clip for symbol type > OK.
3. Create simple motion tween. Right click on frame 50 and select insert keyframe. Move the ant to new position. Right click any frame between frame 1 and frame 50, select create motion tween. 
4. Rename layer 1 as Ant.
5. Step on creating motion guide. Click the add motion guide beneath the layer. You will see the ant layer is guided by guide: Ant layer. 
6. Select pencil tool  and choose smooth option for drawing. Draw the guide.
7. Click the first keyframe on Ant layer and click on the ant. Point the mouse on the center of the ant. This is the beginning of my guide.
8. Click on frame 50 and place the Ant at the end of the guide.
9. Test the movie. Contorl > Test Movie. 
10. The house, car, tree and the soil are drawn in different layer. I use line tool, rectangle tool, oval tool, brush tool, paint tool and pencil tool to complete the drawing. 

Question 4: Frame by Frame

The steps are as following:

1. Draw the object. In the question the image given is cat. I had drawing my cat by using oval tool, line tool, selection tool and paint tool. 
2. After that I export the object as image. File > Export > Export Image > save as gif format.
3. The question was asking to animate the cat's mouth. Then I only made changes on cat's mouth. I have done seven image to do this animation. Export all the images and save as gif format. 
4. To make an animation frame by frame, import all the image. File > Import > Import to Library.
5. Select frame 1 in layer 1. This is the starting point of the animation. Drag the first image from the library.
6. Here I choose frame 1, 5, 15, 20, 25 and 30 for my animation. 
7. To insert the next image, choose frame 5. Right click and select insert keyframe. The contain of this frame is the same as in frame 1. So, delete this image and drag the second image from the library. Repeat the previous step until frame 30. 
8. Test animation sequence. Control > Test Movie.

I am very enjoy in Activty 3. Hope to gain more knowledge in next class. See you.

-Vicki-

Activity 2

Hello and Hai,

We meet again. In this post I will explain about my Activity 2 of Adobe Flash. After I had submitted my Activity 1, my lecturer had given me another handout to be done. Actually the handouts given were for Activity 2 and Activity 3. Activity 2 is the continuous of Apps 2 that had been installed in my Note.

First of all, I watch video from Apps 2 than I apply the new knowledge into Activity 2. Apps 2 are about Basic Drawing, Basic Colouring, Simple Object and Text and Drawing Button.

Basic Drawing: I learn about drawing line, draw an object using line tool and selection tool, drawing circle and rectangular, drawing an object using Pencil and Pen tool. Selection tool is used to select the part of the object. It also used to drag the object to area that user want.

Basic Colouring: In basic colouring, I learn about color an object using brush tool, ink bottle, and paint bucket tool. For beginner like me, I am preferred to use bucket paint tool as it is easy to use. Just pick the colour that I want then click on the drawing and taaaaddddaaa… the drawing is now having its own colour. Ink bottle tool is used to colour the line of the drawing.

Simple Object and Text: Here, I learn about draw a building, drawing a Cartoon, draw company logo and working with text. In Activity 2, it focuses on drawing a cartoon. It was very fun activity even I facing a hard time when tracing the cartoon as I don’t have talent in drawing. But I try my best to produce a cute cartoon.

In Activity 2, there are three questions for us to be answered. First question, we were asked to draw a view of beach. It only involves basic skill of drawing such as line. Second question is about the tools that we used to colour our drawing. Question 3 is about drawing a cartoon image using Onion Skin Tool. Picture below is the view of beach that we need to draw.

As I said, it only involves the basic of drawing. Below is my output. :)

Process:

In this drawing, I had used line tool, oval tool and selection tool. I draw the sun and the stickman’s head using oval tool whereas the other elements I used line tool and selection tool. Selection tool is used to make a curve from the line.

Colouring: I used bucket paint tool and I play along with the gradient. I mix two or three colour so that the drawing looks more beautiful. Kalau saya yang tengok la..  There are two kinds of gradient which are linear and radial gradient. This activity is fun as I can play with colour and it can build my creativity.

In cartoon image drawing,  I had choose Doraemon. I like Doraemon so much and I am so happy that I can draw “him” even though I am just tracing it. Hehe.. Apart from that, I used wacom to trace the image. Wacom is lend to us by our lecturer. Wacom is a type of input device for the computer and it is extremely useful for photographers and graphic designers. Wacom can replace the mouse while tracing the image. It is more easier for me even at the beginning I feel it is so hard. 

Wacom yang dipinjamkan.

Pictures below are the original image, tracing image and tracing image plus colour. 

 

                            Mine (Tracing Image)                      Original Image

Process:

1. Open the Adobe Flash CS3

2. Create a new Flash file

3.Then import the cartoon image into library: 

    File à import àimport to libraryà choose cartoon image from your file

4.In frame 2, insert keyframe.

5. In layer 1, place the cartoon image that you want to trace.

6.Go to frame 2 and activate onion skin tool. Here, the image in  frame 1 will visible. Start tracing.

7. After finished your tracing, deactivate the onion skill tool.

8. Convert the tracing image to graphic symbol.
Modify--> Convert to symbol-->Rename your symbol-->Graphic symbol--> Save

That all for Activity 2. See you again.

-Vicki- 

Activity 1

Hello and Hai,

Setelah lama menyepi dan membiarkan blog ini mula bersawang, saya kembali lagi untuk berceloteh tentang apa yang telah saya pelajari dalam kelas authoring system. Seperti yang diketahui, kelas sebelum cuti semester ini adalah sesi untuk si Flash. Kelas selepas cuti adalah kelas untuk si Dreamweaver. Bagi memberi lagi pemahaman tentang Flash, kami telah diberi tugasan iaitu melengkaplan Activity 1 dan Activity 1 ini adalah berpandukan kepada Apps1 yang telah diinstallkan ke dalam note kesayangan ku.. gedik..  :P

Dengan itu, saya akan bentangkan, huraikan sebaik mungkin apa yang telah saya pelajari. Dalam kelas ini Flash yang digunakan adalah Adobe Flash CS3. Sebelum ini saya hanya mendengar tetapi kini saya telah berkenalan dengan Flash. Diakui saya adalah budak sains komputer sebelum ini, tapi kami tidak didedahkan kepada penggunaan Flash. Kalau software untuk bioinformatik tu adalah juga.

Dalam perkenalan saya dengan Flash saya telah diberikan Apps 1 bagi memudahkan, menambahkan pemahaman dan juga panduan. Berikut adalah interface Flash CS3.

Dalam gambar diatas ada lima bahagian yang ditandakan dengan warna merah. (sila jangan tab, gambar ja ni).

Sebelah kiri or left hand side is called Tools panel. Tools panel consist of:

1. Selection tool

2. Subselection tool

3. Free Transform tool

4. Lasso tool

5. Pen tool

6. Text tool

7. Line tool

8. Shape tool

9. Pencil tool

10. Brush tool

11. Ink Bottle tool

12. Paint tool

13. Eyedropper tool

14. Eraser tool

15. Hand tool

16. Zoom tool

17. Stroke color

18. Fill color

The above red rectangle is called Timeline. It contains frames of the animation and will display them in sequence from left to right. Flash automatically play the animation from Frame 1 and will continue along the timeline until it reaches the last active frame. If multiple scenes had been created, Flash will work sequentially through the frames in the first scene and then will move to next scene. 

Middle red box is known as Stage.Stage displays the animations, images and other content. This area is visible to users after it has been published or export a finished project. 

The bottom red box is known as Properties panel. It contains the options for the tool or object that user working with. 

The right hand side red box is known as Library. It houses all the imported media such as photographs, clipart, video and sound files. 

Flash can be used for web banner, animation, games and courseware. Developing multimedia courseway using Adobe Flash allow the combination of text, images, animation, audio and other multimedia content to be presented in one platform.

Apart from that there are three types of interaction which are button&hotspot, text and drop&drag. Here I will elaborate more on text. In Flash, there are three types of text which include Static text, Input text and Dynamic text. 

Static text is used to display characters that do not need to change, to display small amounts of text or also to display small amounts of text or to display special fonts that are not available on most computers.

Input text field is used when user need to capture user input. As an example, user need to provide their username and password to enable him/her to access the site. Here input text is used and user can type in this text field. 

Dynamic text is used when user need to display characters that are updated or that change at runtime.

Selepas habis menelaah apps 1 dan activity 1 ni, saya rasa pengetahuan saya lagi dicerahkan. Bukan sekadar hanya pernah mendengar. Tapi saya telah berkenalan, menyelami dan mencuba sendiri tools yang terkandung dalam Flash ni. Bak kata orang dulu-dulu tak kenal maka tak cinta. Pembelajaran adalah sepanjang hayat. Jadi, selepas ini saya akan terus cuba mengenali si Flash dengan lebih mendalam lagi. 

Sampai sini saja.. 

-Vicki-