ActionScript3 Načítavanie externého textu do dynamického textového poľa, vertikálne rolovanie textu dynamického textového poľa

Transkript

1 1 ActionScript3 Načítavanie externého textu do dynamického textového poľa, vertikálne rolovanie textu dynamického textového poľa Načítanie externého textu Princípom je, že sa do vytvoreného dynamického textového poľa, resp. textového kontajnera načíta text, ktorý sa nachádza v externom textovom súbore, ktorý sa nachádza mimo dokumentu FLASH niekde na HDD počíta. Postupovať budete takto: 1) vytvoríme si súbor s textovým obsahom, ktorý sa bude načítavať. Textový obsah môže byť ľubovoľnej dĺžky. Čo sa týka umiestnenia nášho externého textového dokumentu, najlepšie riešenie bude, ak textový dokument bude umiestnený hneď pri dokumente FLASH (fla, swf). Nebudeme musieť tak písať dlhú cestu k súboru. Náš textový súbor sa volá text.txt. 2) vo FLASH prezentácii na javisku si vytvoríme dynamické textové pole (textový kontajner). Ide o pole, do ktorého sa bude načítavať text z externého súboru text.txt. Klikneme na textový nástroj a v spodnej časti pracovnej plochy vo vlastnostiach (Propertis) si nastavíme text na

2 2 dynamický (Dynamic Text). Pomocou myšky nakreslíme rámček. Čo bude vlastne náš textový kontajner (dynamické textové pole). Ak potrebujeme, vieme rámčeku zadať presne rozmery (šírku a výšku). Musíme nastaviť ešte ďalšie parametre dynamického textového poľa ako je automatické zalamovanie riadku textu (multiline). Ďalšie nastavenie sa týka fontu a textu a samozrejme aj veľkosti a farby textu. Dynamické textové pole (textový kontajner) je pripravené na zobrazovanie textového obsahu z externého súboru text.txt. Vlastnosti dynamického textového poľa sú nastavené tak, že zobrazovaný text bude veľkosti 30px, bude sa prispôsobovať šírke textového poľa, t.j. ak je riadok textu dlhší ako šírka textového poľa, automaticky sa zalomí. Textový font je nastavený na Times New Roman, čiernej farby. 3) najdôležitejší krok je pomenovanie inštancie dynamického textového poľa. Názov inštancie sa potom používa ako identifikátor v ActionScript. Názov inštancie slúži na prepojenie objektu dynamického textového poľa s príslušným skriptom ActionScript. Inštanciu dynamického textového poľa môžeme pomenovať ako textove_okno. Dôležité je, aby sa pri pomenovávaní inštancií objektov používali názvy bez medzier a diakritiky (žiadne dĺžne, žiadne mäkčene a pod.). Textové dynamické pole je pripravené na zobrazenie textového obsahu z externého súboru. Ďalšou časťou je napísanie príslušného skriptu, ktorý zabezpečí načítanie textového obsahu z externého súboru.

3 3 4) ActionScript 3 v tejto časti príkladu spracujeme príslušný skript. Vrstvu, ktorej sme vytvorili dynamické textové pole pomenujeme ako tex_pole. Nad touto vrstvou vytvoríme ďalšiu vrstvu s názvom as3. Vrchná vrstva, ktorú sme si pomenovali ako as3 bude obsahovať jednu kľúčovú snímku v ktorej umiestnime príkazy ActionScript3. Postavíme sa na kľúčovú snímku vo vrstve as3 a klávesom F9 vyvoláme okno pre písanie skriptov. Pohľad na celý skript, ktorý zabezpečí načítanie externého textového obsahu, ako aj rolovanie textu v prípade, že je obsahovo väčší ako samotný rámček dynamického textového poľa (textového kontajnera).

4 4 ActionScript3 pre načítavanie externého textového obsahu V tejto časti príkladu si podrobne rozoberiete a vysvetlíme ActionScript3 pre načítavanie externého textového obsahu do dynamického textového poľa. Ako je vidno na predchádzajúcej stránke, v skripte sme použili dve triedy: URLLoader a URLRequest. Je dôležité, aby sme si teraz tieto triedy a ich funkciu vysvetlili. URLLoader - trieda URLLoader slúži na čítanie externých dát zo vzdialených súborov, ktoré sú mimo pracovného priestoru FLASH. Trieda URLLoader umožňuje odosielať na server požiadavky a zaisťuje prístup k viacerým informáciám. V situácii, keď je povolený prístup k lokálnym súborom (napr. textový súbor.txt), je možné triedu URLLoader tiež použiť na prístupu k súborom v lokálnom súborovom systéme. Trieda URLLoader sťahuje dáta s adresy URL ako text, binárne dáta a pod. Celý skript zapíšeme nasledovne: var nacitaj:urlloader = new URLLoader ( ); ako s uvedeného vyplýva, deklarovali sme premennú s názvom nacitaj, do ktorej sme uložili novú triedu URLLoader. V ďalšej časti skriptu budeme pracovať už len s premennou nacitaj. URLRequest - voľným prekladom by sme mohli povedať, že je to požiadavka, žiadosť(request) na URL, čiže link - odkaz. URLrequest sa použije v súvislosti s deklaráciou premennej, do ktorej sa uloží komplet URL adresa (linka, odkaz, cieľové miesto) uloženia nášho textového dokumentu text.txt. Dôležité je, aby sa adresa na odkazovaný externý súbor napísala medzi úvodzovky (zelené sfarbenie kódu). Celý skript zapíšeme nasledovne: var spoj_ma:urlrequest = new URLRequest ("text.txt"); ako s uvedeného vyplýva, deklarovali sme premennú s názvom spoj_ma, do ktorej sme uložili novú triedu URLRequest. V ďalšej časti skriptu budeme pracovať už len s premennou spoj_ma.

