Take 1...Take 2....Actionnnnn....!!!!!

Since I don't have any experience in Actionscript, so at first it was quite difficult for me to get used with it. But, the only thing that I have to do is make as many practices as I can to become really familiar with it. Again, I learn from mistakes and at the same time I have to motivate myself not to easily give up. =)

And of course this is only the beginning, there is a lot of challenging Actionscript waiting for me...huhuhu...so, I must be prepared...!!!

Actionscript

Here are some basic in Actionscript that you must know before you can make an interesting interactive animation :

F9 = Window>Actions

Global Functions>Timeline Control>Stop : to stop the animation

Global Functions>Movie Clip Control>On : to run the animation

e.g : on (release) {(gotoAndPlay("Scene 2", 5);}

This script tells that when you click and release the button, it will go to and play the 5th frame of scene 2.

Flash is Fun!!...

Frame by Frame Animation / Cell Animation

Before we can start making an animation, we must ensure that we have a collection of pictures that show movement. For example, movement of a rabbit walking, a bird flying, a frog jumping and etc. We can download the pictures from the internet or snap your own pictures or maybe you can draw your own set of pictures depands on your own creativity. =)  

Here are steps to make frame by frame animation :

1. Draw a background or you can insert any picture by clicking File>Import>Import to stage.

2. Insert symbol by clicking Insert>New Symbol. Choose movie clip and click OK.

3. You will see a new scene named 'Symbol 1'

4. Import your set of picture that show movement by clicking File>Import to stage. (Import the first file only because it will automatically import all the pictures. But, you have to make sure that all the pictures is save in sequence, for example rabbit1, rabbit2, rabbit3 and so on. If not, it won't automatically import all the pictures to the library)

5. Go back to scene 1 and drag your symbol (from the library) to the stage.

6. Go to any timeline (e.g : timeline 40) and insert another keyframe by pressing F6.

7. Move your symbol to another location on the stage.

8. Between the timeline, click Insert>Timeline>Create Motion Tweening.

9. Save your file (Ctrl+Save) and test your movie (Ctrl+Enter).

Fired up...Go!! Go!!

Traditional Animation

In this activity, I am thinking of making an animation about the growth of a plant. In the class, we are guided by Prof. Zaidatun to make a traditional animation by drawing a face of a bear and the bear's mouth will change smiling as the animation moves from frame to frame. So, here are steps to make a simple traditional animation. Happy learning..!!

1. Draw a character on the stage. For example, I draw a background with a picture of seeds inside the soil.  
2. Then insert keyframe in the same layer by press F6. E.g : I choose keyframe 10. You will see the same picture in this new keyframe. To create the animation, draw a new picture on the stage. I draw a water drop of rain to show that plants need water to stay alive and growth.
3. Again, I repeated the step by insert new keyframe in timeline 20 and press F6 and draw a small tree to show the growth of the plant. This step was repeated in timeline 30 and 40. It's up to you how many keyframe you want to insert. 
   
4. 
   Then, you can check your short animation by selecting Control>Test Movie. Your image will change as the animation moves from frame to frame. To make it move slower, insert frames and vice-versa.
   
   

    

    

                     

 

Motion Guides / Motion Path

For the first time trying this new skill, I feel a little bit difficult and I have to make a lot of corrections here and there to ensure it really works. After trying and practicing so many times, at last I can make it. Sometimes, learning from mistake can give a lot of advantages. =) It makes me remember the step and also become really familiar with the interfaces. 

A Motion guide is a line that has drawn with pencil tool on a guide layer. It is use to make an animation sequence that involves substantial movement. Instead of using motion tween, which to make your object moves from one place to another place you can use motion guide to guide your object to moves for example in 'S' shape line or irregular line which need a lot of moves. Or else, we can say that this is a shortcut for you to moves your object in substantial movement. Here are the steps:

1. Draw a light colour of the background by selecting colour in the properties section.
   
2. Then, use rectangle tool to draw a large rectangle over the whole stage area. Make sure you choose other colour to differentiate it with the background colour.
   
3. Then use eraser to make the path. Draw other picture on the stage of this layer (I rename it with 'background') to make it look real. For example, I draw some trees, stones, a pond and a few houses.
   
4. Add a new layer and draw an object that you want to make it moves. Then, rename it with the object name . For example, I draw a car and named the layer 'car'.
   
