Flash - návody, tipy, triky

Programovacie jazyky, rady, poradňa...
weroro
Flash coder
Flash coder
Používateľov profilový obrázok
Príspevky: 3179
Registrovaný: 14 feb 2009, 22:34
Bydlisko: BB/LV/BA/ZA
Kontaktovať používateľa:

Flash - návody, tipy, triky

Príspevok od používateľa weroro »

Všetky zdrojové súbory a zdrojový kód podliehajú licencii
Creative Commons Attribution-NonCommercial 3.0 Unported License.


Logá všetkých verzií flash od verzie 5, po súčastnosť http://www.hojko.com/flash-loga-na-stia ... 40360.html

Ak sa nájde niekto, kto sa rozumie do problematiky ohľadne flashu a má výhrady voči mojim riešeniam, nech kľudne napíše a prediskutujeme to (rád sa naučím niečo nové), alebo ak niečomu nerozumiete, tak to rád vysvetlím. Poprípade sem môžete dávať vaše spracovania návodov (nekopírujte z iných webov, pridávajte iba vaše návody !). Ďakujem


Jednoduchá hra, ovládaná myškou

(Návod je primárne určený pre editor Macromedia Flash 8 – ActionScript 2. V novších verziách editoru od spoločnosti Adobe (Adobe Flash CS3 a novší ), nemusia súhlasiť niektoré hodnoty pozícií objektov X: a Y:.)

Flash bol primárne vyvinutý ako webová technológia, ktorá sa stala neoddeliteľnou súčasťou dnešného internetu, hlavne v oblasti multimédií, reklamy a on-line hier. Dnes si ukážeme, ako si pomocou tejto technológie vyrobiť čo najjednoduchšie, hru (pomocou ActionScript 2), ktorá sa bude ovládať myškou.

Predstavme si scenár hry:

Hracia plocha, v ktorej sa na náhodnej pozícii objavuje objekt (terč), ktorý pomocou zbrane musíme zasiahnuť a zničiť. Zobrazuje sa nám munícia (10 nábojov) a pri každom výstrele nám jeden náboj zmizne, a tak isto sa nám zobrazuje aj počet zásahov do nášho terča, ako číselná hodnota. Po "vystrieľaní" všetkých nábojov sa zbraň automaticky nabije. Ovládanie celej hry je závislé iba od pohybu myšky a stláčaním jej ľavého tlačidla.

Ako postupovať.

