Task 5 - Creating an Animated Banner (Graphics)

For this task I wanted to incorporate images into my flash animations.

Design 1 - 

I used images that I collected when carrying out my reserach for task 2.

 I chose this image for my first design. I changed the colour of the image so that it would tie in my the theme of my website as you can see below.

 I firstly just wanted to experiment by fading the image in and out with the text as i had done on the privious task.

You can see from the print screens below the alpha of the image incresing through out the animantion so that it fades in and then back out over 45 frames (3 seconds).

Frame 1

 Frame 11

 Frame 20

As you can see from the print screens above the image and text fades in up to frame 20 and then begins to fade out again until the aplpha of both the image and text is at 0% again in frame 45.

When played on a loop it looks like the text and image are fading in and out continuously. 

Design 2 -

For my second design I wanted to experiment with a number of different images to create a longer animation. This time I used four images which you can see below.

Below you will see screen shots at various frames of my animation.

Frame 1 

 Frame 5

 Frame 15

 Frame 25

 Frame 35

The different images and the text fade in and out over 10 frames each. I do like this banner more than my previous banner because I feel the different images makes the animation more interesting to look at and may lead to more interaction from the viewer as they may notice that there is are different images used.

However I feel that this animation is a bit too fast and would be more effective if slowed down a bit so that the viewer had more time to register the different images used within the animation.    

Design 3 - 

For my last design for this task I wanted to look at experimenting with fading the image in but also look at increasing or decreasing the size of the image and text throughout the animation to give it more depth rather than just changing the alpha.

I began by making both the image and text really big so that they were bigger than the stage it’s self as you can see from the second screen shot below. Also in frame 1 the alpha for both the image and the text is at 100%

Below are screen shots showing my animation at various points.   

Frame 1

 Frame 10

 Frame 28

 Frame 40

 Frame 45

As you will see over the 45 frames the size of the image and text decreases over the tween to fit the stage and also the alpha increases too.

I did quite like this effect however I am not sure if an animated banner is exactly appropriate for my website. Although I do think flash can really enhance a web page, so I will look into designing another flash animation that will be more appropriate for my design.