ActionScript3.0: sådan laves et "fortryllet billedmodul" i Flash

15. juni 2008


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

Vær den første til at give point

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , , , , , , ,

ActionScript3.0: vise tilfældigt billede i Flash

4. juni 2008

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

Har i øjeblikket 4.0 point givet af 1 læsere

  • Currently 4/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , , ,

Powered by BlogEngine.NET 1.3.1.0
Theme by Mads Kristensen (Modifed by Co3)


Om mig

Felix Sanchez Felix Sanchez
Flashin’ about

Send mig en mail Send mail

Kategorier

None

Seneste kommentarer