Tuesday, 29 April 2008

Adding audio to intro animation

As a group we decided to use the Kasabian song ¨Club Foot¨ for the intro. Having calculated the timings of events in the intro i edited the audio track in Adobe Audition to sync with the intro. Once i had done this I imported the audio track into flash and inserted it onto the relevant frames. This is shown below.
Once tested all the group member were happy with the audio and i believe it to be a nice addition to the application.

Importing/editing Intro in Flash

I imported the .swf intro file that i rendered from 3ds Max and inserted it into a new scene in our application. I opened up the movie clip and as you can see, all the frames are there.

The first think i wanted to do was to insert a background onto the scene. I used the same striped background we used for the main page but changed the brightness to make it darker.
I then went into the movie clip and began to edit the animation. Firstly i imported the Autoshow logo onto the scene and positioned it over the wheel. I changed the alpha level to 0% and tweened it back to 100%. I also used a tween to rotate the logo at the same rate as the wheel so it faded in very nicely.
I then changed the brightness of the background back to normal and brought it forward of the animation. The next thing i did was insert a preloader that i made in flash. This gives a very professional look to the intro.
Once the loading bar has completed i added an ENTER button and a skip intro button. The enter button had action script attached to it allowing it to link to the main frame. This script is shown below.
Now the intro was complete and it runs and functions smoothly. The next task i was going to consider was added audio.

Creating the Animated Intro in 3d Studio Max

I decided to use the Nissan 350z for the platform for our intro as we have used the same car in other areas of the application. The first thing I did was to draw a large plane on the scene in the shape of a road. I then applied a texture to the plane in the form of a bitmap and positioned the car on the road (as shown below).
The next thing i did was to create a long box nex to the road that will represent a row of houses. I again applied a texture of a town house using a bitmap.

Once i had one row of houses, i duplicated them and flipped them round to create two rows, thus a street.
I beleive the scene i have so far created looked really good, however, the background remains a plain white colour. I therefore added a giant plane, positioned it to appear at the end of the street and applied a texture of a city to give the impression the car is driving through the city.

To get some sort of realistic animation i had to add a camera, i decided to position it at road level facing down the road towards the car. The screenshot below shows how it looked.
The next thing i did was add target direct lighting to each headlight, this gave a great effect on the buildings as you will see. I changed some of the settings including the hotspot/beam and the falloff/field.
I then began to animate the care by keyframing the movement towards the camera, i had to take into account the physics of movement, e.g. slowing down and speeding up.

I then keyframed the camera moving from the front of the car to a side view and began to keyframe the car moving with the camera.
I also had to sperately keyframe the wheels moving to make the whole animation look realistic. I am really happy with the final intro and i believe it will make an excellant addition to the flash application. I finally exported the animation as an .swf file using swift 3d max and imported it into flash.

Monday, 28 April 2008

Creating Sounds for our aplpication

We edited some sounds here for the rollover buttons and for the homepage



We had a few problems with the sounds not stopping after certain buttons where released we used this code to rectify this problem


A screenshot of the sounds within the application







Importing the promo video into flash

As the promotional video was finished it was now time to import the video into flash.


This took a couple of efforts as we had to get the size and quality of the video correct.

Firstly i rendered out the final video and opened up flash, using the video encoder in Flash i imported the video.





After selectin the video I selected the settings we wanted as shown below.

As I set all of the settings to DV Pal when creating the promo video, i imported the video as DV Large to gain the best quality.

I then repeated this for the lamborghini passenger experience.

Test Drive Your Car








i decided to add a flash game into the car modifier, This enabled the user to have yet another means to interact with the product i used simple visible false and true in the action script. Also on key press = function which made the car move.







This is a screenshot of the game in action as you can see form the previous screenshot i modded my car the clicked test drive and this is the result
A Short example of the code i used to alloy your modified car to drive in the game

Sunday, 27 April 2008

Creating the striped background effect in Photoshop

To get a proffessional striped background i firstly created a small thumnail image in photoshop using the drawing tool. I applied the relevant colours and a small shadow. This was the final thumbnail.
I then created a new document in Photoshop with the same dimensions as the flash application and began to duplicate the image to create one giant image as shown below.

