[continued] Final Assignment CG3 (Blissful Marriage)

Final Assignment CG3 (Blissful Marriage)

Introduction

Hello everyone :)

This post if about our group work and also our final assignment on computer graphic 3  (MCC 0033) in Alpha year.

First of all i would like to introduce our group members :-

1) I myself Mohd Danial Adha Bin Jamal (1102702965) - Leader

2) Lee Ching Hau (1102703008)

3) Lee Siew Khuan (1091103148)

4) Pradeep Singh (1102703086)

5) Ismadi Bin Hamidi (1102703164)

6) Hamada Qarawi ( 1092700916 )

The topic given for our Final Assignment is Blissful Marriage. The meaning of Blissful Marriage in this assignment is the combination of animation,video,sound and other media.

-we choose 21guns from greenday

-reason why

Initial idea & changing of idea:

In the very beginning, we came up with an idea of focusing more on typography.
We planned to apply glowing effect to the words in the verse to create a different feeling of calm and peace to the audience. 

So, we proceeded with the finding of images and the making of vectors. After the discussion, members were assigned with their own jobs. Somewhere in the middle of the video production, Hau, who was in charged of the verse video making commented that the glowing effect was rather boring due to the long playtime of it.

So, we changed the concept of the verse and finally, we came up with the idea of vectors. We would use vectors as the concept of the verse.

~(Now, we move on to the roles and responsibilities of the members.)~

~LEE SIEW KHUAN~
I'm in charged of the cropping of images for the introduction part of the video.
Software used: Adobe Photoshop CS5
Tools used: Selection tool, Move tool, Quick Selection tool, Eraser tool, Brush tool,
Transform tool (enlarge, rotate, move, reflect), Quick Mask Mode.

Step1: Use 'Quick Selection tool' to select the part of the image that you need to crop out.
Step2: Use 'Quick Mask'> Select > Inverse
Step3: Use Brush tool to refine the edge of the selected area that you want to crop out.
Step4: Use Eraser tool to erase the part that is not needed.
Step 5: Change 'Quick Mask Mode' back to 'Standard Mode'
Step6: Press 'Backspace' to delete the unnecessary part and the image will be cropped out finally.

Images cropped:




~MOHD DANIAL ADHA B JAMAL~
I'm in charged of making a rose vector and a heart shape typography.

Software used : Adobe Photoshop CS4 and Adobe Illustrator CS4.

Tools used for Rose Vector : Selection tool , Pen tool , Direct Selection tool and Fill Color.

Tools used for Heart Shape Typography :  Move tool , Horizontal Type Tool , Eraser tool , Free Transform tool and Paint Bucket tool.

Rose Vector

Step 1 : Find A Rose Image and open in any adobe illustrator.

Step 2 : Select Pen tool (P) and start to trace the rose image,but before that is better for you to lock the rose image layer by pressing ctrl + 2.

Final : when you finish tracing and fill color you will have something that look like this 'Rose Vector'.

Heart Typography

Step 1 : Find a Heart Shape image and open it in Adobe Photoshop.

 Step 2 : Use Quick Selection Tool to only trace out the heart shape so it become a single layer

Step 3 : Use Horizontal Type Tool to type the word 'HEART' and align it nicely with the heart shape that we have trace like the above (remember to put the heart layer on top of the heart typo and set the opacity to 50%). Next use the Eraser Tool to erase the typo precisely so it will form a heart shape typo.

Step 4 : After finish erasing it will become like this

Final : Then you can just delete the heart image layer or just set the opacity of the image to 0% to see the finished heart typo.

~LEE CHING HAU~
I'm in charged of the video making of the verse part. Due to the sudden changes made, I've come up with some images and vectors to be included in the verse part of the video. Below are the vectors that i made using Adobe Illustrator CS5.
Same as above, Pen Tool is used for the tracing part of the vectors.
Images used for the tracing:

After tracing out the vectors, Reflect Tool is used to reflect the vector horizontally in order to suit the need of the video.

Vector in progress

Completed Vectors

The Balance that weighs the importance between the PAIN and the PRIDE.

The Crown that symbolizes pride.

Now, I will talk about the making of the video.

