Ett vanligt fel... PDF Skriv ut Skicka sidan
2009-09-25 16:27

.. som man som nybörjare kan råka ut för.

När man läser om Flash och animeringar (med AS3) så blir man ju alldeles till sig och kan inte vänta till man
kan släppa loss sina fingrar på tangetbordet för att börja koda i AS3.

 

 

Något som jag själv, några gånger  gjorde fel på, och även många andra gör och kommer att göra, när man ska animera ett objekt från punkt
A till punkt B.

 Man öppnar upp Flash och Actionsript panelen och börjar skriva:

var cirkel:Sprite = new Sprite();
cirkel.graphics.beginFill(0);
cirkel.graphics.drawCircle(50,50, 40);
cirkel.graphics.endFill();
addChild(cirkel);
 
cirkel.x = 300;
cirkel.y = 50;

 Man tror att denna kod ska animera vår cirkel objektet och trycker glatt på CTRL+ENTER och upptäcker

att cirkeln är helt stilla.

Det som egentligen händer är att när man kör en flash fil så läses all kod in på marginaler av millisekunder.
Först så placerar vi cirkeln på denna position x=50 och y=50, men när man kör filmen så är cirkeln
inte ens i närheten av denna position.
Direkt efter addChild(cirkel) har vi kod för den nya positionen.

Flash skapar cirkeln först på x=50 och y=50 och när  vi lägger till cirkeln på scenen så kommer en ny position dit cirkeln flyttas INNAN vi
ser själva cirkeln.

Man kan säga att Flash följer denna struktur:

  1. Rendera bildruta (frame)
  2. Applicera regler/egenskaper
  3. Klar ? (Om inte, börja om från 1 annars fortsätt till 4)
  4. Visa bildrutan och dess innehåll

Så vår kod ovan med denna struktur:

// 1. Rendera bildruta
// 2. Applicera egenskaper
var cirkel:Sprite = new Sprite();
cirkel.graphics.beginFill(0);
cirkel.graphics.drawCircle(50,50, 40);
cirkel.graphics.endFill();
addChild(cirkel);
 
// 3. Klar ? Nej, Flash hittar ännu mer kod för vår cirkel
// 1. Rendera bildrutan igen
// 2. Applicera egenskaper ovan OCH dessa nedan (dvs en NY position för cirkeln)
cirkel.x = 300;
cirkel.y = 50;
 
// 3. Klar ?  Ja,  flash hittar inga mer egenskaper för cirkeln
// 4. Publicera bildrutan nu! (Det är nu allt blir synligt och inte innan)

 

Punk1-3 sker väldigt fort och det visas inte, utan det först på punkt 4 Flash visar objektet med dess inställda egenskaper.


Så för att  vår cirkel ska animeras till den nya positionen x=300 och y=50 så måste vi köra om denna bildruta om och om igen.

För det skriver vi en sådan kod:

var cirkel:Sprite = new Sprite();
cirkel.graphics.beginFill(0);
cirkel.graphics.drawCircle(50,50, 40);
cirkel.graphics.endFill();
stage.addEventListener(Event.ENTER_FRAME, animera);
addChild(cirkel);
 
function animera(e:Event):void{
    cirkel.x += 2;
    if(cirkel.x >= 300){
        stage.removeEventListener(Event.ENTER_FRAME, animera);
    }
}

Som du ser så finns en ny kod på rad nr. 5 och en funktion som heter animera. Vad rad 5 gör är att vi sätter
en händelseLyssnare (EventListener) på vår scen, varje gång flash spelar en bildruta eller  går in i en ny bildruta (ENTER_FRAME)
så ska vi köra en funktion (rad 8-13).

Varje gång vi kör denna funktion så ska vi lägga på värde 2 i cirkelns x, dvs vi flyttar den 2 pixlar till höger.
Om cirkelns x position är lika-med eller större än 300 så tar vi bort denna lyssnare från scenen, för att vi ska stoppa cirkelns rörelse till höger.

