Assignment Number 5- Adobe Flash & Animation

I have been set a new Assignment in Adobe Flash. It is a live brief, producing Animation/content for an online toy store called Treasure Island Toys. The content is designer for the children and parents/ carers to the site more frequently and for longer visits, to build brand awareness and loyalty. The company sells toys to children of all ages, however this specific projects target audience is children between 5 and 7 years of age.

Some characters for the Animations have already been created. There are nine short children stories have been made up using the created characters.I am then expected to produce illustrations with animated flourishes to accompany one of these stories. I am allowed to create artwork in Illustrator and/or Flash's drawing environment, and create the animations and interactivity in Flash. These stroies have to be specifically created at 845x 475 pixels. They should all have a voice over reading the story with a suitable amount of text to explain the story. The users should be able to move to the next and previous page or start from the beginning from anywhere within your your story.

Once all the stories are complete in Flash, i need to design and build an interface that can display all of the stories. The homepage will carry links to all the other created flash animations. I will build this interface in html and lay it out using css.

Browser Testing

I have tested my site in the main browsers. All results came out successfully, however, i had to make seperate style sheets for I.E.

This is a screen shot of the website, viewed in Internet Explorer. I did have a problem with my footer, coming up further than it was intended to.

 

This is a screen shot of it in Safari, all works well.

This is a screen shot of it in Firefox. All works well. Safari and Firefox, are all based on my very first style sheet that i created. Seperate style sheets were needed for I.E.

Changes to nav bar

I have made a change to my nav bar on my entire website. Because when i made my nav bar a gradient in photoshop. The bottom of the nav bar blended in with the background colour of my site. Now i changed the colour from white to black so you can see the overall shape of the nav bar. 

Here is a screen print to show you the difference.

Print css

I have created the css style sheet for printing my website. I have literally copied over my original css file and changed aspects of the site to display none: for the un-necessary things to print of when on my site, i.e. the nav bar etc colours etc.
Here is the code:

Here is the end result. As you can see no colour is displayed and the nav bar and footer have gone. Lastly, i have made another 3 print style css sheets for i.e. All works well for them as well.

Creating my Video's

These are the steps i had to go through, for creating my video's for my website.

First i opened up Adobe flash and clicked on ActionScript 2.0.
Then i selected my mov file, i wanted to use in flash and dragged it onto the stage.

Then there were simple instructions i had to follow through with.

Then i selected the skin of my play buttons i wanted to display.

Once the video was imported as an fla, i had to adjust the size of the video. As you can see, it was originally 720x480.

I then had to change the stage/document size to match the size of window that the video was. I changed the video and document size to 160x160 for all my video's accept my movie making video. I kept that the actual size.

Finishing touches. I changed the auto play to false. This allows the user, to click play on the video, if they wish to. Then lastly, i had to publish the video for other files such as html and swf files. All i need to do now is embedd my video on my site.

Research into Screen Resolutions

http://www.hobo-web.co.uk/seo-blog/index.php/best-screen-size/- This website was a very good website that i viewed in order to find out which was the most commonly used screen resolution in website viewing. The website states that

"1024×768, which is currently the most widely used screen size. You can see that most visitors on this site at least are using 1024 x 768, 1280 x 800, 1280 x 1024, 1680 x 1050 and 1440 x 900 screen sizes. 1024 x 768 is still the most popular screen resolution in 2009. Interestingly, only 653 visitors (1.16%) use 800×600 screen size. You won’t please everybody. It’s important to identify your audience, and build your website (on the whole) to suit that audience."- These quotes and statistics has made me come to the decision of basing my website on a 1024x768 resolution, simply because it is the most commonly used, and to be safe, i think this would be the best way to base my site on.

Designing my Logo and background image for my Website

The last few days i have been trying to design my Logo's, headings and general interface designs. Here are some of the idea's i come up with:

These are my two main Logo's. I quite like both of these.

This is what will be put into my header of my website. I will make this above my wrapper, and the pixel dimensions will be 1024x100 px.

Underneath this will lye my nav bar, wrapper, content and footer.