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.

Animating the camera and rendering

I had to set the cameras according to the story board so i had a set up of multiple cameras in each scene. The lens parameters were changed to make it look like it was from the eye's of a smaller object. In many scenes, only still images were required. These wer rendered out at a high resolution because they would need to be zoomed in and out in after effects. For scenes with video clips, i used the PAL DV setting of 720 by 576. The videos were rendered as an image sequence instead of video clips. This was because if the software crashed while mid-rendering, we would carry off from the frame we left off. The software crashed many times. The renders wer saved as PNG files to retain opacity and also because they render at a great file quality. Some objects were rendered on thier own but to a certain camera movement so the teddy can hide/run behind objects.

Creating the outside environment

To create the outside environment, I first tried to apply textures on a plane and place them just outside the window. This worked for the window behind the bed but did not work with the window to the side.This was because the direction of the light outside was at a different angle from the side window so it did not light up properly. Other lights placed next to the plane did not work either as the skylight was too powerful outside the room and made the other lights obsolete.

Then I tried to use an environmental map with an image of the skies. This however, did not work with our scene. It was not visible what so ever. So then i decided to try another method. Where a Dome is built around the room using a large sphere. The texture is applied to the dome and you should be able to see the dome outside the window. This however did not work either as the dome covered the global illuminations and caused the scene to be rendered black (no light). So i decided to test it by cutting off the top of the dome so it was like a ring around the room as can be seen below. This worked perfectly.

Grainy walls using daylight system

After using the Skylight and sunlight system, i encountered a problem. The light was not distributed evenly in the room. This made some corners of the room look very grainy as there was no light to compensate it.

Changing the values of the daylight system to compensate the dark parts made the evenly lit parts of the room very brightly lit. To a point where it was hard to see definitions on objects.
I decided to use scrap that idea and use photometric lights with the same colour temperature as the skylight and sunlight systems and put them close to the wall to light them up evenly. the result is below:

Daylight Systems in 3DS max

Today I was working with lighting in 3Ds max. For one of the scenes, we wanted a daylight system. I looked up and followed a few tutorials on daylight lighting off the Internet on test rooms to see what they would look like. However, I encountered a problem. Many error messages would appear when I tried to render out the scene as a single image or a video. The program would either crash or shut down. I tried to move computers, however, the problem re-occurred. I then contacted a technician and he could not get to the bottom of the problem either. His advice was to just try to light it from the beginning as it would be quicker. I got a single picture out of the lighting set- up (below) and i think although detailed, it looks unlit or a night time scene instead of the day time scene.

I used another lighting process the second time round. This included a skylight and sunlight systems. These provided ample light and produced a very dreamy effect, exactly what we wanted. it used radiosity based lighting and the light coming in through the window was very effective.

We used still images from this scene in some of our animation, but when I rendered out a video, it was very jumpy. This I was told was because radiosity rendering calculates the light differently on each frame. This makes the shadows chance, therefore making the scene very jumpy and grainy. I showed it to two 3D tutors who could not resolve the problem.

Modeling more objects

I modelled some objects today to complete the room. This included a "fuzzy felts" box, a mirror, and a chest. To model the Mirror, I made a plane. I then added a texture to it. The texture comprised of a ray trace reflection and also the blinn basic parameters were edited.

For the Fuzzy felts box, i made a square box and converted it to an editable poly. I extruded the box until it looked like a games box. I then dupliated it and made it slightly larger so that the copy would act as a lid to the games box. A texture was then made by Sareea for the box

Creating the 3D blinds

To create the blinds i started off with a box. I made this box the height of the window and narrowed it down to 0.010 meters. I then Copied it across many times and grouped them together. Having done this, I added a texture that I built for the blinds in Photoshop which consisted of a pink square with a slightly grainy effect on it.

Having done that, i had to create a cover for my blinds. To do this i made a rectangle shape, i converted it into an editable poly and extruded it in the minus so it would have a hole in it. This was then placed on top of the blinds and textured like the window frames.

Development of Flash Website #5

After much thought and team discussions, we found it quite difficult to decide what sort of games we wanted to create for the website. At first, we decided to create a game whereby the user can dress up their bear in clothes they liked (which were available) but then we decided that'd be a bit difficult and since a team member had created something similar before and had numerous problems we decided to scrap the idea. Therefore, we came to the conclusion that I'd create a jigsaw puzzle and possibly a word search.

After numerous days of researching how to create a jigsaw puzzle in Flash and searching for tutorials to help with the creation of it. I managed to create one but with a minor problem which again needs to be fixed in due time.


The websites I found some helpful tutorials from:
Site Point - Build A Video Jigsaw Puzzle
*Web Designer - Build a Jigsaw Puzzle in Flash
ActionScript - Jigsaw Puzzle

*This is the website/tutorial I used to create our own jigsaw puzzle.

Development of Flash Website #4

Once again from research I did I found that some websites have a link where users can contact them. Although, not all websites have this I decided to stick one in ours just to be a little bit more unique in some way. Not only that but once it's up on the Internet where millions can see it I do hope people will give us some sort of feedback to the animation as well as to the website.

