"BIG & SMALL" by Plug-in Media Ltd.

A real-time rendered 3D world to give 3-6 years olds a way to interact with their favourite tv charcters.

brief 3

brief 3 from Cindy Yeung on Vimeo.

Research of Education Software

Nerve Signaling

Find out about Nobel Prize-awarded breakthroughs in neurosciences and learn how nerve cells communicate.





GAME of the Diabetic Dog
Take care of a Diabetic Dog and learn how to treat diabetes.

introduction

how to play the game




www.nobelprize.org/education_games/

ANIMATING WITH THE TWEEN CLASS

import fl.transitions.Tween; import fl.transitions.easing.*;  var circles:Array = new Array(); for(var i:uint = 0; i < 15; i++) {     var circle:Sprite = new Sprite;     // create a fill of random color and random alpha transparency     circle.graphics.beginFill(Math.random()*0xFFFFFF, Math.random());     circle.graphics.drawCircle(0,0,10);     circle.graphics.endFill();     addChild(circle);     // add each circle to an array for reference later in the tweenCircles function     circles.push(circle); }  stage.frameRate = 31; stage.addEventListener(MouseEvent.CLICK,tweenCircles);  function tweenCircles(e:MouseEvent):void {     // get each circle     for each(var circle:Sprite in circles) {         // tween this circle from its current position towards the mouse event position, adding some random variance         var xTween:Tween = new Tween(circle, "x", Strong.easeOut, circle.x, e.stageX + (Math.random()*100)-50, 1, true);         var yTween:Tween = new Tween(circle, "y", Strong.easeOut, circle.y, e.stageY + (Math.random()*100)-50, 1, true);     } } 

www.flashandmath.com.

import com.flashandmath.dg.objects.*;
import com.flashandmath.dg.display.*;

var origin:Point;
var waitCount:int;
var count:int;
var display:RainDisplay;
var blur:BlurFilter;
var darken:ColorTransform;
var bitmapData:BitmapData;
var bitmap:Bitmap;
var timer:Timer;
var frame:Shape;
var dropStartMargin:Number;
var variance:Number;
var dropsToAddEachFrame:int;

var t:Number;

///////////////////////

init();



function init():void {

//This is how long to wait (in Timer ticks) before adding more drops to the stage:
waitCount = 12;

count = waitCount-1;
dropsToAddEachFrame = 1;

//This BlurFilter is not used, but see below in the onEnter function for a
//suggestion on how it can be used.
blur = new BlurFilter(2,2);
origin = new Point(0,0); //to be used with the blur filter.

//This ColorTransform is used to fade out the pictures drawn in the
//animation (instead of erasing them out completely). You can experiment
//with different parameters in this ColorTransform.
darken = new ColorTransform(1,1,1,0.8);

display = new RainDisplay(550,300,false);
display.x = 10;
display.y = 10;

display.defaultDropColor = 0x666666;
display.randomizeColor = true;

//For this example, we use raindrops with completely random coloring:
display.colorMethod = "random";

display.defaultDropThickness = 2;
display.splashThickness = 2;
display.defaultDropAlpha = 1;
display.splashAlpha = 1;

display.gravity = 0.15;
//In this example, we want the raindrops to drip from the top,
//so we set the initial velocity to zero:
display.defaultInitialVelocity = new Point(0,0);
display.initialVelocityVariancePercent = 0;
display.initialVelocityVarianceX=0;
display.initialVelocityVarianceY=0;
display.dropLength = "long";

display.splashMaxVelX = 1;
display.splashMinVelX = -1;
display.splashMinVelY = 1;
display.splashMaxVelY = 2;
display.minSplashDrops = 5;
display.maxSplashDrops = 12;

display.removeDropsOutsideXRange = false;

//The parameters below create drops which "stick" to the
//top of the display for a short time before breaking free
//and falling to the ground.
display.globalBreakawayTime = 100;
display.breakawayTimeVariance = 0.5;

dropStartMargin = 100;

//The RainDisplay is actually not displayed on the stage. Instead, it is drawn to
//a bitmap. This method allows for a filter-based fading effect to be used.
bitmapData = new BitmapData(display.displayWidth, display.displayHeight, true, 0x00000000);
bitmap = new Bitmap(bitmapData);
bitmap.x = display.x;
bitmap.y = display.y;

frame = new Shape();
frame.graphics.lineStyle(1,0x444444);
frame.graphics.drawRect(-1,-1,display.displayWidth+1, display.displayHeight+1);
frame.x = display.x;
frame.y = display.y;

stage.addChild(frame);
stage.addChild(bitmap);

display.wind = new Point(0,0);

timer = new Timer(10,0);
timer.start();

timer.addEventListener(TimerEvent.TIMER, onEnter);
}

function onEnter(evt:Event):void {

//add more raindrops
count++
if (count >= waitCount) {
count =0;
for (var i:int = 0; i <= dropsToAddEachFrame-1; i++) {
var thisDrop = display.addDrop(Math.random()*display.displayWidth,Math.random());
thisDrop.radiusWhenStill = 1+1*Math.random();
}
}

//update drops
display.update();

//We now draw the rain display to the main bitmap, after applying a ColorTransform
//which causes the previously drawn pictures to fade out.

//You can also try using the BlurFilter commented out below, to achieve a
//different effect. This can be used on its own or in combination with the
//darken ColorTransform:
//bitmapData.applyFilter(bitmapData,bitmapData.rect,origin,blur);

bitmapData.colorTransform(bitmapData.rect, darken);
bitmapData.draw(display);
}

flash interface design

http://www.bensjohnson.com/web/ScienceStation.html

Visual Synthesiser

Visual Synthesiser

Visual Synthesiser

data visualistion

http://senseable.mit.edu/nyte/visuals.html

Visual Synthesiser

project 1

menu


logo of Aware health

flash clock research

Here’s a fun way to keep track of time. Designer Mike Mak's Eyeclock tells time with a pair of slowly rotating disks that look like cartoon eyeballs.

The only thing missing from the clock is a couple of bubble-shaped plastic domes over each of the eyeballs. Speaking of googly eyes, I think this clock would be perfect for this guy…

UI Design Principles

1.The structure principle.
Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with your overall user interface architecture.

2.The simplicity principle.
Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.

3.The visibility principle.
Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.

4The feedback principle.
Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
The tolerance principle. Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable.

5.The reuse principle.
Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

MMD2306 Visual Synthesiser

Draft

Bad website example

"Great web design is an art and occurs when design and content are seamless and you don't notice its greatness. With great web design, it's easy to find the information you need. The content makes you want to return again and again and, most importantly, great design gives credibility to the company/organization." -- from http://www.webpagesthatsuck.com/

http://www.dokimos.org/ajff/

This is a example of bad website which has a too many different colour on the background. It would make us feel messy.