Vo flash editore (Macromedia flash 8, Adobe flash CS3 a novší ), si otvoríme nový dokument (v prípade CS3 a novšieho, si otvoríme nový dokument ActionScript 2). V panely properties (CTRL+F3) alebo CTRL+J, nastavíme rozmer plochy na 900x500, farbu pozadia na tmavo sivú (#333333) a Frame rate nastavíme na 25 fps. Dokument uložíme (CTRL+S) pod názvom hra.
01.png
Stiahneme si súbor hra.rar, ktorý je v prílohe.
hra.rar
(118.43 KiB) 178 stiahnutí
Súbor obsahuje tri obrázky zbraň.png, munícia.png, mieridlo.png a dva súbory wav so zvukom výstrelu a nabíjania, vystrel.wav a nabijanie.wav. Súbor rar rozbalíme a všetky súbory na importujeme do flashu pomocou import to library (Horné menu – File – Import – Import to library).

Ako prvý krok, si vytvoríme objekty, s ktorými budeme pracovať neskôr a ovládať ich pomocou ActrionScriptu.

Prepneme sa do library (CTRL+L), klikneme na obrázok munícia pravým tlačidlom myšky, vyberieme properties a v tabuľke, ktorá sa nám zobrazí nastavíme nasledujúce parametre.
  • • Zaškrtneme položku Allow Smoothing (vyhladenie obrázku).
    • Kompresiu nastavíme na JPEG.
    • Odškrtneme položku Use document default quality a zmeníme hodnotu Quality na 50.
    • Klikneme na OK.
Tento postup zopakujeme aj s obrázkom zbraň a mieridlo.
03.png
Ďalej klikneme v library na zvuk nabijanie pravým tlačidlom myšky, vyberieme properties a v tabuľke, ktorá sa nám zobrazí nastavíme nasledujúce parametre.
  • • Compression nastavíme na MP3.
    • Bitrate nastavíme na 64kbps.
    • Quality natavíme na Best.
    • Klikneme na OK.
Tento postup zopakujeme aj so zvukom vystrel.

Po týchto nastaveniach, si vytvoríme inštanciu prázdneho movieclipu (CTRL+F8), ktorú pomenujeme pištol a stlačíme OK.
05.png
Obrázok zbraň z library potiahneme na plochu a v panely properties nastavíme pozíciu:
X: -175 a Y: -103
06.png
06.png (3.13 KiB) 4731 zobrazení
Znovu vytvoríme novú inštanciu movieclipu (CTRL+F8), ktorú pomenujeme ruka a stlačíme OK. Inštanciu movieclipu pištol, ktorá sa nachádza v library, potiahneme na plochu a nastavíme v panely properties pozíciu:
X: -177 a Y: -97 (vo flash CS3 a novšom bude táto pozícia X: -2 a Y: 6)

Na časovej osi označíme snímok (frame) 25 a stlačíme kláves F6, ktorým si vytvoríme nový kľúčový snímok (kľúčový snímok má v sebe bodku).

Ďalej klikneme na snímok 3, stlačíme klávesu F6, ten istý postup použijeme aj pri snímkach 5, 8 a 16. Presunieme sa na snímok 1 a v panely properties vyberieme v položke Tween: možnosť Motion, a na časovej osi sa medzi snímkami zobrazí šípka.
08.png
08.png (3.59 KiB) 4731 zobrazení
Takto postupujeme aj pri snímkach 3, 8 a 16.
Označíme snímok 3, klikneme na objekt umiestnený na ploche, v panely properties sa prepneme na záložku filter, klikneme na ikonku + a vyberieme položku Blur (rozmazanie), kde nastavíme hodnotu BlurX a BlurY na 10 a Quality: Low.
10.png
10.png (1.83 KiB) 4731 zobrazení
Prejdeme na snímok 16, klikneme na objekt (označíme si ho) umiestnený na ploche, stlačíme CTRL+ALT+S a v tabuľke, ktorá sa zobrazí nastavíme hodnotu Rotate na -45 a potvrdíme. Objekt sa nám otočil o 45 stupňov doľava. V panely properties nastavíme pozíciu objektu na:
X: -200 (-199.9) a Y: 120 (vo flash CS3 a novšom bude táto pozícia X: -3.5 a Y: 288.5)

Na časovej osi klikneme na ikonku zámku, čím uzamkneme aktuálnu vrstvu a tým zabránime nechcenej modifikácii objektu alebo zmene jeho pozície.

Následne prejdeme do menu Insert v hornej časti okna, tam vojdeme do Timeline, kde vyberieme položku Layer. Tak to sme si vložili na časovú os novú vrstvu, s názvom Layer 2. V tejto vrstve klikneme na snímok 2 a stlačíme klávesu F6. Rovnako postupujeme aj pri snímkach 5 a 14. Označíme si snímok 2 a z library potiahneme do plochy zvuk vystrel, potom označíme snímok 14 a z library potiahneme do plochy zvuk nabijanie. Opäť klikneme na ikonku zámku a uzamkneme vrstvu Layer 2.

Stlačíme CTRL+F8 a vytvoríme novú inštanciu movieclipu, ktorú pomenujeme náboj. Z library potiahneme do plochy obrázok munícia a vycentrujeme ho presne na stred plochy, pomocou panelu Align (CTRL+K), v ktorom musíme mať označenú možnosť To Stage.
14.png
14.png (3.29 KiB) 4731 zobrazení
Po vycentrovaní, uzamkneme vrstvu Layer 1. Stlačíme CTRL+F8 a vytvoríme novú inštanciu movieclipu, ktorú pomenujeme cross. Z library potiahneme do plochy obrázok mieridlo a vycentrujeme ho presne na stred plochy a uzamkneme Layer 1.

Stlačíme CTRL+F8 a vytvoríme novú inštanciu movieclipu, ktorú pomenujeme terčík. V nej si pomocou nástroja kruh (O), nakreslíme kruh (napríklad červenej farby - #FF0000) s rozmermi 80x80, ktorý vycentrujeme na stred plochy. Klikneme na snímok 5 a stlačíme F6 a následne F5. Vyberieme nástroj Laso (L) a rozrežeme kruh na malé časti, ktoré presunieme do okolia kruhu a tým vytvoríme efekt roztrhnutia (rozbitia). Ak máme viac ako 9 malých častí, tak zvyšné časti odstránime.

Prejdeme na snímok 1 a v panely properties vyberieme v položke Tween: možnosť Shape (tak isto ako pri Tween: Motion) a zamkneme Layer 1.

Prepneme sa na hlavnú scénu (tlačítkom Scene 1 vo vrchnej časti okna, vedla názvu našeho dokumentu).

Z library potiahneme do scény nami vytvorené inštancie (musia byť v tomto poradí) – terčík, cross, ruka, a náboj. Klikneme na každú inštanciu a v panely properties (CTRL+F3), do položky <instance name> napíšeme meno objektu, tak ako sním budeme ďalej pracovať pri písaní scriptu.
  • • Inštanciu cross pomenujeme ako cross
    • Inštanciu ruka pomenujeme ako ruka.
    • Inštanciu terčík pomenujeme ako terc.
    • Inštanciu náboj pomenujeme ako naboj1.
(Názov nesmie obsahovať dĺžne a mäkčene, pretože ich script nemusí spracovať správne.)
18.png
18.png (3.35 KiB) 4731 zobrazení
Na koniec si ešte vytvoríme prázdne dynamické textové pole, v ktorom sa bude zobrazovať počet našich zásahov. Vyberieme si nástroj Text (T), v panely properties si nastavíme v menu Dynamic text, písmo na Arial, veľkosť písma na 30, farbu písma na sivú (#999999), pozíciu písma na stred a vypneme možnosť výberu textu – selectable (viď. Obrázok - kurzor myši).
19.png
Na plochu do pravého dolného rohu s nástrojom text, nakreslíme obdĺžnik. Prepneme na nástroj select (V), klikneme na nami vytvorený Textfield, a tak ako inštancie movieclipov, ho v panely properties pomenujeme názvom skore.
Takto sme si pripravili všetky objekty, ktoré budeme ďalej scriptovo ovládať. Zamkneme Layer 1 a vložíme novú vrstvu (Insert – Timeline - Layer).

Ako druhý krok, napíšeme script, ktorým budeme tieto objekty ovládať a tým sa stane hra hrateľnou.

Klikneme na snímok 1 vo vrstve Layer 2, otvoríme panel Actions (F9) a napíšeme:

Kód: Vybrať všetko

_root.ruka.stop();
_root.terc.stop(); 
Keďže objekt ruka a terc sú animácie, treba ich najprv zastaviť, aby sa nám dookola neprehrávali a na to slúži príkaz stop(); ktorý sme nasmerovali priamo na nami určený objekt.

Kód: Vybrať všetko

Mouse.hide(); 
Aby nám v hre nezavadzal kurzor myši, tak ho týmto príkazom skryjeme. Pôvodný kurzor nahradíme objektom cross (ale to až neskôr).

Kód: Vybrať všetko

var pocet_nabojov:Number = 10;
var score:Number = 0; 
Premenné pocet_nabojov a score určujú, koľko máme mať na začiatku hry nábojov a aké je naše počiatočné skóre. Var je označenie premennej a :Number určuje, aký typ hodnoty bude premenná obsahovať, v tomto prípade je to číslo. Takto sa zabezpečíme, že premennú nemôžeme prepísať hodnotou iného typu ako je číslo (napríklad typom String – "10"). Ak by sa náš script pri testovaní hry snažil do takto definovanej premennej zapísať inú ako číselnú hodnotu, flash editor nás na to upozorní, vypíše nám, v ktorej časti scriptu sa udiala akcia o tento zápis a script môžeme ľahko opraviť, bez toho, aby sme museli ručne kontrolovať celý kód, v prípade, že by niečo nefungovalo, tak ako by malo.

Kód: Vybrať všetko

_root.naboj1._x = _root.naboj1._width*2;
_root.naboj1._y = 460;
_root.ruka._y = 358; 
Premiestnenie objektov naboj1 a ruka na počiatočnú pozíciu. _x určuje pozíciu v osi x (horizontálne – z ľava) a _y určuje pozíciu v osi y (vertikálne - z hora). Objekt naboj1 presunieme horizontálne na pozíciu, ktorá sa rovná dvojnásobku jeho šírky. Vertikálne ho umiestnime na pozíciu 460 pixelov. Objekt ruka umiestnime vertikálne na pozíciu 358 pixelov. Pri objekte ruka nám stačí iba táto pozícia, pretože pozíciu _x budeme určovať pohybom myšky a bude sa meniť.

Kód: Vybrať všetko

for (var i = 2; i<=pocet_nabojov; i++) {
    duplicateMovieClip("naboj1", "naboj"+i, 2+i);
    _root["naboj"+i]._x = (_root.naboj1._width*i)+_root.naboj1._width;
} 
Na scéne máme jeden objekt naboj1, ale my potrebujeme aby bolo nábojov 10, tak objekt naboj1 budeme duplikovať (kopírovať) do vtedy, kým ich nebude 10. Na to nám poslúži cyklus for, ktorému nadefinujeme podmienku. Keďže už máme na scéne objekt naboj1, v ktorého názve sa nachádza číselná hodnota 1, podmienku v cykle zahájime od čísla 2, i=2. Ďalej budeme kontrolovať pravdivosť podmienky - i je menšie alebo sa rovná hodnote v premennej pocet_nabojov (10). Ak je to pravda, tak sa vykonajú príkazy vo vnútri cyklu a k číslu 2 sa pripočíta +1 (i++). duplicateMovieClip je funkcia na duplikovanie, kde zadávame parametre – názov objektu, ktorý chceme kopírovať, názov novovytvoreného (duplikovaného) objektu, kde zadáme iba naboj a číselnú hodnotu nahradíme premennou i, ktorá je spracovávaná v podmienke cyklu, tretí parameter je úroveň (vrstva do ktorej sa má nový objekt umiestniť), ku ktorej tiež pripočítavame hodnotu v premennej i. _root["naboj"+i] je zástupný zápis, ktorým vieme hodnotu typu String premeniť na hodnotu typu MovieClip (starší zápis tejto funkcie je eval();, ktorý sa už ale nepoužíva). _x je horizontálna pozícia nového objektu od pozície objektu naboj1. _x sa rovná šírka objektu naboj1 krát hodnota premennej i + šírka objektu.

Kód: Vybrať všetko

function presuvanie():Void {
    if (!_root.terc._visible) {
        _root.terc._visible = true;
    }
    if (_root.terc._currentframe == 1) {
        _root.terc._x = random(Stage.width);
        _root.terc._y = random(ruka._y-(_root.terc._width/2));
    }
} 
Vytvoríme si funkciu, s názvom presuvanie, ktorou budeme automaticky premiestňovať objekt terc, na náhodnú pozíciu. Funkcia obsahuje dve podmienky. Prvá kontroluje či je objekt terc viditeľný, ak viditeľný nie je (! = negácia/nepravda), tak ho zobrazíme príkazom _visible s parametrom true (pravda). Druhá podmienka testuje pozíciu snímkov v objekte terc. Ak je pozícia na snímku 1, tak objekt terc presunieme na náhodnú pozíciu _x v šírke scény a _y do vzdialenosti objektu ruka (to preto aby sa nestalo, že sa nám terč schová za pištoľ).

Kód: Vybrať všetko

terc_presun = setInterval(presuvanie, 500); 
Funkcia presuvanie nie je funkčná, pokiaľ ju nespustíme. Použijeme príkaz setInterval, ktorý nám bude spúšťať funkciu v intervale 500 milisekúnd. terc_presun je identifikátor intervalu, pomocou ktorého vieme tento interval kedykoľvek zrušiť (clearInterval(terc_presun);)

Kód: Vybrať všetko

_root.onMouseMove = function():Void  {
    _root.ruka._x = _xmouse;
    _root.cross._x = _xmouse;
    _root.cross._y = _ymouse;
}; 
onMouseMove nám kontroluje pohyb myšky, respektíve reaguje na akýkoľvek pohyb myšky (horizontálne a vertikálne) a takto nám umožňuje spúšťať určitú funkciu. Priradíme mu funkciu, ktorá určuje pozíciu objektov ruka a cross. Pozícia x objektu ruka sa rovná pozícii x kurzoru myšky. Objekt cross mení svoju pozíciu _x aj _y, podľa pozície myšky, a tak ho môžeme ľubovoľne presúvať (je to náš nový kurzor).

Kód: Vybrať všetko

_root.onMouseDown = function():Void  {
    if (!reload && _root.terc.hitTest(_xmouse, _ymouse, true)) {
        _root.terc.play();
        _root.score++;
    }
    if (_root.pocet_nabojov == 1) {
        reload = true;
    }
    _root.ruka.play();
}; 
onMouseDown testuje stlačenie ľavého tlačidla myšky. Ak je stlačené, tak sa vykoná funkcia, v ktorej sú dve podmienky. Prvá testuje, či je anonymná premenná reload nepravdivá (false) a zároveň testuje pomocou funkcie hitTest, kolíziu objektu terc s myškou. Ak sa reload nerovná true a myška je nad objektom terc, tak sa spustí animácia v objekte terc (výbuch) a pripočíta sa +1 do premennej score. Druhá podmienka testuje číslo v premennej pocet_nabojov. Ak sa číslo rovná 1, prepne sa premenná reload na hodnotu true (pravda) a tým sa deaktivuje prvá podmienka. Nasleduje príkaz ruka.play();, ktorý nám spustí animáciu v objekte ruka.

Kód: Vybrať všetko

_root.onEnterFrame = function():Void  {
    _root.skore.text = score;
    if (_root.ruka._currentframe == 6) {
        _root["naboj"+pocet_nabojov]._visible = false;
        _root.pocet_nabojov--;
        if (!reload) {
            _root.ruka.gotoAndStop(1);
        }
    }
    if (_root.ruka._currentframe == _root.ruka._totalframes) {
        _root.pocet_nabojov = 10;
        reload = false;
        for (var i = 1; i<=_root.pocet_nabojov; i++) {
            _root["naboj"+i]._visible = true;
        }
        _root.ruka.gotoAndStop(1);
    }
    if (_root.terc._currentframe == _root.terc._totalframes) {
        _root.terc.gotoAndStop(1);
        _root.terc._visible = false;
    }
}; 
Ako posledné si vytvoríme testovanie rôznych udalostí pomocou onEnterFrame, ktorý nám dookola spúšťa funkciu v intervale podľa nastaveného frame rate, v našom prípade je to 25fps (25 krát za sekundu). Skore.text je textové pole, v ktorom zobrazujeme počet našich zásahov. skore je názov textového pola (tak ako sme si ho pomenovali pri vytvoreni) a .text je identifikátor, ktorý určuje, že sa jedná o textové pole. Nasleduje podmienka, ktorá testuje pozíciu snímkov v objekte ruka. Ak je pozícia na snímku 6, z neviditeľní sa objekt naboj s cislom, ktoré sa nachádza v premennej pocet_nabojov. Potom odčítame od aktuálneho čísla v premennej pocet_nabojov -1, nasleduje podmienka, ktorá testuje pravdivosť reload sa nerovná true. Ak to nie je pravda, animácia v objekte ruka sa presunie na snímok 1 a zastane. Ďalšia podmienka testuje, či sa aktuálny snímok nachádza na pozícii posledného snímku animácie v objekte ruka, ak je to pravda, prepíše premennú pocet_nabojov hodnotou 10, prepne premennú reload na false, vykoná cyklus, ktorým zviditeľníme všetkých 10 objektov naboj, a v animácii ruka sa presunie na snímok 1 a zastane. Posledná podmienka testuje, či sa v objekte terc, aktuálny snímok nachádza na pozícii posledného snímku animácie. Ak je to tak, presunie animáciu v objekte terc na snímok 1, zastaví ho a z neviditeľní objekt terc.

Teraz môžeme stlačiť CTRL+ENTER a otestovať našu hru, a ak sme urobili všetko správne, bude hrateľná.

Ak máme trochu fantázie, môžeme našu hru dotvoriť aj do takéhoto konca a možno aj lepšie. Hra má časový limit 120 sekúnd, za ktorých musíte nazbierať čo najviac bodov, pri zásahu sa pripočíta +5 a keď miniete odpočíta sa Vám -2, po 120 sekundách sa hra preruší a zobrazí sa výsledková tabuľka s rekordom a možnosťou opakovať hranie.
hra_tutorial.swf
(36.61 KiB) 4329 stiahnutí
Zdrojový súbor na preštudovanie, si môžete stiahnuť tu.
zdroj_hra.rar
(132.89 KiB) 158 stiahnutí
Akákoľvek reprodukcia ľubovoľnej časti článku, nie je bez písomného súhlasu autora dovolená.
iWin
Light Professional
Light Professional
Používateľov profilový obrázok
Príspevky: 958
Registrovaný: 04 aug 2010, 14:30
Bydlisko: NR

Re: Flash - návody, tipy, triky

Príspevok od používateľa iWin »

Pfff len som si to zbežne prebehol vidno(dopísal si to o 3:38:D:D) ,že je za tým snaha určite to neskôr vyskúšam :)
uplink
VIP
VIP
Používateľov profilový obrázok
Príspevky: 15220
Registrovaný: 22 máj 2005, 23:01
Bydlisko: Hnúšťa
Kontaktovať používateľa:

Re: Flash - návody, tipy, triky

Príspevok od používateľa uplink »

weroro prelinkuj to na pixel2life aspoň z toho zarobíš ako referál, hm?
weroro
Flash coder
Flash coder
Používateľov profilový obrázok
Príspevky: 3179
Registrovaný: 14 feb 2009, 22:34
Bydlisko: BB/LV/BA/ZA
Kontaktovať používateľa:

Optimalizácia flash aplikácií

Príspevok od používateľa weroro »

Optimalizácia flash aplikácií

Veľa vývojárov flash aplikácií, má pri výslednej kompilácii svojho projektu do SWF problém s dátovou veľkosťou, rýchlosťou a zabezpečením svojho produktu.
Pri optimalizácii flash aplikácií sa väčšinou berie ohľad na tri prvky:
  • • Dátová veľkosť výslednej aplikácie
    • Rýchlosť aplikácie (script)
    • Zabezpečenie aplikácie
Dátová veľkosť výslednej aplikácie

Dátová veľkosť aplikácie je asi najväčší problém pri vývoji akéhokoľvek produktu vo flashi. Síce flash od verzie 6 (Macromedia Flash MX) implicitne podporuje kompresiu SWF, pomocou ZLib kompresie, ktorá významne dopomohla k ešte väčšej príťažlivosti flashu, je efektívna iba v prípade, že máme vytvorenú aplikáciu čisto vektorovou a skriptovou formou. Aj keď je flash primárne vektorová technológia, veľa vývojárov neváha použiť vo svojich projektoch bitmapovú grafiku, ktorá je mnoho násobne dátovo objemnejšia ako vektor, ale niekedy sa tomu skutočne nedá vyhnúť. To isté platí aj pri použití zvukových alebo video súborov. Pri použití bitmapovej grafiky, videa a zvuku máme dve možnosti, ako znížiť celkovú veľkosť našej aplikácie, a to je nastavenie kvality objektu pri exporte aplikácie do SWF, alebo prvok načítavať dynamicky (externe).

Ak vytvoríme aplikáciu a po jej kompilácii zistíme, že jej dátová veľkosť je nad prípustnou hodnotou (flash banner, welcome screen), musíme najprv zistiť, ktorý z nami použitých objektov navršuje veľkosť aplikácie nad povolenú hranicu. Na to nám slúži funkcia Generate size report, ktorá nám spolu so skompilovaným SWF, vygeneruje ako TXT súbor aj výpis dátovej veľkosti všetkých, nami použitých objektov v aplikácii.

Túto možnosť si môžeme vybrať pri exporte:
01.png
Na ukážku som pripravil SWF súbor, ktorý obsahuje JPG obrázok (441KB), zvukový súbor MP3 (15MB) a výrez videa (cca 600KB) – spolu cca 16,4MB. Nastavil som rôzne parametre pre obrázok, zvuk, video a vyexportoval SWF, ktoré malo výslednú veľkosť 2,9MB. Size report tohto súboru vyzerá nasledovne:

Kód: Vybrať všetko

Scene                        Shape Bytes    Text Bytes    ActionScript Bytes
-------------------------    -----------    ----------    ------------------
Scene 1                                0             0                     0

Bitmap                     Compressed    Compression
-----------------------    ----------  --------  -----------
obrazok.jpg                   145083     8940300   JPEG Quality=40

Stream Sound: 
Stream Sound: 11KHz Mono 16 kbps MP3

Event Sounds: 22KHz Mono 16 kbps MP3


Sound name                 Bytes        Format    
-----------------------    ---------    ----------
Led Zepplin- Stairway to Heaven.mp3 1424451        22KHz Mono 24 kbps MP3

Video                       Compressed
------------------------    ----------
video                           1320531
Ako som dosiahol taký výrazný pokles veľkosti? Musel som obetovať 100% kvalitu vložených objektov a vybrať pre mňa optimálnu. To znamená pre JPG obrázok som zvolil JPG kompresiu s kvalitou 40, pre zvuk MP3 s kvalitou 320kbps 44kHz Stereo, som zvolil 24kbps mono a pre video súbor (vložený do SWF ako „Embed video in SWF and play in timeline“) som kvalitu zvolil už pri jeho importe do aplikácie (len vtedy sa dá nastaviť kvalita) a orezal som z neho iba časť, ktorú som potreboval. Pozor pri importe videa vo formáte FLV sa kvalita nastavit nedá ! Toto sa musí urobiť, novým prekonvertovaním do nižšej kvality pomocou externého programu.
02.png
Čo ale vtedy, keď chceme mať v aplikácii zvuk, video alebo obrázok v pôvodnej kvalite ale nemôžeme si to dovoliť? Riešenie je pomerne jednoduché a to, tento objekt nevkladať priamo do SWF ale načítavať ho externe. Tento postup sa nazýva streaming a nevyužíva sa iba pri audio súboroch ale aj pri videu a obrázkoch (MP3, VIDEO prehrávače a FOTOgalérie). Tu prichádza na rad ActionScript, ktorým si tento Streaming jednoducho vytvoríme (naprogramujeme).

Zvuk:

Kód: Vybrať všetko

var zvuk:Sound = new Sound(); 
Vytvoríme si objekt triedy sound s názvom zvuk, s ktorým môžeme ďalej pracovať. Pod pojmom objekt si môžeme v tejto chvíli predstaviť akúsi nádobu, na ktorej je napísaný jej názov "zvuk" a do ktorej budeme načítavať našu mp3. Tým, že máme objekt pomenovaný, vieme naň priamo zacieliť zavolaním jeho mena, a tak vykonať príslušnú akciu.

Kód: Vybrať všetko

zvuk.loadSound("hudba.mp3", true); 
Ako už názov napovedá, loadSound(); slúži pre načítanie zvukového súboru do objektu zvuk. loadSound(); má dva parametre:
  • • Prvý parameter udáva názov nášho zvukového súboru, ktorý zapisujeme v úvodzovkách (String) aj s príponou, v tomto prípade "hudba.mp3", čo znamená, že zvukový súbor s názvom hudba.mp3 sa nachádza v rovnakom umiestnení ako SWF súbor (relatívna cesta k súboru).
    • Druhý parameter je typu Boolean (true/false), ktorý nám udáva, či má byť zvukový súbor prehrávaný okamžite (true – povolený streaming), aj keď ešte nie je úplne načítaný, alebo či sa má spustiť až po jeho úplnom načítaní (false), čo nie je vhodné ak je súbor väčšieho dátového objemu a spustenie môže istú dobu trvať (podľa rýchlosti internetového pripojenia užívateľa).
Obrázky:
Pri externom načítavaní obrázkov, nám odpadá vytváranie objektu (s výnimkou LoadClip();) a máme možnosť použiť jednu z troch variant, jeho načítania do SWF aplikácie.
  • • loadMovieNum();
    • loadMovie();
    • loadClip();

Kód: Vybrať všetko

loadMovieNum("obrazok.png", 2); 
Táto funkcia nám načíta obrázok na scénu a viac sním už pracovať nemôžeme. Je to vhodné pre jednorazové načítanie pozadia. Zadávame dva parametre.
  • • Prvý je tak isto ako pri zvuku, názov načítavaného obrázku
    • Druhý je číslo vrstvy (hĺbky), do ktorej sa má obrázok načítať (podobne ako je to v html pri CSS a jeho parametre z-index v DIVe). Môžeme zadať aj zápornú hodnotu.

Kód: Vybrať všetko

loadMovie("obrazok.png", instanciaMC);
// alebo
instanciaMC.loadMovie("obrazok.png"); 
Obidve varianty sú rovnaké. Pre správne fungovanie tejto funkcie, je nutné mať vopred vytvorenú prázdnu inštanciu movieclipu, umiestenú na scéne. instanciaMC je názov tohto movieclipu a obrázok načítavame do neho. Takto môžeme s obrázkom, respektíve s takto "naplneným" movieclipom, ľubovoľne manipulovať (zmena pozície, veľkosti, aplikovať transparentnosť a pod.) Nevýhodou je, že pri takomto načítavaní je problém (nie je to ale nemožné), kontrolovať priebeh načítavania (preloader).

Kód: Vybrať všetko

var nacitanie:MovieClipLoader = new MovieClipLoader();
nacitanie.loadClip("obrazok.png", instanciaMC); 
Asi najčastejšie používaná funkcia, pri ktorej je potrebné mať vytvorený objekt MovieClipLoader. Funguje na princípe kombinácie objektu Sound a funkcie loadMovie();. loadClip je priradený k objektu a do parametrov sa zadáva názov obrázku ako String a názov movieclipu, do ktorého sa má obrázok načítať (hodnota typu :MovieClip). Pomocou funkcie onLoadProgress(); (a ďalších, viď. help vo flashi), kde ale musí byť ešte pridaný listener (poslucháč) a nový prázdny Object, môžeme bez problémov kontrolovať priebeh načítania, jeho ukončenie, chybu pri načítaní a pod.

Video:
Externé načítanie videa do SWF je o niečo zložitejšie. Aj tu máme na výber dve možnosti ako to urobiť.
Prvá, jednoduchšia možnosť, je použiť už vstavanú komponentu FLVPlayback. Stačí ak na importujeme nami zvolené video ako Progressive download from web server a ďalej postupujeme podľa sprievodcu importom (Ak importujeme video vo formáte FLV automaticky preskočíte možnosť encoding). Ako tretí krok (možno druhý podľa formátu videa), nasleduje Skinning, kde si môžete vybrať skin ovládacieho panelu vášho prehrávača. Ak si žiadne ovládacie prvky neželáte, stačí z možností v rozbaľovacom menu vybrať možnosť, None. Nič viac nemusíte nastavovať, stačí vyexportovať SWF a okamžite sa vami zvolené video začne prehrávať.
03.png
Druhá možnosť, ktorá sa využíva hlavne pri vyrábaní video prehrávačov na mieru, je o niečo zložitejšia, pretože budeme musieť písať ActionScript. Zobrazíme si library (CTRL+L), kde klikneme myšou na pravé horné tlačítko a z ponuky, ktorá sa zobrazí vyberieme New Video. Zobrazí sa nám okno, v ktorom je vybratá voľba Video (Action Script – controlled). Nič nemeníme a stlačíme OK.
04.png
V library sa nám vytvorila nová inštancia s ikonkou kamery, ktorú potiahneme na scénu a v panely properties ju pomenujeme video. Teraz otvoríme okno Actions (F9) a napíšeme:

Kód: Vybrať všetko

var prepojenie:NetConnection = new NetConnection();
prepojenie.connect(null); 
Najprv si musíme vytvoriť objekt triedy NetConnection, ktorý bude slúžiť ako prepojenie.

Kód: Vybrať všetko

var streamovanie:NetStream = new NetStream(prepojenie); 
Následne si vytvoríme objekt triedy NetStream, ktorý prepojíme s triedou NetConnection.

Kód: Vybrať všetko

video.attachVideo(streamovanie); 
Inštanciu pomenovanú video, ktorá je na scéne, previažeme pomocou funkcie attachVideo s triedou NetStream a tak nám bude slúžiť ako display.

Kód: Vybrať všetko

streamovanie.play("video.flv"); 
Na koniec, nasleduje funkcia play();, ktorú priradíme triede NetStream a ako parameter zadáme názov nášho videa, čo nám zaručí okamžité prehrávanie.

Takto dokážeme veľmi efektívne znížiť výslednú veľkosť aplikácie a jej funkčnosť zostane naďalej zachovaná.

Rýchlosť aplikácie (script)

Ďalším citlivým prvkom pri vývoji flash aplikácií, je ich rýchlosť, čiže čas, za ktorý sa vykonajú nami vytvorené funkcie v algoritme. Síce ActionScript nepatrí medzi rýchle jazyky, ako je napríklad jazyk C, vieme ho aspoň lepším zápisom nášho algoritmu o málo zvýšiť. Je samozrejmé, že pri technológii, ktorá je závislá od interpretera (flash player), je rýchlosť vykonávania scriptu jeho "práca" a odvíja sa od toho ako je interpreter naprogramovaný a ako spracúva príkazi ActionScriptu (to už ale my neovplyvníme). Vieme, však náš kód aspoň optimalizovať do takej miery, aby sme flash playeru (aj keď len minimálne) dopomohli.

Umiestňovanie scriptu:

Prvou a zásadnou zmenou, ktorú by sme mali preferovať pri zápise scriptu, je vyvarovať sa zapisovaniu scriptu priamo na inštancie objektov (návyk zo starších verzií flashu). Vykonávanie takto umiestneného scriptu je o cca 24ms pomalšie ako vykonávanie scriptu umiestneného v snímku časovej osy. Z tohto, ale aj iného dôvodu, bola možnosť umiestňovať script na inštancie v novej verzii ActionScript 3.0 zakázaná a ak script umiestnime na inštanciu, nebude fungovať (debuger bude hlásiť chybu a script bude nefunkčný). Preto je dobré sa naučiť písať script, najlepšie iba do jedného snímku pre celú aplikáciu.

Úplné deklarovanie premenných a funkcií:

Kód: Vybrať všetko

var cislo:Number = 5; // hocijaké reálne číslo, celé alebo desatiné
var celeCislo:int = 6; // kladné alebo záporné celé číslo, iba v ActionScript 3.0
var celeKladneCislo:uint = 128; // iba celé kladné číslo, iba v ActionScript 3.0
var text:String = "ahoj"; // textová hodnota v úvodzovkách  alebo apostrofoch
var logickaHodnota:Boolean = true; //alebo false, bez úvodzoviek
var objektMovieClipu:MovieClip = nazov; // bez úvodzoviek
var regulerneVyrazy:RegExp = /<([a-z]+)>(.+?)</1>/; // bez úvodzoviek,  iba v ActionScript 3.0           
Pri takto deklarovaných premenných, im nemusí pri spracovávaní flash player vyhradzovať väčší priestor, a tým mu aspoň z časti domôžeme, nehovoriac o tom, že ak by sme mali premennú deklarovanú takto:

Kód: Vybrať všetko

cislo = 5;  
bude síce funkčná, ale túto premennú môžeme prepísať akýmkoľvek iným typom premennej, napr. textom, čo by bolo neprípustné a debuger nás na takúto prípadnú kolíziu typov neupozorní.
To isté platí aj pri použití premenných v cykloch, menovite v cykle for, kde miesto zápisu:

Kód: Vybrať všetko

for (i=0; i<100; i++) {
    a = i;
}  
použijeme zápis:

Kód: Vybrať všetko

for (var i:Number = 0; i<100; i++) {
    a = i;
} 
Pri vytváraní funkcií by sme mali na konci definície funkcie udať, či funkcia bude vracať nejaký typ hodnoty, alebo či nebude vracať nič, vďaka čomu flash player nemusí pre túto funkciu vyhradzovať väčší priestor. Takže namiesto zápisu:

Kód: Vybrať všetko

function test() {
    var a:Number = 1;
    var b:Number = 2;
    return a+b;
} 
Kde nám funkcia vracia číselnú hodnotu sčítania hodnôt v premenných A a B, to zapíšeme takto:

Kód: Vybrať všetko

function test():Number {
    var a:Number = 1;
    var b:Number = 2;
    return a+b;
} 
A tým určíme, že hodnota, ktorú bude funkcia vracať, bude číslo. V prípade, že funkcia nemá vracať žiadnu hodnotu, tak ako deklaráciu použijeme :Void, čo znamená koniec. V ActionScript 2.0 sa :Void píše s veľkým začiatočným písmenom. V ActionScript 3.0 sa píše s malým začiatočným písmenom :void.

Kód: Vybrať všetko

var c:Number = 0;
function test():Void {
    var a:Number = 1;
    var b:Number = 2;
    c = a+b;
} 
Jedinou výnimkou nedeklarovania typu návratovej hodnoty, je situácia, keď máme vo funkcii podmienku a funkcia môže vracať viac typov hodnôt.

Meranie rýchlosti scriptu:

Meranie rýchlosti scriptu je skôr vec pre puntičkárov, ako som ja. Jedná sa o výpočet trvania vykonania určitej časti alebo celého scriptu (pokiaľ nepoužívame paralelné funkcie spúšťané event hadlermi).

K tomuto účelu nám poslúži funkcia getTimer();, ktorá nám vracia číselnú hodnotu času od spustenia aplikácie v milisekundách. Jej použitie je nasledovné:

Kód: Vybrať všetko

var cas1:Number = getTimer();
for (var i:Number = 0; i<10000; i++) {
    a = i;
}
var cas2:Number = getTimer();
trace(cas2-cas1); 
Premennú cas1, ktorá sa nachádza tesne pred meranou časťou kódu, naplníme aktuálnym priebehovým časom a táto hodnota sa už nezmení. Nasleduje nami meraná časť kódu, v tomto prípade sa jedná o cyklus, ktorý kým sa nevykoná, kód nebude pokračovať. Po jeho vykonaní znovu zmeriame čas a uložíme ho do premennej cas2. Funkciou trace();, ktorá slúži na kontrolný výpis v prostredí flash editoru, si dáme zobraziť výsledok odčítania hodnoty v premennej cas1, od hodnoty v premennej cas2, a výsledné číslo je čas vykonávania nášho cyklu v milisekundách. Takto si vieme zmerať, ktorúkoľvek časť nášho kódu a poprípade urobiť jeho korekciu a zrýchliť ho.

(tip: Funkciu trace(); používajme s rozvahou a pred konečnou kompiláciou aplikácie všetky trace() z kódu odstráňme, pretože samotná funkcia, aj keď sa u užívateľa nezobrazí, nám spomaľuje kód o cca 14ms a ak ich máme v kóde veľa, nemusí to našej aplikácii prospieť.)

Volanie funkcií medzi sebou:

AscionScript nám dovoľuje jednu zaujímavú možnosť zápisu funkcií.

Kód: Vybrať všetko

function hojko():Void {
    hojko_mc._x += 5;
    hojko_mc._xscale ++;
}
function ovladanie(pozX:Number):Void {
    hojko();
    hojko_mc._y = pozX;
}
ovladanie(3); 
Takéto volanie funkcií, kde funkciu 1 zavoláme z funkcie 2, je pomalé a je vhodné iba v prípade, že funkciu 1 používame v našom kóde viac krát. Možno sa ale pýtate, čo vtedy keď chcem zavolať funkciu 1 pomocou event handler funkcie (tlačítko)? Automaticky by asi zápis vyzeral napr. takto:

Kód: Vybrať všetko

tlacitko.onRelease = function():Void  {
    hojko();
}; 
Tento zápis je správny, ale pomalší. Ak teda funkcii hojko(); netreba nadefinovať dáke parametre a spúšťame ju s prázdnymi zátvorkami, môže náš event handler vyzerať takto:

Kód: Vybrať všetko

tlacitko.onRelease = hojko; 
Za znak "rovná sa" napíšeme priamo názov funkcie, ktorú chceme spustiť, ale bez zátvoriek. Tým, sme nie len zrýchlili vykonanie funkcie, ale aj skrátili náš zápis. Samozrejme, nie vždy to všetko platí a jedná sa o to, čo má funkcia vykonávať. Je dobré radšej zmerať jej rýchlosť a rozhodnúť sa.

// Editácia článku 05.03.2011 [weroro]

Pred nedávnom som potreboval vyriešiť jeden problém a pri mojich pokusoch vyriešiť ho, som narazil na jeden síce v praxy (asi) nepoužiteľný, ale za to zaujímavý zápis spustenia 2 a viac funkcií. Jedná sa o zavolanie inej funkcie z hlavnej funkcie a to tak, že druhú funkciu voláme pri inicializácii prvej a zapíšeme ju ako parameter vo funkcii 1. Ukážeme si to na štyroch samostatných funkciách.

Kód: Vybrať všetko

// vytvoríme si prvú funkciu
function prva():Void {
    trace("prvá položka");
}
// vytvoríme si druhú funkciu
function druha():Void {
    trace("druhá položka");
}
// vytvoríme si tretiu funkciu
function tretia():Void {
    trace("tretia položka");
}
// vytvoríme si štvrtú funkciu
function stvrta():Void {
    trace("štvrtá položka");
}
//
// INICIALIZÁCIA PREDDEFINOVANÝYCH FUNKCIÍ, S POMOCOU KOMBINACIE
//
prva(druha(tretia(stvrta()))); //zavolanie prvej kombinácie
//
prva(druha(),tretia(),stvrta()); //zavolanie druhej kombinácie
//
prva(druha(tretia()),stvrta()); //zavolanie tretej kombinácie
//
prva(druha(),tretia(stvrta())); //zavolanie štvrtej kombinácie   
Trace umiestnený vo funkciách nám vyhodí výpis:

Kód: Vybrať všetko

štvrtá položka
tretia položka
druhá položka
prvá položka

štvrtá položka
tretia položka
druhá položka
prvá položka

štvrtá položka
tretia položka
druhá položka
prvá položka

štvrtá položka
tretia položka
druhá položka
prvá položka
To znamená, že funkcie sú spúšťané vždy od najhlbšie umiestnenej funkcie v zápise (od konca).

[edit end]

Skratky:

V prípade, že potrebujeme viac objektom v aplikácii priradiť rovnaký parameter k vlastnosti, alebo k rôznym event handlerom priradiť rovnakú funkciu, je na mieste použiť skrátené priradenie k objektom. Prestavme si situáciu, kde máme v aplikácii 5 objektov, ktorým chceme nastaviť pozíciu _x na hodnotu 0. Zapíšeme to takto:

Kód: Vybrať všetko

objekt1._x = 0;
dalsiobj.ovladac._x = 0;
mc1._x = 0;
menu._x = 0;
gulicka._x = 0; 
Máme, tak script na 5 riadkov, v ktorom piatim rôznym objektom nastavujeme pozíciu _x na 0. Tu ale môže vzniknúť problém pri zmene tejto hodnoty, pretože pre každý objekt ju treba zmeniť zvlášť. Pokiaľ bude, ale táto hodnota rovnaká pre každý z týchto objektov vždy, vieme použiť skrátení výraz a pri prípadnej editácii kódu nemusíme ručne meniť hodnotu každého objektu zvlášť.
Zápis bude vyzerať takto:

Kód: Vybrať všetko

objekt1._x = dalsiobj.ovladac._x=mc1._x=menu._x=gulicka._x=0; 
Tento typ zápisu sa nazýva INLINE (v riadku) a je použiteľný iba v prípade použitia vlastností a handlerov, ktorým je nutné priradiť nejakú hodnotu za znakom rovná sa (=).

Kód: Vybrať všetko

mc1._visible = false;
mc1._width = 10;
// a pod.           
Samozrejme, že pri takomto skracovaní môžeme typy vlastností aj miešať medzi sebou.

Kód: Vybrať všetko

mc1._x = objekt._with=menu._y=0; 
Toto isté platí aj pri priraďovaní funkcií k event handlerom a pod. Predstavme si tlačítko, ktorému chceme nastaviť, aby pri evente onRollOver a pri evente onRelease, aby vykonalo rovnakú akciu napr. prešiel na scéne, na snímok 3. Zápis by mohol vyzerať takto:

Kód: Vybrať všetko

tlacitko.onRollOver = function():Void  {
    _root.gotoAndStop(3);
};
tlacitko.onRelease = function():Void  {
    _root.gotoAndStop(3);
}; 
Skratka pre tento zápis bude vyzerať nasledovne:

Kód: Vybrať všetko

tlacitko.onRollOver = tlacitko.onRelease=function ():Void {
    _root.gotoAndStop(3);
}; 
Zápis je rovnako funkčný a tak isto rýchly. Je ho možné využiť aj pri použití preddefinovaných funkcií, ktoré používame v celej aplikácii.

Kód: Vybrať všetko

function preskocenie():Void {
    _root.gotoAndStop(3);
}
tlacitko.onRollOver = preskocenie;
tlacitko.onRelease = preskocenie; 
alebo v skratke:

Kód: Vybrať všetko

tlacitko.onRollOver = tlacitko.onRelease=preskocenie; 
Všetky tieto zápisy sú plne funkčné a je iba na nás, pre ktorý z nich sa rozhodneme.

Ďalšia technika používania skratiek je univerzálnejšia a dokonca priamo v nej môžeme použiť techniku INLINE. Jedná sa o skratku, pri ktorej je využívaný cyklus. Ako som už napísal, technika INLINE je použiteľná iba v prípade, že sa bude jednať o funkcie, ktorým je nutné priradiť hodnotu za znakom rovná sa (=). Avšak v prípade funkcií, využívajúcich iba dot operátor (bodku), toto nie je použiteľné. Predstavme si situáciu, kedy máme na scéne 100 movieclipov, v ktorých je nejaká animácia a potrebujeme túto animáciu vo všetkých týchto objektoch zastaviť, pomocou funkcie stop();. Môžeme to vypísať ručne na 100 riadkov, ale priznajme si sami, komu sa to chce, však? 100 objektov nie je málo, a tak to môžeme zapísať nasledovne.

Kód: Vybrať všetko

for (var i = 1; i<=100; i++) {
    _root["mc"+i].stop();
} 
Ako vidíme zo 100 možných riadkov, máme 3, ktoré fungujú rovnako rýchlo a 100 animácií zastavíme.
Zápis

Kód: Vybrať všetko

_root["mc"+i] 
je zástupný a znamená, že na hlavnej scéne (_root) sa nachádza objekt s názvom mc, ktorý má na konci názvu dáke číslo (mc1, mc2, mc3, mc99 a pod.) a toto číslo nám určuje cyklus od 1 po 100.
Isto Vás teraz napadla otázka: Čo vtedy, ak mám na scéne 100 objektov, ale každý sa volá inak a nemá vo svojom mene žiadne číslo a ručné premenovanie neprichádza do úvahy?
Riešenie je pomerne jednoduché, ale neodporúčam ho využívať často a hlavne nie pri veľa objektoch (100 je už asi veľa) a to preto, lebo riešením je použiť pole prvkov, do ktorého ručne vypíšeme názvy všetkých objektov, ktoré chceme spracovať.

Kód: Vybrať všetko

var PolePrvkov:Array = [objekt1, objekt_mc, menu, stopkaMc, dalsiobj.ani, hojko, startovanie];
for (var i = 0; i<7; i++) {
    PolePrvkov[i].stop();
} 
Do poľa vpíšeme názvy bez úvodzoviek a cyklus zahájime od čísla 0, pretože prvá položka v poly je nultá. V prípade, že sa nám nechce vypĺňať toto pole ručne, môžeme si to z automatizovať, a to tak že pole naplníme pomocou cyklu for in, ktorý bude fungovať na tento princíp.

Kód: Vybrať všetko

for (i in this) {
    if (typeof this[i] == "movieclip") {
        trace(i);
    }
} 
Cyklom for in oskenujeme celú hlavnú scénu aplikácie a pomocou podmienky odfiltrujeme objekty typu movieclip, ktorými naplníme pole. Ako som už však načrtol, používanie poľa nie je veľká výhra pri veľkom počte prvkov, pretože to je náročné na užívateľskú pamäť (RAM).

Skratky pre logické hodnoty:

Ďalším typom skratky je takzvaná návratová hodnota negácie, ktorá pracuje s vlastnosťami objektov a premennými logického typu Boolean (true/false).
Napr.

Kód: Vybrať všetko

mc._visible = false; // z neviditeľní objekt s názvom mc
var logika:Boolean = true; //nastaví premennú logika na hodnotu true       
Ak používame podmienky, kde kontrolujeme práve hodnotu true alebo false, už vieme, že náš zápis nemusí vyzerať takto:

Kód: Vybrať všetko

if (a == true) {
    //vykonaj akciu
}
//alebo 
if (a == false) {
    //vykonaj akciu
} 
Ale stačí ak to zapíšeme takto:

Kód: Vybrať všetko

if (a) { // nahrádza a == true
    //vykonaj akciu
}
//alebo 
if (!a) { // ! negácia (nerovnosť) nahrádza a != true, čo je vlastne to isté ako a == false
    //vykonaj akciu
} 
Ak ale potrebujeme kvôli niečomu neustále meniť hodnotu true a false v dákej funkcii, alebo premennej napr. pomocou tlačidla, môžeme to vyriešiť nasledovným zápisom.

Kód: Vybrať všetko

tlacitko.onPress = function():Void  {
    if (a) {
        a = false;
    } else {
        a = true;
    }
}; 
Vo funkcii, ktorú spustíme stlačením tlačidla, máme podmienku, ak sa premenná A rovná true tak ju prepni na hodnotu false, v opačnom prípade (ak sa premenná A rovná false) ju prepni na true. Takto môžeme prepínať stavy true/false (pravda/nepravda). Tento zápis je však na 4 riadky, tak prečo si ho neskrátiť? Áno, práve na toto nám slúži návratová hodnota negácie, ktorej zápis vyzerá strašne primitívne, ale je rovnako efektívny.

Kód: Vybrať všetko

tlacitko.onPress = function():Void  {
    a = !a;
}; 
Zápis a = !a znamená, že ak sa hodnota A rovná true prepne sa na hodnotu false, alebo ak sa hodnota A rovná false, prepne sa na hodnotu true, presne tak isto ako pri použití podmienky. Tento zápis sa dá použiť aj pri funkcii _visible a ostatných logických funkciách (_lockroot, _smooth, atď).

Kód: Vybrať všetko

mc._visible = !mc._visible;  
Čím môžeme jednoduchým klikaním na tlačidlo, zobrazovať a skrývať objekty. Na záver dodám, pre tých, ktorí si všimli, že som nikde nepoužil základnú premennú A , ktorej by som určil hodnotu false. To preto, lebo vo flashi existujú anonymné premenné, ktoré netreba dopredu definovať a v prípade anonymnej premennej typu Boolean, je jej základná hodnota vždy false.

Zabezpečenie aplikácie

Na túto tému sa už diskutuje dlhé roky a pravdou je, že neexistuje žiadna ochrana. Na úvod a v krátkosti, napíšem, že použitá grafika v aplikácii sa nedá ochrániť vôbec. Síce mňa osobne už napadla myšlienka, či neexistuje software, ktorý dokáže vektorovú grafiku použitú v aplikácii prekonvertovať do ActionScriptu, avšak som sa k ničomu takému nikdy nedopátral. Ochrániť, aj keď iba z časti sa dá iba ActionScript, na čo bolo vyvinutých veľa aplikácií ale väčšinu z nich, dokonca aj najlepšiu aplikáciu aká na trhu dlho bola (amayeta SWF encrypt), sa podarilo nabúrať. Viac som sa na túto tému rozpísal tu.


Akákoľvek reprodukcia ľubovoľnej časti článku, nie je bez písomného súhlasu autora dovolená.
c-ice
Medium Star
Medium Star
Používateľov profilový obrázok
Príspevky: 475
Registrovaný: 04 mar 2008, 15:18
Kontaktovať používateľa:

Re: Flash - návody, tipy, triky

Príspevok od používateľa c-ice »

A prečo AS2 ked tu už mame AS3 mozno by si nejaku novinku alebo vychytavku mohol pridat :) tak ale :plus: je to pekne a podrobne niekto sa z toho naučí :)
weroro
Flash coder
Flash coder
Používateľov profilový obrázok
Príspevky: 3179
Registrovaný: 14 feb 2009, 22:34
Bydlisko: BB/LV/BA/ZA
Kontaktovať používateľa:

Re: Flash - návody, tipy, triky

Príspevok od používateľa weroro »

c-ice: AS2 preto lebo pravda je taká, že AS3 neviem na takej úrovni (dá sa povedať, mierne pokročilý ) aby som v ňom niečo vyvíjal. AS2 ovládam odpredu, zozadu, preto robím developing iba v ňom. Avšak myslím, že máš aj pravdu a je na čase sa začať venovať aj AS3.
-----------------------------------------------------------------------------------------------

Efekt zrnenia v TV

Pred nedávnom som potreboval vyriešiť, ako vytvoriť čo najjednoduchšie efekt zrnenia v televízore. Požiadavka bola aby efekt čo najmenej zaťažoval užívateľské PC a zároveň mal malú dátovú veľkosť.

Najprv ma napadlo riešenie, ktoré bolo celkom logické. Vytvoriť (nakresliť) dva obrázky s bielim a čiernym zrnom, ktorým budem náhodne meniť pozíciu. Avšak toto riešenie mi prišlo dosť prácne, a tak som vymyslel ďalšiu metódu a to, vytvoriť si iba jedno zrno (čierne a biele), duplikovať ho, a tak isto náhodne meniť pozíciu. Toto riešenie bolo dobré, avšak bolo pri ňom použitých veľa objektov, s ktorými sa hýbalo a to malo nežiaduci vplyv na výkon PC. Bol som teda nútený vymyslieť tretie riešenie, ktoré bolo postačujúce. Jednalo sa o použitie metódy noise, triedy BitmapData.