Even though in the screen shot there is a contact form, but it's not fully working just yet as I've come across a few problems which needs solving, again which I will go back to to sort it out. I did try to sort out the problem but to no avail so I decided to leave it and go back to it later rather than stress myself out over why it's not working and why error messages keeps popping up.

3d Lamp

A lamp was created to go on the bedside table. research has been carried out to see different types of children's lamps.

(Image from - http://www.14ushop.com/judithedwards/lamps/1606.jpg)

(Image from - http://www.14ushop.com/judithedwards/lamps/1606.jpg)

Before modelling in 3ds max i pre planned the design for approval from the group members.

The style of this lamp chosen is like the most commonly used lamps. the process to model this lamp did not take time although when it came to adding a material to the lamp the group had decided to have the main characters image applied as the material on the lamp.

this process needed for me to use the uvw mapping modifier i chose the cylinder option so that it would fit perfectly on the lamp. the image which was going to be used didn't look right as it was a fairly large image and the fold line was overlapping the image. to over come its problem i had to go in to photoshop and edit the original image by extending the white around the edges. so when the image folded the user would not be able to tell where the finish line would be.
i also applied a texture on this image so that it would look like a material. as demonstrated in the above image.

Above is the final render for the lamp. which the group was very pleased with. it has a pink stand as its a girls bedroom ad the wall paper is going to be pink.

Work-in Progress Meeting, Starbucks

As a team we're frequently holding meetings, not only in university but also outside of university. By this I mean, not just meeting up when all team members have a class together but also organising a time and place to meet up outside of class times.

One of the meetings we had was held in Leeds City Centre, Starbucks. The main reason for this meeting was to work on the Work-in Progress presentation and also to discuss other matters which we had, also to show one another that we're all on track.

A picture Ben drew of the team meeting in Starbucks.

Team meeting discussion about the contents of the presentation.

Team's notes and coffee - working hard!

Shax working on the PowerPoint presentation, as well as other team members contributing.

Development of Flash Website #3

The next scene I decided to quickly work on was the 'Gallery' scene, as I'd already made a Gallery in Flash before for a previous project this wasn't going to be too difficult for me and since I'd just created a preloader I wanted to work on a scene which I was familiar with. Just to make life easier for myself and not get myself stressed and worried about not knowing how to create something that I want.

Below is the screen shot of the 'Gallery' scene, again it's not fully completed as the "proper" images do need to be made and put in. As well as the buttons and the text for 'Gallery' 'Prev' and 'Next' needs to be changed. But they can be done easily therefore I decided to leave that for later when I come to tweeking the whole website itself.

3d light

A 3d light was created for the room the light was decided to look modern and simple. below are some images which where researched to create the correct type of light.

(image from - http://www.housetohome.co.uk/imageBank/cache/b/BQ-light_e_9c53654d7f7c9c72667efde1daba6b35.jpg)

(Image from - http://www.treadwaygallery.com/ONLINECATALOGS/SEPT06/catalog9-06/larg/0966.jpg)

Before modelling in 3ds max i pre planned the design for approval from the group members.

The light has to be modified immensely due to not having bulbs in the light i have chosen to have omni lights in the three sections. i did try this method but it didn't go well as the renders would just be blank. this will be modified once the light is in the scene.

3D Rug

To create a realistic looking Rug, the Hair and Fur modifier was used. Firstly, a cylinder was created and flattened.The Hair and fur modifier was then applied. The settings were made so that the fair would look fluffy while not looking too thick. The strands were coloured pink with the tips being white to give off a realistic look.

Development of Flash Website #2

After creating the 'teaser' scene for the Flash website, I found that most websites have a preloader on them, therefore I decided to try create one for our own website. Since I'd never made a preloader in Flash and I wanted to customise it so it'd be an image of the bear instead of just a normal rectangle bar it was quite challenging.

It took me a couple of days before I managed to find a simple tutorial as to how to use my own image as the preloader.

This is a screen shot of the preloader I created using our trademark of a bear. It took me a couple of days to create and I'm happy with the end result. I still need to make a few changes to it to make it more unique. But I'll probably tweek it once I've completed the other scenes for the website.

The websites I found the tutorials are listed:
FlepStudio - Preloader for Beginners
MonkeyFlash - Custom Preloader
*Layout Galaxy - ActionScript Preloader
Smart Webby - Simple Flash Preloader
*FlashExplained - Preloader

*These are the two websites which helped me create a customised preloader for the website.

3d chest of draws

I created a chest of draws in 3ds max. both research and sketching where carried out before modeling the draw.

(image from http://www.baby-kit.co.uk/images/Chest%20Of%20Draws_%20Birch%20-%20Natural.JPG)
(Image from http://img.archiexpo.com/images_ae/photo-g/children-s-chest-of-drawers-20946.jpg)

Before modelling in 3ds max i pre planned the design for approval from the group members.

The images below demonstrates the process of creating the model in 3ds max. this draw was modelled using spline and box modeling.

The final render of the draw was approved by the group members