Publishing the Website

As the video was inputted into the website, now it was time to publish the website onto the host we paid for.

As I had never published a Flash based website before I found it rather difficult and had to ask a couple of friends how to go about it. In the end I found some tutorials which helped somewhat but then we ended up coming across a problem.

In the end I managed to publish the website with helps from friends, one of the main problems was the trailer on the website, it wouldn't show up. In the end, Malik had to call his sister who helped us out.

The main reason why the video wasn't showing up was because there was a missing file but we didn't know what that file was therefore to overcome this problem we had to copy the files then delete the old ones and re-upload it onto the website.

Now it is all working just fine, the website has also been placed in the centre of the web browser to make it look better as it was just placed to the left hand side.

Inputting the Video in Flash

Since I created a 'Video Bloopers' for a Flash game last year I remember briefly how to input the animation onto the Flash file, but since I wasn't 100% sure I went online to look for a tutorial just to make sure I was inputting the video correctly.

Once inputted, it was checked to make sure it was all working, audio and video were playing like they were supposed to.

Creating the Download section of Flash

As we had bought the host and domain for the website I decided to upload the wallpapers and icons - that had different sizes and were ready to be uploaded to provide the links for me to link them up with the buttons in the Flash CS3.

This was quite easy to do, and didn't take me long to do, I uploaded all images whilst I was in university as it has a much faster, and better internet connection than I do at home.

Feedback on the Website

As I had already finished 90% of the Flash website, I asked tutors for feedback, thanks to their feedback I managed to improve the website quite a bit - making it more unique compared to others.

By this I mean we used our own mouse cursor, set an incentive for users to use the 'contact us' form, as well as set out instructions for the jigsaw puzzle game I created - just minor things I had forgotten to put on the website. So I'm glad that I got feedback from tutors regarding Flash website.

I thought it'd take me quite a while to figure out how to create my own cursor in Flash, but in fact after finding some tutorials I managed to get it done quite easily. It helped a lot that I already had a bear image in mind to use for the cursor, so it was just a matter of fact of finding the tutorial online to help me create it.

Final Animation *Newly Added.

As mentioned from my previous post about completing my 2nd and 3rd animation within a few days, I came up with another idea for the trailer therefore I discussed it with other members of the team to which they agreed and said I could create it if I wanted to since I'd already finished the animations I got assigned to.

The final animation which I thought up of myself is, the bear looking into the mirror and seeing its reflection and doing random movements - like its still in shock and coming to terms that itself has come alive and is able to move but not talk.

This animation had to be done in 3Ds Max, as it was much easier to animate in 3Ds Max than it was to animate in After Effects CS3.

Whilst animating this particular scene, I came across several problems. When the bear's head was group with the features I wanted to animate them together but also apart, but when I ungrouped the features with the head the keyframes would be removed. I managed to overcome this problem somehow whilst creating the animation.

Another problem was with the bear image itself, because it was imported in as a flat image on a plain, there were times when it was duplicated or the wrong material was applied to it and the correct image wouldn't apply. Me and my other team members managed to work out the problem in the end.

One other problem was where the bear is tilting its head forward, because its a 2D image, it didn't turn out the way I wanted it to. I couldn't get the bear to properly tilt its head forward and was only able to tilt it up to a certain angle whereby the viewer wouldn't realise it's a 2D image.

Overall, I think if the bear had been created in 3Ds Max as a 3D model it would make the animation look much better but it wouldn't be unique compared to other animations out there and since our main aim was to be unique and different this worked best.

Animating 2nd and 3rd Animations

After getting my first animation completed I was now on a roll to get my other 2 small animations done. This didn't take me very long to do, as mine were small animations - which I managed to complete within 1-2 days.

As I'd finished my animations and my website was well underway, I was given another animation to do. I was now starting to enjoy animating in After Effects CS3, thanks to my other team members teaching me and guiding me throughout I managed to breeze through it quite easily.

Start of Animating

I was given 3 animations to do, the first one I had great difficulty with animating the bear coming alive in After Effects CS3. The bear was supposed to stay in the same place throughout the camera movement, but every time the camera moved the bear also moved, once the ball bounced on the ground the bear also bounced on the ground.

To overcome this problem we realised we had to animate this particular scene in 3Ds Max instead. Since I was given this animation I got rather worried as I hadn't touched 3Ds Max since the 1st semester of 2nd year doing Multimedia Technology.

After much help from other team members I managed to get my animation done and rendered out. Therefore, that was one of my animations completed and ready to be stitched with the final full animation.

Changing The Interface Flash Design

After the work-in presentation, and getting feedback regarding the product and the website, I came across a few tutorials online about creating a Flash website and so I came up with a new design and set about creating it. I didn't create much of it just in case my other group members didn't agree with the idea.

This is old website design which I first created for the project.

This is one of the first scenes of the Flash website I created to get feedback for the change.

In the end, it turned out to be a good result as every team member was happy with the change and much prefered the new interface design to the old one.

Shadows and Reflections

I could not use the built in after effects shadow because the separate body parts shadow over lapped and cause the area to be darker than the rest of the shadow. Causing an odd looking effect.

To get around this problem, the teddy had to be rendered out as a single animation with opacity. then use a drop shadow and tick the "shadow only box" this enables to have one blended shadow that's works well with the animation.

When making the reflection, I used another instance of the duplicated bear (used for the shadow) and made all the objects 3d. Then turned the duplicated object 180 degrees in two dimensions so it was a mirror image. I adjusted the perspective appropriately in 3d space and dropped the opacity to 15%

Animating in Adobe After effects

To animate in after effects, first i had to import the bear and scene. I made a different after effect file for each scene, i felt this helped me organise and work better. The method of animating we mainly used was key framing. This was the most convenient way for us to move each part of the body individually and get it in the right and correct position on each key frame.

To begin, I firstly parented all the separate body parts of the bear to each other. For example, the hand to the arm and then the arm to the body and so on. Parenting did have draw backs at certain times. This was when i wanted to undo a parented body part and make it do something completely different. This would however also undo the parented scene before it e.g the limbs would disjoint. To overcome this, I rendered the scene up to the point where the parenting was necessary, then I imported the second scene without the parenting and joined them together.

Then I key framed the animation and at times where the movement didn't seem realistic enough, i used the puppet tool to a certain body part/parts to get a fluid movement. The motion graph and speed graph was used to get smoother movements or right timing.