Flash programozás 1.

Feladat:
Az alábbi alkalmazást kell elkészítenünk Flash segítségével:

Forrás

Fontos a munka előtt, hogy figyeljük meg: mit csinál pontosan az alkalmazás, milyen grafikus elemekkel mit képes végrehajtani.
Ez azt tudja, hogy ha kiválasztom az ábrát és megnyomok egy gombot, akkor a gombnak megfelelően viselkedjen a kiválasztott ábra.
A képen két ábrát látunk, amelyekkel kiválasztás után különböző transzformációkat végezhetünk (forgatás, nagyítás) gombok segítségével.
Minden alkalmazásnál be kell határolnunk, hogy milyen eseményre mi kell, hogy történjen, pl. a forgatás gombra az adott ábra forduljon el.
esemény: klikk a forgatás gombon
funkció: forduljon el a kiválasztott
Az eseményt és a funkciót élesen válasszuk el egymástól.

Legelőször végezzük el az alapbeállításokat:
File/New és itt válasszuk az AS3 alkalmazást, a méreteket állítsuk be 550X400 pixel méretre:

Állítsuk be már most a fordítás környezetét, hogy később ne legyen vele gond (Publish Settings):

Vegyük ki a pipát a HTML wrapper elől, mert csak az swf fájlra lesz egyenlőre szükségünk, a script-nél hagyjuk meg az „Actionscript 3.0” beállítást, majd tallózzuk be azt a helyet, ahová az swf-et szeretnénk fordítani:

A fordítás után az akarmi1.swf lesz a miénk.
Ajánlott egy próbafordítás munka előtt, hogy meggyőződjünk róla, nincs a Flash-sel semmi probléma:

Az alkalmazásunk 4 alapvető rétegen helyezhető el a logika kedvéért, ezek lehetnek egy rétegen is, de a későbbiek miatt legyen így: Egy rétegre kerül az összes gomb, egy másikra a forgatandó képek, egy harmadikra felirat és a negyedikre tesszük azt a scriptet, ami vezérli az alkalmazást.
Hozzuk létre a rétegeket:

Legyenek a rétegek Layer 1-4 helyett rendre: program, szoveg, kepek, gombok

Készítsük el az alkalmazás elemeit!

Szükségünk van egy TEXT mezőre a rend kedvéért a szoveg rétegen, 6 db gombra a gombok rétegen, a két ábrára a kepek rétegen.
Álljunk a „szoveg” rétegre és készítsük el a szövegmezőt, majd írjuk be az alkalmazás indulásakor megjelenítendő szöveget.
Válasszuk ki a Text Tool-t, készítsük el a szövegmezőt, majd írjuk be a szöveget.
FONTOS: a szövegmezőnek adjuk a „felirat” instance nevet!

Most a gombok következnek a gombok rétegen, a gombok beépített komponensek a Flash-ben, így használható a komponens könyvtár.

Eredmény:

Fontos, hogy a gombunknak még nem tudunk instance nevet adni!
Készítsük el a másik 5 gombot is:

Fogjuk meg az egérrel a gomb komponenst és húzzuk rá a rétegre a feladat elrendezésének megfelelően.
Szükség lesz még a feliratoknál betűkészletre: Text/Font embedding

Így létrehoztunk 6 példányt a gomb komponensből és beágyaztunk egy karakterkészletet.
Már csak a két ábra beillesztése van hátra, ezek lehetnek képfájlok is de rajzolni is lehet:

File/Import to Stage:

A képek elhelyezése után a grafikai elemek készen állnak:

A gombokat lássuk el a megfelelő feliratokkal és instance nevekkel (Az instance nevekben ne legyen ékezet és szóköz!):

Látható, hogy a gombok Movieclip típusú objektumok a megfelelő instance nevekben megadott azonosító szerint példányosítva.
Az objektum példánynak már lehetnek tulajdonságai (pl. méret, szín) és metódusai (pl eseménykezelő (ráklikkeléskor végrehajt valamit)). Annak érdekében, hogy a képekkel is lehessen valamit kezdeni, átalakítjuk őket Movieclip objektummá és példányaiknak az „egyes” és a „kettes” nevet adjuk.

 

 

A legfontosabb, hogy a felirat kivételével minden elem MovieClip típusú objektumpéldány legyen programozható paraméterekkel és eljárásokkal (metódusokkal).

Az Actionscript kód megértéséhez fontos, hogy az előbb létrehozott MovieClipek tulajdonságait fogjuk módosítani (kicsinyítés, nagyítás, elfordulás, láthatóság) és ezeket a tulajdonságokat a gombokon bekövetkező esemény hatására módosítjuk.

A program (actionscript) elkészítése előtt mivel rendelkezünk?

Képi elem	Felirat	Instance név	funkció
Balra gomb		balra	Balra forgat
Jobbra gomb		jobbra	Jobbra forgat
Kicsinyít gomb		kicsinyit	Méretezés
Nagyít gomb		nagyit	Méretezés
Megjelenít gomb		megjelenit	Láthatóság 100%
Elrejt gomb		elrejt	Láthatóság 0%
1 eurós kép		egyes	Kiválasztás
2 eurós kép		kettes	Kiválasztás

Végül a fentek figyelembe vételével az Actionscript program:

//a Flash saját alprogramjainak hívása a mozgatásokhoz:
import fl.transitions.Tween
import fl.transitions.easing.*
//meghatározunk egy „kivalasztott” nevű változót, ami a mozgatandó kép egy példánya lesz
var kivalasztott : MovieClip = new MovieClip
//engedélyezzük, hogy a képek gombként viselkedjenek:
egyes.buttonMode = true
kettes.buttonMode = true
//minden egyes gombra meghatározunk egy eljárást pl., ha az „egyes” gombon, tehát a képen klikkelünk,
//akkor hajtsa végre az „egyeske” nevű eljárást, ha a „balra” gombra klikkel, akkor a „balraf”
//nevű eljárást és így tovább
egyes.addEventListener(MouseEvent.CLICK, egyeske)
kettes.addEventListener(MouseEvent.CLICK, ketteske)
balra.addEventListener(MouseEvent.CLICK, balraf)
jobbra.addEventListener(MouseEvent.CLICK, jobbraf)
kicsinyit.addEventListener(MouseEvent.CLICK, kicsinyites)
nagyit.addEventListener(MouseEvent.CLICK, nagyitas)
elrejt.addEventListener(MouseEvent.CLICK, elrejtes)
megjelenit.addEventListener(MouseEvent.CLICK, megjelenites)

// egyeske nevű eljárás:
function egyeske(e:MouseEvent) {
    kivalasztott = egyes //legyen a kiválasztott kép az „egyes”
    felirat.text = "Az 1-es van kiválasztva" 
//Ezt írja ki a Text mezőbe, aminek neve „felirat”
}
function ketteske(e:MouseEvent) {
    kivalasztott = kettes //legyen a kiválasztott kép a „kettes”
    felirat.text = "A 2-es van kiválasztva" 
//Ezt írja ki a Text mezőbe, aminek neve „felirat”
}
//Balra forgatás
function balraf(e:MouseEvent) {
    var myTween = new Tween (kivalasztott, "rotation", Elastic.easeOut, 0, -360, 7, true)
}
//Jobbra forgatás
function jobbraf(e:MouseEvent) {
    var myTween = new Tween (kivalasztott, "rotation", Elastic.easeOut, 0, 360, 7, true)
}
//Kicsinyítés
//Az X és Y irányú méretet változtassa, ha a méret már kisebb 20%-nál, már ne csinálja
function kicsinyites(e:MouseEvent) {
    if (kivalasztott.scaleX <= 0.2) {
        kivalasztott.scaleX = 0.2
        kivalasztott.scaleY = 0.2
    } else {
        kivalasztott.scaleX -= .1
        kivalasztott.scaleY -= .1
    }
}
//Nagyítás
function nagyitas(e:MouseEvent) {
    if (kivalasztott.scaleX >= 1) {
        kivalasztott.scaleX = 1
        kivalasztott.scaleY = 1
    } else {
        kivalasztott.scaleX += .1
        kivalasztott.scaleY += .1
    }
}
//Láthatóság 0-ra
function elrejtes(e:MouseEvent) {
    var myT = new Tween (kivalasztott, "alpha", None.easeNone, 1, 0, 2, true)
}
//Láthatóság 1-re
function megjelenites(e:MouseEvent) {
    var myT = new Tween (kivalasztott, "alpha", None.easeNone, 0, 1, 2, true)
}


Ha azt akarjuk, hogy az érmék a középpontjuk körül forogjanak, 
akkor a Movieclipnél állítsuk be, hogy a kép közepén legyen a forgáspont!