Dnes si teda ukážeme ako tento efekt vytvoriť, tak aby vyhovoval našim požiadavkám.

Ako postupovať:

Otvoríme si nový dokument ActionScript 2.0, nastavíme rozmery dokumentu na 300x300 pixelov.
Ďalej si stiahneme SWF obrázok televízora, ktorý je v prílohe.
tv_vektor.swf
(2.21 KiB) 4067 stiahnutí
Obrázok z prílohy na importujeme do library (File – Import – Import to Library). V Library (CTRL+L) klikneme na obrázok pravým tlačidlom myšky a z kontextového menu vyberieme možnosť Linkage... V okne, ktoré sa nám zobrazí zaškrtneme položku Export for ActionScript a v políčku idetifier prepíšeme názov na televizor (s malými písmenami).
import.png
Stlačíme OK a prepneme sa do okna editoru ActionScript (F9).

Napíšeme:

Kód: Vybrať všetko

attachMovie("televizor", "tv", 3);
tv._x = (Stage.width-tv._width)/2;
tv._y = (Stage.height-tv._height)/2; 
Príkazom attachMovie si obrázok z library vložíme na scénu. Prvý parameter určuje ID (identifier) objektu, ktorý chceme na scénu vložiť. Druhý parameter určuje nový názov objektu (instance name), ktorým budeme objektu pomocou scriptu priraďovať rôzne vlastnosti. Tretí parameter určuje hĺbku (vrstvu), do ktorej sa má objekt načítať. Ďalej nastavíme obrázku pomocou jednoduchého vzorca pozíciu _x a _y presne na stred scény.

