atter engang ledte Google Reader mig forbi Ernesto Quezada's blog og denne gang læste jeg med stor interesse indlægget om Tweeners onUpdate parameter.. for selv om jeg gennem det sidste år har brugt Tweener i nærmest alle Flash-projekter, så har jeg aldrig brugt, eller været opmærksom på muligheden for brug af parametret onUpdate.

dette gør Tweener endnu bedre... som om Tweener ikke i sig selv er en gave til Flash i forvejen.

så, for at vise en fornuftig form for brug af dette parameter, lavede jeg dette meget simple spil.
sådan ser spillet ud uden brug af onUpdate parametret

det er meget simpelt - hver gang du klikker på en af de 3 knapper, tilføjer du nogle pixel til længden af din bar nederst. længden af baren vil blive skrevet ud til dig i et tekstfelt, når baren er færdig med at vokse.

men ville det ikke være meget mere lækkert, hvis tekstfeltet opdaterede info om længden på baren mens den voksede istedet? klart!

så se denne version 2 af samme spil :O)

denne gang, samme tåbelige spil, men med et forbedret tekstfelt, der opdaterer info om længden på tekstfeltet, mens den vokser.
her er hvad der er skrevet i ActionScript:

//importer Tweener
import caurina.transitions.Tweener;

//sæt myScore til 1 og definer teksten i myCounter tekstfeltet
var myScore:Number = 1;
myCounter.text = myScore +" px";

//tilføj eventListeners som kalder funktionen boostMyLine når der klikkes på knapperne
add100_mc.addEventListener(MouseEvent.CLICK, boostMyLine);
add50_mc.addEventListener(MouseEvent.CLICK, boostMyLine);
add20_mc.addEventListener(MouseEvent.CLICK, boostMyLine);

//funktionen boostMyLine
//denne funktion tilføjer 20, 50 eller 100px til bar'ens længde.
//det tager 0.6 sekund at booste linien, i disse 0,6 sekunder kører funktionen showMyUpdate
//når baren er vokset færdig kører funktionen completedMyUpdate
function boostMyLine(e:Event):void {

if (e.target.name == "add20_mc") {
Tweener.addTween(myLine, {width:myScore+20, time:0.6, onUpdate:showMyUpdate, onComplete:completedMyUpdate});
} else if (e.target.name == "add50_mc") {
Tweener.addTween(myLine, {width:myScore+50, time:0.6, onUpdate:showMyUpdate, onComplete:completedMyUpdate});
} else if (e.target.name == "add100_mc") {
Tweener.addTween(myLine, {width:myScore+100, time:0.6, onUpdate:showMyUpdate, onComplete:completedMyUpdate});
} else {
trace("none of the ones above");
}

}

//mens baren vokser skrives den pixel-længde ud i tekstfeltet myCounter
function showMyUpdate():void {
//trace("function showMyUpdate");
myCounter.text = String(Math.round(myLine.width)) + " px";
}

//slutteligt, hvis baren vokser sig større end 550 px, vokser den automatisk tilbage til 1 px
function completedMyUpdate():void {
myScore = myLine.width;
if (myScore > 550){
Tweener.addTween(myLine, {width:1, time:0.6, onUpdate:showMyUpdate});
myScore = 1;
}
}

Tweener er fantastisk - tak til Zeh Fernando for at have udviklet det og tak til Ernesto Quezada for at gøre opmærksom på dette parameter...

(farverne i flash'en er tilhørende cherry cheesecake-farveskemaet i adobe's kuler)

ved at loade 2 billeder ovenpå hinanden, og kun lade det øverste billede være synligt ved mouseOver, kan man let lave et "fortryllet billedmodul" i Flash.
et sådan modul kunne fungere på denne måde:
http://campjohn.dk/AS3/Invita/enhancedPicture/exampla.html

(billederne i dette eksempel er lavet af min kollega Rune, der er en mester i Paint :D )

i ActionScript3.0 kunne eksemplet ovenfor kodes på denne måde:

//stop timeline i Flash'en
stop();

//importer de klasser, man har brug for
import caurina.transitions.Tweener;

//lav en Sprite, der skal indeholde det billede, der vises ved mouseOver
//en Sprite er som et MovieClip, men Sprites har - modsat MovieClips - ingen timeline.
//det har vi ikke brug for, så en Sprite er fint i denne henseende
var myForegroundSprite:Sprite = new Sprite();

//opret de to links til billederne, der skal bruges
var myBackgroundPictureURL:String = "infoPicRED.jpg";
var myForegroundPictureURL:String = "infoPicRED_shift.jpg";

