Task 5 - Reviewing your own work

Task 4 - Completing the work

Below are screen shots of the main parts of the development posses, they show how the file is constructed and how the graphics are positioned.
This is the background for the whole animation. I kept it the same so that the coral had a horizon to appear from.


These are the tweens for the coral moving through the animation. They increase in size and change position to give the effect of movement to the animation.


To create the movement of the creatures we broke them up into there limbs and then animated them using tweens.

These are all the animals that we included in the animation. The start page of the animation is a basic tween of the diver going up and down and a simple button to start.

These two images (above and below) show the information panel that is displayed when an animal is clicked on. The information slides in from the side via tweening.

This is the main ActionScript that I used in the animation:

stop();

import flash.filters.*;

var blockArray:Array = new Array();

var fishArray:Array = new Array();

//var test:Number=0

var diffX:int = 0;

var diffY:int = 0;

var maxSpeed:int = 35;

var working:Boolean = true;

var whichFish:Number = 2;

info_bg.visible = false;

stage.addEventListener(Event.ENTER_FRAME, mainScript);

//Hide the mouse;

//Mouse.hide();

function mainScript(myevent:Event):void

{

if (working == true)

{

if (mouseX > 375 && mouseX < 750 && mouseY > 10 && mouseY < 480)

{//greater than x position of arm - mustn't be less

diffX = mouseX - rightHand.x;

//To convert it to a percentage

var percX:Number = diffX / rightHand.x;

//Finally moving it based on the percentage

rightHand.x +=  percX * maxSpeed;

diffY = mouseY - rightHand.y;

//To convert it to a percentage

var percY:Number = diffY / rightHand.y;

//Finally moving it based on the percentage

rightHand.y +=  percY * maxSpeed;

}

{

if (mouseX < 375 && mouseX > 10 && mouseY > 10 && mouseY < 480)

{//greater than x position of arm - mustn't be less

diffX = mouseX - leftHand.x;

//To convert it to a percentage

percX = diffX / leftHand.x;

//Finally moving it based on the percentage

leftHand.x +=  percX * maxSpeed;

diffY = mouseY - leftHand.y;

//To convert it to a percentage

percY = diffY / leftHand.y;

//Finally moving it based on the percentage

leftHand.y +=  percY * maxSpeed;

}

}

blacktip.addEventListener(MouseEvent.CLICK, fish2click);

function fish2click(event:MouseEvent):void

{

info_bg.visible = true;

info_bg.play();

whichFish = 2;

working = false;

}

LoggerheadTurtle.addEventListener(MouseEvent.CLICK, fish3click);

function fish3click(event:MouseEvent):void

{

info_bg.visible = true;

info_bg.play();

whichFish = 3;

working = false;

}

clownfish.addEventListener(MouseEvent.CLICK, fish4click);

function fish4click(event:MouseEvent):void

{

info_bg.visible = true;

info_bg.play();

whichFish = 4;

working = false;

}

lion_fish.addEventListener(MouseEvent.CLICK, fish5click);

function fish5click(event:MouseEvent):void

{

info_bg.visible = true;

info_bg.play();

whichFish = 5;

working = false;

}

pufferfish.addEventListener(MouseEvent.CLICK, fish6click);

function fish6click(event:MouseEvent):void

{

info_bg.visible = true;

info_bg.play();

whichFish = 6;

working = false;

}

Task 3 - Working within constraints

Task 2 - Developing an idea for interaction work

HANDS FOLLOWING THE MOUSE
A different hand will follow the mouse depending on which side of the stage it is of, this will enhance the user experience as they have more control. In this we have also hidden the mouse. 



//Hide the mouse
Mouse.hide();




function arms(event:MouseEvent):void{

//If the mouse is on the right hand side of the stage then the right arm will follow it. The mouse can not operate the hand outside of the
//dimentions that we difined


if (mouseX>400){


var rect = new Rectangle(400, 0, 800, 450);
hand2.startDrag(true, rect);


}
//Same as above for the left hand side of the stage
    if (mouseX<400){


var rect = new Rectangle(0, 0, 400, 450);
hand1.startDrag(true, rect);
}
}



OBJECT FOLLOW THE MOUSE



var maxSpeed:int = 10;
addEventListener(Event.ENTER_FRAME,myFunction);
function myFunction(event:Event) {



var diffX:int = mouseX - fish.x;

//To convert it to a percentage

var percX:Number = diffX/fish.x;

//Finally moving it based on the percentage

fish.x += percX*maxSpeed;


var diffY:int = mouseY - fish.y;

//To convert it to a percentage

var percY:Number = diffY/fish.y;


//Finally moving it based on the percentage

fish.y += percY*maxSpeed;
}




AQUARIUM PRESENTATION
Points that could improve the interactive experience 

• Include less well know fish.
• Quiz at the end of the info section so that the user can test the new learnt knowledge.
• Hand scale relevant to child's hand, as they will be the main users.
• Semi-transparent hands so they don't dominate the stage.
• Create a section on the environmental damage to the reef.

FISH TWEEN DEMO

Task 1 - Researching and exploring ideas

BAD EXAMPLE OF INTERACTIVE WEBSITE
This is a bad example of an interactive website. This website is for NASA and displays information about space flight, the crew, cargo and space walk.
The introduction to the site is far too long in comparison to the content quality of the site. Throughout the time you are on the website a constant and hypnotic animation is looped in the background drawing away the users attention from the information. The quality of the photos used is far from good, they appear blued and with jagged edges.

If I was to take away one good point from this website, I would say that the font choice is fairly relevant in that it is space age in it's style.

WWW.OWNYOURC.COM

ownyourc.com is a website that collects data about whether people smoke or not. By collecting this date the website creates an inter active graph which can be clicked, and more data about that person is given. On the roll over of the graph a clicking sound is produced and a small tag containing the persons username is displayed.

One feature that I think is very well thought out on this web site is the small squares on the right hand side of the page. These squares allow the user the filter the data by options such as age, location and gender which I think makes the data more valid.

From a design point of view I really like the minimalist approach that they have taken. I think that this reduces distraction and makes reading the graph more simple and enjoyable. Also the simple use of neutral colours adds to the clean design.

The layout of the information is very well done. When the menu is clicked (below) the rest of the screen is covered in a cross hatching  texture so to not distract the user.

The aspect that makes this web site enjoyable to use is the animations. Elements move through a 3D space, which is not common, and they are extremely smooth. I think that this is element that will be hard for us to translate into our animation, despite this I think that we will find a way to do so.

SWEATSHOPPE


SWEATSHOPPE, 4spots, the landing extras from SWEATSHOPPE on Vimeo.

For this interactive installation they use a projected image and a paint brush with a sensor on it. When the sensor is placed in front of the projector the black from on top of the image is removed to reveal it beneath. This is a simple installation with a huge amount of impact and variety.


www.zign.com.br

The Zign website is composed for many basic animations that add movement to the site. I think from this website I can learn how lots of simple animations can be put together to create an overall pleasing result.

The main feature that we will take from this site is the slight movement or rocking effect. This gives a perception of camera shake which is something that we want to incorporate into our animation.  

INTERACTIVE FLOOR PROJECTION

In this interactive installation, the water responds to the motion of a hand over the top of it using tracking sensors and projectors.

TROPICAL FISH

A funder-mental part of the