Once i had filled the document i applied a gradient to the image to give a proffesional look. The finished background image is shown below.

I then applied this image to the flash application as a background and i believe it be an excellant effect. An example is shown below.

Creating 360 degree views of other cars

After successfully creating the 360 degree view of the Nissan 350z I decided to do the same for 2 more cars. The Lamborghini Gallardo and the Audi A6. Having gained 3d models of the 2 cars i went on to edit the lighting, cameras, environment and texturing. I then added a circluar spleen and applied a path constraint to the target camera. I set the frame number to 150 and rendered the animation as an swf. file. I then brought the new swf. files onto new layers in the flash application and applied the same actionscript as i did for the 350z. I also added 'NEXT' and 'PREV' buttons allowing the user to swicth between cars. The finished product is shown below for each car.

360 Degree views of Various cars in Flash

Once i had exported the 360 degree camera view animation from 3d studio max, I brought it into the flash application on a new layer.I added two arrows which i created in Photoshop and converted them to movieclips. I then had to add some actionscript to the enable the arrows to navigate around the car to a full 360 degrees. The first action was to go into the car movieclip containing the various frames and add a stop(); to the first frame. I then added the following script to the layer as you can see below.As you can see, i gave the arrows and the car movieclips instance names. The actions also enable the user to click left when the car is at frame 1 and it will skip to the last frame and continue to subtract a frame number. The complete 360 degree view is shown below.

Friday, 25 April 2008

DVD Design in Photoshop

As we are going to publish the finished flash application on the front of a magazine cover, i needed to design a dvd cover as well as a dvd design.

I started off by researching into previous designs and found out that the back of the dvd designs were all very similar so i took note of that immediately.
Below are some of the designs that influenced my decisions:

I noticed from these designs that there was mainly large images on he front and detailed writing and thumbnail images on the rear of the dvd case.

I then started to design the dvd cover and placed lots of large images on the background then using layering and the transparency tool started to build together a design.

I began by shooting a photo of the sky and placing this at the top of the page and by using the vivid light tool i gained this kind of effect.
This then allowed me to place a high resolution image on the background splitting the page in two as shown below.
This then gave me a good basis and an even workspace to work with. I then started to add a couple of other cars, i firstly started by adding the lamborghini gallardo and using the reflection tool placed them in the middle of the page as shown below.
This then was looking very good in my eyes and all i had to do now was add relevant text as well as the dvd signs and pg signs. The front of the dvd cover looked like this:
I then began to edit the back of the dvd cover. In reflection to the front of the dvd cover i went for the same effect with the sky however chanegd the blending mode thus a darker shade. I then brought a high resolution image of the R8 into Photoshop and this was a very nice basis in which to work on as shown below.
I then had to think of a layout design in which i was going to show the screenshots of the final product. I decided to go with a grungy look thus using the brush tool in Pohotoshop to take the edges off and make them less harsh as shown below.

I then researched into how text was layed out and decided to go for the text down the middle as shown below.

After adding the text i placed the logo and our slogan in the correct places and the dvd cover was finished, the end product looked like this:

Thursday, 24 April 2008

Tansition effects to be used for the promo video (Part 2)

The lamborghini style ending then moved onto the text spinning around the wheel and finishing with all of the text below saying autoshow.

This was my initial idea of an ending however after some playing around with the different video clips i had gathered, the ending then looked like this.
Firstly I took a pan of an Audi R8 going across the back of the car

After placing this on the timeline, I then added another video clip of the Audi R8 however changed the blending mode so both were visible and this gave a nice crossfade feel to the clip.

The title of autoshow then run in with a nice text effect for a bit of promotion.

Thursday, 17 April 2008

Car Modder In Flash

I have created all my parts within 3ds max now it was time for me to put together all the parts and the navigational parts of the modification
Here is the action script for the car modification


This si the view of the car modification within the fla file



A short preview of the movie different options are available



Another example of the car modder working












Contributors