Samantha: August 2011

This is the 2nd CG assignment - Motion based Media by using Adobe Flash.
This is my first time animating by Flash, never experience before, what i get the reference is from Adobe Flash E-book only as i think that is enough basic knowledge for beginner like me.Of course, i'm eager to learn more during sem break. ^^

I also use Adobe Photoshop to create different poses of the animals and cut out their bodies parts.
The tools that I used in photoshop are lasso tool, eraser, brush and etc...

Pictures below are the steps to complete this assignment:

********************************************

CONCEPTUALISATION OF ASSIGNMENT 1 - LINK OPEN

Sketches for the motion poster.

KOALA BEAR PART

① Firstly, import all the images that we needed for this 2nd assignment (take the pics from the 1st assignment) then,rename and arrange all the images well.

② After arranging the arrangement of the images, insert the frames to each of the images.

Then, let's begin with koala bear. Select the timeline of koalabear

③ Want to make the koala bear looks like climbing on the tree? Right-click on the timeline of the koalabear, and choose "create motion tween", the grey timeline will change into blue timeline.

④ After created motion tween, Right-click again and choose 'Insert Keyframe' -> 'Position' . Insert a few keyframes to make the koala bear looks climbing smoothly. (eg: can try out with '10' ; '30' ; '50' ; '60'..etc..)

Continue doing the same steps for frame '30' ....'60' .....etc....

⑤ This is the look after insert all the keyframes. Done with 'koalabear' part!

****************************************

EAGLE PART

① Now, is the EAGLE image's turn. Same as the previous image, we have to create motion tween first,so that the eagle can move.

② Insert keyframe at '15' , and then open 'Motion Presets' and choose for 'flyin-pause-flyout'. Then click "APPLY".

③ After clicking the "APPLY", the motion tween has formed. Done with eagle part!

****************************************

LEOPARD PART

① Import the body parts of the leopard into Flash. Create new layers for each parts.

And rename all the layers just like below! (leopard_head;leopard_tail;leopard_leg1;leopard_leg2)

② Let's move the tail, leg1 and leg2 first. Create motion tween to these layers. Then insert keyframe for each parts (insert in any frame is possible, as long as make the leopard moves smoothly enough). While insert the keyframe, try to turn the body part slightly a bit, to make it looks like moving. (eg: move the tail slightly a bit around 5 degree at frame '8', and turn back to -5 degree at frame '20'.)

③ Insert keyframe at frame '38' and '69' and dont forget to turn the leopard head as well to make it looks more vivid.

****************************************

① Before we moving to the next subject, we need to make the flash looks more interesting. Look at the black column. Try to insert "blank keyframe" at the beginning until frame '25' (except for the global copy and base). And remember to did the same thing to the following image layers as well.

****************************************

PENGUIN PART

① Now is the penguin layer. We have 2 layers for penguin body parts. -- 'penguin' which is the full body image of the penguin and "penguin hand" which means the penguin hand and body are separately.

② Begin to insert keyframe at "30". From the frame "30" to "86", we are using the same method as "LEOPARD, the moving tail,legs and head", insert new keyframe and also move the penguin body together as well.

③ At frame "94" to "100" , we apply "motion presets" -- (WAVE) on it, to make it jump in the end.

④ Between frame "52" and "58", there's blank keyframes there for layer (penguin). The reason is we want to make the penguin hand move during that time, so need to apply blank keyframe for layer (penguin), and the hand moving motion is continue with the layer (penguin_hand).

****************************************

MONOLOG_QUESTIONMARK_ICON PART

① Create new layer for "monolog_questionmark". Then, right-click -> "create motion tween".

② Begin the frame at "79" until the end.

③ select the keyframe at "79" -> choose "Alpha" to 0% .

And during "82", choose "Alpha" and turn to 100%

****************************************

FIRE PART

① We have 3 layers for the fire part. First,we create motion tween for these layers.Then, we transform the "fire_stock2", move it a bit slightly to the right at the frame "68", then change the "Alpha" into 0%. At frame "75", change the "Alpha" back to 100%.