Kód: Vybrať všetko

this.createEmptyMovieClip("sum", 2);
sum._x = tv._x+10;
sum._y = tv._y+100; 
Vytvoríme si prázdnu inštanciu MovieClipu, ktorú pomenujeme sum a vložíme ju do hĺbky 2 (pod obrázok televízora, ktorý je v hĺbke 3). Nastavíme pozíciu MovieClipu _x o 10 pixelov a pozíciu _y o 100 pixelov viac, ako je pozícia _x, _y objektu tv.

Kód: Vybrať všetko

import flash.display.BitmapData;
var zrnenie:BitmapData = new BitmapData(200, 150);
sum.attachBitmap(zrnenie, 2); 
Pripojíme do dokumentu triedu BitmapData. Vytvoríme si nový objekt triedy BitmapData s názvom zrnenie. Nastavíme rozmer objektu v pixeloch na 200 (šírka) a 150 (výška). Objekt vložíme pomocou metódy attachBitmap do vopred vytvorenej prázdnej inštancie MovieClipu, ktorú sme si nazvali sum a nastavíme hĺbku 2.

Kód: Vybrať všetko

function sumenie():Void {
    zrnenie.noise(Math.round(Math.random()*10000), 30, 200, 1, true);
} 
Vytvoríme si funkciu sumenie pomocou, ktorej budeme spúšťať metódu noise, ktorú priradíme k objektu triedy BitmapData s názvom zrnenie. Metóda noise má tieto parametre:
  • • Prvý parameter: pozícia zrna
    • Druhý parameter: intenzita tmavých odtieňov, hodnota od 0 do 255
    • Tretí parameter: intenzita svetlých odtieňov, hodnota od 0 do 255
    • Štvrtý parameter: farebný kanál (1 – červená, 2-zelená atď... 8 - alpha)
    • Piaty parameter: čierno biele zobrazenie (true/false)

