The building of Top 10 Cars of the Year in Flash PART 2

I so far have the basic functionality working properly. I have 10 thumbnail images (one for each car) linking to a profile of each car. The next stage is to add a statistics box containing basic information about each car.

I first of all need to gather the information I am going to use, I have researched various websites containing car reviews and car statistics. I am going to use http://www.parkers.com/ as the source of my information as i believe it to be accurate and reliable. There is a screenshot of the site below.Once i gathered all my information i created a new layer underneath each existing layer (containing the car movie clips). I then added a key frame on the same number frame as the layer above, drew a box with curved edges and converted it to a graphic. I then duplicated the graphic placed it on the new layers i have created. I then added a textbox within each graphic and entered the statistics for each car. I therefore had a stats box next to each car as shown below.The next task was to mask off the statistics box and add a motion tween. I firstly added a new layer above the layer containing the stats box and converted it to a mask. I then drew a large rectangle covering the stats box. Using key frames and motion tweens i gave the impression the stats box was appearing from the side of the stage. There are screenshots below showing the process.I also tweened the alpha levels of the box meaning it fades in from 0-100%.
The next thing i did was add logos of each car to the corresponding profile, I changed the alpha levels to give a more professional look.

The final feature i wanted to add was a floating textbox that would appear next to the mouse cursor when the user hovers over a car thumbnail. It tell the user what car the button links to.
I started by adding a new layer and placing it at the top of the timeline. I then inserted a new movie clip and added a stop(); action on the 1st frame. On the 2nd frame i drew a dynamic text box and gave it a variable name. I also drew a background for the text box. I then added the following actionscript onto the movie clip.
This script tells the textbox to appear in relation to the mouse cursor. I then added script onto every button i wanted the textbox to appear on. There is a screenshot below.
There is a screenshot below of what the floating textbox looks like.
The top 10 cars application is now finished and i will copy and paste the frames into the final flash application.

The building of Top 10 Cars of the Year in Flash PART 1

I am going to build this section in a separate fla. file to the main flash application then either export as an swf. or copy and paste the layers into the main application. I started by importing thumbnail size images of each car which will act as the menu (when the user clicks on the thumbnail, a detailed page will display about that car). I placed the images on the stage in order.I then converted the images to 'buttons', gave them instance names and changed the alpha to 50%. I then added action script so that when the user hovers over the button, the alpha changes back to 100% and the image lights up. The code is displayed below.I then created a new movie clip and give it an instance name. Within this movie clip i added 3 images of the car, each on a different frame with a 'stop():' action attached to each frame. Next, I placed the movie clip (on a new layer) onto the stage as well as two arrows to navigate between images.The next stage was to add the action script to make the arrows move between images in the 'slideshow'. I converted the arrows to graphics, gave them an instance name and entered the script as shown below.
I completed the above for each car, placing each one on a separate layer and a different frame. This allowed me to link the thumbnail buttons to its corresponding car profile. I added action script on to each button. For example:

on (release) {
gotoAndPlay (20);
}

When the user clicks the button the page will display frame 20 as i have placed one of the car movie clips on this frame.

3D Car Moddification

This is the screenshots of the 3D car I managed to source from a friend with all rights. I wanted to use this car as it looks good to modify.

This is a render of the car from side view which i am going to use fo rthe modification.

I chose this view as you ca only see one side of the car so you dont have to worry about the other side also from my research http://www.2flashgames.com/f/f-619.htm is also a side on modifier which i am trying to acheive.

This is a screenshot form my work in progress in which i am adding modifications parts such as alloy wheels bonnet scoops and rear spoilers all in which are going to have different varieties.

This is a final render of an example of what i am going to produce as the car modification, the car has been modified and a rear spoiler alloy wheels and bonnet scoop is added.

New Logo

We decided on this idea as our new logo its the same principle as the previous ideas however due to the colour schemes i thought that it would be wise to create a logo colour scheme witch matched that of the flash layout.

Creating an animated intro for the promotional video

I decided after cutting up the footage that i had gathered so far to create an animated into.
Firstly i opened up After Effects and started a new project, i then started to add new solid layers to the project and using the bezier warp tool made the solids turn the solids into curves.

After i had done this i then altered the hue by colourizing the solid to create a blue and a green colour, this gave a consistant effect taken from our flash file.As you can see above, the effect after altering all of the settings is rather impressive.

Final Template For The Application

This is a screenshot of my work in progress i am responsible for the design and layout of the flash application in which i have decided to go for an eye catching striking theme. This is the template with the navigation working and instances of animation.

I decided to screenshot the application within a browser to see what it would actually look like for the user. I decided to change the width and height so that it was 100 percent so it would fit Perfect in any broswer.