Denna kod med strukturen:

// 1. Rendera bildrutan
// 2. Applicera egenskaper
var cirkel:Sprite = new Sprite();
cirkel.graphics.beginFill(0);
cirkel.graphics.drawCircle(50,50, 40);
cirkel.graphics.endFill();
stage.addEventListener(Event.ENTER_FRAME, animera);
addChild(cirkel);
 
// 3. Klar ?  Nej, Flash börjar nu om  från punkt 1
 
// 1. Rendera bildrutan igen
// 2. Applicera egenskaper (kör om koden från början)
function animera(e:Event):void{
    cirkel.x += 2;
    if(cirkel.x >= 300){
        stage.removeEventListener(Event.ENTER_FRAME, animera);
    }
}
// 3. Klar ? Ja, nu har Flash läst in allt för vår cirkel.
// 4. Visa bildrutan och dess innehåll.
// Men iom. att vi har en EventListener, så kommer flash
// fortsätta köra denna kod OM och OM igen, tills 
// vi tar bort händelseLyssnaren med removeEventListener()

Detsamma som jag visar i kod, sker även i Flash när du animerar direkt på tidslinjen och du inte har skrivit nån kod alls. Denna struktur
följs alltid.

Rendera bildruta
Applicera egenskaper: x, y, alpha, width, height osv...
Klar ?
|- om Nej, börja om 
|- om Ja, visa bildruta med objekten

När det gäller animering, så finns det enklare sätt att animera. Exempel med hjälp av Caurina (som är väldigt populär och enkel använd).
Så med andra ord, du behöver inte uppfinna hjulet på nytt, återanvänd det som är uppfunnet :)


Bedöm artikeln:
( 1 Bedömning )
Skapad 2009-09-25 16:27 av Danel Kirch

Visad 1412 gånger än så länge.

Senaste artiklarna av Danel Kirch


Senast uppdaterad 2010-03-03 23:21

Lägg till kommentar


Medlemmar


Members Online: 0

Senaste registrerade

LisaRaichand : 22 april 2012 19:55pilu : 31 januari 2012 09:58Gostship99 : 07 januari 2012 19:37Director : 18 november 2011 05:44Dahlback : 17 november 2011 16:28mikwonwheels : 14 november 2011 13:20Kviddis : 04 oktober 2011 19:53buddha1966 : 25 september 2011 14:22idesign : 20 september 2011 08:45TxT : 05 september 2011 11:07ApelG : 05 september 2011 11:04
Partners
Adobe user group
fdt5-logo
TechSmith
Lynda user group
Apress user group
O´reilly user group
Peachpit user group
Friends Of Ed
Manning user group


Senaste blogginläggen

Av: Danel
-20.02.2012
Av: Patric Jonsson
-27.01.2012
Av: Patric Jonsson
- 3.01.2012
Av: Patric Jonsson
-29.11.2011
Av: Danel
-26.11.2011
Av: Patric Jonsson
-14.11.2011
Av: Patric Jonsson
- 8.11.2011
Av: Danel
- 7.11.2011
Av: Patric Jonsson
-27.09.2011

Senaste kommentarer

Senaste trådarna

Av Hallon
- 08/05/2012
Av goldensebbe
- 06/04/2012
Av Hallon
- 29/03/2012
Av buddha1966
- 06/03/2012
Av buddha1966
- 29/02/2012
Av Wide Circle
- 20/02/2012
Av zocstyle
- 15/02/2012
Av ufoalf30
- 05/01/2012
Av peterdavidsson
- 08/12/2011
Av JohnPaulie
- 03/12/2011
Av coffaldo
- 17/11/2011
Av buddha1966
- 05/11/2011
Av buddha1966
- 03/11/2011

Blogkalender

  • 2012 (3)
  • 2011 (37)
  • 2010 (85)
  • 2009 (18)
  • Vem är online

    Vi har 18 besökare online
    RSS
    Danel Kirch
    RocketTheme Joomla Templates