Ako prvý parameter zadáme pozíciu zrna, ale keďže potrebujeme aby sa zrno pohybovalo (menilo svoju pozíciu), treba túto hodnotu náhodne meniť. Na to nám poslúži príkaz random triedy Math, ktorý nám vracia náhodné desatinné číslo od 0 do 1. Toto číslo vynásobíme číslom 10 000 a následne celý výsledok zaokrúhlime na celé číslo pomocou príkazu round triedy Math. Ďalej nastavíme intenzitu tmavých odtieňov na 30, intenzitu svetlých odtieňov na 200, farebný kanál môžeme nastaviť na hodnotu 1 (červená), pretože aj tak chceme zobrazovať šum v sivých odtieňoch, a posledný parameter nastavíme na hodnotu true (pravda). Týmto sme si pripravili funkciu, ktorú budeme spúšťať v určitom intervale a pri každom spustení sa zmení pozícia zrna.

Kód: Vybrať všetko

setInterval(sumenie, 50); 
Nakoniec nám stačí funkciu sumenie už iba inicializovať pomocou časovača setInterval, ktorý nám zaručí nepretržité spúšťanie funkcie sumenie, každých 50 milisekúnd.

Výsledný efekt bude vyzerať takto:
hojko_zrnenie_tutorial.swf
(3.46 KiB) 4067 stiahnutí
Zdrojový súbor na preštudovanie si môžete stiahnuť tu:
hojko_zrnenie_tutorial.rar
(6.01 KiB) 76 stiahnutí

Akákoľvek reprodukcia ľubovoľnej časti článku, nie je bez písomného súhlasu autora dovolená.

//autoeditácia príspevku (15 Jan 2011, 06:41)

Ochrana online aplikácie

Chcel by som dať do povedomia článok na portály Flash.cz, kde sa autor zaoberá témou, ktorá viac menej vystihuje to, o čom som chcel písať článok aj ja sem na Hojko. článok sa zaoberá ochranou aplikácie pri jej predaji (odovzdaní) klientovi a to tak, že v prípade ak klient (ne)chtiac nevyplatí programátora, aby sa dala aplikácia deaktivovať a tým sa klientovi zamedzí používanie konkrétnej aplikácie. Článok pojednáva však iba o ochrane aplikácie prostredníctvom komunikácie s XML, a keď budem mať trochu viac času pridám sem aj ostatné, mnou často používané metódy takejto ochrany.

Odkaz na článok
Key5ers0ze
Guru wannabe
Guru wannabe
Používateľov profilový obrázok
Príspevky: 2353
Registrovaný: 28 apr 2006, 17:35
Bydlisko: http://footy.sk
Kontaktovať používateľa:

Re: Flash - návody, tipy, triky

Príspevok od používateľa Key5ers0ze »

Chcel by som sa opytat ake narocne je vytvorit nieco taketo:
http://www.arsenal-interactive.com/
Mam na mysli najma to: Pick your preffered Arsenal team.
weroro
Flash coder
Flash coder
Používateľov profilový obrázok
Príspevky: 3179
Registrovaný: 14 feb 2009, 22:34
Bydlisko: BB/LV/BA/ZA
Kontaktovať používateľa:

Re: Flash - návody, tipy, triky

Príspevok od používateľa weroro »

Náročnosť by som bodovo od 1 do 10 (vyššie číslo vyššia obtiažnosť) hodnotil známkou 4. Jedná sa o aplikáciu, ktorá vyžaduje iba základné, možno veľmi mierne pokročilé znalosti Actionscriptu. Výber hráčov v aplikácii je klasické menu, v ktorom sa po kliknutí na meno hráča zvýši prednastavená premenná o 1 a posunie sa na ďalší objekt na ihrisku. Začínajúcemu programátorovi asi bude viac robiť problém naprogramovať tú defaultnú animáciu, kedy sa akože hráči zoradia okolo trénera a krúžia okolo neho, ale to sa dá urobiť aj ručným animovaním. Samotné rozmiestnenie hráčov je preddefinované podľa výberu a jednotlivé body (hráči) sa plynule presunú z bodu A do určeného bodu B automaticky.
Key5ers0ze
Guru wannabe
Guru wannabe
Používateľov profilový obrázok
Príspevky: 2353
Registrovaný: 28 apr 2006, 17:35
Bydlisko: http://footy.sk
Kontaktovať používateľa:

Re: Flash - návody, tipy, triky

Príspevok od používateľa Key5ers0ze »

Nevedel by si mi poradit nejake konkretne tutorialy, ktore by ma nasmerovali?
weroro
Flash coder
Flash coder
Používateľov profilový obrázok
Príspevky: 3179
Registrovaný: 14 feb 2009, 22:34
Bydlisko: BB/LV/BA/ZA
Kontaktovať používateľa:

Re: Flash - návody, tipy, triky

Príspevok od používateľa weroro »

Konkrétne ťažko. Stiahni si Flash, stlač F1 a študuj a skúšaj. základ je naučiť ta vytvoriť tlačítko, používať funkciu onEnterFrame a podmienky.

