Task 4 - Creating an Animated Banner (Typography)

For task 4 I had to design a number of flash banners for my website using typography and simple shapes. The size of the stage from my animations is 600 px by 200 px.   

Design 1 –

For my first design I just wanted to focus on animating the typography. Using the colours that I had used for my header design in task 2 I put some text onto a back ground. Then by converting the text into a symbol I then changes the alpha so that the text would fade in and out over the animation.

These are screen caps from my animation.

Frame 1

 Frame 23

 Frame 45

This animation is 45 frames (3 seconds) long. At from 23 the alpha for the text is at 100%, it then fades back out again to frame 45. When played on a loop the text looks as if it is fading in and out continuously.     

I do like the effect of the text fading in and out. However I would like to experiment further to see how else I could animate the typography.

Design 2 - 

For my second design I wanted to experiment with masks to see how I could animate the text.

For this banner the text remains still, however I wanted to see if I could make the text look like is was gleaming to still create movement.

I turned the second line of text into a masked layer to that it would only show part of whatever was behind it.

I then added this image (above) behind the text layer and created a tween so that it would move behind the text layer. You can see from this screen shot the tween that which the image will move along.

And below is a screen shot from the actual animation showing how the image can only be seen through the masked layer.    

 I do like this effect however if I were to extend this design I would make the image bigger so that the whole of the line of text could be seen for the length of the animation rather than only part of it been visible at a time.

Design 3 -

I liked on my first design how the text faded in and out so I wanted to extend this further.  

So for my third design I wanted to focus on animating two layers of text so that they moved together at the same time.

Below are screen shots at various frames throughout my animation to show the fading out of the text.

Frame 1

 Frame 6

 Frame 15

 Frame 23

Frame 45 

These screen shots show the text fading in and out through out the animation by changing the alpha of the diffrent layers of text.

I do like this fade in and fade out effect and would like to experiment with it further. However for my next task I will try to extend my designs by incorporating images into the designs.