5. Select the car and convert it into symbol by pressing F8 or choose Insert> Convert to Symbol. Name the symbol as 'car' and select 'graphic' in behaviour options.
   
6. Add guide layer on the 'car' layer by clicking 'add motion guide' symbol. You can see this symbol beside the 'add new layer' symbol. Please make sure that this 'motion guide' is situated above the 'car' layer to make it really work.
   
7. Use pencil tool to draw the path that you want your object to follow.
   
8. Insert new keyframe (press F6) in the timeline (e.g timeline 60) for all the layers (background, object and motion guide layer) to make all the background can be seen at the end of the movement.
   
9. Snap the ant to the guide by pressing the magnet icon in the tools option on. Select the object (car) in the object layer (car layer) which you can see a crosshair and point your mouse on the centre of the object and move the object from starting point to the end of the guide by following the line that you have drew using the pencil tool.
   
10. In the object layer (car layer), click between the two keyframes and select motion from the tween dropdown menu.
    
11. Test your movie by pressing Ctrl+Enter.

 

Sharing is caring

According to the previous activity in the classroom, i can see everything is about sharing. We share knowledge, opinion, and even biscuits among each other (thanks Prof for giving us Oreo during the class : sooo sweeettttt....). So, here I want to share everything with all of you...=)


Before we start, we have to get use and know the interface in Flash CS3.

You may go to this link :
http://www.flashclassroom.com/cms/flashclassroom/index.php?vsite=1&Area=266&SubSectionOf=265

• Tracing Images with the Onion Skin Tool
• File > Import (choose any picture that you want to trace)

• Your selected picture will located on keyframe 1, layer 1 of the timeline
• Select frame next to the current frame and Insert > Keyframe (you can also press F6)

• Click on second keyframe then select image on the stage then press Delete to delete the image.
• Then, click the Onion Skin Tool (you can see faint image)
• Now, you can trace the picture using pencil tool or any tool that you like.
• After you have finished tracing the image, you can delete the original picture by deleting the 1st keyframe. Select the 1st keyframe and press Delete or Insert > Remove Frame.
• Finally, turn off the Onion Skin Tool.
• You can colour the picture that you have traced using Paint Bucket Tool. Enjoyy..!!!

* This activity really reminds me on my childhood memory whereby during that time, my mother teaches me on how to trace picture using oil paper.. =)

• Gradients
• Draw any shapes or pictures
• To colour the pictures using gradients, you can choose colour from Color Mixer Panel (press Shift+F9 if the color mixer is not at the right hand side of the screen)
• You have to change from solid colour into a gradient by select linear or radial gradient.
• You can customize the colour by adding more colours, remove colours from gradient or make a colour in the gradient transparent

• Shape Tweens 
• Draw a shape (e.g Yellow Star) in frame one
• Choose any frame in timeline (e.g frame 30), then press F6 to insert keyframe
• Delete the shape you have draw before  in this new keyframe (Star) and draw a new shape (e.g Orange Circle)
• Now, we have to create the Shape Tween to morph the shapes (from Yellow Star to Orange Circle) by clicking any frame between frame 1 to 30 (e.g frame 20) and in the Properties panel (at the bottom), change the Tween option from None to Shape
• Press Enter to see the changes
• Save (Ctrl+S) and publish (Ctrl+Shift+F12) your work 

• There are 3 rules in Shape tweening :
• The object that you want to tween must be on it's own layer
• You don't have to convert the object into a library symbol
• *If you want to make words morph instead of shapes morph, you must break the text apart by clicking Modify > Break Apart or Ctrl+B twice

• Motion Tween
• Draw a shape (e.g a mushroom) on the left of your stage
• Convert it into symbol by press Ctrl+F8 or Insert > New Symbol and set the behavior as Movie Clip
• Insert new keyframe (e.g frame 30 in timeline) by clicking F6
• Move your shape (mushroom) to another location on the stage (e.g from left to right)
• Now, we have to animate the shape (mushroom) to moves from left to right, click any frame between frame 1 to 30 (e.g frame 20) and in the Properties panel (at the bottom), change the Tween option from None to Motion
• Then, press Ctrl+Enter to test the movie and save (Ctrl+S) your work  

• There are 2 rules in Motion Tweening :
• The object that you want to tween must be on it's own layer
• You have to convert the object into symbol

 

Try and error

It was my first time trying to start blogging. phewww....=)