First of all, open up Flash CS5 and select ActionScript 3.0

Then, import all the images that is already prepared for the introduction to the library. 

Convert all the images into movie clip symbols in order to animate them.

Alright, now we can start animating these symbols now.

Firstly, right click on the frame and select Create Motion Tween in order to create movements for the layer. Click on the '1 kid' layer, drag the red play head to frame 300 (the frame that you want your introduction to end) and hit F5 to insert frame. 

After that, move the red play head to frame 39 and select the 3D Rotation Tool. Click and hold on to the green line and drag it down to rotate the image a bit to the left. A keyframe will automatically be created on the timeline whenever a motion is created on the stage.

Now, proceed to the animating of other images for the introduction.

After all the images are animated according to the timeline planned, move the red key head to frame 278 and hit F6 to create a key frame for every layer. This means that any motion edited after frame 278 will only be starting at frame 278. Then, move the red key head to frame 300 and select the 3D Rotation Tool. Rotate every images according to their sequences. 

We have already finished the animating part or the Introduction. Now, move on to the verse.

We will start with the first line of the verse. Again, import all the images need for the first line to the library and convert them into movie clip symbols.

Right click on the frame and select Create Motion Tween to create motion.

The animation starts with the appearing of the face. Lock all the layers except for the layers of the and the face so that you won't be editing the wrong layer without noticing. Drag the first keyframe to frame 334. Then, move to frame 485 and hit F5 to insert frame. Move back to frame 334 and select the 3D Rotation Tool. Rotate the image until you can only see a line on the stage.

Then, move to frame 401 and rotate the image back to it's normal state using 3D Rotation Tool. A keyframe  is created on the timeline.

Move the red key head to frame 458 and drag the image slightly a bit to the left to create a feeling of slow movement to the image. Then, move to frame 472 and hit F6 to create a keyframe. Move to frame 477 and change the opacity to 0%. This allows the image to disappear slowly starts from frame 472.

Same goes to the punch.

Now, we move on to the typography. Select the Text tool and create a text box on the stage. Type out the words 'WHAT'S', 'WORTH', 'FIGHTING', 'FOR', '?' with 'The Sickmen' font on different layer for each word. We will start by animating the word 'WHAT'S'.

Drag it to frame 375. Move the red key head to frame 485 and hit F5 to insert frame.

Then, move back to frame 375 and minimize the word. Enlarge the word at frame 386 to create the motion of enlarging to the image. 

After that, move the red play head to frame 471 and press F6 to create another keyframe. Move to frame 476 and decrease the opacity of the image to 0% to allow the image to disappear from stage.

Same goes to other words.

Then, we proceed to the blood splatter layers.

We want the first blood splatter to appear after the face is being punched. So, drag the keyframe to the frame 367 which is after the starting frame of the punch. Move to frame 485 and hit F5 to insert frame.

At frame 367, minimize the blood image as small as possible. Move to frame 368 and enlarge the blood to it's original shape. A keyframe is created. This allows the blood to splash out speedily. 

Same goes to other blood splatters.

Now, we have to animate the borders. Drag the timeline to frame 420. Move to frame 485 and hit F5 to insert frame. Move back to frame 420 and shorten the border to the max. Then, move to frame 454 and drag the border to the end of the stage. This allows the border to appear from none and lengthen to the left.

Move the red play head to frame 471 and hit F6 to insert keyframe. Move to frame 476 and decrease the opacity to 0% to allow the border to fade out naturally. Same goes to the right border.

Alright, now we have already finished animating the first line of the verse. We will move on to the second line. Drag the keyframe to frame 481. Move to frame 529 and hit F5 to insert frame. Make sure that the blood image is outside the stage at frame 481. Then, move to frame 502 and hit F6 to insert keyframe. Move to frame 503 and hit F6 again to create another keyframe. After that, move the red play head to frame 512 and decrease the opacity to 0%. This allows the drop of blood to drop down from the top part and fade out. 

Then, we move on to the animating of the other images of the line.

The skull will appear after the blood fades out.

After the skull enlarges and fades out, the word 'DYING' will pop out from the stage.

We have finished with the second line. Move on to the third line now.