② Begin the frame at "81" to "95". Repeat the previous step and apply on "fire_stock3".

****************************************

TIGER PART

EDIT IN PHOTOSHOP

**After the consultation, the lecturer told me that i have no include any typography in my design, so i've decided to put the typography design on this tiger.

Open the image.

Apply threshold effect on this image. (Image > Adjustments > Threshold)
(Threshold level:102 [depend on the brightness of your image])

Next ,create typography brush. Open a new paper, (LESS THAN A4).
Type the words that you wanna add. Rasterize all the layers.

Choose (Edit > Define brush preset) for every layers to create typography brush.
After done with the typography brush, open another new paper, open back the original tiger photo, use quick selection tool to highlight the part that you wanna add typo in, then use brush tool, select the typography brush and apply on it.

Want to apply color on the tiger, go to "layer style" and select "gradient editor".

Here is the typotiger!

IN FLASH

① Create a new layer for tiger part.
Rename it as "typotiger" as we are going apply typography in the tiger image.

② Import the image that we have done in photoshop. (File->Import->Import to stage)

③ Apply "Alpha" ,"Drop Shadow" and "Blur" on this layer at the frame "55".
Set Alpha to 0%.

④ At frame"90", adjust the Alpha to 84%.

⑤ The tiger image is getting clearly when it nears to frame "90"

⑥ Insert new keyframe at position "132" and "153". and adjust the alpha to show the transparency of the image.

****************************************

GLOBAL TURNING PART

① Done with all the animals, let's make the global turning around! Begin the frame at "40", and insert new keyframe at "65" and also "92".

② At frame "65" and "92", slightly turn the global to right to make it looks like turning.

****************************************

CLOUD PART

① Click on the cloud layer. Create motion tween. Begin the frame at "36".

② Select "Alpha" to 0%

③ At frame "44" insert another keyframe -> position.

④ Select "Alpha" to 100%

⑤ At frame "55" ,insert another keyframe. Then, move the cloud to right a bit. To make the cloud looks like floating and moving in the sky.

⑥ Insert keyframe at "70" and move again the sky to right a bit. Done with the effect!

****************************************

TRANSPARENCY

① Insert keyframe on every layers at frame "133" .

② Insert another keyframe to every layers at "141".

③ Click on every layers (frame "133") ,select "Alpha" to 100% .

④ Click on every layers (frame "141") ,select "Alpha" to 2% .

⑤ This is the look after apply "ALPHA" to every layers.

****************************************
TYPOGRAPHY TEXT

** I've changed the text part, and the lecturer suggested me to put penguin and typotiger together with the text.

① I believe people can understand how to create layers for text. So, i just tell the main point here. After create new layers for "GLOBAL", "Unity" , "One World"and "One aim" and adjust the blur effect and alpha.

② After done with that, duplicate the layer of "penguin_hand". Then, adjust the position of the penguin, let it move like carrying the "Global" Word and move forward to the side of "Unity" by insert new keyframe.

③ Duplicate another layer of "typotiger", and begin the frame at "218". Adjust the blur effect to 48px, and alpha to 20%. Move the "typotiger" to the right top.

④ When the typotiger is at the center position of the stage, adjust the alpha to 28% and blurring effect to 1px. (Don't forget to move the "typotiger" to the center position)

****************************************
ACTION SCRIPT

** Again after consultation, as what Mdm.Lydia said, she asked me to add in the "stop scripting" for the end of the video, so that the whole video wont be repeating again.

① Create a new layer for "action scripting". Rename it as "action", (go to “Window" -> "Actions") to add scripting for the final part of the flash vid.

② A window will pop out, type in "stop();"

③ Applied the action in this "action" layer, then move the script (which is hightlighted) to the end of the timeline. So that, when playing the swf. , the video will stop at this "GLOBAL UNITY" scene and wont be repeat the whole video again.

****************************************
SAVING YOUR FILE IN LOWER VERSION

** As Mdm Lydia requested, for those who have problem to show their work in lab pc, if you are using the latest version of adobe flash (eg: CS5) and you need to convert it into lower version like CS4/CS3...etc... Pls look at the steps below:

(File> Save As)