Wednesday, May 18, 2011

Musical Typography process...

Open Adobe Illustrator > pen tool > draw the shape of phone by using pen tool > go to fill > insert colour
Repeat the same step using the same tool > draw a drum and it's stick > filled colour



Start > programme > Audacity > file > import > audio or press ctrl + shift + I > select file > click the Selection Tool > drag the desired part > It is easier to edit when splited, use shortcut Ctrl+Alt+I or manually go to Edit > Split New > repeat the same step by selecting the last part of the music > Delete the middle part of the music by clicking the small 'x' icon next to the name of the music > Selection Tool > select the end of the first part of the music > Effect > Fade Out > select the second part of the music and Fade In, Effect > Fade In > repeat the same step to it does not sound awkward


Open Adobe Flash > file > new > select actionscript 3.0 > select ok >go to Properties > saiz > select Edit > dimension : 550 px (width) x 400 px (height) > press ok


properties > stage > choose coolour #FED402


File > import > import to stage or ctrl + R > select file > press open > the file will be automatically transfer to the 'library' > drag the file anywhere on the stage> once you draged, it will be disappeared but it will appear at the timeline


All the words will be converted into a symbol : select word > press ctrl + F8 on your keyboard > create new symbol will pop up > add name , type : movie clip, Folder : library root > press Ok > the symbol will appear at library


To create motion on your stage used keyframe on your timeline > select one point on the timeline > right click > insert keyframe > drag symbol to your stage > gray line will appear with a black dot > go to the next frame at the same layer repeat the same step > move the symbol at other place on the stage > press ok > the symbol will create motion


To create motion used motion tween : select one point > right click > insert keyframe > drag symbol to your stage > gray line will appear with a black dot > right click > click create motion tween > gray line will chance to blue line > select any point on the blue line > move your symbol > dotted line can be seen on your stage > small diamond shape will appear at the blue line > do the same step to create verity motion > press ok to play


Name all the symbol at timeline layer > double click > rename > press enter on keyboard > file > save as > select place > ok

Sunday, March 13, 2011

Assignment 2 - Motion Based Poster, the process

Well, unfortunately I forgot to print screen during the process of making this motion based poster, so, let see what I remember...

First of all, the size of the stage required for this project
is 320 by 240 px and the stage colour I used was
#006699.







Before beginning anything, I add frame by pressing F5. In the early stage, it does not matter where you put the frame. I can just add more later on. After adding the required frame, using the Text Tool, I type 'Boundaries of the' on the first layer outside the stage. I wanted to make the sentence to move into the stage later.
Next, right click on the sentence and choose Create Motion Tween and drag the sentence into the stage. This will make the sentence to move into the stage when it is animated.
I did the same method for each line of sentences where each line is in different layer.
After, by using the Selection Tool, select all of the sentences. Again using the motion tween, transform all of the selected layers by rotating them about 90° and ease them to the right. At the same time, enlarge the fonts using transform about 200%.
The white sentences also used the same method as the previous red sentences.
After all of the sentences aligned as desired, select all layers, right click and choose Break Apart after that choose Distribute To Layers. This allows me to move each of the letters in different layers.
First choose one of the separated letter and click motion tween. In stead of making the letter to move straight up, I decided to curve the motion. By using the Selection Tool, drag the motion path to make a curve.
I repeat the previous method for the rest of the red letters.
Continue after the final red letter, move the white letter the same way the red letters did before.
After the 'B' is moved, I made the 'L' follow the 'B' to make the letters look like a snake moving up.
Now for for the bird or the Parrot. According to my first assignment, I use a Parrot because it has 4 different colours which usually present in most flags, red, yellow, blue and white. I use Adobe Illustrator to draw the bird and both of it's wings. The bird as well as the wings are basically random letters clump together only the wings have 3 different colours. The body, right and left wings are drawn and saved in 3 different files to avoid overlapping.
Back to Adobe Flash. After I finished with the Illustrator, I imported the body, the right and the left wing into the library. Then drag the body, the right and the left wing on to the stage on a different layer. At the same time, I created another layer for the white typographic tail drawn in flash by using Text Tool.
I wanted to make the bird flying as the camera pans down. I just select the layer containing the body and the tail and motion tween them and drag them down until the all parts of the bird disappear from the stage, in this case, outside the stage.
For this part, I distorted the motion path by using the Subselection Tool to make the motion path curve even more. The Selection Tool can only produce an arch of motion path. By clicking the Orient To Path option under Rotation allows  the bird to move head first according to the motion path.
The white letters were motion tweened the same way as the bird did.
By selecting the desired frame, I transformed the bird, the right and the left wings as well as the letters by enlarging them to make them move as if if fly towards the screen.
For the final part of this motion based poster, I put my previous poster made in Adobe Illustrator, import them to library and drag it to the of center of the stage. At the same time, right click the image and choose motion tween. Select the 1st frame of the image's time frame and  change the alpha channel from 100% reduce it to 0%. After than select the 7th frame and change the alpha channel from 0% to 100%
I did the same method as the previous method to the white sentences. Finally, I click the last frame and open the action script and type 'stop();' to prevent the animation from looping.

Tuesday, March 1, 2011

Final sketch

I decided to do a parrot surrounded with typography...or at least the parrot is. But it took so long to adjust the font, spacing and the arrangement of the sentences, as in where to place them and what size should they all be.
Since I'm not allowed to use or copy other images, I draw the parrot(roughly...) standing on the globe with words in front of the parrot. I was planning to use the letters and arrange as well as colour them to create an image of the parrot and the globe.

Linking through Art

I was assigned to do a poster of '1 Malaysia' as the symbol of multiculturalism. Most of the ideas I came up were simple and have the BIG '1' in every sketches...but it hit me. Instead of doing the big '1' along with the colours of the flag, why not I do something else that have that particular colours.
So, I choose a Macaw, also known as Parrot. This species of parrot are brilliantly colourful. A Macaw usually has bright red, yellow, blue and green feathers.