We shall start with the face part. Drag the keyframe to frame 601 and move to frame 722 and hit F5 to insert frame. We want the face to appear from the bottom part of the stage. So, at frame 601, move the face image down and out of the stage. Then, move to frame 618 and drag the face image up.

Now, we will proceed to the other image of the line. The word 'BREATH' will appear from the right side of the stage and the bubbles will appear a while after the word appears.

We are now done with the third line of the verse.

We will proceed to the forth line. The image of the man will appear in the beginning.

Then the stamp chop will appear.

Following by the word 'SUFFOCATING' and the explosion behind.

We have finished animating the forth line, now, move on to the fifth line.

Fifth line starts with the appearing of the burning red blackground.

Then, following by the balance.

After that, the word 'PAIN' and the image of the crown will drop down from the top and reach the plate of the balance.

When the word and the crown image touch the plate, the balance becomes imbalanced and the plate with the word 'PAIN' on it starts to sink down and the one with the crown on it will be lifted up.

There ends the fifth line. We will now move on to the sixth line.

The word 'PLACE TO HIDE' is duplicated into a few layers with different opacity in order to create the feeling of depth. The words will appear from left and right side of the stage with a different speed and starting time.

Then, the cartoon image of a boy will appear from different area to show the hiding action.

The sixth line is done now. We will continue with the seventh line.

During this line, the word 'H', 'E', 'A', 'R', 'T' will fade in from small.

Then, it will appear bigger and lastly fade out to show that as though as the heart breaks and vanishes.

We will now move on to the eighth line, which is the last line for the verse.

The word 'YOU'RE IN RUIN' will pop out from the stage and fade out slowly into the dark.

The video for the verse is completed now.

~Mohamaad Qarawi~

Hello there, my task in the assignment was to make the chorus typography scene, and I was really excited to start animating the SONG. :D

P.S: I downloaded the font "28 day later" from this website http://www.1001freefonts.com/

So now,  let me share how I made the chorus scene :

these are my layers after finishing the assignment

 this is the library

  I started by importing the song layer into the stage, and this is the setting

 now i'm animating the number "1" , I used the Alpha effect to make it fade in and motion tween to move it from one place to another . Here I used the font "Tahoma" becuase it supports my design 

 here I'm animating the small number "1", I used the Alpha as well to make fade in and give it the effect, the font is set Anti-alias animation and made it TLF text to have more control to the text.

For this 1 I'm using a different font to make it a small looking.

 I'm doing the same process with the number "2" , using motion tween and Alpha effect and the the font is "Tahoma" .

 now I'm animating the word GUNS, I converted the word to symbol first because I'll make it rotate in another layer. I'm using the Advance colour effect because I've changed the word's colour after I converted it to symbol

I made another layer and adjust it both of the word above eash other, the timing has to intersect. I made another layer, because it's smoother in animating the rotation if I have a normal tween before the rotation.

 proceeded in animating the word GUNS

 here is the word "lay" in its first frame , I used the blur effect and the Alpha effect to make it fade in better. I used the font " 28 Days Later"( the link for the download is attached above).

 here is the process of the word's animation.

 the same process for this word. I used the alpha colour effects and the same previous font.

 now I'm animating the word "YOUR" with in the same previous steps.

 now I'm using the mask to animate the word arms i'll show the effects of it in the next few steps.

 this's how to make the mask. Click on the layer , using the right click and choose the option "mask"

 here is the effect that the mask tool provides to me when I'm using it. It give impact of cutting the word.

 now I'm animating the word UP

 for the word "fight", again I used the mask tool.

 

 again this the effect of making the mask tool

 now I'm going to start animating the yellow rectangle. I used the Advance setting again , because I changed the colours few times after I converted the rectangle to a symbol.

P.S: The layers arrangement is very important for the next few steps.

 proceeded with the yellow rectangle.

 here I'm animating the word "fight" to show using the blur filter and the 3D TRANSLATION TOOL (I forget to point at the tool hehe)

in the last frame, I increased the blur filter , if you unlock the filter , it'll give another effect of locking it. with the 3D translation tool I filled the screen with the big word.

 i did the same animation techniques to move the blue rectangle from one point to another