//sæt funktionen createBackground igang
createBackground();

//funktionen createBackground
function createBackground():void {
    //opret en loader, der kan håndtere at loade et billede ind i Flash'en
    var myBackgroundLoader:Loader = new Loader();

    //load billedet ind i Flash'en
    var url:String = myBackgroundPictureURL;
    var urlReq:URLRequest = new URLRequest(url);
    myBackgroundLoader.load(urlReq);

    //gør billedet synligt ved at placere det på scenen i Flash
    addChild(myBackgroundLoader);

    //sæt funktionen createForeground igang
    createForeground();
}

//funktionen createForeground
function createForeground():void {
    //smid myForegroundSprite på scenen
    addChild(myForegroundSprite);

    //
    var myForegroundLoader:Loader = new Loader();
   
    //
    var url:String = myForegroundPictureURL;
    var urlReq:URLRequest = new URLRequest(url);
    myForegroundLoader.load(urlReq);

    //sæt myForegroundSprite'n gennemsigtighed til 0, så det stadig er myBackgroundLoader, der er synlig, selv når myForegroundSprite'n smides ovenpå   
    myForegroundSprite.alpha = 0;

    //put myForegroundLoader ind i myForegroundSprite'n og smid det på scenen.
    //grunden til at myForegroundLoaderen ikke smides direkte på scenen er, at man ikke kan interagere med Loader'e
    //det kan man derimod med Sprites
    myForegroundSprite.addChild(myForegroundLoader);

    //sæt funktionen createInteraction igang
    createInteraction();
}

function createInteraction():void {
    //hvis musen kommer over myForegroundSprite, skal funktionen myMouseOver køre  
    myForegroundSprite.addEventListener(MouseEvent.MOUSE_OVER, myMouseOver);

    //hvis musen forlader myForegroundSprite, så skal funktionen myMouseOut køre       
    myForegroundSprite.addEventListener(MouseEvent.MOUSE_OUT, myMouseOut);
   
    //lad håndikonet vises istedet for pilikonet for musen, når musen interagerer med myForegroundSprite  
    myForegroundSprite.buttonMode = true;
}


function myMouseOver(e:Event):void {
    //lad myForegroundSprite blive helt synlig over 0.7 sekund
    Tweener.addTween(myForegroundSprite, {alpha:1, time:0.7, transition:"linear"});
}
function myMouseOut(e:Event):void {
    //lad myForegroundSprite blive helt usynlig over 0.7 sekund  
    Tweener.addTween(myForegroundSprite, {alpha:0, time:0.7, transition:"linear"});
}





her er koden uden alle kommentarerne:
stop();

import caurina.transitions.Tweener;

var myForegroundSprite:Sprite = new Sprite();

var myBackgroundPictureURL:String = "infoPicRED.jpg";
var myForegroundPictureURL:String = "infoPicRED_shift.jpg";

createBackground();

function createBackground():void {
    var myBackgroundLoader:Loader = new Loader();
    var url:String = myBackgroundPictureURL;
    var urlReq:URLRequest = new URLRequest(url);
    myBackgroundLoader.load(urlReq);
    addChild(myBackgroundLoader);
    createForeground();
}

function createForeground():void {
    addChild(myForegroundSprite);
    var myForegroundLoader:Loader = new Loader();
    var url:String = myForegroundPictureURL;
    var urlReq:URLRequest = new URLRequest(url);
    myForegroundLoader.load(urlReq);
    myForegroundSprite.alpha = 0;
    myForegroundSprite.addChild(myForegroundLoader);
    createInteraction();
}

function createInteraction():void {
    myForegroundSprite.addEventListener(MouseEvent.MOUSE_OVER, myMouseOver);
    myForegroundSprite.addEventListener(MouseEvent.MOUSE_OUT, myMouseOut);
    myForegroundSprite.buttonMode = true;
}


function myMouseOver(e:Event):void {
    Tweener.addTween(myForegroundSprite, {alpha:1, time:0.7, transition:"linear"});
}
function myMouseOut(e:Event):void {
    Tweener.addTween(myForegroundSprite, {alpha:0, time:0.7, transition:"linear"});
}

Maria og jeg arbejdede for nyligt med en lille sag, der skulle vise et af 3 mulige billeder i Flash.
dette løste vi på en ret simpel måde.
først oprettede vi en Loader, som kunne håndtere, at loade billedet:
var _loader:Loader = new Loader;

dernæst oprettede vi et Array, som er en liste over de mulige billeder, Flash'en skal kunne loade:
var _pictureArray:Array = ["1.jpg", "2.jpg", "3.jpg"];

slutteligt fandt vi et tilfældigt tal mellem 0 og 2 (altså 0, 1 og 2):
var _whatPicture:Number = Math.floor(Math.random()*3);

herefter satte vi en eventListener op, der ville starte funktionen onComplete, når Loaderen havde loadet billedet:
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

og så bad vi Loaderen om at loade et af billederne.
da et Array starter ved 0 vil vores tilfældige tal 0, 1 og 2 repræsterer henholdsvis billede 1.jpg, 2.jpg og 3.jpg:
_loader.load(new URLRequest(_pictureArray[_whatPicture]));

når billedet var blevet loadet bruger man indholdet af Loaderen til at lave sit billede:
var _image:Bitmap = Bitmap(_loader.content);
var _bitmap:BitmapData = _image.bitmapData;

man sikrer at billedet er usynligt:
_image.alpha = 0;

man gør billedet synligt ved at tilføje det til scenen:
addChild(_image);

og derefter - for at give Flash'en en smule flashy effekt - fader man det ind:
Tweener.addTween(_image, {alpha:1, time:0.5, transition:"linear"});

se et eksempel på en Flash, der loader et tilfældigt billede her:

reload siden, og se, hvordan det virker tilfældigt hvilket billede, der vises.



koden kan i sin helhed ses her:

stop();

//imports
import caurina.transitions.Tweener;

//var
var _loader:Loader = new Loader;
var _pictureArray:Array = ["1.jpg", "2.jpg", "3.jpg"];
var _whatPicture:Number = Math.floor(Math.random()*3);
trace("_whatPicture = "+_whatPicture);

//eventlisteners
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

//init
_loader.load(new URLRequest(_pictureArray[_whatPicture]));

//removeEventListener

//functions
function onComplete(e:Event):void{
    var _image:Bitmap = Bitmap(_loader.content);
    var _bitmap:BitmapData = _image.bitmapData;
    _image.alpha = 0;
    addChild(_image);
    Tweener.addTween(_image, {alpha:1, time:0.5, transition:"linear"});
}

i ActionScript3.0 vil man før eller senere støde ind i problemer med at man ikke kan sende parametre direkte med sin eventListener.

her er beskrivelsen af en eventListener, direkte fra hjælp-funktionen i Flash:
function eventResponse(eventObject:EventType):void
{
    // Actions performed in response to the event go here.
}

eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);

man lader sin eventSource (f. eks. en knap) vente på EventType (f. eks. et klik) og eventResponse (f. eks. en funktion, der gør knappen blå istedet for gul)


her er et eksempel bygget over ovenstående:
eksempel hvor man med fordel ville kunne sende parametre med sin eventListener

ved at klikke på en af de små bokse til venstre, tager den store boks samme farve.
smart nok.

men måden det fungerer på er lidt bøvlet, her er koden:

//imports
import caurina.transitions.Tweener;

blueBox.addEventListener(MouseEvent.CLICK, changeColor);
redBox.addEventListener(MouseEvent.CLICK, changeColor);
yellowBox.addEventListener(MouseEvent.CLICK, changeColor);

function changeColor( e:Event ):void{
    switch( e.target.name ){
        case "blueBox":
            trace( "blueBox" );
            Tweener.addTween(this.bigBox, {_color:0x0000FF, time:1, transition:"linear"});
        break;
        case "redBox":
            Tweener.addTween(this.bigBox, {_color:0xFF0000, time:1, transition:"linear"});
        break;
        case "yellowBox":
            Tweener.addTween(this.bigBox, {_color:0xFFFF00, time:1, transition:"linear"});
        break;
    }
}

her bliver man nød til at bruge en switch for at bestemme, hvilken af de små bokse, der er klikket på, og derefter tilegne den store boks den samme farve som den boks, der er klikket på..

men nu har jeg endeligt opdaget et alternativ til dette.
her er den nye kode:

//imports
import caurina.transitions.Tweener;

blueBox.addEventListener(MouseEvent.CLICK, changeColor);
redBox.addEventListener(MouseEvent.CLICK, changeColor);
yellowBox.addEventListener(MouseEvent.CLICK, changeColor);
blueBox._color=  0x0000FF;
redBox._color=0xFF0000;
yellowBox._color=0xFFFF00;

function changeColor( e:Event ):void {
    Tweener.addTween(this.bigBox, {_color:e.target._color, time:1, transition:"linear"});
}

her tildeler man hver boks et farve-parameter på denne måde blueBox._color =  0x0000FF; ...og dette kan så tilgåes senere i funktionen vha. e.target._color


det virker og gør ens arbejde en del nemmere :O)