Po obejrzeniu filmu

W filmie wspominałem, że wczytane dane można konwertować na liczby, lub na ciąg znaków typu String, przydatne kiedy chcemy używać ładowanych informacji jak adres do pliku lub strony internetowej.

Zmiana na wartość liczbową Number lub int
Zmiana polega na utworzenie zmiennej typu Number, int lub innej zmiennej, która przechowuje wartości liczbowe i przypisanie do zmiennej danych z pliku XML. Dla przykładu zmień linię w pliku XML, gdzie jest tekst „Jadę na wakacje” i wpisz tam liczbę na przykład 7 aby wyglądało to tak jak na przykładzie

<opisy>
<opisFoto>7</opisFoto>
<opisFoto>Jestem nad Morzem</opisFoto>
<opisFoto>Wracam z wakacji</opisFoto>
</opisy>

Teraz sprawimy, że wpisana 7, będzie traktowana przez Action Script jako wartość liczbowa i będzie można wykonywać na niej operacje matematyczne. Wystarczy napisać kod jak na przykładzie:

var ilosc:Number = dane.opisFoto[0];

Ten kawałek kodu należy umieścić w jakiejkolwiek funkcji. Mając cały czas na uwadze przykład z filmu, można ten kawałek kodu umieścić w funkcji o nazwie daneOK lub pokazDane. Aby sprawdzić, czy mamy do czynienia z wartością liczbową zrobimy mały przykład. Zmodyfikuj kod z filmu, a dokładnie funkcję o nazwie pokazDane jak na przykładzie:

pokaz_btn.addEventListener(MouseEvent.CLICK, pokazDane);
function pokazDane(myszka:MouseEvent): void {
var liczba1:Number = dane.opisFoto[0];
var liczba2:Number = 10;
var wynik:Number = liczba + liczba2;
info1_txt.text = „wynik: ” + wynik;
info2_txt.text = dane.opisFoto[1];
info3_txt.text = dane.opisFoto[2];
}

Pierwsza linia w funkcji pokazDane konwertuje naszą zawartość z pliku XML na watość liczbową. Kolejna linia to tworzenie zmiennej typu Number. W trzeciej zmiennej dodajemy obie wartości liczbowe. W pierwszym polu tekstowym zobaczymy taki napis „wynik 17″. Jak widać obie liczby się dodały. Zobacz co się stanie, kiedy nie zmienimy danej z pliku XML, ale dodamy do niej liczbę.
Oczywiście konwertacja na inną zmienną na przykład int wygląda tak samo, tylko zamiast Number piszemy int. To samo tyczy się innych zmiennych, które przechowują wartości liczbowe.

Zmiana na typ String
Zmiana przebiega identycznie jak w przypadku wartości liczbowych. Dla przykładu ponownie edytujmy plik XML, w którym w drugiej linii zamiast tekstu „Jestem nad Morzem” wpiszmy aders strony http://www.google.pl Wybrałem adres strony, gdyż w kodzie ActionScript adres jest typu String. Plik XML powinien wyglądać następująco:

<opisy>
<opisFoto>7</opisFoto>
<opisFoto>http://www.google.pl</opisFoto>
<opisFoto>Wracam z wakacji</opisFoto>
</opisy>

Teraz edytujmy kod ActionScript w taki sposób, że przeniesie nas na stronę google. Oczywiście najpierw musimy zamienić nasze dane na zmienną typu String, następnie do obiektu URLRequest przypisać naszą zmienną typu string i wywołać metodę navigateToURL, aby przeniosło nas na stronę google.pl. Zmodyfikowany kod Powinien wyglądać tak:

pokaz_btn.addEventListener(MouseEvent.CLICK, pokazDane);
function pokazDane(myszka:MouseEvent): void {
var link:String = dane.opisFoto[1];
var adres:URLRequest = new URLRequest(link);
navigateToURL(adres);
}

