In assignment 1, we were given a task to design a 1 Malaysia poster based on our understanding. This is what I had design:
In this post, I'll be explaining about the process in which I animate the poster so that it can be a motion based poster. Here's the tutorial:
1) Create a new document in flash, using the ActionScript3.
2) Change the properties to 240 x 320 pixels with frame rate 17 per second.
3) Open up library and drag the starry sky background onto the stage using the selection tool. By pushing Ctrl, drag the frame from 1 until frame 123. Name this layer as "starrysky".
4) Create a new layer, name it as "powstripe1". Drag the powstripe1 image from the library and place it slightly at the bottom right corner of the canvas. Go to Modify > Convert to Symbol > Movie Clip. Next, adjust the frame time by pushing Ctrl. I place mine at frame 7 until 15. Then, select frame 10 > right click > create motion tween. Drag the image by using the selection tool until it is placed at the top right corner of the canvas. Now, you will have the image moving from bottom to the top.
5) Create new layer and drag the pow1 image from the library using the selection tool and place it just above the "powstripe1" layer. Name this layer as "pow1". Adjust the frame by pushing Ctrl to frame 14 until 18.
6) I apply the same technique used in 4-5 for the rest of my fireworks image by altering the frames slightly different for one another. (To create a real firework effect).
7) Create a new layer and drag the image of lantern and candle from the library onto the stage. Rename the layer as "lantern n candle". Go to Modify > Convert to symbol > Movie Clip. Adjust the frame to 1 until 40 by pushing Ctrl. Next, by highlighting frame 40 go to Properties > Color Effect > Alpha. Change the Alpha to 100%. Then, highlight frame 1, go to Properties > Color Effect > Alpha. Change the Alpha to 0%. Now you will have the image slowly appearing until frame 40. To avoid the image from disappearing at frame 41, right click on frame 41 and insert keyframe here. Drag the frame from 41 to 123 to lengthen the span time.
8) Create new layer and drag the ketupat stripe image from the library. Place the image above the stage. Rename the layer as "ketupatstripe". I apply the technique used in 4 to create a motion tween( add motion tween effect at frame 61). Adjust the frame to 40 until 123.
9) Drag the image until it is placed at the middle of the stage.
10) Create new layer and rename it as "fonts". Drag the font image from library and place it below the "ketupat stripe" layer. Adjust the frame span time from 42 to 61. Apply technique no 7 to this image (the Alpha is change at frame 42 with 0% and at frame 61 with 100%). To avoid the image from disappearing at frame 62, insert keyframe here and drag the span until frame 123.
11) Finally, create new layer, drag the ketupat stripe 2 from library and rename it. Apply technique no 4 to this image by adjusting the frame span from 97 to 123. Apply the motion tween effect at frame 109 and you're done.
Unfortunately, I can't upload .swf file into this blog, therefore I can't show you the final product. But I did send the final product to Madam Lydia (my lecturer) though. I just hope that she receive my file. That is all from me, thank you for reading.
Copyrights:
1) Firework vector from the ForDesigner.com.
2) Other images are created by me in Adobe Photoshop by altering the original image.
