Monday, 10 March 2008

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.

No comments:

Contributors