Conclution

From this project I learnt a lot about structuring a flash file and some of the options that are available when it comes to the user interacting with the animation. I also learnt some basic action script that has enabled me to experiment more on other projects

What did you get out of this project?

From this project I learnt a lot about how Actionscript can be used to enhance a user’s experience. Although this was the first time that had used Actionscript it has interested me very much and I would like to expand my knowledge of this language and take it further.
This was the first time that I have ever worked in a team on a project of this size. I think that we worked well together and it has given me the confidence to trust others opinions when it comes to decisions within the project.

What would you do differently next time?

If I was to do this project again there would be a few things that I would like to do differently.

• ·         Planning – I feel that if, as a team, we planned out the project in more detail we would have come to a better result. Despite this I think considering that it was the first time that any of us had taken on a project of this size, we planned as far as our knowledge at the time would take us.
• ·         Graphics and animation – The graphics and animations that we produced did not come out as well as I would have hoped for. Once again I would put this down to lack of knowledge of Flash, as now I feel we could create a better result.

How did you work as part of the group?

I think that the communication within the team could have been better at times, but I think that this could be put down to the initial planning.  If we had delegated roles earlier on in the project rather that 2 weeks in I think that we all would have had a more clear idea of what we were trying to achieve. Despite this I tried to motivate the team and get everyone on topic.

I think that during this project I was able to give many constructive ideas that developed the project a lot. Having said that I also believe that, at times, I was blinkered by my own ideas and therefore may have dismissed others ideas that were valid and would have brought the project on further.

In this project we came across many unexpected problems, and I took it upon myself to solve the majority of them, although in some cases we work on a problem together to achieve the best result.

Although before starting the project I was unsure about working in group of people, I now think it is much more beneficial that working individually as more ideas come through and everyone has different skills that they are able to contribute to the project. I think that this produces a better result.
On the other hand working in a group can be frustrating due to the different ways that people work. For example the way that a team mate may produce something may different to the way that I would produce it. This can be frustrating as I may feel I would get a better result using my method.

I think personally, as a whole project, this has been the most informative project that I have done whilst a college and has inspired me to take Actionscript further throughout my following projects.


Final product - http://www.swfcabin.com/open/1306929281

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