W funkcji pokazDane pokazałem tylko jak powinna wyglądać prawidłowa zamiana danych na typ String. Oczywiście poprzednie instrukcje w funkcji mogą pozostać. Mi zależało na przejrzystości przykładu. Oczywiście po kliknięciu w przycisk animacja przeniesie nasz na wskazany adres w pliku XML

Więcej informacji z jednej lini pliku XML
Załóżmy, że tworzymy galerię zdjęć. Między znacznikami opisFoto dajemy adres do zdjęcia XML, ale chcemy jeszcze mieć do każdego zdjęcia krótki opis. Oczywiście można dodać kolejne znaczniki specjalnie dla każdego opisu, ale jest wygodniejszy sposób, tak aby opis do zdjęcia był obok adresu do pliku. Kontynuując prace z naszymi plikami z filmu w pliku XML dokonujemy zmian widocznych niżej:

<opisy>
<opisFoto>7</opisFoto>
<opisFoto>http://www.google.pl</opisFoto>
<opisFoto info=”Dodatkowy tekst”>Wracam z wakacji</opisFoto>
</opisy>

Aby odwołać się do elementu info=”dodatkowy tekst”, po linii dane.opisFoto[1] dajemy kropkę znak @ i nazwę jaką wprowadziliśmy w pliku XML. Przykład wygląda tak:

pokaz_btn.addEventListener(MouseEvent.CLICK, pokazDane);
function pokazDane(myszka:MouseEvent): void {
info1_txt.text = dane.opisFoto[2].@info;
}

Oczywiście takich dodatkowych informacji możemy wprowadzić więcej.

Pełna lista znaczników, które interpretuje Flash

Podstawy Html są proste i nie wymagają wielkiej wiedzy na ten temat. Jeżeli jednak nie znasz języka Html zapraszam na stronę kurshtml.boo.pl

Przewijanie tekstu

Czasem może się zdarzyć tak, że wczytany tekst jest dłuższy niż pole tekstowe. Aby umożliwić przewijanie tekstu, możemy skorzystać z gotowego komponentu lub narysować sobie przyciski i za ich pomocą przewijać tekst.

Stwórz dwa przyciski na senie, które będą służyły do przewijania tekstu. Nadaj im nazwy w panelu propertis (u mnie to przewinGora_btn i przewinDol_btn i przypisz do nich następujący kod:

przewinGora_btn.addEventListener(MouseEvent.CLICK, tekstGora);
function tekstGora(myszka:MouseEvent): void {
info_txt.scrollV -=3;
}
przewinDol_btn.addEventListener(MouseEvent.CLICK, tekstDol);
function tekstDol(myszka:MouseEvent): void {
info_txt.scrollV +=3;
}

info_txt to nazwa pola tekstowego, scrollV oznacza przewijanie w pionie. Przypisanie do tej wartości -=3 / +=3 powoduje przesunięcie tekstu o czy linijki w górę lub w dół. Standardowo taki tekst mozna przewijać za pomocą rolki w myszce.

Wstawianie zdjęcia lub innej animacji w pole tekstowe

Razem z tekstem możemy wyświetlić zdjęcie lub inną animację swf. Należy posłużyć się kawałkiem kodu:

<img src=„adresdopliku.swf” alt=„” width=„480″ height=„480″ />;

Po obejrzeniu filmu

W bardzo prosty sposób możemy dodać liczbę powtórzeń jak i od której sekundy nasz utwór ma się zaczynać. Wystarczy zmienić jeden kawałek kodu:

var sterowanie:SoundChannel = dzwiek.play(20000, 3);

Pierwsza liczba oznacza od której sekundy, utwór ma zacząć grać. Jest to czas podany w milisekundach. Natomiast cyfra druga oznacz ilość powtórzeń.

Nasz player działa w ten sposób, że kiedy klikniemy stop, a następnie start, to utwór zaczyna grać od nowa. Istnieje możliwość, aby utwór startował od momentu, w którym został zatrzymany. Musimy dodatkowo zdeklarować nową zmienną, która będzie przechowywała czas, w którym utwór został zatrzymany. Pod linijką kodu var sterowanie:SoundChannel = dzwiek.play(); dopiszmy:

var pauza:int;

Zmienna pauza to liczba, która przechowa czas, zatrzymania utworu. Następnie w funkcji przycisku odpowiedzialnego za zatrzymanie utworu dopiszmy następujący kawałek kodu:

pauza = sterowanie.position;

Nasza zmienna pauza będzie równa pozycji(position) zatrzymania utworu. Teraz aby dzwięk po naciśnięciu przycisku start, startował od momentu, w którym utwór został zatrzymany, należy dopisać zmienną pauza do przycisku startującego utwór:

sterowanie = dzwiek.play(pauza);

Poniżej prezentuje cały kod:

var adres:URLRequest = new URLRequest(„muzyka.mp3″);
var dzwiek:Sound = new Sound();
dzwiek.load(adres);
var sterowanie:SoundChannel = dzwiek.play();
var pauza:int;
odtworz_btn.enabled = false;
zatrzymaj_btn.addEventListener(MouseEvent.CLICK, zatrzymaj);
function zatrzymaj(myszka:MouseEvent): void {
pauza = sterowanie.position;
sterowanie.stop();
odtworz_btn.enabled = true;
zatrzymaj_btn.enabled = false;
}
odtworz_btn.addEventListener(MouseEvent.CLICK, odtworz);
function odtworz(myszka:MouseEvent): void {
sterowanie = dzwiek.play(pauza);
odtworz_btn.enabled = false;
zatrzymaj_btn.enabled = true;
}

Po obejrzeniu filmu
W filmie przedstawiłem jak wykonać wskaźnik postępu ładowania (wydłużający się pasek). Jednak w wielu stronach www, można zauważyć procenty postępu ładowania.

Aby wyświetlić procentowy stosunek załadowanych bajtów, umieść na scenie dynamiczne pole tekstowe i w panelu propertis nadaj mu nazwę info_txt (oczywiście nazwa może być dowolna). Teraz otwórz panel akcje, aby przypisać do pola tekstowego wartość procentową ładowanych danych. W funkcji o nazwie pokazLadowania umieść kursor za linią bar_mc.scaleX = ladowanie; i naciśnij enter. W nowej linii napisz następujący kod:

info_txt.text = Math.round(ladowanie * 100) + „%”;

Na początku odwołujemy się do dynamicznego pola tekstowego. Math.round zaokrągla wynik do liczby całkowitej, a wewnątrz nawiasów mnożymy zmienną ladowanie razy 100, aby otrzymać % stosunek załadowanych danych. Za obliczeniami stawiamy znak % aby zasugerować użytkownikowi ile procentów danych się pobrało. Całość powinna wyglądać następująco:

root.loaderInfo.addEventLstener(ProgressEvent.PROGRESS, pokazLadowanie);
function pokazLadowanie(zdarzenie:ProgressEvent): void {
var ladowanie:Number = zdarzenie.target.bytesLoaded / zdarzenie.target.bytesTotal;
bar_mc.scaleX = stanPobrania;
info_txt.text = Math.round(ladowanie * 100) + „%”;
}

Jest to tylko funkcja o nazwie pokazLadowania.

W filmie przedstawiłem jak wykryć, kiedy pole tekstowe jest aktywne. Można to samo uczynić w drugą stronę, to znaczy, że możemy wykryć kiedy pole tekstowe przestaje być aktywne. Dzięki temu zdarzeniu, przedstawie jak wykonać pole formularza, przedstawione na końcu filmu.

Oczywiście należy na scenie umieścić pole tekstowe typu Input Text i nadać mu nazwę w panelu propertis w okienku Instance Name. W moim przypadku pole będę nazywał imie_txt. Pierwsze co musimy zrobić to przypisać tekst do naszego pola i utworzyć zdarzenie, które usunie tekst z pola, kiedy użytkownik w nie kliknie. Dokonamy tego za pomocą wykrywania aktywności pola tekstowego.

imie_txt.text = „Twoje imie”;
imie_txt.addEventListener(FocusEvent.FOCUS_IN, puste);
function puste(zdarzenie:FocusEvent): void {
imie_txt.text = „”;
}

Pierwsza część kodu za nami. Poznamy teraz zdarzenie, które zostanie wykonane, kiedy pole tekstowe przestaje być aktywne. Służy do tego FOCUS_OUT Należy napisać drugą funkcje (która zacznie działać, kiedy pole nie będzie już aktywne), w której umieścimy instrukcje warunkową. Instrukcja ta będzie sprawdzać, czy uzytkownik pozostawił puste pole tekstowe. Jeżeli tak, to ponownie zobaczymy tekst Twoje imie, jeżli jednak użytkownik coś wpisze, to jego zawartość się nie zmieni.

imie_txt.text = „Twoje imie”;
imie_txt.addEventListener(FocusEvent.FOCUS_IN, puste);
function puste(zdarzenie:FocusEvent): void {
imie_txt.text = „”;
}
imie_txt.addEventListener(FocusEvent.FOCUS_OUT, tresc);
function tresc(zdarzenie:FocusEvent): void {
if (imie_txt.text == „”) {
imie_txt.text = „Twoje imie”;
}
}

Tak przygotowany kod, będzie obsługiwał pole tekstowe, jak na końcu mojego filmiku.

Aby wywołać pełen ekran należy posłużyć się właściwością Stage.

stage.displayState = StageDisplayState.FULL_SCREEN;

Ten kawałek kodu możemy umieścić na przykład w funkcji do przycisku. Będzie to wyglądało następująco:

trybEkran_mc.addEventListener(MouseEvent.CLICK, calyEkran);
function calyEkran(myszka:MouseEvent): void {
stage.displayState = StageDisplayState.FULL_SCREEN;
}

Po wywołaniu funkcji animacja Flash będzie widoczna na całym ekranie monitora. Efekt odwrotny uzyskujemy używając podobnej właściwości Stage

stage.displayState = StageDisplayState.NORMAL;

Podobnie jak wyżej umieszczamy kod pod przycisk. Z trybu pełno ekranowego, mozna wyjść naciskając przycisk ESC lub ALT + F4. Jednak to nie wszystko aby tryb pełnoekranowy działał. Musimy również dokonać pewnej modyfikacji w pliku HTML, w którym mamy osadzoną animację. Wystarczy zmienić dwa parametry w dokumencie HTML. Odszukujemy dwie linie widoczne poniżej:

<param name=„allowFullScreen” value=„false” /> <embed allowfullscreen=„false”>

i zamieniamy wartości false na true

<param name=„allowFullScreen” value=„true” /> <embed allowfullscreen=„true”>

UWAGA

Jeżeli z pewnych przyczyn nie mamy powyżej przedstawionych linii kodu możemy skorzystać z opcji publikacji animacji w programie Adobe Flash CS3. W tym celu Wybieramy File => Publish Settings… zaznaczamy okienko HTML i przechodzimy do zakładki HTML. Tam odszukujemy liste o nazwie Template i wybieramy Flash Only – Allow Full Screnn i klikamy Publish. Teraz już mam automatycznie w kodzie HTML parametry z wartościami ustawionymi na true.

Testowanie trybu pełnoekranowego nie działa w środowisku Adobe Flash CS3. Musimy posiadać plik HTML z zagnieżdżoną animacją i uruchomić w przeglądarce plik HTML. Dopiero wtedy możemy się przekonać czy tryb pełnoekranowy działa jak tego oczekujemy