Here’s a project I had to do for my Multimedia Design Class. We needed to pick a subject that is up for debate. I decided to do Mac vs PC, seemed to be more fun than smoking or something like that.
I went for a fun UI approach and make it like a desktop. Click on the icons and a window pops up that you can drag around, minimize, etc. It was a pretty fun project. Best of all I got an A!!!!!!.
I also posted the code for anyone who was curious.
Check out the site here
Main SWF File
import gs.TweenLite;
import gs.easing.*;
var wL:Loader = new Loader();
var appHolder:MovieClip = new MovieClip;
var appWindow:Loader = new Loader();
var appIcon:app = new app();
var lockHolder:MovieClip = new MovieClip;
var lockWindow:Loader = new Loader();
var lockIcon:lock = new lock();
var socialHolder:MovieClip = new MovieClip;
var socialWindow:Loader = new Loader();
var socialIcon:social = new social();
var costHolder:MovieClip = new MovieClip;
var costWindow:Loader = new Loader();
var costIcon:cost = new cost();
var performanceHolder:MovieClip = new MovieClip;
var performanceWindow:Loader = new Loader();
var performanceIcon:perform = new perform();
var minimized:Boolean = false;
var cf1:ColorTransform = new ColorTransform();
var cf2:ColorTransform = new ColorTransform();
var showing:Boolean = false;
cf1.color = 0xFFFFFF;
cf2.color = 0x000000;
appHolder.addChild(appWindow);
appIcon.name = "appIcon";
appIcon.mouseChildren = false;
appIcon.buttonMode = true;
lockHolder.addChild(lockWindow);
lockIcon.name = "lockIcon";
lockIcon.mouseChildren = false;
lockIcon.buttonMode = true;
socialHolder.addChild(socialWindow);
socialIcon.name = "socialIcon";
socialIcon.mouseChildren = false;
socialIcon.buttonMode = true;
costHolder.addChild(costWindow);
costIcon.name = "costIcon";
costIcon.mouseChildren = false;
costIcon.buttonMode = true;
performanceHolder.addChild(performanceWindow);
performanceIcon.name = "performanceIcon";
performanceIcon.mouseChildren = false;
performanceIcon.buttonMode = true;
wL.contentLoaderInfo.addEventListener(Event.COMPLETE, addWall);
costWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
performanceWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
appWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
lockWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
socialWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
appIcon.addEventListener(MouseEvent.CLICK, clickEvent);
appIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
appIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
lockIcon.addEventListener(MouseEvent.CLICK, clickEvent);
lockIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
lockIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
socialIcon.addEventListener(MouseEvent.CLICK, clickEvent);
socialIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
socialIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
costIcon.addEventListener(MouseEvent.CLICK, clickEvent);
costIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
costIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
performanceIcon.addEventListener(MouseEvent.CLICK, clickEvent);
performanceIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
performanceIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
stage.addEventListener(Event.RESIZE, redoWall);
wL.load(new URLRequest("wall3.jpg"));
appWindow.load(new URLRequest("applications.swf"));
lockWindow.load(new URLRequest("security.swf"));
socialWindow.load(new URLRequest("social.swf"));
costWindow.load(new URLRequest("cost.swf"));
performanceWindow.load(new URLRequest("performance.swf"));
function clickEvent(e:MouseEvent):void
{
if(e.type == MouseEvent.CLICK)
{
switch(e.target.name)
{
case "costIcon":
addCost();
costHolder.showing = true;
break;
case "performanceIcon":
addPerformance();
performanceHolder.showing = true;
break;
case "appIcon":
addApp();
appHolder.showing = true;
break;
case "lockIcon":
addLock();
lockHolder.showing = true;
break;
case "socialIcon":
addSocial();
socialHolder.showing = true;
break;
case "close":
trace("closed");
TweenLite.to(e.target.root.parent, .5, {alpha:0, onComplete:removeLoader, onCompleteParams:[e.target.root.parent]});
break;
case "minimize":
if(!e.target.minimized)
{
TweenLite.to(e.target.root.clip, .5, {alpha:0});
TweenLite.to(e.target.root, .5, {delay:.5, scaleX:.5, ease:Bounce.easeOut});
TweenLite.to(e.target.root.title, .5, {delay:.5, scaleX:2});
TweenLite.to(e.target.root.minimize, .5, {delay:.5, scaleX:2, x:"-10"});
TweenLite.to(e.target.root.close, .5, {delay:.5, scaleX:2});
e.target.root.titleBar.transform.colorTransform = cf1;
e.target.root.title.transform.colorTransform = cf2;
e.target.minimized = true;
}
else
{
e.target.root.titleBar.transform.colorTransform = cf2;
e.target.root.title.transform.colorTransform = cf1;
TweenLite.to(e.target.root, .5, {scaleX:1, ease:Bounce.easeOut});
TweenLite.to(e.target.root.title, .5, { scaleX:1});
TweenLite.to(e.target.root.minimize, .5, {scaleX:1, x:"+10"});
TweenLite.to(e.target.root.close, .5, {scaleX:1});
TweenLite.to(e.target.root.clip, .5, {delay:.5,alpha:1});
e.target.minimized = false;
}
break;
}
}
else if(e.type == MouseEvent.DOUBLE_CLICK)
{
trace(e.target.name);
switch(e.target.name)
{
}
}
}
function overEvent(e:MouseEvent):void
{
TweenLite.to(e.target, .4, {scaleY:1, scaleX:1});
}
function outEvent(e:MouseEvent):void
{
TweenLite.to(e.target, .1, {scaleY:.8, scaleX:.8});
}
function upDownEvent(e:MouseEvent):void
{
if(e.type == MouseEvent.MOUSE_DOWN)
{
switch(e.target.name)
{
case "titleBar":
e.target.root.parent.parent.startDrag();
break;
case "costIcon":
e.target.startDrag();
costIcon.removeEventListener(MouseEvent.CLICK, clickEvent);
break;
}
}
else if(e.type == MouseEvent.MOUSE_UP)
{
switch(e.target.name)
{
case "titleBar":
e.target.root.parent.parent.stopDrag();
break;
case "costIcon":
e.target.stopDrag();
costIcon.addEventListener(MouseEvent.CLICK, clickEvent);
break;
}
}
}
function redoWall(e:Event):void
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
var sw:Number = stage.stageWidth;
var sh:Number = stage.stageHeight;
var scaleW = sw/wL.contentLoaderInfo.width;
var scaleH = sh/wL.contentLoaderInfo.height;
wL.scaleY = wL.scaleX = scaleW;
}
function addWall(e:Event):void
{
var scaleW:Number = stage.stageWidth/wL.contentLoaderInfo.width;
var scaleH:Number = stage.stageHeight/wL.contentLoaderInfo.height;
wL.scaleY = wL.scaleX = scaleW;
//wL.scaleX = scaleW;
stage.addChild(wL);
appIcon.x = 100;
appIcon.y = 100;
appIcon.scaleY = appIcon.scaleX = .8;
stage.addChild(appIcon);
lockIcon.x = 230;
lockIcon.y = 100;
lockIcon.scaleY = costIcon.scaleX = .8;
stage.addChild(lockIcon);
socialIcon.x = 100;
socialIcon.y = 300;
socialIcon.scaleY = socialIcon.scaleX = .8;
stage.addChild(socialIcon);
costIcon.x = 230;
costIcon.y = 300;
costIcon.scaleY = costIcon.scaleX = .8;
stage.addChild(costIcon);
performanceIcon.x = 320;
performanceIcon.y = 200;
performanceIcon.scaleY = performanceIcon.scaleX = .8;
stage.addChild(performanceIcon);
}
function addCost():void
{
if(!costHolder.showing)
{
stage.addChild(costHolder);
costHolder.x = stage.stageWidth / 4;
costHolder.y = stage.stageHeight / 4;
}
}
function addPerformance():void
{
if(!performanceHolder.showing)
{
stage.addChild(performanceHolder);
performanceHolder.x = stage.stageWidth / 4;
performanceHolder.y = stage.stageHeight / 4;
}
}
function addApp():void
{
if(!appHolder.showing)
{
stage.addChild(appHolder);
appHolder.x = stage.stageWidth / 4;
appHolder.y = stage.stageHeight / 4;
}
}
function addLock():void
{
if(!lockHolder.showing)
{
stage.addChild(lockHolder);
lockHolder.x =stage.stageWidth / 4;
lockHolder.y = stage.stageHeight / 4;
}
}
function addSocial():void
{
if(!socialHolder.showing)
{
stage.addChild(socialHolder);
socialHolder.x = stage.stageWidth / 4;
socialHolder.y = stage.stageHeight / 4;
}
}
function addListeners(e:Event):void
{
e.target.loader.content.close.addEventListener(MouseEvent.CLICK, clickEvent);
e.target.loader.content.minimize.addEventListener(MouseEvent.CLICK, clickEvent);
e.target.loader.content.titleBar.addEventListener(MouseEvent.MOUSE_DOWN, upDownEvent);
e.target.loader.content.titleBar.addEventListener(MouseEvent.MOUSE_UP, upDownEvent);
}
function removeLoader(l:Loader):void
{
l.alpha = 1;
if((Object(l.getChildAt(0)).minimize.minimized))
{
Object(l.getChildAt(0)).titleBar.transform.colorTransform = cf2;
Object(l.getChildAt(0)).title.transform.colorTransform = cf1;
TweenLite.to(Object(l.getChildAt(0)), .1, {scaleX:1, ease:Bounce.easeOut});
TweenLite.to(Object(l.getChildAt(0)).title, .1, { scaleX:1});
TweenLite.to(Object(l.getChildAt(0)).minimize, .1, {scaleX:1, x:"+10"});
TweenLite.to(Object(l.getChildAt(0)).close, .1, {scaleX:1});
TweenLite.to(Object(l.getChildAt(0)).clip, .1, {delay:.1,alpha:1});
Object(l.getChildAt(0)).minimize.minimized = false;
}
MovieClip(l.parent).showing = false;
stage.removeChild(l.parent);
}
One of the SWF’s of the Loaded Windows
import gs.TweenMax;
import gs.easing.*;
close.mouseChildren = false;
minimize.mouseChildren = false;
close.buttonMode = true;
minimize.buttonMode = true;
close.addEventListener(MouseEvent.CLICK, clickEvent);
minimize.addEventListener(MouseEvent.CLICK, clickEvent);
close.addEventListener(MouseEvent.ROLL_OVER, overEvent);
minimize.addEventListener(MouseEvent.ROLL_OVER, overEvent);
close.addEventListener(MouseEvent.ROLL_OUT, outEvent);
minimize.addEventListener(MouseEvent.ROLL_OUT, outEvent);
function clickEvent(e:MouseEvent):void
{
switch(e.target.name)
{
case "close":
trace("CLICK");
break;
case "minimize":
trace("MINIMIZE");
break;
}
}
function overEvent(e:MouseEvent):void
{
TweenMax.to(e.target, .7, {colorMatrixFilter:{colorize:0xFFFFFF, amount:1, brightness:1.2}, ease:Bounce.easeInOut});
}
function outEvent(e:MouseEvent):void
{
TweenMax.to(e.target, .7, {colorMatrixFilter:{colorize:0xFFFFFF, amount:0, brightness:1}, ease:Bounce.easeInOut});
}