// Presne tak ako radí soso, uč sa AS3.
soso972
Novice
Novice
Príspevky: 1
Registrovaný: 17 jan 2011, 17:44

Re: Flash - návody, tipy, triky

Príspevok od používateľa soso972 »

No a hlavne začni rovno s AS3, v budúcnosti to oceníš..
©_ME
Light Star
Light Star
Príspevky: 282
Registrovaný: 27 apr 2011, 19:33

Re: Flash - návody, tipy, triky

Príspevok od používateľa ©_ME »

vieš ako urobiť vlastný videoprehrávač? Niečo som videlô na youtube, ale nemaly kvalitnú kameru.
weroro
Flash coder
Flash coder
Používateľov profilový obrázok
Príspevky: 3179
Registrovaný: 14 feb 2009, 22:34
Bydlisko: BB/LV/BA/ZA
Kontaktovať používateľa:

Re: Flash - návody, tipy, triky

Príspevok od používateľa weroro »

Áno viem. Možno to raz spracujem. V každom prípade je toho na googly strašne veľa.

btw. Táto téma neslúži na diskusiu mimo toho, čo sa v nej nachádza, takže ak nemáš otázku alebo pripomienku k článkom, tak zbytočne nepíš.

//autoeditácia príspevku (24 Máj 2011, 23:00)
Ručné kreslenie a výplň nakresleného objektu (Aplikácia)

Veľa začiatočníkov, ktorí sa odhodlajú vstúpiť do sveta Action Scriptu , túži po tom aby vytvorili hru, video/audio prehrávač, alebo proste aplikáciu, ktorá bude reagovať na podnet užívateľa. Medzi prvé pokusy preto patrí aj on-line aplikácia schopná vykresliť čiary, z nich tvorené objekty, zjednodušene povedané on-line kreslenie.

Vytvorenie ovládaného prostredia, ktoré je schopné zaznamenať a vykresliť objekty definované užívateľom jednoduchým pohybom myšky, je možné vytvoriť niekoľkými spôsobmi, ale my si povieme o dvoch najčastejšie používaných.

Umiestňovanie Movieclipov, alebo "falošné kreslenie".

Táto technika sa používala často od roku 2001 do 2005 a v niektorých prípadoch je používaná na určité efekty do dnes. Jedná sa o dojem kreslenia čiary využívajúc pritom už vopred nakreslený objekt (najčastejšie kruh), ktorý je umiestňovaný buď pomocou duplicateMovieclip() alebo attachMovie() na pozíciu kurzoru myšky (_xmouse/_ymouse ). Technika sama osebe funguje skvele, ale pri rýchlejšom pohybe kurzorom ostáva "čiara" prerušovaná, pretože sa objekty nestíhajú umiestňovať na určenú pozíciu.

Príklad vytvorenia takto fungujúcej aplikácie:

Nakreslíme si nástrojom Oval (o) na scéne kruh 30x30 pixlov. Klikneme naň pravým tlačidlom myšky a z kontextového menu vyberieme možnosť convert to movieclip. Takto vytvorený movieclip umiestnený na scéne pomenujeme v panely properties (instance name) názvom stopa. Klikneme na prvý snímok časovej osy a do panela Action Script (F9) napíšeme:

Kód: Vybrať všetko

this.stopa._visible = false;
var mpx:Number = _xmouse;
var mpy:Number = _xmouse;
var i:Number = 1;
function kreslenie ():Void
{
    if (_xmouse != mpx || _ymouse != mpy)
    {
        var mc:MovieClip = stopa.duplicateMovieClip ("st" + i, i);
        mc._x = mpx = _xmouse;
        mc._y = mpy = _ymouse;
        i++;
    }
}
setInterval(kreslenie, 10); 
  • • Na prvom riadku zneviditeľníme pomocou atribútu _visible, ktorému nastavíme hodnotu false, movieclip stopa, ktorý budeme duplikovať, aby nám na scéne neprekážal.

    • V druhom riadku si definujeme premennú číselného dátového typu s názvom mpx, ktorú naplníme hodnotou počiatočnej Xsovej pozície myšky.

    • V treťom riadku si definujeme premennú číselného dátového typu s názvom mpy, ktorú naplníme hodnotou počiatočnej Ysovej pozície myšky.

    • Vo štvrtom riadku si definujeme pomocnú premennú číselného dátového typu s názvom i, ktorá bude mať nastavenú počiatočnú hodnotu na 1.

    • V piatom riadku si vytvoríme funkciu s názvom kreslenie, v ktorej si zapíšeme podmienku: ak sa X pozícia myšky nerovná hodnote v premennej mpx alebo ak sa Y pozícia myšky nerovná hodnote v premennej mpy , vykonaj nasledujúce príkazy:
    (danou podmienkou je zabezpečené, že sa movie clip s názvom stopa bude duplikovať iba vtedy, keď sa pohne kurzor myšky)

    Vytvoríme si pomocnú premennú dátového typu MovieClip s názvom mc, ktorú naplníme s duplikovaným movieclipom stopa s novým názvom st, ku ktorému na koniec pridáme číselnú hodnotu z premennej i aby sme zabezpečili unikátny názov každého z duplikovaného movieclipu. druhá hodnota v duplicateMovieClip udáva vrstvu, do ktorej sa má novo vytvorený movieclip umiestniť. Ďalej nasleduje umiestnenie novovytvoreného movieclipu na aktuálnu pozíciu X a Y podľa polohy myšky, pričom zároveň prepíšeme hodnoty v premenných mpx a mpy novými údajmi o polohe myšky. Ďalej zvýšime aktuálne číslo v premennej i o 1.
Na koniec použijeme setInterval, pomocou ktorého budeme funkciu kreslenie dookola spúšťať v intervale 10 milisekúnd.
(takto zapísaný script je funkčný aj v starších verziách flashu 6, kde ešte nebola možnosť použiť udalosť onEnterFrame())

Výsledok bude vyzerať nasledovne:
Spoiler
final01.swf
(64.01 KiB) 2973 stiahnutí
duplicate.rar
Zdrojový (FLA) súbor
(4.03 KiB) 56 stiahnutí
Ako vidíte, tak duplikovanie (alebo attachovanie) movie clipov na scénu nie je najefektívnejšie, nehovoriac o optimalizácii, kde pri tejto technike dostáva RAMka poriadne zabrať.

Kreslenie čiar – lineTo ()

Vytváranie dojmu kreslenia čiary pomocou systematického umiestňovania movieclipov na scénu nie je efektívne a preto sa začala používať omnoho lepšia technika. V Action Scripte je možné (vynechajúc triedy Matrix a pod.) pomocou funkcií ako lineTo(), curveTo(), kresliť rôzne objekty (štvoruholníky, trojuholníky, kružnice, hviezdy, lichobežníky, atď. + s použitím beginFill() vieme týmto objektom zabezpečiť aj výplň - kruh).

My si v tejto chvíli budeme všímať funkciu pre kreslenie čiar, lineTo(), ktorá má dva parametre X a Y. X udáva počiatočný (A) bod kreslenej čiary a Y udáva koncový (B) bod kreslenej čiary. Ak sú oba body umiestnené budú spojené a tým sa v aplikácii vykreslí čiara.
Stručne zapísaný konštruktor lineTo() vyzerá nasledovne:
lineTo.png
Action Script vyzerá nasledovne:

Kód: Vybrať všetko

this.createEmptyMovieClip("mc", 1);
mc.lineStyle (5, 0xFF00FF, 100);
mc.moveTo (200, 200);
mc.lineTo (300, 300);
Pomocou tohto konštruktora je už pomerne jednoduché docieliť vykreslenie čiary kopírovaním trajektórie kurzoru myšky.

Action Script pre takúto aplikáciu vyzerá takto:

Kód: Vybrať všetko

var lineWidth:Number = 5; //hrúbka čiary
var lineColor:Number = 0xFF0000; //farba čiary
var lineAlpha:Number = 100; //priehľadnosť čiary
this.createEmptyMovieClip ("desk", this.getNextHighestDepth ()); //vytvorenie prázdneho movieclipu
var drawObj:Object = new Object (); //vytvorenie objektu darawObj
drawObj.onMouseDown = function ():Void //vytvorenie funkcie ak je ľavé tlačidlo myši stlačené
{
    this.drawOn = true; // pomocná premenná aktivácie kreslenia true = zapnuté
    desk.lineStyle (lineWidth, lineColor, lineAlpha); //nastavenie štýlu čiary
    desk.moveTo (_xmouse, _ymouse); //umiestnenie nulového bodu
};
drawObj.onMouseMove = function ():Void //vytvorenie funkcie ak sa s myšou hýbe
{
    if (this.drawOn) //ak je aktivácia kreslenia zapnutá
    {
        desk.lineTo (_xmouse, _ymouse); //nakresli čiaru z bodu X myšky do bodu Y myšky
    }
    updateAfterEvent (); //aktualizácia udalosti onMouseMove
};
drawObj.onMouseUp = function ():Void //vytvorenie funkcie ak je ľavé tlačidlo myši zdvihnuté
{
    this.drawOn = false; // pomocná premenná aktivácie kreslenia false = vypnuté
};
Mouse.addListener (drawObj); //prepojenie objektu drawObj pomocou listeneru s myškou                  
Aplikácia bude vyzerať takto:
Spoiler
final02.swf
(63.16 KiB) 2973 stiahnutí
lineTo1.rar
Zdrojový (FLA) súbor
(4.34 KiB) 51 stiahnutí
Čo ale v prípade, keď chceme takto nakresliť objekt, ktorý bude mať aj výplň? Logicky sa nám na to hodí beginFill(), ale pri takomto kreslení nebude fungovať naša teória, tak ako by sme si predstavovali. Demonštrovať si to môžeme pridaním beginFill s atribútmy na začiatok udalosti onMouseDown na riadku 9, v predošlom scripte.

Kód: Vybrať všetko

desk.beginFill(0x00FF00, 100);
/*desk je názov movieclipu v ktorom je nakreslený objekt, prvý atribút
určuje farbu výplne a druhý atribút určuje priehľadnosť výplne*/ 
Ukážka aplikácie s beginFill():
Spoiler
final03.swf
(63.44 KiB) 2973 stiahnutí
lineTo2.rar
Zdrojový (FLA) súbor
(4.38 KiB) 62 stiahnutí
Fungovať to síce funguje, ale stále to nie je to pravé orechové, pretože výplň sa zobrazuje aj počas kreslenia a pôsobí to veľmi rušivo. Ak ste si všimli, že pri kreslení je kurzor nepretržite spojený s počiatočným bodom pomocou čiary, tak to je preto, lebo výplň sa dá umiestniť iba do úplne uzatvoreného objektu.

