This is our final assignment - blissful marriage which is a group work.
- Work Arrangement -
Members -Devroni (Leader)Chai PingNur Nadhirah AzizSabrinaNadhirah Nazarudin
Everyone of us did three scenes of the video, music edited by Devroni. At last, Chai Ping combine everything together by setting the timeline,adding transition to form this video.
We used Adobe Illustrator for the vectors we've done. Also, we used Adobe Photoshop to touch up our photos and some slides. Besides that, we also used audio editor to make the audio sounds better. Last but not least, and also use adobe flash for the transition effect, the movement of the scenes.
We used Adobe Illustrator for the vectors we've done. Also, we used Adobe Photoshop to touch up our photos and some slides. Besides that, we also used audio editor to make the audio sounds better. Last but not least, and also use adobe flash for the transition effect, the movement of the scenes.
Firstly, we are quite different a bit with the other groups. We get the inspiration from the theme song of national geographic, then we sing the song by ourselves and changed the lyrics to make it suitable with the global unity theme. Our concept is exactly following the same lyrics that we've edited, it is obviously shown in the lyrics. Love the mountains,love the skies, love the nature, buildings everything in this world, learn to appreciate it, no matter we're black, white or any other races, as long as we are living thing in this earth, we should unite to protect this environment from being polluted.
This is our lyrics:
" I love the mountains
I love the clear blue skies
I love big bridges
I love when we unite
I love the whole world
And all its sights and sounds
Boom de yada, boom de yada
Boom de yada, boom de yada
whoever we are
No matter black or white
we love the whole world
And all its craziness
United we stand
No matter who we are
Boom de yada, boom de yada
Boom de yada, boom de yada
United we stand "
SKIES PART
Photoshop
Open the background file.
Open a "conversation box" picture, then write "I LOVE" by dropping the shadow and adding "stroke" to it. (PS/: I use this method by using PS because i have to set the stroke to it,for me is more easier)
Draw this clouds by using pen tool (done by using Adobe Illustrator)
Then import it in PS. Duplicate and set the opacity lower to make it more like sky.
Add the stroke to each fonts. Add different blue colors of gradient to "BLUE".
Flash
Create a new layer for background.
Create a new layer rename as "Love". Create motion tween. And create 4 new keyframes and then turn the font to left and right to show the movement.
Create new layer at frame 17. Rename it as "THE". Same method like "LOVE". Create motion tween. Set new keyframes to any 4 positions as long as it moves.
Create new layer for CLEAR and BLUE. Since everything are done by using photoshop, so we just repeat the same method..move the font left and right...
Create new layer for "skies". Then repeat the same method again.
Now for the clouds, set lower alpha for a few clouds to make it wont look that boring.
Resize the size of the image as well.
Here is the final look of this sentence.
------------------------------------------------------------------
LOVE BRIDGES PART
The final part:
For the ‘I love big bridges’ part, I started with using the typo ‘I’, I used ‘Motion Tween’ to move it from down to up. Then, the ‘Love’ one, I drag it to the stage, putting it upright, then I used ‘Motion Tween’, I used the ‘rotate’ tool and made it fell down to its left side!
Next, I typed ‘Big’ with a big font to emphasize the size.
Then, for the ‘bridge’ part, I drag the vector from the library to the stage, I used Motion Tween to make the size of the bridge expand gradually.
The bridge vector is done using Adobe Illustrator!
From smaller to bigger size, using the ‘Transformation’ Tool as I adjusted the scale.
The final part:
Create another layer to extend longer the "zoom in to the bridge"part.
Set a new keyframe then use transform tool to resize the bridge more bigger.
The bridge is gone in the scene. Look at the highlight part which is the papermatt become blur, this is for transition of the next phrase.
------------------------------------------------------------------
I LOVE WHEN WE UNITE PART
All images in this scene were converted to symbols, thus enabling 'Motion Tween'. The orange arrows indicate the direction of movement/animation.
Symbol 'I' is brought in from the left. The heart-shape symbol appears and is enlarged from a smaller size.
The heart-shape symbol is then made transparent at it's largest size, enabling view of the word 'LOVE' on the lower layer.
The heart-shape symbol is shrunken again, and the transparency is increased until the heart-shape fades away completely. At the same time, the word 'WHEN' slides in from the right.
The word 'WE' drops from above, stopping just above the images of people lined up that appears at the same time.
This is how it turns out.
The final step is to animate the 'arms' of the people, so it swings upwards and 'links hands' with each other. To enable easy movement animation, I use seperate symbol images of the 'main body' and 'arms'. This is so I can move the 'arms' symbol as a seperate object by itself.
Final edit:
Symbol 'I' is brought in from the left. The heart-shape symbol appears and is enlarged from a smaller size.
The heart-shape symbol is then made transparent at it's largest size, enabling view of the word 'LOVE' on the lower layer.
The heart-shape symbol is shrunken again, and the transparency is increased until the heart-shape fades away completely. At the same time, the word 'WHEN' slides in from the right.
The word 'WE' drops from above, stopping just above the images of people lined up that appears at the same time.
This is how it turns out.
The final step is to animate the 'arms' of the people, so it swings upwards and 'links hands' with each other. To enable easy movement animation, I use seperate symbol images of the 'main body' and 'arms'. This is so I can move the 'arms' symbol as a seperate object by itself.
Final edit:
Set a point at frame 323 to make the blur opacity becoming lesser.
Is time to show the next sentence! Now we want to make the effect like turn the page.
Set a keyframe at 355 for the papermatt getting ready to move to left. Also, drag the "background"(which is the next sentence background layer) at frame 355. Its means when the current layer is moving, the next layer will be seen as well.
Near to the end of "papermatt" layer, be prepare with "global spinning" and "background". The next motion is coming up next!
------------------------------------------------------------------
AND ALL IT SIGHT AND SOUND
------------------------------------------------------------------
HERE IS THE BOOM DE YA DA PART
This is the 1st slide of the ‘boom de yada’ part. I added green background and the word boom in blue.
------------------------------------------------------------------
Flash
The word 'WHO' is anchored at the bottom corner of the symbol. Then using Motion Tween, it is semi-rotated downwards, so it ends up in a horizontal manner. At the same time, the word 'EVER' slides in from the bottom of the screen, ending up right next to the word 'WHO', forming the word 'WHOEVER'. Timing is crucial so the full word pieces together at the same time.
We use the images of our own faces for this scene. The images appear above the word 'WHOEVER'. The animation used is custom spinning, enlarging the images at the same time. Also, the symbols 'W' and 'E' spins as it appears as well, forming the word 'WE' once it stops.
The word 'ARE' slides in from the right, alligning nicely with the word 'WE'.
This is how it looks like.
All the three words 'WHOEVER', 'WE' and 'ARE' is then 'pushed' to the left, replaced by the word 'NO'.
Our faces images is then shrunken gradually. At the same time, the word 'MATTER' is brought downwards.
Like so.
The faces images are then subtly replaced by black-and-white versions of the same images. The words 'NO' and 'MATTER' are brought down, replaced by the word 'BLACK'.
It ends up like this.
The word 'BLACK' is then squeezed inwards.
The word 'WHITE' subtly appears, and is enlarged. This makes it look as if the word 'BLACK' transforms into 'WHITE'.
This is the final product!
------------------------------------------------------------------
AND ALL IT SIGHT AND SOUND
For the “And All it Sight & Sound”.
For the ‘AND’ word, I used Motion Tween to make it move from the middle of the stage to the left side of the stage, and at the same time making the size getting bigger gradually when it reached the left side.
Using the ‘Transformation Tool’ as I adjusted the scale.
Then, still in Motion Tween mode, I made the ‘AND’s size getting smaller, using the ‘Transformation tool’ as it moved upward a bit.
Next, for the ‘ALL’ word, I used Motion Tween again, as it moved smoothly from the right straight position; I made it rotated to its left side, making it upside down!
Then, for the ‘IT’ word, I used Motion Tween to make it move upwards from the middle of the stage.
After that, for the ‘SIGHTS’ word, I used Motion Tween again, to make it move from the left outside the stage, moving in left motion, inside to the middle of the stage!
Next, for the ‘SOUNDS’ word, I purposely placed the word upside down.
Then I used Motion Tween, by Transformation tool; the rotate tool, to rotate it to the supposedly right form just to make it more fun!
After that, I used Motion Tween, by Transformation tool; the scale tool, to resize it to be bigger.
------------------------------------------------------------------
HERE IS THE BOOM DE YA DA PART
This is the 1st slide of the ‘boom de yada’ part. I added green background and the word boom in blue.
Then I added the word ‘de’ with different color and different type of font, so that it look colourful and interesting.
Then the ‘ya’ comes out, and the same thing, different font and color to make it look colourful.
After that, the ‘da’ comes out, with different type of color and font.
The 1st slide for ‘boom de yada’ is as shown above. I used motion tween to move the fonts from one position to the other.
Like rotating the font, enlarging the font from small to big and etcetera.
I also used the motion presets that are valid in the Flash player.
1. Now the 2nd slide of ‘boom de yada’ begins. For now, I use orange color as the background. The ‘boom de yada’ needs to look outstanding because it repeats 8 times according to the lyrics. Therefore, I need to make sure the 8 slides looks interesting and different from the other slides.
Next, comes the ‘de’. As seen on the screen, I use Cursive type of font to look different from the other fonts.
Next, comes the ‘de’. As seen on the screen, I use Cursive type of font to look different from the other fonts.
For the ‘da’ it’s also different font and color. And for this, I used the blur effect to start with, then slowly,
the blur fades, and you can see a clear ‘da’.
Now, here comes the 3rd slide of ‘boom de yada’. As you can see, I change the background color, again.
And of course, I change the font as well. The ‘boom’ comes out small.
Slowly, with using motion tween, I enlarge the ‘boom’ so it looks BIG, like a big BOOM on the screen.
1. Ok, now, I add the ‘de’, the ‘ya and the ‘da with different type of colors and fonts as usual but these three looked as if it is paste on top of the word boom. Also by using motion tween, I rotate and also used drop shadow for the ‘da’.
Right now, we are in slide 4 of ‘boom de yada’. So, as you can see on the screen, the BOOM looks really big, even bigger than the screen, then as the video is played, the BOOM fits in the pink background.
So when it fits in the background, it’ll look like this.
Then comes the ‘de’ with different type of font and color. Also used drop shadow for this.
Then the ‘ya’ comes out, and the ‘da’ comes out.
Notice, the position of the fonts in every slide is different.
This is to look more interesting, so that it doesn’t bore the viewer’s eyes.
Now in slide 5 of ‘boom de yada’, I use a yellow background, and the ‘boom’ is coming from the bottom and rises up.
Then the ‘de’ appears.
Then the ‘ya’ appears from an inverse form, by using motion preset, I inverse the word,
and then inverse it again, so that it look cool.
Then the ‘da’ comes out. Again, multiple colors are used so that it looked cheerful and interesting according to the song.
Now we are in slide 6 were the background is purple. For this time, I used motion preset by making the font moving from right to left.
This time it looks different as I want to make the animation more exciting. As usual, multiple fonts and colors are used.
In slide 7, I used a grey background, and started the ‘boom’ with red, then the ‘de’comes in from left, ‘ya’ comes in from right and the ‘da’ comes from right.
The last slide, which is the 8th slide, I use green background, and blue colored ‘boom’.
Then, the ‘de’ starts popping out, using motion tween.
Then the ‘ya’ comes in and lastly the ‘da’ completes the slide.
------------------------------------------------------------------
WHOEVER WE ARE, NO MATTER BLACK OR WHITE PART
photoshop - COMIC PHOTO EFFECT
photoshop - COMIC PHOTO EFFECT
open the image.
The first step will be to duplicate the original photo layer by pressing CTRL-J. Rename it as "soften".
As it’s name implies, we will now soften this layer using a blur filter. Normally I prefer the Gaussian blur but for this tutorial we need the edges of our subject to stay crisp so we’ll be using the Surface Blur filter. Click Filter>Blur>Surface Blur from the main menu to bring up the Surface Blur dialog box.
For this particular image size I’ve found that a Radius of 5 and a Threshold of 20 works nicely. Click OK when you’re done
Create a new layer, rename it as "desaturate". Choose Image>Adjustments>Desaturate to strip the color from the layer.
Create a new layer by clicking the Create New Layer icon at the bottom of the layers palette. Name this layer- Halftone.
Now we need to load the luminosity of our image as a selection and the easiest way to do this is to switch over to the Channels tab in the Layers palette and holding down the CTRL key while clicking on the RGB Channel’s layer icon.
With the luminosity loaded as a selection, click back over to the Layers tab in the Layers palette and make sure that the new Halftone layer is selected. The Luminosity of the image is most simply described as the lightness of the image. What we actually want to do however is select the exact opposite (the darkness of the image), so lets invert the selection by choosing Select>Inverse from the main menu or by pressing the keyboard shortcut Ctrl-Shift-I.
Press the D key to set your foreground color to black and then fill the selection by pressing Alt-Backspace. Now we can release the selection (ie. deselect) by pressing Ctrl-D.
Close the eye icon of top of the two layers. Choose "soften layer".
The Soften layer will be acting as the color layer for the comic book effect, but at the moment it contains far too much detail so lets use one of Photoshop’s Artistic filters to consolidate the color a little. From the main menu choose Filter>Artistic>Cutout.
The Filter window will appear with the Cutout settings visible. Set the number of levels, simplicity and fidelity yourselves (this is depend on how you think it looks smoothly)
After done with the "cutout", set it as "soft light".
Click again for Filter > Artistic > Poster Edges.
The Desaturate layer will now become the black outlines for our comic book effect. We will be using another of the Artistic filters called Poster Edges. From the main menu choose Filter>Artistic>Poster Edges to bring the Artistic filter window back up with the Poster Edges options visible. Set the number by yourself (depend on how "comic" you want to be)
After done with Poster Edges, choose "pin light".
We’re now done with the Desaturate layer, so lets click up to the Halftone layer and make it visible by clicking in the empty box to the left of the layer thumbnail just like we did with the Desaturate layer.
This effect has a few steps so follow along closely. First lets load the layer as a selection by holding down the Ctrl key and clicking on the layer thumbnail in the Layers palette.
With the layer loaded as a selection click the Create Layer Mask icon at the bottom of the Layers palette to convert the selection to a layer mask.
Now it’s time to create the halftone dot pattern that will complete the comic book look for our photo. From the main menu choose Filter>Pixelate>Color Halftone. For the pixel you choose is actually depend on how big is your picture, the bigger picture need more higher number of pixels.
Choose the pixels that suitable for your image. The rest just remain the same.
This is how the picture looks like!
Flash
The word 'WHO' is anchored at the bottom corner of the symbol. Then using Motion Tween, it is semi-rotated downwards, so it ends up in a horizontal manner. At the same time, the word 'EVER' slides in from the bottom of the screen, ending up right next to the word 'WHO', forming the word 'WHOEVER'. Timing is crucial so the full word pieces together at the same time.
We use the images of our own faces for this scene. The images appear above the word 'WHOEVER'. The animation used is custom spinning, enlarging the images at the same time. Also, the symbols 'W' and 'E' spins as it appears as well, forming the word 'WE' once it stops.
The word 'ARE' slides in from the right, alligning nicely with the word 'WE'.
This is how it looks like.
All the three words 'WHOEVER', 'WE' and 'ARE' is then 'pushed' to the left, replaced by the word 'NO'.
Our faces images is then shrunken gradually. At the same time, the word 'MATTER' is brought downwards.
Like so.
The faces images are then subtly replaced by black-and-white versions of the same images. The words 'NO' and 'MATTER' are brought down, replaced by the word 'BLACK'.
It ends up like this.
The word 'BLACK' is then squeezed inwards.
The word 'WHITE' subtly appears, and is enlarged. This makes it look as if the word 'BLACK' transforms into 'WHITE'.
This is the final product!
------------------------------------------------------------------
LOVE THE WHOLE WORLD PART
Photoshop
creating the vector for the globe
created the vector, now filling in the colors
Flash
animating the globe using motion tween
animating the typography using keyframes
After that, Create a new layer (minus D) at keyframe 740.Create motion tween. And delete the "D" to make it disappear.
Use the same method onto "minus W" layer.
Use the same method onto "minus L" layer to show one alphabet by one alphabet disappeared.
Now let's move forward to "O". Create a new layer as "O big font". We need to make the effect like zoom in to "O". Start the layer at keyframe 747.
Create another keyframe at 750, then rotate the "O" and resize it bigger.
Since i dont have any special method to cover the side parts, so i create another two layers which are using the background paper to cover the font behind. So the papers started at keyframe 750 as well.
Now really look like we zoom in the "O" and continue with another lyrics sentence.
------------------------------------------------------------------
CRAZINESS PART
photoshop
Open splash image.
Use "magic eraser tool" to erase the white background of the image.
Click "Hue/Saturation" to change the colour of the splash.
Change to any color you want. Adjust the saturation,hue and lightness.
This is the first splash i did.
Continuously do a few more splashes. Done!
Flash
create a new layer for "bg"
create typo layers for "and", "all its" and create motion tween.
create another two layers which are "and_1" and "all its". These are to whiten the font part, just like karaoke lyrics, follow exactly the song rhythm and highlight the part.
This is more obvious for you to see the difference.
create another layer for "craziness" after "and all its" layer.
Now is splash time! create a new layer for splashbg which is lower down the alpha, set the keyframe at 45.
A lot of splashes are coming up! create new layers for each. And arrange it orderly to make it look smooth.
Create...until splash 10. This is the final one (splash10). Create motion tween for splash10 layer.
At keyframe 48 to keyframe 56, need to set the "color effect" from original to changing color. Dont forget tho resize the splash10 to make it look bigger in the end. (look at the highlight box)
------------------------------------------------------------------
UNITED WE STAND AND WHOEVER WE ARE PART
longer the frames at 839. Create motion tween.
We're going to make this transition look like the paper is flipping and extruding to the left side. The current layer is extruding to the left side, and the next sentence is prepare to show up. Start the next line at keyframe 843.
Can see the last keyframes of current layer? The layer is dissappear from the screen, so just flatten the paper and the font as much as you can.
WHOEVER WE ARE PART
I created the vector ‘earth globe’ to show global unity using Adobe Illustrator. Then, I imported it into the Flash library.
After I dragged it into the stage, I placed it right at the middle of lower part of the stage.
Then, I used Motion Tween to make the globe moved smoothly upwards to the middle of the stage.
At the same time, I used Motion Tween again, ‘ROTATE’ form, to make the globe rotated for the whole scene.
For the ‘no matter’ part, I used Motion Tween, to make it slide inside of the stage, right to the middle of the stage at the upmost part, right above the spinning globe.
Then, for the ‘who we are’ part, I used Motion Tween again, as I made the words came sliding into the stage, right below the ‘no matter’.
------------------------------------------------------------------
HERE, THE BOOM DE YA DA PART REPEATS!
------------------------------------------------------------------
FINAL PART
Create a new layer rename as "bgwall" - the green background image. Create motion tween and start the layer at keyframe 1045.
Now, move the bgwall from left to the center of the screen, so have to create keyframe at the highlighted part.
Im going to do the alphabet shown up one by one. so need to create a few layers for "U.N.I.T.E.D" (total 6 layers). After created, arrange them orderly.
Layer "united" is the final layer for United font. Then create motion tween to make it move from bottom to center. (PS:/ you can adjust this by ur own, see how long you want it to be)
Use the same method as "UNITED". Create two new layers for "W" and "E".
This is how it looks like. Let's move on to another layer - "Stand". Create motion tween, coz i'll going to make it like pop out from the scene. Start the "stand" layer at 1114 frame.
At 1119, everything is at the correct position. So the last constant point of "United" is at 1119 frame.
I have to create a new layer - "stand2" to specialise for pop out part. So start the layer at 1128.
At 1137, i created a new layer as "white", that is to cover the font behind.
Set the "alpha" from lower to higher.While the font is popping out, the background will becoming white also.
ACTION SCRIPT PART
FINALLY, we used the 'STOP' Action Script to make the video not loop.
Create a new layer for "action". Rename it as "action", (go to “Window" -> "Actions") to add scripting for the final part of the flash vid.
DONE!
