Archive for januar, 2010
After Effects: creating a demo TV ad for Fleur Bodywear / using a 24 mm camera
a couple of times each year I set up a DVD for Fleur, showing all the nice, new lingerie the make.
and having for a long time wanted to work a bit with cameras in 3D space in After Effects, I decided to make a demo TV ad from the slides of the DVD.
check out the Fleur TV ad demo set up as an Flash Video file here (1024 x 576 px).
or check out the Fleur TV ad demo set up on Vimeo here.
hope you like it.
credits:
the DVD for Fleur. (no sound)
music from Soundsnap.
Per Andersen from Komo for guidance and inspiration.
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: taking advantage of the event path when using addEventListener
lesson:
ok, I just learned this by Nutrox:
Mouse events in AS3 go through a capture, target and bubble phase. When a mouse event is triggered it is dispatched by the stage and drills down through the display list (capture phase) until it reaches the mouse target (target phase), it will then bubble up the display list back to the stage (bubble phase).
take a look at this taking advantage of the event path of mouse events in ActionScript 3.0
the old way of ActionScripting my way through a project
for an example like the one above, I would normally add an event listener for each of the 5 squares:
benched2.addEventListener(MouseEvent.CLICK, getThatBenchedColor, false, 0, true);
benched3.addEventListener(MouseEvent.CLICK, getThatBenchedColor, false, 0, true);
benched4.addEventListener(MouseEvent.CLICK, getThatBenchedColor, false, 0, true);
benched5.addEventListener(MouseEvent.CLICK, getThatBenchedColor, false, 0, true);
the new way of ActionScripting my way through a project
but with the new knowledge, I now collect all of my squares in a MovieClip, and simply assign the event listener to the new parent MovieClip:
this works just as well, nice, right?
the entire ActionScript:
benchedAll.benched1.buttonMode = true;
benchedAll.benched2.buttonMode = true;
benchedAll.benched3.buttonMode = true;
benchedAll.benched4.buttonMode = true;
benchedAll.benched5.buttonMode = true;
benchedAll.benched1._color = "C21201";
benchedAll.benched2._color = "7D1C18";
benchedAll.benched3._color = "33231B";
benchedAll.benched4._color = "094239";
benchedAll.benched5._color = "AD9742";
function getThatBenchedColor(e:MouseEvent):void {
benchedtext.text = "e.target._color = "+e.target._color+" & e.target.name = "+e.target.name;
}
credits:
Nutrox, for all the patience :O)
the benched theme from Kuler
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