5 5 Ďalší krok je vytvorenie poslucháča udalosti, ktorý bude súvisieť s načítavaním externého obsahu do dynamického textového poľa. O načítavanie dát z externých súborov sa stará trieda URLLoader, ktorú sme priradili premennej nacitaj, a s touto premennou budeme teraz pracovať. Použijeme ju pri vytváraní poslucháča udalosti. Poslucháč udalosti, ktorý vytvoríme bude počúvať práve našu premennú nacitaj. Ako reakciu na udalosť vytvoríme funkciu s názvom komplet_text. Funkciu si popíšeme neskôr. Takže celý poslucháč udalosti bude vyzerať takto: nacitaj.addeventlistener(event.complete, komplet_text); výsledkom poslucháča, ktorý sme práve vytvorili je realizovanie funkcie s názvom komplet_text. Funkcii priradíme príkaz, ktorý nájde dáta z externého súboru a vloží ho do dynamického textového poľa. Príkaz priradíme premennej textdata, ktorú vytvoríme. Celý zápis skriptu bude vyzerať takto: function komplet_text (myevent:event):void { var textdata:string = new String(nacitaj.data); textove_okno.text = textdata; } Poslednou úlohou je vzájomné prepojenie oboch premenných nacitaj a spoj_ma, a to pomocou následného zápisu: nacitaj.load(spoj_ma); ActionScript3 pre načítavanie externého textového súboru do dynamického textového poľa je hotový. Pozrieme si ho teraz v celku:

6 6 ActionScript3 pre vertikálne rolovanie textu v dynamickom textovom poli Po úspešnom načítaní textového obsahu z externého súboru bude vidieť len tá časť obsahu, ktorá sa zmestí do nami vytvoreného rámčeka dynamického textového poľa. Ale čo keď je textu viac? No určite ho nebude vidieť celý. Preto je potrebné doplniť dynamické textové pole o dva tlačidla, ktoré budú po riadku posúvať text v oboch vertikálnych smeroch, t.j. hore a dole. Dôjde tak vlastne akoby k rolovaniu textu. Jeden klik na odkaz znamená posunutie textu o jeden riadok. Pri tvorbe rolovacích tlačidiel postupujeme nasledovne: 1) najprv je potrebné si tlačidla vyrobiť. Použijeme na to obrázok šípky (play) z MP3 prehrávača, ktorý ešte raz skopírujeme, otočíme kópiu o 180 a umiestnime v jednej línii po pravej strane dynamického textového poľa. Samotným umiestnením šípok ešte nevzniklo tlačidlo. Zatiaľ sú to obyčajné obrázky. Tlačidlo z nich vyrobíme, prekonvertovaním na symbol Button pomocou klávesu F8. Urobíme tak s oboma šípkami, prvú šípku pomenujeme hore a druhú šípku dole. Až po tomto úkone sme premenili obrázok šípky na šípku tlačidlo. 2) podobne, ako pri dynamickom textovom poli, aj tlačidlo je objekt a bude potrebné s ním pracovať v ActionScript3. Každé tlačidlo potrebujeme pomenovať ako inštanciu. Použijeme tie isté pomenovania ako pri konvertovaní na symboly, čiže hore a dole. Názov inštancie slúži na prepojenie objektu konkrétneho tlačidla s príslušným skriptom ActionScript3. Takto pomenované tlačidla sú pripravené a mi ich môžeme v ďalšej časti spojazdniť pomocou ActionScript3.

7 7 3) keďže máme tlačidlá vytvorené a pomenované z hľadiska inštancie, môžeme vytvoriť zvlášť pre každé tlačidlo poslucháča udalosti: hore.addeventlistener (MouseEvent.CLICK, chod_hore); dole.addeventlistener (MouseEvent.CLICK, chod_dole); Prvý poslucháč bude počúvať udalosť tlačidla hore. Reagovať bude na udalosť myši kliknutie myši. Následne sa vykoná príkaz funkcie, ktorú sme pomenovali chod_hore. Druhý poslucháč bude počúvať udalosť tlačidla dole. Reagovať bude na udalosť myši kliknutie myši. Následne sa vykoná príkaz funkcie, ktorú sme pomenovali chod_dole. Ďalším krokom je definovanie oboch funkcií a to nasledujúcim zápisom: function chod_hore (myevent:mouseevent): void { textove_okno.scrollv++; } function chod_dole (myevent:mouseevent): void { textove_okno.scrollv--; } Prvá funkcia obsahuje príkaz, ktorý hovorí, aby sa obsah v dynamickom textovom poli textove_okno roloval vertikálne smerom hore (scrollv++). Druhá funkcia obsahuje príkaz, ktorý hovorí, aby sa obsah v dynamickom textovom poli textove_okno roloval vertikálne smerom dole (scrollv--). Celý skript bude vyzerať takto:

8 8 A na záver si ukážeme ešte raz celkový ActionScript3, ktorý zabezpečuje načítanie externého textového obsahu do dynamického textového poľa aj s rolovacími tlačidlami: