. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK ActionScript

LocalConnection - kommunikáció Flash mozik között
  feltöltve: 2005.11.23 | szerző: Peet86 | olvasva: 7218 alkalommal

 
 

A LocalConnection-nel ismerkedünk meg, mely lehetővé teszi az SWF fájlok közti kommunikációt szkriptnyelvek nélkül tisztán Flashben. A segédlet egy egyszerű példán mutatja be az objektum alkalmazását.

A segédlet elkészítéséhez két mozira lesz szükségünk. Az elsőben egy egyszerű drag&drop eseménnyel fogunk eltüntetni egy labdát, ami a másikban animálva jelenik meg. Az első mozinak továbbá egy reset funkciója is van, mely mindkét mozit alaphelyzetbe állítja.

Az első mozi:

1. lépés: Hozzunk létre egy tetszőleges méretű flash dokumentumot! (Az egész segédletre vonatkozik, hogy méret és elrendezés független, de a változók és objektumok nevei azonosak kell, hogy legyenek az ActionScript beli elnevezésekkel!)

2. lépés: Készítsük el a mozi elemeit! Szükségünk lesz egy 'teleportáló' mc-re, amire a logo-t draggelhetjük. Rajzoljunk egy akármilyen alakzatot (a példában egy félkör) és nevezzük el 'teleport'-nak.
Kell egy másik mc, amit draggelünk. Ebben az esetben az swf.hu logojával ellátott labda, melyet 'logo' névre kereszteltünk a properties ablakban. A színpadon a teleport feletti rétegre helyezzük el. A harmadik elem egy tetszőleges gomb, melyre késöbb 'resetgomb' néven hivatkozunk az AS kódban, ezért feltétlenül ezt a nevet adjuk neki!





3. lépés: Az első réteg első framejére illesszük be az alábbi AS kódot:

//a logo eredeti helyének meghatározása
eredetiX = logo._x;
eredetiY = logo._y;

//a reset gombot alaphelyzetben láthatatlanná teszi
resetgomb._visible=false


//start drag
logo.onPress = function() {
      this.startDrag();
};


//stop drag
logo.onRelease = function() {
      this.stopDrag();

     //ha a teleport fölé érkezik a logo mc
      if (eval(this._droptarget) ==teleport) {
           logo._x = teleport._x;
           logo._y = teleport._y;
           logo._visible=false

           //reset gomb megjelenítése
           resetgomb._visible=true
           // a tovabbitas fv-t hívja meg.
           tovabbitas("teleportalas")
     //ha nem találtál bele
     } else {
           logo._x = eredetiX;
           logo._y = eredetiY;
     }
};


//reset gomb visszaállítja mind a két mozit alaphelyzetbe
resetgomb.onRelease = function(){
     logo._x = eredetiX;
     logo._y = eredetiY;
     logo._visible=true
     resetgomb._visible=false
     //a másik moziban is resetel a LocalConnection segítségével.
     tovabbitas("reset")
}

function tovabbitas(parancs){
//új LocalConnection objektum létrehozása
my_Lc= new LocalConnection();
//a "parancs" átadása a létrehozott LocalConnection segítségével
my_Lc.send("_myLocalConnection","recievedValue",parancs)
}


A fenti programkód feladata, hogy a labda és a sötét terület koordinátáinak egyezésekor meghívja a tovabbitas() függvényt, melynek átadja a "teleportalas" parancsot. A függvényben ezután létrejön egy új LocalConnection objektum, melyet a send utasítással 'ráveszünk', hogy elküldje a "parancs" nevű változónkat. A kód továbbá a reset gomb eseménykezelését is tartalmazza, mely a "reset" parancsot küldi el a másik mozinak ugyancsak a tovabbitas() függvény segítségével, továbbá alaphelyzetbe állítja a mozit.

A draggelés megértéséhez ajánlom berry remek segédletét: A startDrag és a stopDrag alkalmazása

(fogd az SWF logót és húzd a fekete felületre!)

4. lépés: Mentsük el munkánkat movie1 néven és exportáljuk swf, illetve a beágyazás kódja miatt html fájlba (a segédlet végén a közös beágyazáshoz használjuk fel a html kódot).

A második mozi:

Most már jöhet a második mozi, ami fogadja az elsőből elküldött adatokat.


(hasonló látványos trükkel oldható meg 2 banner vizuális
összjátéka/kommunkációja egy portál oldalon belül)

1. lépés: Hozzunk létre egy tetszőleges méretű flash dokumentumot, ugyan úgy mint az előbb. Erre a legegyszerűbb megoldás, ha az egész fla fájlt elmentjük movie2.fla néven és kicsit átszerkesztjük.



2. lépés: A képi elemeket pozícionáljuk a példa-animációhoz hasonlóan! A 'teleport'-on egyszerűen forgassunk 180 fokot, a 'logo'-t pedig pozícionáljuk y=0-ra. A reset gombot és az első frame AS kódját töröljük ki, és a kód helyére ezt másoljuk:

//fogadó objektum létrehozása
myReceiving_Lc = new LocalConnection()
// a " _myLocalConnection"-t még a movie1-ben hoztuk létre.
myReceiving_Lc.connect("_myLocalConnection")
//a parancs végrehajtása
myReceiving_Lc.recievedValue = function(parancs){
     //ha teleportálás
     if (parancs=="teleportalas"){
           logoanim.gotoAndStop(2)

     //ha reset
     }else{
           logoanim.gotoAndStop(1)
     }
}


Ez a kód fogadja a movie1-ből küldött parancsot a LocalConnection objektum segítségével, majd végrehajtja a 'parancsot'.

3. lépés: A kódból kitűnik, hogy egy animációt ("logoanim") vezérlünk vele. Fogjuk tehát a logo-t és konvertáljuk a jobb egér > Convert to Symbol parancsával egy újabb movie clip-be. Az így kapott mozit nevezzük el a properties ablakban logoanim-nak, hogy az ActionScript parancsok helyesen működjenek. A logoanim animáción belül két layert hozzunk létre. A második layer első frame-jét üresen hagyjuk, a másodikba helyezzük át a logo-t.



4. lépés:Másoljuk be az animációt megállító stop() utasításokat:

Frame1:
stop()

Frame2:
stop()

5. lépés:
Animáljuk a logot! A logo mc-re kattntva másoljuk a kódszerkesztőbe ezt:

//a logo animálása
onClipEvent(load) {
      gravitacio = 3;
      sebesseg = 0;
      fold = 250;
}

onClipEvent(enterFrame) {
      sebesseg += gravitacio;
      pozicio = _y + sebesseg;
      if (pozicio > fold) {
           _y = fold;
           sebesseg = -sebesseg*0.8;
      } else {
           _y += sebesseg;
      }
}


Az utóbbi ActionScript megértéséhez papp Dinamikus mozgások ActionScripttel - 3. rész könnyen elsajátítható segédletét ajánlom, egyúttal köszönöm is neki a felhasznált kódot.

6. lépés: Mentsük el munkánkat movie2 néven és exportáljuk swf, illetve a beágyazás kódja miatt html fájlba.


Francia ágy, avagy Két mozi egy oldalban:

Nincs más hátra, az elkészült két flash mozit egy közös HTML oldalba kell ágyazni. A forrásfájlban elhelyezett teszt.html tartalmazza az ehez szükséges HTML kódot, ide nem írom le, mert mindössze arról van szó, hogy a mozi1 és mozi2 beágyazási html kódját egy közös, a segédletben teszt.html nevű oldalba másoljuk.

A két mozi külön külön oldalban is működik, ekkor azonban vigyázni kell, hogy ne fusson a vezérelt moziból egy másik példány is, mert kavarodást okozhat.

Végül nyissuk meg egy böngészőben és próbáljuk ki az elkészült anyagot.

Remélem hasznodra vált ez a segédlet. Ha bármilyen kérdésed lenne a leírtakkal kapcsolatban, szívesen segítek!

 
 
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .