Gombok Interaktivitás hozzáadása és haladó animáció
• Az interaktivitás legegyszer bben gombok segítségével valósítható meg • Ha a felhasználónak kedve támad, akkor egyszer en rákattint a gombra, amivel beavatkozhat.
Egy gomb elkészítése
1
Egy egyszer gomb állapotainak elkészítése
A gomb fölött az egérkurzor alakja megváltozik
Felengedett Érintési Lenyomott Találati
2
A gomb találati területének (hit) megadása
Gomb készítése különösen nagy találati területtel
• Egy összetett alakzat esetén a gombhoz tartozó érzékelési területet tudjuk helyettesíteni egy egyszer bb alakzattal.
3
Többállapotú gomb ismételt elkészítése, minden állapotban szimbólummal
4
5
Animált gombok
6
7
8
9
Gombok nyomkövetési módjai
Gombként viselkedik
Az érintési állapotban hangot adó gomb elkészítése
Menüként viselkedik
10
Folyamatos hangot adó gomb készítése
11
Láthatatlan gomb készítése
Edit > Cut, Edit > Paste in Center
12
Eszköztár
Az ActionScript használata
Keresés és csere Kódtipp mutatása Hibakeresés beállításai Beállítások
Utasítás hozzáadása Nyelvtan ellen rzése
• A Flash saját programnyelve • Olyan utasításokat adunk meg, amelyeket a filmünk követni fog • Ebben a leckében csak az alapokkal ismerkedünk meg, a részletes ismertetés jóval kés bb fog megtörténni. • Window > Action
Elérési út beszúrása
Kódnavigátor
• Toolbox (Eszköztár) : – Az összes telepített m veletet megtaláljuk, mappákba rendezve
• Script (Kód) : – A m veletek a végrehajtási sorrendjükben jelennek meg.
• Navigator (Navigátor) : – A filmünk összes kódját megtaláljuk
• Current script (Aktuális kód) : – Megmutatja, hogy éppen melyik kódrészletet szerkesztjük
Automatikus formázás
Aktuális kód Kódrészlet kit zése
• Pin Script (Kódrészlet kit zése) : – Saját lapot hozhatunk létre egy adott kódrészlethez, hogy ne kelljen mindig kiválasztani az adott objektumot, vagy réteget
• Options (Beállítások) : – További lehet ségek, például bet típus beállítása
• Reference (Kézikönyv) : – A kiválasztott kóddal kapcsolatban kaphatunk segítséget
13
Options • Add Statement (Utasítás hozzáadása) : – "plusz gomb". Ugyanazokat a kódelemeket tartalmazza, mint az eszköztár
• Find and Find and Replace (Keresés, Keresés és Csere) : – Ezekkel a gombokkal kereshetünk ki kódrészleteket, éppen úgy mint egy szövegszerkeszt ben
Options
Options • Insert Target Path (Elérési út beszúrása) : – Egy adott objektumot címezhetünk meg
• Check Syntax (Nyelvtan ellen rzése) : – Megnézhetjük, hogy a kódunk szintaktikailag hibátlen-e.
• Auto Format (Automatikus formázás) : – A kódot áttekinthet bbé teszi
Filmrészlet folyamatos ismétlését végz velet elkészítése
• Show Code Hint (Kódtipp mutatása) : – A kódkiegészít segéd bekapcsolása
• Debug Options (Hibakeresés beállításai) : – Töréspontok adhatók meg azokon a helyeken, ahol meg szeretnénk állítani a kód futását
• View Options (Nézetbeállítások) : – szabályozhatjuk a kód megjelenítését
Edit > Cut, Edit > Paste in Center
14
15
A képkocka címkéjének átadása a gotoAndPlay m veletnek
16
Gombok hozzáadása egy animációhoz, amelyekkel a lejátszás megállítható és folytatható
17
A Lejátszás gomb utasításai on(press){ play(); }
18
velet hozzáadása egy filmklip példányához
A Filmklip parancsai onClipEvent (load) { stop(); } onClipEvent (mouseDown) { play(); } onClipEvent (mouseUp) { stop(); }
19
Viselkedések használata • Window > Behaviors Viselkedés beszúrása Viselkedés törlése Objektum neve Beállítások
El rébb visz / hátrébb visz
velet / viselkedés neve
Eseménylista
• Add Behavior (Viselkedés beszúrása) : – A viselkedés kiválasztására szolgál
Weblaphoz kapcsolódó gomb készítése
• Delete Behavior (Viselkedés törlése) : – Eltávolítja a kijelölt viselkedést
• Event (Esemény) : – A viselkedést kiváltó esemény kiválasztása
• Action (M velet) : – A viselkedés nevére duplán kattintva, azt újra beállíthatjuk
20
Automatikusan legenerálódott a következ kód on (release) { //Goto Webpage Behavior getURL("http://szerver2.lacszki.sulinet.hu","_self "); //End Behavior }
21
Beágyazott példányok megcímzése
22
23
24
A Leallitas gomb scriptje on (press) { stop(); }
Játsszuk le • A kocsi leáll, de a kerekek tovább forognak.
A Lejatszas gomb scriptje
A kód kiegészítése on (press) { stop(); this.kocsi1.elsokerek.stop(); this.kocsi1.hatsokerek.stop(); }
Egyszer húzható objektum elkészítése
on (press) { play(); this.kocsi1.elsokerek.play(); this.kocsi1.hatsokerek.play(); }
25
A Doboz scriptje on (press) { startDrag(this); } on (release) { stopDrag(); }
A húzás területének behatárolása • A téglalapot ne lehessen lehúzni a színpadról.
A téglalap scriptje on (press) { startDrag(this, true, 0+this._width/2, 0+this._height/2, 550-this._width/2, 400this._height/2); } on (release) { stopDrag(); }
26
Ellen rizzük, hogy hová esik az objektum • Hozzunk létre egy másik, nagyobb objektumot, a téglalapot csak ebben lehessen elengedni.
A Doboz scriptje on (press) { startDrag(this, true, 0+this._width/2, 0+this._height/2, 550-this._width/2, 400-this._height/2); } on (release) { stopDrag(); if (this.hitTest(_parent.Keret1)) { trace("Rendben"); } else { trace("Hiba!"); } }
Módosítás • Mivel a szöveg a weblapon nem íródik ki, a téglalapot rossz pozíció esetén ugrasszuk vissza a bal fels sarokba, jó pozíció esetén a keret közepébe.
27
A Doboz scriptje
A felhasználó nevének beolvasása változó segítségével
on (press) { startDrag(this, true, 0+this._width/2, 0+this._height/2, 550this._width/2, 400-this._height/2); } on (release) { stopDrag(); if (this.hitTest(_parent.Keret1)) { this._x = _parent.Keret1._x; this._y = _parent.Keret1._y; } else { this._x = this._width/2; this._y = this._height/2; } }
NE LEGYEN KIPIPÁLVA!!!
A Gomb scriptje on (press) { nextFrame(); } on (keyPress "<Enter>") { nextFrame(); }
28
A Layer 1:1 scriptje stop();
A Layer 1:2 scriptje uzenet.text = "Szia "+fhnev;
Változó értékének növelése
29
A Gomb scriptje on (press) { szamlalo++; }
A változó anélkül is változhat, hogy látnánk a színpadon • Távolítsuk el a számláló mez t a színpadról! • Helyezzünk el egy másik, üzenet nev mez t!
A Gomb scriptje
Filmklip áttetsz ségének módosítása
on (press) { szamlalo++; uzenet.text = "A kattintások száma: "+szamlalo; }
30
A Gomb scriptje on (press) { klip._alpha = 50; }
Egy klip áttetsz ségének értékét növel és csökkent gombok elkészítése
31
Csökkent gomb on(press){ klip._alpha = klip._alpha-10 }
Növel gomb on(press){ klip._alpha = klip._alpha+10 }
Egyedi tulajdonságok létrehozása és módosítása egy filmklipben
32
A Labda scriptje onClipEvent (enterFrame) { this._x += this.speed; }
A hátra gomb scriptje on (press) { labda1.speed = -5; }
A ComboBox összetev kézi feltöltése adatokkal
Az el re gomb scriptje on(press){ labda1.speed = 5; }
A leállító gomb scriptje on (press) { labda1.speed = 0; }
Window > Components
33
A ComboBox összetev adatainak megadása ActionScript segítségével • A Layer 1:1 scriptje Lista.removeAll(); Lista.addItem("Iskola", "http://szerver2.lacszki.sulinet.hu"); Lista.addItem("Linux", "http://www.distrowatch.com"); Lista.addItem("GMail", "http://www.gmail.com");
ActionScript kód futtatása a ComboBox összetev segítségével • A Lista scriptje on (change) { getURL(this.selectedItem.data, "_self"); }
34
A RadioButton összetev használata
35
A Layer 1:1 scriptje stop(); Tovabb.onPress = function() { szoveg = "A továbbított adat: "+radioGroup.selectedData; nextFrame(); }
A Layer 1:2 scriptje uzenet.text = szoveg;
VÉGE
36