Visual Research

This is a visual research I have done for the Timeline background after I decided to include a company buildings because buildings someimes reflect the history of the company:

Interactive Authoring - Flash

These are some screen shots of how i created the background interactive menu in Flash..

Flash screenshots

These are some screenshots which I print while I was working in Flash on the introduction functionality:

First try when the encoded video was on the stage with Flash defult skin:

The created animated title:

The video is imported by action script while it is outside the Flash Authoring workspace:

The video when publishing it, the controls are invisible because the cursor is rollout the buttom of the video:

The action script panel:

Zoom in on the controls:

Introduction in Flash

I created an animated title page before the video starts which go stright to the video, there is a skip button which takes the user to the logo that created by Fatima and then come the background options for the menu page which is still in the development process in the following link:

Introduction in Flash.

Encoding video into Flash

After I finished editing the video I wanted to import it into flash to make interactivity which gives the audience options to skip the video, pause, mute sound, change the volume or seek through the video.
However, I had many problems:

* Sometimes the video not completed and flash moves to the next sene which is the menu and that is when I choose the Progressive download from the deploying options like the following situation: click here

*I tried "Stream from Flash video Communication server" option with a high quality (700kb/s) and the result was very bad quality video. I gused that was because the orginal video was rendered in a medium quality.

* I chose to "Embed video in SWF and play in timeline" with the medium quality (400kb/s) the video was stopping after a specific frame.

* When I chose "Stream from Flash video streaming service" it works in a good quality unless I didn't put any other objects on the time line with the video. But I need to put the skip button and this was a new problem after having the video played. I realised that this was because of the playback skin I've been chosen with the video each time. The skin makes the video plays inside the timeline and I didn't want that to happen.

*Finally I've found the solution which was importing and controling the video all with action scripts. I search for action scripts which allow me to attach the video to a new video created in the library through the NetStream and Netconnection methods. Also I've created play controls with action scripts instead of the defult flash skin. Furthermore, I made the controls invisibule unless the user rollover the buttom of the video to view them.

Here is the final result.

Fun section - Game plan

The Game

It’s a shooting game which player has to shoot (rubbish, litters, etc) to increase the score. When the rubbish hit sea creatures (fish, squid, etc), these will die and disappear from the environment (under sea) and the game will be over. Therefore, player role is to shoot the rubbish before they hit the fish.

Target Audience: Children age 8 to 12 years old.

Purpose:

Teach children that by throwing rubbish into the sea, fish and other creatures will die. Therefore, the best way to save these creatures is by keeping the sea clean and throwing the litters in the pins provided.

Designing:

The game background environment (under sea) will be 3d model using 3ds Max. The objects inside the sea (grass, fish, rubbish) will be 2d graphics using Flash and Illustrator. Finally, adding interactivity using action script in Flash.

Game structure:

1) Animated Intro + title

1.1) Play the Game

1.2) Instructions

1.3) High score

Visual Research:

Editing menu in 3ds max

i had to edit the the layout of the menu page in 3d i carried out several tests before i settled on a final animation. as shown above in the images i rendered the individual characters animating to convert them as buttons in flash, i also reduced the size of the frames from 240 to 100. once importing the images in flash the file size was still really big also the images did not play in the correct sequence once all the button were together. as it did not look realistic at all for the character going behind the globe in a 2d space.

i then decided to change the rotation of the character so that they were flat and animating around the globe where all characters were visible instead of going behind the globe. I found this method alot easiar and did not need to worry much on the orientation of the text.

i rendered the animation as one by grouping it all and rotating the image.