kreativeKING - Interactive Developer

My favorite Tweening engine is uniting with another popular engine, gTween. Just checked my email to hear the fascinating news. Jack Greensock and Grant Skinner, both renowned in the Flash community have decided to put there heads together and make a Powerhouse Tweening engine which should be better than both. I myself am looking forward to this union. I never had the chance to use gTween alone because I was so hooked on TweenLite, but I know the newest version borrowed some of gTweens features such as shortRotation. There is also a beta version out that can be found on Jack’s site.



Here is an excerpt from Jack’s announcing post.

Grant Skinner is one of the most well-respected Flash developers in the world. His inspiring work and generous contributions to the Flash community have earned him a stellar reputation and countless fans. So it is with great excitement that I announce our collaboration on the upcoming release of TweenLite and TweenMax. Grant’s recent Beta offerings of his gTween engine showed great promise and as we talked, it became obvious that we have similar objectives. We figured it made a lot of sense to put our heads together and build on TweenLite and TweenMax, creating a unified platform that’s better, faster, and more flexible than ever. Grant has a proven track record of looking for ways to benefit the overall Flash community, and this is just one more example. It is truly an honor to have his valuable input.

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

***Can now be found on FlashDen***

Simple yet very useful for a quick setup of a gallery and pretty flexible. With this class it creates a simple effect that reveals your images in sort of the same fashion the Transition Effect. All of the settings re placed into an xml file named “fade_gall_config.xml”. The images you want loaded re placed into another xml file named “fade_gall_images”. Both these files should be in the same directory as your .swf file. Hope you are all still with me…..

The only function in the FadeInGallery Class is the constructor where you need to pass in the stage. That is pretty much all you need to do on the flash side of things. Here is an example of te syntax for instantiating the class…

import com.clementegomez.media.FadeInGallery;

var gall:FadeInGallery = new FadeInGallery(stage);
addChild(gall);

Check Out the Gallery Here

All of the settings are found in the fade_gall_config file.
Most of the settings are self-explanatory. Here is the xml file as well as the settings that may need more clarification.

sectionDelay : This controls in seconds the delay between the revealing of each section of images. For example; if you have your gallery running horizontally, and your sectionDelay is set to 2. The next row of images wont show until 2 seconds after the previous row is shown. Pretty easy right?


hMultiplier & wMultiplier : These control the vertical and horizontal spacing respectively between the images. These settings will need to be pplyed around with a bit to get the proper spacing you want.


direction : This controls which direction the gallery animates. If you want it to run horizontally then place “horizontal” minus the quotes. Same with vertical instead you place “vertical” minus the quotes.

*NOTE This setting only accepts vertical or horizontal. Any other values will cause the class to throw an error.

——————————————————-

All the fields must be numbers for the exception of the direction parameter.
——————————————————-

2


.75


.5


0


1


1


3


.2


.5


.2


2


.9


.1


.1


.7


.7



vetical

Any questions suggestions for future releases can be posted here on the blog. Let me know if you run into an problems or if you find the class useful.


Enjoy


Download FadeInGalleryClass Here

I just checked my email to find that Greensock has come out with a new class. The Custom Ease Class. Now this is a pretty powerful class. It allows you to create custom easing instead of using the default Back, Bounce, Elastic, etc.

Jack “

Sometimes the standard easing equations(Elastic, Strong, etc.) don’t give
you quite what you want. This tool allows you to interactively draw a curve
for your own custom easing equation and it even writes the code for you.
Just copy and paste it into your application. The code it writes requires
the gs.easing.CustomEase class which is a membership benefit of Club
GreenSock.

“



I would really encourage anyone using the TweenLite family to get a hold of this. As a result, I feel as if I owe Jack a great debt, So I would like to announce that I am now an honorable member of the Club GreenSock. Keep up the good work Jack.

Check it out Here