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.  



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.

Designing my Navigation Bar

In a preivous post i looked at a number of diffrent navigation bars to see how styling with css and images could be used to create intresting designs.

Design 1-

For my first design i just wanted to keep it really simple and just change the colours and also the style of the text when hovered over to show that it is a link.

The above print screen shows how i changed the colours of the navigation bar to match the colour scheme of my website. I just chnged the colour of the background and the text but i wanted to experiment by adding a boarder.

I added a yellow boarder to the right of each link to seperate each link.

I then experimented by adding a full borderaround the whole button. I think that the border is usful for seperating each button, however i do not really feel that it is appropriate to my webpage as there are quite a lot of strong lines within the back ground image and anymore may look too much.

 I then experimented with changing the style of the text when the link is hovered over. This is very simple but i just wanted to experiement with this for my first design just to see how easy it would be to change the design using CSS.

Design 2 -

For my second design i wanted to look at changing the colour when hovered over. So i changed the colours around so it appears inverted when hovered over. i actually prefer this much more than just changing the text as this is much clearer that it is actually a link.

Design 3-

For my third design i wanted to experiment with adding these images. I quite liked the idea of changing the colours before.

I created these opposite images to use in my nav bar. I plan to repeat the first image across the whole nav bar and use the seconde image when hovering over the link.

And these print screens show the images im use in my web page. I am really pleased with this design actually and think i will use it in my website. I love how using a simple image can be really effective.

Adding the Background Image

Adding the background image-

For My backgorund image i wanted to use the Gordon tarten that inspired my website. Below is the image i am going to repeat across the backgorund of my webpage. 

The print screen below shows the image inserted into the back ground, however i will need to write a rult to repeat the image across the whole back ground so it covers the whole page. Repeating a smaller image across the page will make the website quicker to load rather than using a large image to fill the whole page.  

The print screen below shows after i have repeated the image across the page to fill the background.

Here i added a rule so the image would only be repeated across the x-axis along the top of the page. I just wanted to experiment with diffrent ways i could manipulate the background of my website just by re-writting the repeat rule with the stylesheet.

And here shows the image just beign repeated across the Y-axis. I just changed the rule so that rather it repeating across the X axis it does along the Y.

After looking at how i could make images transparent to blend into my webpage when designing my footer i wanted to look at diffrent ways I could make the image blend into the back ground.

I faded the image out using a green colour on photoshop.

Below shows how just by making the back ground colour the same as the colour i used to blend out my image it looks like the image simply just blends into the back ground. This is a very simple yet effective technique to use if you want an image to blend into the background colour and look seamless.



Adding the background image/colour to content-

After looking at the main background image i wanted to look at the background i was going to use for the content which is the main body of my website where all of my important infomation will be.

For my content background I did quite like the idea of using a transparent image so that the tarten background could still be seen through.  

The above print screens shows me adding the transparent image into the content container within the style sheet. I do like the idea of using a trasnparent image for the background. However i do think that this particular background image is very strong and distracts away from the actual text quite a bit. So i think i may opt for a solid background in order for the background image not to distract away from the text.