Archive for the ‘GTween’ Category
ActionScript 3.0: Pixel Bender filter used in Flash gallery
having written my last post on using Pixel Bender filters in Flash, I got a lot on comments asking me to do some more demo’s on how to actually use the Pixel Bender filters in real cases. so I decided to start out with a gallery of 3 images. in the gallery the transition between each image is animated in and out using the AngledBWHalftone filter by Gus Campbell to make it a bit different.
check out the gallery using the AngledBWHalftone Pixel Bender filter here:
the original blog post on Pixel Bender:
click here to read the “amazing examples of Pixel Benders filters used in Flash.”
credits:
Gus Campbell for the AngledBWHalftone Pixel Bender filter.
Rasmus Andersen for the nice pictures from Cuba.
ActionScript 3.0: logobanner for MCH Messecenter Herning / Porsche 911 Carrera 4/4S Cabriolet gallery
about the logobanner:
for MCH Messecenter Herning I recently did a logobanner, that would show up to 5 different logos from a collection of several logos. the logobanner should randomly select 5 logos, slide them in, await a randomized amount of time, and then slide out again. before sliding in once again, a new logo should be selected, so that new logos would constantly be shown.
the logos should be fed to the logobanner using XML.
the ActionScript for the logobanner:
import ArrayStuff;
import caurina.transitions.Tweener;
import com.gskinner.motion.GTween;
import fl.motion.easing.*;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import MonsterDebugger;
public class LogoContent extends Sprite {
private var _theXML:String;
private var _md:MonsterDebugger;
private var _loadedXML:XML;
private var _XMLLogoArray:Array = [];
private var _arrayStuff:ArrayStuff;
private var _yPlacement:Array = [0, 120, 240, 360, 480, 600];
private var _itemToStageNumber:Number = 0;
private var _tween:GTween;
private var _holder:Sprite;
public function LogoContent() {
//init();
}
public function init(someXML:String):void {
_theXML = someXML;
_md = new MonsterDebugger(this);
//trace("_theXML passed to the loaded flash = "+_theXML);
loadXML();
}
private function loadXML():void {
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest(_theXML);
loader.addEventListener(Event.COMPLETE, xmlLoaded, false, 0, true);
loader.addEventListener(IOErrorEvent.IO_ERROR, xmlError, false, 0, true);
loader.load(request);
}
private function xmlLoaded(e:Event):void {
_loadedXML = new XML(e.target.data);
traceStuff();
XMLcontentToArray();
}
private function xmlError(e:Event):void {
trace("error loading");
}
private function traceStuff():void {
//trace("_loadedXML = "+_loadedXML); //output: complete XML
//trace("_loadedXML.logo.length() = "+_loadedXML.logo.length()); //output: number of logos
//trace("_loadedXML.logo.thePicture[0] = "+_loadedXML.logo.thePicture[0]); //output: name of first logo
}
private function XMLcontentToArray():void {
var i:Number = 0;
while(i < _loadedXML.logo.length()){
_XMLLogoArray.push(_loadedXML.logo.thePicture[i]);
i++;
}
_arrayStuff = new ArrayStuff();
_arrayStuff.convertToLoaders(_XMLLogoArray);
_arrayStuff.addEventListener("loaderArrayReady", loaderArrayReady);
}
private function loaderArrayReady(e:Event):void {
_XMLLogoArray = e.currentTarget._loaderArray;
trace(_XMLLogoArray);
var i:Number = 0;
while(i < 6){
placeOnStage();
i++;
}
}
private function placeOnStage():void {
_holder = new Sprite();
_holder.name = "holder"+_itemToStageNumber;
addChild(_holder);
//trace("_XMLLogoArray.length = "+_XMLLogoArray.length);
var i:Number = Math.floor(Math.random()*_XMLLogoArray.length);
var dispObj:DisplayObject = _XMLLogoArray[i];
_XMLLogoArray.splice(i, 1);
_holder.addChild(dispObj);
_holder.x = -dispObj.width;
_holder.y = _yPlacement[_itemToStageNumber];
//trace("_XMLLogoArray.length = "+_XMLLogoArray.length);
var myDelay:Number = Math.random()*2;
//trace("dispObj.width = "+dispObj.width);
//_tween = new GTween(_holder, 1, {x:-10}, {ease:Sine.easeIn, delay:myDelay, reflect:false, repeatCount:1});
_tween = new GTween(_holder, 1.2, {x:(215-dispObj.width)/2}, {ease:Back.easeOut, delay:myDelay, reflect:false, repeatCount:1});
_tween = new GTween(_holder, 1.2, {x:215}, {ease:Back.easeIn, delay:myDelay+4, reflect:false, repeatCount:1, onComplete:handleComplete});
_itemToStageNumber++;
}
private function handleComplete(e:GTween):void {
trace("handleComplete");
_XMLLogoArray.push(e.target.getChildAt(0));
e.target.removeChild(e.target.getChildAt(0));
//trace("_XMLLogoArray.length = "+_XMLLogoArray.length);
//trace("e.target.name = "+e.target.name);
var i:Number = Math.floor(Math.random()*_XMLLogoArray.length);
var dispObj:DisplayObject = _XMLLogoArray[i];
_XMLLogoArray.splice(i, 1);
//trace("_XMLLogoArray.length = "+_XMLLogoArray.length);
e.target.addChild(dispObj);
e.target.x = -dispObj.width;
var myDelay:Number = Math.random()*3;
_tween = new GTween(e.target, 1.2, {x:(215-dispObj.width)/2}, {ease:Back.easeOut, delay:myDelay, reflect:false, repeatCount:1});
_tween = new GTween(e.target, 1.2, {x:215}, {ease:Back.easeIn, delay:myDelay+4, reflect:false, repeatCount:1, onComplete:handleComplete});
}
}
}
other recent galleries:
ActionScript 3.0: the Fransa Collection Flash with photos by Flemming Scully
ActionScript 3.0: using FIVe3D for a picture gallery
JavaScript: using jQuery for a picture gallery
other stuff made for MCH Messecenter Herning:
showcase: 2 simple banners for MCH Messecenter Herning
showcase: different stuff for MCH Messecenter Herning
ActionScript 3.0: amazing examples of Pixel Benders filters used in Flash.
these are all examples of how pictures in galleries can be modified using Pixel Bender filters with ActionScript in Flash.
no further explanation, here are the demos:
1) the AngledBWHalftone filter by Gus Campbell.
check out the AngledBWHalftone filter by Gus Campbell used with ActionScript here
2) the cheapDuoTone filter by AIF Kevin.
check out the cheapDuoTone filter by AIF Kevin used with ActionScript here
3) the crossStitch filter by FerrisB312.
check out the crossStitch filter by FerrisB312 used with ActionScript here
4) the scanlines-adj filter by AIF Kevin.
check out the scanlines-adj filter by AIF Kevin used with ActionScript here
5) the Sepia filter by Elba Sobrino.
check out the Sepia filter by Elba Sobrino used with ActionScript here
6) the Zoom Blur filter by Ryan Phelan.
check out the Zoom Blur filter by Ryan Phelan used with ActionScript here
credits:
Rikke Madsen for the nice photo used in every example.
Adobe Pixel Bender Exchange for the Pixel Bender kernels.
Gus Campbell for expertise on using Pixel Bender in Flash.
ActionScript 3.0: how to use the getChildByName() method of the DisplayObjectContainer class
short intro:
working on a very simple task the other day, I ended up using the getChildByName method of the DisplayObjectContainer class.
first of all, to get a better understanding of what I was working on, check out this:
my very simple Flash without the use of getChildByName
the problem:
clicking one of the polaroids will make it fade in in a bigger version, clicking that bigger version will make it fade out again.
the problem is, the more photos you click, the stranger the bigger version will look as it fades out, because you see every picture loaded in big versions so far fading out.
the solution:
what happens when one of the polaroids is clicked is, that I load the picture, name the loader “myLoader”, and add as a child to the DisplayObject containing the white frame and the shadow.
the trick now is to check if the DisplayObject has any children name “myLoader”. if it has, I’ll remove them before adding the new myLoader, check it out:
my very simple Flash with the use of getChildByName
the ActionScript:
eager to get the code for this, well, just grab the following.
the getChildByName part of the code is highlighted with comments in the code 
import fl.motion.easing.*;
import flash.display.Sprite;
import flash.display.DisplayObject;
var thePic:Loader;
var tween:GTween;
allSmalls.small1.buttonMode = true;
allSmalls.small2.buttonMode = true;
allSmalls.small3.buttonMode = true;
allSmalls.addEventListener(MouseEvent.CLICK, showBig, false, 0, true);
picHolder.alpha = 0;
picHolder.y -= 800;
function showBig(e:Event):void {
allSmalls.removeEventListener(MouseEvent.CLICK, showBig);
allSmalls.mouseChildren = false;
//THIS IS THE SPECIAL GETCHILDBYNAME PART
if(picHolder.getChildByName("thePic")){
var deleteThis:DisplayObject = picHolder.getChildByName("thePic");
picHolder.removeChild(deleteThis);
}
//END OF GETCHILDBYNAME PART
thePic = new Loader();
thePic.x = 11;
thePic.y = 8;
thePic.name = "thePic";
thePic.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeBigIn, false, 0, true);
var theNameOfPic:String = e.target.name;
theNameOfPic = theNameOfPic.slice(-1);
theNameOfPic = "big"+theNameOfPic+".jpg";
thePic.load(new URLRequest(theNameOfPic));
}
function fadeBigIn(e:Event):void {
thePic.removeEventListener(Event.COMPLETE, fadeBigIn);
picHolder.buttonMode = true;
picHolder.addEventListener(MouseEvent.CLICK, hidePicHolder, false, 0, true);
picHolder.addChild(thePic);
tween = new GTween(picHolder, .6, {alpha:1}, {ease:Linear.easeNone});
picHolder.y += 800;
}
function hidePicHolder(e:MouseEvent):void {
picHolder.buttonMode = false;
allSmalls.mouseChildren = true;
allSmalls.addEventListener(MouseEvent.CLICK, showBig, false, 0, true);
tween = new GTween(picHolder, .6, {alpha:0}, {ease:Linear.easeNone, onComplete:moveUp});
}
function moveUp(e:GTween):void {
picHolder.y -= 800;
}
credits:
the ActionScript 3.0 Language Reference on getChildByName.
the wonderful street performers in New Orleans are photographed by Jason Winkler from Houston, Texas.
Stig Meyer Jensen for being a fellow geek.
ActionScript 3.0: exploring GTween post 02: update on Kaiyi Wongs blog
inspiration:
even though the post I recently read by Kaiyi Wong was almost a year old, I found it very helpful when it came to understanding GTween.
so I read the lot, made a similar example myself with the newest release of GTween and ended up with this:
check out the new, altered version of Kaiyi Wong’s GTween example here
not really revolutionary, I know, but it shows how smoothly GTween executes lots of animations at once.
and it shows how the movement of both the circle and the square is made.
the use of GTween:
the circle is moved using this ActionScript:
_tween = new GTween(reverser, .4, {x:mouseX, y:mouseY}, {ease:Quadratic.easeOut, reflect:true, repeatCount:2, onComplete:handleComplete});
and basically it means:
move reverser to the position of where the mouse was clicked in .4 second.
use a quadratic easeOut-easing for the animation.
and because reflect is set to true AND repeatCount is set to 2, it will return to it original position in .4 second when having reached it’s destination.
when every animation is ended the function handleComplete will be triggered.
the squares are moved using this ActionScript:
_tween = new GTween(objArray[i], .6, {x:xDest, y:yDest}, {ease:Quadratic.easeOut, reflect:false, repeatCount:1, delay:delay});
which means:
move square to the destination determined by the variables xDest and yDest in .6 second.
use a quadratic easeOut-easing for the animation.
every part of this animation should not be started until the delay has passed.
the ActionScript:
interested in the code for this example?
then grab it here:
import com.gskinner.motion.GTween;
import fl.motion.easing.*;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import MonsterDebugger;
public class GTweenBasics0201Content extends Sprite {
private var _md:MonsterDebugger;
private var _tween:GTween;
private var _reversed:Boolean;
private var objArray:Array = [];
public function GTweenBasics0201Content() {
init();
}
private function init():void {
trace("function init");
_md = new MonsterDebugger(this);
addEventListener(Event.ADDED_TO_STAGE, setupExtras, false, 0, true);
}
private function setupExtras(e:Event):void {
stage.addEventListener(MouseEvent.CLICK, reposition, false, 0, true);
var i:Number = 0;
var theX:Number = 19;
var theY:Number = 585;
while(i<30) {
var follower:Follower = new Follower();
follower.x = theX;
follower.y = theY;
follower.name = "follower"+String(i);
addChild(follower);
objArray.push(follower);
theX += 20;
i++;
}
}
private function reposition(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.CLICK, reposition);
_tween = new GTween(click_txt, .3, {alpha:0}, {ease:Quadratic.easeIn});
var i:Number = 0;
var delay:Number = 0;
while(i<30){
trace("while loop");
var xDest:Number = mouseX + ((Math.round(Math.random()*160)) - 80);
var yDest:Number = mouseY + ((Math.round(Math.random()*160)) - 80);
trace("xDest = "+xDest+" & yDest = "+yDest);
_tween = new GTween(objArray[i], .6, {x:xDest, y:yDest}, {ease:Quadratic.easeOut, reflect:false, repeatCount:1, delay:delay});
delay += .06;
i++;
}
_tween = new GTween(reverser, .4, {x:mouseX, y:mouseY}, {ease:Quadratic.easeOut, reflect:true, repeatCount:2, onComplete:handleComplete});
}
private function handleComplete(e:GTween):void {
stage.addEventListener(MouseEvent.CLICK, reposition, false, 0, true);
_tween = new GTween(click_txt, .3, {alpha:1}, {ease:Quadratic.easeOut});
}
}
}
the experiment:
the post by Kaiyi Wong was not only great inspiration, it also gave me an idea for an an experiment I could make.
how if the squares was not just squares but part of a picture?
well, I sliced up this beauty of a picture, and set up an experiment:
check out the experiment of animating with GTween here – 9 slices
check out the experiment of animating with GTween here – 25 slices
everytime you click the stage, the picture will move to this new position.
I like the 25 slice experiment, looks kinda nice.
more GTween:
interested in more about GTween, read my first post on the topic here:
ActionScript 3.0: exploring GTween post 01: the ColorAdjustPlugin
credits:
the blog post by Kaiyi Wong
the Kuler theme used for these experiments
the GTween animation library
ActionScript 3.0: exploring GTween post 01: the ColorAdjustPlugin
if you want an easy access to adjust the colors of your Objects in Flash, why not consider the ColorAdjustPlugin in GTween.. well, I did, and here’s a couple of examples on how it works.
saturation:
taking saturation from 0 to -100 drags the colors from the Object,
this example shows how the saturation is changed from 0 to -100 in 3 seconds
and
this example shows how the saturation is changed from -100 to 0 in 3 seconds
but saturation ranges from -100 to 100 so
this example shows how the saturation is changed from 0 to 100 in 3 seconds
and for the sake of funkiness,
this example shows how the saturation repeatedly is changed from -100 to 100 and back in 1 second
contrast:
the contrasts of the colors in the picture can be taken to the extreme (100) og the opposite (-100), adding contrast intensifies the effect of saturation
this example shows how the saturation repeatedly is changed from -100 to 100 and back in 3 seconds – while contrast is changing from 0 to 100
possibilities:
the ColorAdjustPlugin handles tweening an Object based on the “brightness”, “contrast”, “saturation”, and/or “hue” tween values, so go on, try it for yourself.
ActionScript:
the ActionScript for the last example can be grabbed here
import com.gskinner.motion.GTween;
import com.gskinner.motion.plugins.ColorAdjustPlugin;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
public class GTweenColorAdjust extends MovieClip {
public var image:Sprite;
public var myButton:MovieClip;
public function GTweenColorAdjust() {
ColorAdjustPlugin.install();
myButton.mouseChildren = false;
myButton.buttonMode = true;
myButton.addEventListener(MouseEvent.CLICK, doTheAnimation, false, 0, true);
}
private function doTheAnimation(e:MouseEvent):void {
new GTween(image, 3, {saturation:-100, contrast:100}, {repeatCount:0, reflect:true});
}
}
}
more on GTween will surely follow..
btw, the amazed guy in the picture is my friend and former colleague Rasmus Mikkelsen.
Rasmus was also a part of this scary videobanner-project