Mac vs PC Minisite

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});
}