Odstránenie tohto nežiaduceho efektu je o niečo dramatickejšie. Budeme nútený si vytvoriť špeciálnu funkciu, ktorá bude schopná zaznamenávať a ukladať polohu kurzoru, zmazať pôvodný objekt a znovu vykresliť daný objekt pomocou uložených údajov a to už aj s výplňou.

Otvoríme si preto FLA prvej ukážky lineTo(), Action Script v dokumente posunieme Klávesou Enter na tretí riadok a na prvý riadok pridáme script:

Kód: Vybrať všetko

var posX:Array = new Array ();
var posY:Array = new Array ();
var ArPos:Number;
function createFillObj (_memory:Number, mc:MovieClip, fillColor:Number, fillAlpha:Number):Void
{
    if (_memory == 1)
    {
        ArPos = 1;
        posX[0] = _xmouse;
        posY[0] = _ymouse;
    }
    else if (_memory == 2)
    {
        posX[ArPos] = _xmouse;
        posY[ArPos] = _ymouse;
        ArPos++;
    }
    else if (mc != undefined)
    {
        if (fillAlpha == undefined)
        {
            fillAlpha = 100;
        }
        if (_memory == 0)
        {
            mc.clear ();
        }
        mc.beginFill (fillColor, fillAlpha);
        mc.lineStyle (lineWidth, lineColor, lineAlpha);
        mc.moveTo (posX[0], posY[0]);
        for (var i:Number = 1; i < posX.length; i++)
        {
            mc.lineTo (posX[i], posY[i]);
        }
        mc.endFill ();
        posX.length = 0;
        posX = [];
        posY.length = 0;
        posY = [];
    }
}  
V prvom riadku sme si preddefinovali pole prvkov s názvom posX, do ktorého budeme zaznamenávať Xsovú polohu kurzoru myšky.

V druhom riadku sme si preddefinovali pole prvkov s názvom posY, do ktorého budeme zaznamenávať Yovú polohu kurzoru myšky.

V treťom riadku sme si vytvorili prázdnu premennú ArPos, ktorá nám bude neskôr slúžiť pri vykresľovaní objektu pomocou údajov v poliach.

Teraz prichádza na rad vytvorenie funkcie, ktorá bude poňatá univerzálne a bude ňou možné zaznamenávať údaje do poľa, a zároveň tieto údaje z poľa čítať a použiť.
Funkciu pomenujeme createFillObj a do zátvoriek umiestnime pomocné premenné, ktoré budeme môcť hocikedy zmeniť aj mimo funkcie. Prvá premenná číselného dátového typu _memory nám bude vo funkcii slúžiť ako prepínač, podľa ktorého bude funkcia buď zapisovať alebo čítať údaje z poľa. Druhá premenná mc dátového typu MovieClip Object bude zastupovať názov movieclipu, v ktorom sa bude kresliť. Tretia premenná číselného dátového typu fillColor nám bude určovať farbu výplne a štvrtá premenná číselného dátového typu fillAlpha nám bude určovať hodnotu priehľadnosti výplne.
Funkcia bude obsahovať tri oddelené časti:
Prvé dve budú slúžiť na zápis do poľa a tretia bude slúžiť na čítanie údajov z poľa a vytvorenie objektu s výplňou.
  • • Prvá časť funkcie, ktorú oddelíme podmienkou / ak sa premenná _memory rovná 1 / prepíše obsah premennej ArPos na hodnotu 1, do poľa polX na jeho nultú pozíciu (prvý prvok v poly), zapíše Xovú pozíciu kurzoru myšky a do poľa polY na jeho nultú pozíciu (prvý prvok v poly), zapíše Yovú pozíciu kurzoru myšky.

    • Druhá časť funkcie ku ktorej sa pristúpi v prípade, že premenná _memory sa nerovná 1, ale ak sa premenná _memory rovná 2, zapíše aktuálnu Xovú pozíciu kurzoru myšky do poľa posX na jeho pozíciu, ktorej hodnota sa nachádza v premennej ArPos. Ďalej zapíše aktuálnu Yovú pozíciu kurzoru myšky do poľa posY na jeho pozíciu, ktorej hodnota sa nachádza v premennej ArPos. Na koniec hodnotu v premennej ArPos zvýšime o 1.

    • Tretia časť funkcie sa vykoná vtedy, ak sa premenná _memory nerovná ani 1 ani 2 a zároveň sa premenná mc nerovná undefined, čiže ak je premenná mc správne definovaná existujúcim Movieclipom. Skontrolujeme pomocou podmienky, či je premenná fillAlpha definovaná a ak definovaná nie je (undefined), nadefinujeme jej hodnotu 100. Ďalej pokračujeme druhou podmienkou, ktorou testujeme hodnotu premennej _memory. Ak sa premenná _memory rovná 0 zmažeme pomocou funkcie clear() obsah movieclipu, ktorého názov sa nachádza v premennej mc. Teraz nasleduje samotné vytvorenie výplne. Pomocou beginFill si určíme farbu a priehľadnosť výplne, ktorých hodnoty sa nachádzajú v premenných fillColor a fillAlpha. Ďalej si určíme štýl čiary, ktorého atribúty určíme premennými lineWidth, lineColor, lineAlpha. Tieto premenné máme už preddefinované v prvej časti scriptu, ktorým sme kreslili čiaru pomocou myšky. Teraz prichádza na rad umiestnenie počiatočného bodu moveTo, ktorého hodnoty X a Y si vytiahneme z poľa posX a posY, nachádzajúce sa na nultej pozícii v poly. Na samotné vykreslenie čiary pomocou lineTo použijeme cyklus for, pretože bude potrebné vykresliť zatiaľ neznámy počet súradníc X a Y.
    Premennej i v cykle nastavíme hodnotu 1, pretože na nultej pozícii v poly sa nachádza súradnica počiatočného bodu moveTo. Ďalej nasleduje podmienka / ak je premenná i menšia ako celková reálna dĺžka poľa posX vykonaj príkazy v cykle a v treťom parametry cyklu pripočítame k aktuálnej hodnote i +1. V cykle máme umiestnený lineTo, ktorého súradnice X a Y čítame z poľa, ktoré postupne prechádzame od 1 po jeho koniec.
    Po ukončení cyklu uzavrieme výplň pomocou endFill(), čo ale nie je podmienka. Nakoniec zmažeme všetky údaje z poľa posX a posY, nastavením dĺžky poľa na 0 a zadefinujeme ho ako prázdne.
Takto sme si vytvorili funkciu, ktorú stačí spustiť s požadovanými parametrami.

Funkciu umiestnime do všetkých troch udalostí onMouseDown, onMouseMove a onMouseUp na koniec.
Do udalosti onMouseDown umiestnime funkciu s parametrom 1, čiže zápis počiatočného bodu

Kód: Vybrať všetko

createFillObj (1);
Do udalosti onMouseMove do vnútra podmienky umiestnime funkciu s parametrom 2, čiže zápis súradníc X a Y kurzoru myšky.

Kód: Vybrať všetko

createFillObj (2);
Do udalosti onMouseDown umiestnime funkciu s viacerými parametrami.
/zmazávanie plochy, názov movieclipu v ktorom vykreslujeme, farba výplne, priehľadnosť/

Kód: Vybrať všetko

createFillObj (null, desk, 0x0000FF, 50);
/*prvý parameter nastavíme na null čiže nami nakreslené objekty budú ostávať na ploche.
Ak tento parameter zmeníme na hodnotu 0 bude sa plocha pred vykreslením objektu zmazávať*/ 
tip: Ak chceme aby sme pri kreslení objektov mali náhodnú farbu výplne, tak ako tretí parameter (farbu výplne) zadáme:

Kód: Vybrať všetko

int (Math.random () * 0xFFFFFF)
Finálny Action Script bude vyzerať nasledovne:

Kód: Vybrať všetko

var posX:Array = new Array ();
var posY:Array = new Array ();
var ArPos:Number;
function createFillObj (_memory:Number, mc:MovieClip, fillColor:Number, fillAlpha:Number):Void
{
    if (_memory == 1)
    {
        ArPos = 1;
        posX[0] = _xmouse;
        posY[0] = _ymouse;
    }
    else if (_memory == 2)
    {
        posX[ArPos] = _xmouse;
        posY[ArPos] = _ymouse;
        ArPos++;
    }
    else if (mc != undefined)
    {
        if (fillAlpha == undefined)
        {
            fillAlpha = 100;
        }
        if (_memory == 0)
        {
            mc.clear ();
        }
        mc.beginFill (fillColor, fillAlpha);
        mc.lineStyle (lineWidth, lineColor, lineAlpha);
        mc.moveTo (posX[0], posY[0]);
        for (var i:Number = 1; i < posX.length; i++)
        {
            mc.lineTo (posX[i], posY[i]);
        }
        mc.endFill ();
        posX.length = 0;
        posX = [];
        posY.length = 0;
        posY = [];
    }
}
var lineWidth:Number = 2;
var lineColor:Number = 0xFF0000;
var lineAlpha:Number = 100;
this.createEmptyMovieClip ("desk", this.getNextHighestDepth ());
var drawObj:Object = new Object ();
drawObj.onMouseDown = function ():Void 
{
    this.drawOn = true;
    desk.lineStyle (lineWidth, lineColor, lineAlpha);
    desk.moveTo (_xmouse, _ymouse);
    createFillObj (1);
};
drawObj.onMouseMove = function ():Void 
{
    if (this.drawOn)
    {
        desk.lineTo (_xmouse, _ymouse);
        createFillObj (2);
    }
    updateAfterEvent ();
};
drawObj.onMouseUp = function ():Void 
{
    this.drawOn = false;
    createFillObj (null, desk, 0x0000FF, 50);
};
Mouse.addListener (drawObj); 
Aplikácia bude fungovať takto:
Spoiler
final04.swf
(63.73 KiB) 2974 stiahnutí
lineTo3.rar
Zdrojový (FLA) súbor
(4.65 KiB) 47 stiahnutí
Akákoľvek reprodukcia ľubovoľnej časti článku, nie je bez písomného súhlasu autora dovolená.
©_ME
Light Star
Light Star
Príspevky: 282
Registrovaný: 27 apr 2011, 19:33

Re: Flash - návody, tipy, triky

Príspevok od používateľa ©_ME »

S dovolením werora som vytvoril offline verziu návodu, ktorú budem distribuovať aj mimo fóra hojko.com, s príšluným odkazom na toto fórum.
Napísať odpoveď