here I used the number 1 in the blue colour to bring it from the blue side to the yellow side, the font is Rockwell condensed.

 for the small 1, it moves from the big 1, remains for few frames in one place to give the audience chance too see it and it goes back to the big 1. I used a different font than the big 1

 here the small 1 is going back to the big 1

 now I'm animating the number 2. nuber 2 was different thatn number 1 in animation because it's bigger in size , so I made an Alpha effect to it

 and here it stops in the place I wanted with 100% Alpha

for this part of animating the word GUNS, I made different periods of frames and made the both words in different positions than each other in different periods of time. 

 here it changes

  and this is the last changing

 for the word "throw" I used the mask tool again to rotate it.

 to make the rotation around the corner, I moved the pivot point to the corner , so the rotation will be around it. To do that , use the FREE TRANSFORM TOOL and change the pivot point to the place you need.

 another MASKING techniques for the word up. 

TIP: sometimes we need to see what is below the mask to have more control to the animation, to do that simply click on the small square as shown in the picture, Flash will out line the mask for you, instead of hiding the mask to see below it.

 for the world "YOUR", again I used mask tool and animate it with motion tween

 for these few layers I used only one mask and arranged the layers below the mask layer. I create the masking layer by using the rectangle and convert it to symbol , then I can change its size.

 this is how the mas tool is making here.

 for the word "sky" , I animated two parts of it. The actual word and its shadow.

 this how you can create the shadow filter.

what I did is , first I animated the word in different postions for different frames, then I animated the shadow in different positions than the actual word but in the same frames , which made the effect of Shaking with Shadow.

 during the animation of the shadow. I changed the distance and the angel of the shadow 

 in another layer, I created the word "YOU" to animate separately of "U". I used the Classic Tween with it, because I found out that animating the rotation with motion tween will make the word take a different direction.

 this how the to create the Classic Motion

 during the rotaion of the word YOU. It could be the other side upside-down if I used the motion tween.

 for the and, I made the letters in different layers and adjust them all along each other on the stage and made a motion tween for them but in different timing so they make a special effect.

 I made the "I" part by make a symbol of one "I" and edit the symbol to duplicate the "I"

 first I moved from one point to another ( the right side of the stage to the left side< because English is read for left to right, so this should be the right way) and in the last frame I moved it a little bit lower than the first frame.

then I changed the ease to random east and changed the random ease to 100

 now I'm animating the end using the Alpha colour effect

 I here I used the same previous step with different timing.

 I made the hare rate by drawing it using the PEN TOOL and convert it to symbol. And animate it using the mask tool.

this is the finishing part of the scene.

And this is how I made the Kinetic Typography :D

~Mohd Ismadi Bin Hamidi~
My part for the assignment is to help in vector , and to edit the song which is 21 Guns by Greenday to fit appropriately to the timeline of our project and to make sure it is adjacent to the vector involve .

First of all this is the vector to use in the part where the words whats worth fighting for came out . It is edited in Adobe Photoshop CS3 and made of various splash , drips brush .

Second , i made a vector a womans mouth that would appear on screen when the words " Would it take your breath away " to imply breath . The Vector is made form Adobe Illustrator CS3 and the word BREATH is made out from Adobe Photoshop CS3 . 

In audio editing , i used the software Audacity for the job . Firstly , i imprted the mp3 to Audacity . 

Carefully selected the unnecessary part and discarded it . 

Then i combined two saparate parts into one part . Zoom it in to get better look of the loop and carefully detailing the part , and cut out unnecessary part. 

And export it as MP3 file . Voila !

 ~Pradeep Singh~
My part for this assignment was to make the buttons and combining the two separate videos together.

Firstly i started of by opening an action script 3.0 with the stage size of 640x480



Then i imported some images that i downloaded from the net and the individual picture of the members into my library.


The next thing that I did was to edit the stage size to 640x480


Then using the grunge image I had downloaded from the net.I set it as the background of the buttons and labeling it of course.


Then i made a vector image of  an M16



Then i imported it to photoshop where i added rust textures and vines onto it.


and i imported this image into my flash library

-continued-