Części składowe języka HTML
Za pomocą palety Text Options definiuje się pola tekstu pobieranego, do których użytkownik wprowadza tekst, oraz pola dynamicznego tekstu, wyświetlającego tekst zmieniający się w zależności od podanych kryteriów. Tekstom pobieranym przypisuje się zmienne, dzięki czemu można przechowywać i modyfikować informacje wprowadzane przez odbiorcę, a także sprawdzać je za pomocą wyrażeń warunkowych. Takie fragmenty tekstu mogą być później wykorzystywane w skryptach. Dwa obiekty kontrolujące informacje zawarte w pobieranym i dynamicznym tekście - obiekt selekcji (Selection) i obiekt łańcucha znakowego (String) - pozwalają analizować i manipulować tekstem lub położeniem kursora w obrębie pola tekstowego. Dzięki temu można np. wyłapywać błędy w pisowni lub we wprowadzanych informacjach, zanim zostaną wykorzystane w filmie Flasha lub przeniesione do zewnętrznej aplikacji w celu przetworzenia. Niniejszy rozdział przedstawia niektóre z wielu możliwości, jakie niesie ze sobą zastosowanie tekstu pobieranego i dynamicznego, a także wprowadza cię w zagadnienia związane z używaniem narzędzi kontrolujących przepływ informacji pomiędzy filmem Flasha i jego odbiorcami.
|
Projekty, które tworzysz we Flashu, mogą być tak zaprojektowane, by móc pobierać informacje bezpośrednio od odbiorcy - np. nazwę identyfikującą użytkownika i hasło, dane osobowe potrzebne do przeglądu, odpowiedzi na pytania konkursowe, zamówienia czy odpowiedzi w internetowych pogawędkach. Dane takie, nazywane we Flashu tekstem pobieranym (input text), przypisuje się do zmiennych, dzięki czemu mogą być przesyłane do przetworzenia w innych częściach filmu lub wysyłane do aplikacji serwerowej za pomocą metod GET i POST. Poniższe ćwiczenie demonstruje sposób umożliwienia odbiorcy kontrolowania parametrów akcji za pośrednictwem tekstu pobieranego. W tym przypadku informacje będą pobierane od użytkownika za pomocą bloku tekstowego, a następnie wykorzystywane do wczytania witryny sieciowej o podanym adresie URL.
W celu użycia tekstu pobieranego
Aktualnie zaznaczone pole tekstowe przyjmie postać pola tekstu pobieranego, umożliwiającego wprowadzanie tekstu w czasie odtwarzania filmu.
|
Rys. 10.1. Pole tekstowe tworzy się za pomocą narzędzia tekstowego. Możesz zmieniać rozmiar pola, przeciągając uchwyt w jego prawym dolnym rogu
Rys. 10.2. Takie ustawienia na palecie Text Options definiują pole tekstowe jako pole tekstu pobieranego (Input Text)
Rys. 10.3. Pole tekstowe z nieokreśloną ramką i tłem (z lewej) jest widoczne na scenie w trybie edycji w postaci pola otoczonego kropkowaną linią. Pole tekstowe, któremu przypisano ramkę i wypełnienie (tło) (z prawej), posiada czarną, ciągłą ramkę i białe tło
|
Rys. 10.4. Akcje przypisane do przycisku wczytują do nowego okna przeglądarki witrynę sieciową o adresie przechowywanym w zmiennej myURL
Rys. 10.5. Zmienna w polu tekstu pobieranego jest używana jako adres URL dla akcji getURL. Zwróć uwagę, że w polu tekstowym musi być podany protokół http://
|
Kiedy odbiorca filmu wpisze adres URL w polu tekstowym, adres ten zostanie zapamiętany pod postacią zmiennej. Następnie, po kliknięciu przycisku, Flash otworzy nowe okno w przeglądarce i wczyta podaną stronę internetową (rys. 10.5). Wskazówki
|
Dla tekstu pobieranego - na palecie Text Options dostępnych jest wiele różnych opcji (rys. 10.6). Chociaż najważniejszym polem do wypełnienia jest Variable, to za pomocą innych opcji możesz modyfikować sposób, w jaki odbiorca będzie wprowadzał tekst.
|
|
Rys. 10.6. Opcje dostępne na palecie Text Options pozwalają zdefiniować właściwości bloku tekstowego |
Więcej o osadzaniu czcionek i czcionkach systemowych |
|||
Dlaczego by więc nie wybierać opcji osadzania czcionek za każdym razem? Przede wszystkim dlatego, że drastycznie zwiększa ona wielkość eksportowanego pliku SWF z powodu dołączania informacji potrzebnych do wyświetlenia określonego fontu.
Rys. 10.7. Tekst pobierany, korzystający z określonej czcionki w fazie powstawania projektu (u góry), jest wyświetlany podczas odtwarzania inaczej, niż na komputerze odbiorcy, który nie posiada w systemie odpowiednika czcionki użytej przez projektanta, a niedołączonej do pliku (u dołu) |
Jednak ostateczny rozmiar pliku można zmniejszyć, dołączając tylko te fonty, którymi użytkownik będzie się posługiwał przy wpisywaniu tekstu. Jeśli np. wymagasz wprowadzania tylko wartości numerycznych, dołącz jedynie wzory dla czcionek przedstawiających cyfry. Wtedy wszystkie cyfry będą dostępne w trakcie odtwarzania filmu, natomiast pozostałe znaki w ogóle nie wyświetlą się na ekranie (będą niedostępne). Innym sposobem na zachowanie minimalnych rozmiarów pliku, a jednocześnie wyeliminowanie problemu spowodowanego brakiem właściwych fontów po stronie odbiorcy, jest wykorzystanie czcionek systemowych. Czcionki te pojawiają się na końcu listy dostępnej w menu rozwijanym Font, a są to _sans, _serif i _typewriter. Opcja ta wyszukuje fonty w systemie odbiorcy, najbardziej zbliżone do określonego fontu systemowego. Oto lista odpowiedników fontów systemowych:
Kiedy używasz fontów systemowych, możesz być pewien, że odbiorca widzi na ekranie tekst bardzo zbliżony do tekstu, z którego korzystałeś, tworząc projekt. Jednak fonty systemowe mają też dwie wady: są wyświetlane bez wygładzania i nie mogą być animowane lub maskowane.
|
||
W przypadku tekstu, który ma zmieniać swoje właściwości, jak np. punktacja w grze zręcznościowej, wynik obliczeń czy też procent ilości ujęć twojego filmu Flasha, ściągniętych z sieci, najlepiej spisuje się tekst dynamiczny. Podczas gdy bloki tekstu pobieranego akceptują informacje dostarczane przez odbiorcę, bloki tekstu dynamicznego przekazują dane użytkownikowi. Tak jak w przypadku tekstu pobieranego, również i tutaj mamy do czynienia ze zmienną, a jej zawartość jest właśnie tym, co widać będzie w bloku tekstowym. W dodatku, opcje dynamicznego tekstu są zgodne z tymi, które pojawiają się podczas edycji tekstu pobieranego, choć z jednym wyjątkiem: polem wyboru Selectable. Zaznaczenie tej opcji pozwoli użytkownikowi zaznaczać i kopiować tekst wyświetlany w bloku, ale uniemożliwi dokonywanie przez niego zmian. W kolejnym ćwiczeniu przygotujemy zarówno bloki tekstu pobieranego, jak i dynamicznego. Po wprowadzeniu przez użytkownika temperatury w stopniach Celsjusza w bloku tekstu pobieranego, Flash przekształci podaną wartość do skali Fahrenheita i wyświetli wynik w bloku tekstu dynamicznego.
W celu użycia tekstu dynamicznego
Aktualnie zaznaczony blok tekstowy przyjmie postać bloku tekstu pobieranego, umożliwiając wprowadzanie informacji w czasie odtwarzania filmu.
|
Rys. 10.8. Blok tekstu pobieranego nazwij celsius
|
Rys. 10.9. Blok tekstu dynamicznego nazwij fahrenheit
Rys. 10.10. To wyrażenie oblicza wartość zmiennej Fahrenheit na podstawie wyrażenia wprowadzonego w polu Value
Rys. 10.11. Zawartość bloku tekstu dynamicznego (Fahrenheit) jest uaktualniana po wprowadzeniu nowej informacji do bloku tekstu pobieranego (Celsius)
|
Aktualnie zaznaczony blok tekstowy przyjmie postać bloku tekstu dynamicznego, umożliwiając wyświetlanie i uaktualnianie informacji za pośrednictwem tego pola.
Flash umieści obydwa bloki tekstowe w obrębie klipu filmowego, którego klon pozostanie na scenie.
Wskazówki
|
Wykorzystanie dynamicznego tekstu do wiązania lub łączenia pobieranego tekstu z innymi zmiennymi i łańcuchami znakowymi pozwala na bardziej elastyczną pracę z wyrażeniami, a także tworzenie spersonalizowanej interakcji Flasha z odbiorcą. Użytkownik może np. zostać najpierw poproszony o wpisanie swojego imienia do bloku tekstu pobieranego o nazwie twojeImię. W polu tekstu dynamicznego możesz ustawić jego zmienną tak: "Cześć, "+twojeImię+", witamy w programie Flash!" w efekcie czego odbiorca zobaczy swoje imię podstawione do komunikatu powitalnego. W jednym z wcześniejszych ćwiczeń tworzyłeś film Flasha wczytujący witrynę sieciową o adresie wprowadzonym do bloku tekstu pobieranego. Wiążąc zmienną myURL w wyrażeniu: "http://"+myURL eliminujesz potrzebę wpisywania przez użytkownika schematu protokołu internetowego przed właściwym adresem witryny. |
Posługuj się tą strategią, wraz z innymi akcjami Flasha, w tworzeniu elastycznych i edytowalnych funkcji oraz interfejsów. W poniższym przykładzie powiążesz bloki tekstu pobieranego od klienta do automatycznego skompilowania informacji we właściwym porządku, a następnie użyjesz akcji print do wydrukowania kompletnego rachunku lub zamówienia.
W celu
|
Rys. 10.12. Zdefiniuj sześć bloków tekstu pobieranego z unikalnymi nazwami zmiennych
|
Rys. 10.13. Blok dynamicznego tekstu jest umieszczony w ujęciu kluczowym 2., wraz z grafiką gotową do wydruku
Rys. 10.14. Kryjący prostokąt wyznacza obszar drukujący się dla wszystkich ujęć kluczowych oznaczonych etykietą #p |
Blok tekstu dynamicznego będzie wyświetlał powiązane informacje, a etykieta #p pozwoli na wydrukowanie oznaczonego nią ujęcia kluczowego.
Etykieta #b wskazuje, że to ujęcie kluczowe stanowi obszar drukowany.
|
Wskazówki
|
Rys. 10.15. Ścieżka dostępu do bloku tekstu dynamicznego o nazwie printOutput zawiera odwołanie do klipu filmowego orderform (formularz zamówienia). Blok tekstu dynamicznego wyświetla łańcuch znakowy wiążący zmienne tekstu pobieranego i podaje końcowy koszt zamówionych produktów (widgets), mnożąc zmienną przez 5
Rys. 10.16. Wyrażenie print przesyła dane zawarte w ujęciu z etykietą #p do drukarki
Rys. 10.17. Film Flasha (u góry) udostępnia bloki tekstu pobieranego, których zawartość jest kompilowana w bloku dynamicznego tekstu, a następnie drukowana (u dołu) |
|
Wyświetlanie tekstu HTML Flash umożliwia wyświetlanie w blokach tekstu dynamicznego dokumentów w formacie HTML 1.0. Jeśli wstawisz tekst do zmiennej bloku tekstu dynamicznego, wcześniej zaznaczając wprowadzany dokument jako HTML, Flash zinterpretuje odpowiednio znaczniki i zachowa styl formatowania. Oznacza to tyle, że możesz integrować dokumenty HTML z filmem Flasha, zachowując wszystkie ich style i funkcjonalność punktów węzłowych HREF (czyli hiperłączy).
Znaczniki HTML
Duże możliwości stwarza kombinacja tekstu HTML wczytanego do bloków tekstu dynamicznego za pomocą akcji loadVariablesNum. W celu uaktualnienia informacji wyświetlanych w czasie odtwarzania filmu wystarczy wówczas zmienić jedynie dokument HTML rezydujący poza plikiem Flasha. To bardzo wygodne, gdyż w takiej sytuacji nie trzeba otwierać pliku Flasha w celu dokonania okresowych zmian. Wszystkie niezbędne uaktualnienia może wykonać aplikacja serwerowa lub użytkownik nieznający Flasha. |
Flash wczyta plik tekstowy zawierający zmienną.
|
Rys. 10.18. Tekst HTML został przypisany do zmiennej o nazwie HTMLpage i zapisany w oddzielnym dokumencie
Rys. 10.19. Ta akcja kontrolująca ujęcia wczytuje plik variables.txt, zawierający zmienną przechowującą tekst HTML
Rys. 10.20. Nazwij blok tekstu dynamicznego displayMyPage
Rys. 10.21. Zmienna tekstu dynamicznego o nazwie displayMyPage wyświetla zawartość zmiennej HTMLpage |
Rys. 10.22. Blok tekstu dynamicznego wyświetla teks w formacie HTML
|
Kiedy użytkownik kliknie przycisk, Flash podstawi zmienną tekstu dynamicznego do zewnętrznej zmiennej w pliku tekstowym, przechowującej tekst w formacie HTML. W bloku dynamicznego tekstu wyświetlane będą informacje z zachowaniem stylu i formatu ustalonych za pomocą znaczników (rys. 10.22). Wskazówki
|
Jeśli przekształcisz bloki tekstu dynamicznego w symbole, to będziesz mógł je animować, tak jak robi się to z wszystkimi innymi klonami symboli. Dzięki temu możliwe staje się tworzenie tytułów i bannerów reklamowych, które nie tylko dynamicznie zmieniają zawartość, ale także przesuwają się po ekranie, obracają i zmieniają swoje rozmiary. Wyobraź sobie na przykład sterowiec z przyczepioną do jego boku tablicą wyników, podróżujący wzdłuż sceny. Jeśli wykorzystasz ową tablicę jako blok dynamicznego tekstu, będziesz mógł uaktualniać wynik lub wyświetlać komunikaty za każdym następnym przelotem sterowca. W podobny sposób można przygotować monitor notowań giełdowych, z cenami akcji przesuwającymi się wzdłuż ekranu. Jeszcze inny przykład to gra, w której status gracza jest wyświetlany obok symbolizującej go ikony, nawet jeśli przemieszcza się ona po scenie.
W celu utworzenia przemieszczającego się
Flash umieści blok dynamicznego tekstu wewnątrz symbolu graficznego i wprowadzi jego klon na scenę.
|
Rys. 10.23. Zmienną dynamicznego tekstu nazwij display i osadź w pliku wszystkie fonty
|
Rys. 10.24. Do listwy czasowej klipu filmowego tablicy wyników (blimp scoreboard) dołącz animowany klon symbolu graficznego, zawierającego dynamiczny tekst. Grafika będzie przemieszczać się po scenie wraz z maską tablicy wyników
Rys. 10.25. Nazwij blok tekstu pobieranego message (komunikat)
Rys. 10.26. Przypisz zmienną dynamicznego tekstu o nazwie display do zmiennej tekstu pobieranego, nazwanej message |
Flash umieści symbol graficzny wewnątrz symbolu klipu filmowego i wprowadzi jego klon na scenę.
Blok dynamicznego tekstu będzie teraz nieustannie uaktualniany stosownie do zawartości bloku tekstu pobieranego.
|
Informacja wprowadzona przez użytkownika do bloku tekstu pobieranego zostanie przypisana do bloku tekstu dynamicznego, zawierającego się w animacji klipu filmowego. Uaktualniony tekst będzie przesuwał się po scenie (rys. 10.27). Wskazówki
|
Rys. 10.27. Blok dynamicznego tekstu (u góry) wyświetla animację dowolnego tekstu wprowadzonego przez użytkownika do bloku tekstu pobieranego (u dołu)
|
Rys. 10.28. Właściwość scroll określa pierwszą widoczną linię tekstu
|
Kontrolowanie przewijania bloku tekstowego Jeśli informacja wprowadzana do bloku tekstu dynamicznego lub pobieranego przekracza zdefiniowane rozmiary bloku, Flash zaczyna przewijać tekst, dzięki czemu aktualnie edytowany fragment może być widoczny. Linie tekstu, które nie mieszczą w wyznaczonym obszarze, mogą być ukryte przed wzrokiem odbiorcy, ale mimo to pozostają dla niego dostępne - wystarczy kliknąć wewnątrz bloku tekstowego i przenieść kursor w górę lub w dół. Można też dynamiczne wyświetlać różne linie tekstu, ukryte lub nie, kontrolując pozycję pierwszej widocznej linii tekstu w bloku tekstowym. Umożliwiająca to właściwość nosi nazwę scroll (przewijanie). Górna linia przyjmuje wartość 0 i zmienia się wraz z przewijaniem nowych linii tekstu w górę lub w dół (rys. 10.28). Flash pozwala ci na odczytanie wartości właściwości scroll, dzięki czemu wiesz, na którą dokładnie linię tekstu aktualnie patrzy odbiorca filmu. Możliwe jest również modyfikowanie wartości właściwości scroll i tym samym wymuszanie na odbiorcy obejrzenia określonej linii tekstu. Zwykle tworzy się interfejs w ten sposób, żeby użytkownik mógł sam decydować o przewijaniu tekstu, podobnie jak kontroluje paski przewijania w przeglądarce czy dowolnym innym oknie na ekranie monitora. W poniższym ćwiczeniu utworzysz taki właśnie interfejs.
|
Po naciśnięciu klawisza myszy zmienna pressing przyjmie wartość true, a zmienna movement wartość -1.
|
Rys. 10.29. Nazwij blok tekstu pobieranego scrollwindow (okno przewijane)
Rys. 10.30. Umieść dwa przyciski obok bloku tekstu pobieranego
Rys. 10.31. Kliknięcie przycisku strzałki do góry przypisuje zmiennej pressing wartość true i zmiennej movement wartość -1
|
Rys. 10.32. Zwolnienie przycisku strzałki w górę przypisuje zmiennej pressing wartość false
Rys. 10.33. Kompletny skrypt dla przycisku strzałki w dół, tak jak jest widoczny w oknie skryptu palety akcji
Rys. 10.34. Akcje przypisane do klipu filmowego dodają wartość zmiennej movement do właściwości scroll bloku tekstowego scrollwindow, jeśli zmienna pressing ma wartość true
Rys. 10.35. Przyciski po prawej zwiększają lub zmniejszają wartość właściwości scroll bloku tekstu pobieranego
|
Po zwolnieniu klawisza myszy zmienna pressing przyjmie wartość false (rys. 10.32).
Utworzone klawisze strzałek zostaną wprowadzone do symbolu klipu filmowego. Klon klipu pozostanie na scenie.
this.pressing == true
Flash sprawdzi, czy kliknięto któryś z przycisków. Jeśli tak, program doda wartość zmiennej movement do bieżącej wartości scroll. W przypadku wciśnięcia górnej strzałki wartość scroll zmniejszy się o 1. Jeśli to dolna strzałka została wciśnięta, wartość scroll zwiększy się o 1 (rys. 10.35). |
W celu przewinięcia tekstu
Po kliknięciu przycisku bieżąca wartość maxscroll zostanie przypisana do właściwości scroll bloku tekstu pobieranego. Wówczas tekst zostanie automatycznie przewinięty, dzięki czemu widoczna stanie się ostatnia linia.
|
Rys. 10.36. W tym przykładzie maxscroll = 4
Rys. 10.37. Wartość maxscroll jest przypisywana do właściwości scroll bloku tekstowego scrollwindow
|
|
Manipulowanie
Definiując blok tekstowy jako blok tekstu pobieranego, dajesz odbiorcy możliwość wprowadzania i edytowania informacji. Wiesz już, jak taka informacja może zostać użyta w wyrażeniach z innymi akcjami, czy też dowiązana i wyświetlana w blokach dynamicznego tekstu. Jednak, często konieczne jest przeanalizowanie tekstu, wprowadzonego przez użytkownika, przed wykorzystaniem go. Być może trzeba będzie usunąć pewne słowa lub zlokalizować określony znak czy też sekwencję znaków. Na przykład, jeśli wymagasz od odbiorcy wprowadzenia adresu Ten rodzaj sprawdzania, manipulowania i kontrolowania informacji wprowadzonej do bloku tekstu pobieranego odbywa się dzięki kombinacji obiektu selekcji (Selection) i obiektu łańcucha znakowego (String). Obiekt selekcji pozwala określić, który blok tekstowy jest aktualnie zaznaczony, a także kontrolować pozycję kursora w obrębie tego bloku. Obiekt łańcucha znakowego umożliwia odczytywanie i zmienianie właściwości informacji wprowadzonych do bloku tekstu pobieranego.
|
Obiekt selekcji odpowiada za kontrolę zaznaczenia tekstu w bloku tekstu pobieranego. W odróżnieniu od większości innych obiektów, obiekt selekcji nie potrzebuje funkcji konstruktora do przygotowania klonu, zanim będziesz mógł go użyć. Wynika to z faktu, że w filmie Flasha może istnieć naraz tylko jedna pozycja kursora lub jedno zaznaczenie (co oznacza, że w danej chwili użytkownik może wpisywać lub selekcjonować tekst tylko w jednym bloku tekstowym). Tak więc obiekt selekcji będzie zawsze odnosił się do tej jednej pozycji kursora lub zaznaczenia w bloku tekstowym tekstu pobieranego lub dynamicznego. Metody obiektu selekcji oddziałują na dwie właściwości bloku tekstowego: określenie w łańcuchu tekstowym miejsca, w którym znajduje się kursor, oraz, ustalenie aktualnie aktywnego - inaczej zogniskowanego - bloku tekstowego. Metody obiektu selekcji wymieniono w tabeli 10.1.
|
|
|
Tabela 10.1. Metody obiektu selekcji |
||
Metoda Opis |
||
getBeginIndex() |
Odczytuje indeks początku selekcji. |
|
getEndIndex() |
Odczytuje indeks końca selekcji. |
|
getCaretIndex() |
Odczytuje indeks pozycji kursora. |
|
setSelection(beginIndex, endIndex) |
Ustawia selekcję według określonych indeksów początku oraz końca. |
|
getFocus() |
Odczytuje nazwę zmiennej aktywnego w danym momencie bloku tekstowego. |
|
setFocus(variableName) |
Ustawia ogniskowanie bloku tekstowego o podanej nazwie zmiennej, dzięki czemu można odczytywać informacje o tekście zawartym w danym bloku tekstowym, jeśli istnieje kilka bloków tekstowych. |
|
|
Rys. 10.38. Nazwij blok tekstu pobieranego mySelection (moje zaznaczenie)
Rys. 10.39. Nazwij blok tekstu dynamicznego myIndex (mój indeks)
|
Kontrolowanie selekcji wewnątrz bloków tekstowych Istnieje możliwość kontrolowania selekcji lub pozycji kursora wewnątrz edytowalnych bloków tekstowych. Pozwala to kierować uwagę odbiorcy na określone znaki lub wprowadzane przez niego słowa, być może w celu wskazania ewentualnych błędów w pisowni. Poza tym możesz śledzić położenie kursora, podobnie jak dzięki właściwościom _xmouse i _ymouse określa się lokalizację wskaźnika myszy użytkownika. Pozycja każdego znaku w łańcuchu znakowym jest numerowana i używana w postaci wskaźnika na potrzeby metod obiektu selekcji. Pierwszy znak otrzymuje indeks 0, następny 1, itd. Jeśli kursor nie znajduje się wewnątrz bloku tekstowego w momencie, kiedy Flash odczytuje indeks zaznaczenia, zwracana jest wartość -1.
W celu
|
W polu Value pojawi się metoda getCaretIndex. Zaznacz pole Expression.
Na początku blok dynamicznego tekstu wyświetla wartość -1, z uwagi na to, iż blok tekstu pobieranego nie jest aktualnie zogniskowany. Kiedy odbiorca rozpocznie wpisywanie tekstu w bloku tekstu pobieranego, Flash uaktualni blok dynamicznego tekstu, wyświetlając pozycję kursora (rys. 10.41).
W celu zmiany selekcji
Key.isDown(Key.ENTER) Flash sprawdzi, czy naciśnięty został klawisz Enter.
|
Rys. 10.40. Flash przypisuje pozycję kursora (caret, karetkę) zmiennej myIndex
Rys. 10.41. Bieżący indeks kursora to 12. Pierwsza litera „T” ma indeks 0. Odstęp pomiędzy wyrazami „position” i „of” ma indeks 12
|
Rys. 10.42. Powyższa metoda setSelection zaznacza znaki wprowadzone między parametrami beginIndex i endIndex
Rys. 10.43. Powyższa metoda setSelection zaznacza znaki wprowadzone między pierwszym znakiem i bieżącą pozycją kursora
Rys. 10.44. Użytkownik wpisuje tekst do bloku tekstu pobieranego (z lewej). Po wciśnięciu klawisza Enter, Flash automatycznie zaznacza tekst (z prawej). Indeks u dołu zmienia wartość z 30 na 31, ponieważ użycie Entera liczy się jako kolejna pozycja indeksu
|
W polu Expression pojawi się metoda setSelection(beginIndex, endIndex)(rys. 10.42).
Kiedy użytkownik zacznie wpisywać tekst do bloku tekstu pobieranego, blok dynamicznego tekstu wyświetli indeks kursora. Po wciśnięciu klawisza Enter wywoływana jest metoda setSelection. Metoda ta powoduje zaznaczenie znaków wpisanych pomiędzy indeksem 0 (pierwszym znakiem) i bieżącą pozycją kursora, czyli zostaje zaznaczone wszystko, co użytkownik wpisał (rys. 10.44).
|
Jeśli masz na scenie wiele bloków tekstowych, musisz mieć możliwość kontrolowania, który z nich jest w danym momencie aktywny lub zogniskowany, zanim będziesz mógł odczytać albo przypisać pozycję kursora czy też selekcji. Do tego celu służą metody getFocus i setFocus obiektu selekcji. Metoda getFocus zwraca łańcuch znakowy zawierający bezwzględną ścieżkę dostępu do bloku tekstowego, korzystając z instrukcji _level0. Przykładowo, jeśli aktualnie zaznaczony blok tekstowy o nazwie twojeImię znajduje się w głównej listwie czasowej, a ty wywołasz metodę getFocus, zostanie zwrócona następująca wartość: "_level0.twojeImię" Musisz zapamiętać, że zwracana wartość jest łańcuchem znakowym, a użyto instrukcji _level0. Jeśli przyrównasz wartość getFocus do ścieżki, używając _root lub this, ewentualnie zapomnisz o znaku cudzysłowu, Flash nie rozpozna ścieżki. Jeśli na scenie nie ma aktualnie zogniskowanego bloku tekstowego, metoda getFocus zwraca wartość null (nic). Podobnie jak getFocus, również metoda setFocus wymaga użycia łańcucha znakowego i bezwzględnej ścieżki dostępu do bloku tekstowego. Możesz jednak w tym wypadku korzystać z instrukcji _level0 lub _root. W kolejnym ćwiczeniu utworzysz kilka bloków tekstu pobieranego. W zależności od tego, który blok tekstowy wybierze użytkownik, blok dynamicznego tekstu będzie wyświetlał odpowiedni komunikat.
|
|
Rys. 10.45. Utwórz trzy bloki tekstu pobieranego (pokazano tu wygląd palety Text Options dla środkowego bloku) (u góry) i jeden blok dynamicznego tekstu (u dołu)
Rys. 10.46. Jeśli metoda getFocus zwraca wartość null, to znaczy, że żaden z bloków tekstowych nie został zogniskowany
|
W celu zogniskowania
Utworzone bloki tekstowe zostaną umieszczone w symbolu klipu filmowego, którego klon pozostanie obecny na scenie.
Flash sprawdzi, czy użytkownik nie zaznaczył któregoś z bloków tekstowych. |
Kiedy użytkownik ogląda film Flasha po raz pierwszy, żaden z bloków tekstowych nie jest zogniskowany, ale komunikat wyświetlany w bloku dynamicznego tekstu mówi mu, co ma zrobić. Jeśli odbiorca zaznaczy blok tekstowy, Flash natychmiast rozpozna, o który blok chodzi (rys. 10.51).
Rys. 10.51. Dla każdego zogniskowanego bloku tekstowego pojawia się inny komunikat. Powyższy przykład ilustruje sytuację, kiedy żaden z bloków nie jest aktywny (u góry) oraz kiedy zogniskowano górny blok tekstowy (u dołu) |
Rys. 10.47. Komunikat wpisany do pola Value pojawi się w bloku dynamicznego tekstu o nazwie display
Rys. 10.48. Flash sprawdza, czy blok tekstu pobieranego o nazwie name, umieszczony w klipie filmowym myMovieClip, jest aktualnie zaznaczony
Rys. 10.49. Komunikat wpisany w polu Value pojawia się w bloku dynamicznego tekstu o nazwie display
Rys. 10.50. Kompletny skrypt zawiera wayrażenia warunkowe dla każdego zogniskowanego bloku tekstowego |
Rys.10.52. Poniżej pierwszego warunku else if wstaw warunek sprawdzający, czy wciśnięto klawisz Enter
Rys. 10.53. Ta metoda setFocus ogniskuje blok tekstu pobieranego o nazwie address (adres), rezydujący w klipie filmowym myMovieClip
Rys. 10.54. Kompletny skrypt zawiera warunki niezbędne do zogniskowania następnego bloku tekstu pobieranego po wciśnięciu klawisza Enter
|
W celu wybrania aktywnego
Key.isDown (Key.ENTER) Jest to instrukcja, która nakazuje Flashowi sprawdzić, czy użytkownik nacisnął klawisz Enter w momencie, kiedy pierwszy blok tekstowy jest zogniskowany (rys. 10.52).
W polu Expression pojawi się metoda setFocus, z podświetlonym parametrem variableName.
Flash zogniskuje teraz następny blok tekstowy.
Kiedy użytkownik wprowadzi tekst do pierwszego bloku tekstu pobieranego i wciśnie klawisz Enter, Flash zogniskuje następny blok tekstu pobieranego, dzięki czemu użytkownik będzie mógł kontynuować wprowadzanie informacji bez potrzeby klikania odpowiedniego bloku w celu jego uaktywnienia. Użyj przedstawionej metody przygotowania interfejsu kontroli zaznaczania bloków tekstowych za pomocą klawisza Tab. |
Metody i właściwości można przypisać do obiektu łańcucha znakowego w celu analizowania i manipulowania danymi znakowymi. Obiekt łańcucha może powiedzieć ci np., gdzie znajduje się określony znak, czy też jaki znak znajduje się na wskazanej pozycji. Możliwe jest także wycięcie fragmentu łańcucha (nazywanego podłańcuchem) i wstawienie go do innego, jak również wiązanie łańcuchów i podłańcuchów. Obiekt łańcucha znakowego pozwala zmieniać fragmenty łańcucha znakowego na pisane wielkimi lub małymi literami. Różne metody i właściwości tego typu obiektu przedstawiono w tabeli 10.2. Wszystkie te operacje z poprawianiem i przestawianiem łańcuchów znakowych możesz wykonywać bez wcześniejszego utworzenia klonu obiektu łańcucha znakowego. Flash robi to automatycznie, tworząc tymczasowy obiekt łańcucha znakowego, który po wykonaniu metody jest usuwany.
|
Podobnie jak w przypadku obiektu selekcji, indeksy obiektu łańcucha znakowego są tworzone na podstawie pozycji znaku w łańcuchu. Pierwszy znak otrzymuje indeks 0, drugi indeks 1, itd. Wskazówka
String (przyciskWyboru) zwraca łańcuch znakowy true (prawda) lub false (fałsz). Od teraz znaki te mogą podlegać manipulowaniu za pomocą metod obiektu łańcucha znakowego.
|
|
Tabela 10.2. Metody i właściwości obiektu łańcucha znakowego |
||
Metoda lub właściwość Opis |
||
indexOf(searchString, fromIndex) |
Przeszukuje łańcuch znakowy i zwraca miejsce wystąpienia po raz pierwszy podłańcucha wskazanego parametrem searchString. Opcjonalny parametr fromIndex określa punkt rozpoczęcia przeszukiwania. |
|
lastIndexOf(searchString, fromIndex) |
Przeszukuje łańcuch znakowy i zwraca miejsce wystąpienia po raz ostatni podłańcucha wskazanego parametrem searchString. Opcjonalny parametr fromIndex określa punkt rozpoczęcia przeszukiwania. |
|
charAt(index) |
Zwraca znak znajdujący się na pozycji wskazanej indeksem. |
|
substring(indexA, indexB) |
Zwraca łańcuch znakowy, którego pozycję wyznaczają parametry indexA i indexB. |
|
substr(start, length) |
Zwraca łańcuch znakowy o podanej długości, zaczynający się od indeksu start. |
|
concat(string1,...,stringN) |
Wiąże wskazane łańcuchy. |
|
toLowerCase() |
Zamienia znaki w łańcuchu na pisane małą literą. |
|
toUpperCase() |
Zamienia znaki w łańcuchu na pisane wielką literą. |
|
length |
Właściwość zwracająca długość łańcucha. |
|
|
Rys. 10.55. Nazwij blok tekstu pobieranego myString (mój łańcuch)
Rys. 10.56. Przypisz metodę indexOf do bloku myString
Rys. 10.57. Metoda indexOf sprawdza blok myString w poszukiwaniu znaku % i podstawia jego indeks do zmiennej characterPosition (pozycja znaku)
|
Analizowanie łańcuchów znakowych za pomocą obiektu łańcucha znakowego Użyj metod obiektu łańcucha znakowego do zidentyfikowania znaku lub znaków w tym łańcuchu. Poniższe ćwiczenia ilustrują sposób analizowania bloków tekstu pobieranego w celu sprawdzenia, czy użytkownik wprowadził pożądaną informację.
W celu
Metoda indexOf pojawi się za zmienną tekstu pobieranego. Podświetlone zostaną argumenty searchString i fromIndex. Parametr searchString służy do określenia znaku, który chcesz zidentyfikować w łańcuchu. Parametr fromIndex jest punktem początkowym łańcucha - jest to parametr opcjonalny (rys. 10.56).
|
Wskazówki
|
slash1 = input.indexOf ("/"); slash1 = input.indexOf ("/", slash1+1); Pierwsze wyrażenie przypisuje zmienną slash1 do miejsca pierwszego wystąpienia symbolu ukośnika w łańcuchu znakowym wprowadzonej informacji (slash1 = 4). Drugie wyrażenie ponownie wyszukuje symbol ukośnika, ale zaczynając od znaku stojącego za pierwszym napotkanym ukośnikiem (przy indeksie 5 lub literze „i” w słowie „images”). Konstruując pętle while lub do while, możesz zmusić Flasha do przeszukania całego łańcucha, zaczynając za każdym razem od ostatniego miejsca wystąpienia znaku. Powtarzaj czynność, dopóki wartość zwracana metody indexOf nie będzie równa wartości metody lastIndexOf.
|
Rys. 10.58. Nazwij blok tekstu pobieranego yourEmail (twój e-mail)
Rys. 10.59. Nazwij blok tekstu dynamicznego display (ekran)
|
Jeśli Flash przeszukuje łańcuch znakowy z użyciem metod indexOf lub lastIndexOf i nie znajduje wskazanego znaku, zwracana jest wartość -1. Można wykorzystać tę właściwość do wyszukiwania brakujących znaków w łańcuchu. Przykładowo, jeśli indexOf("%") == -1, to wiadomo, że symbolu procentu brakuje w łańcuchu znakowym. W kolejnym ćwiczeniu sprawdzimy zmienną wprowadzonego tekstu w poszukiwaniu symbolu @ oraz kropki, aby przekonać się, czy adres e-mail został wpisany poprawnie. W celu sprawdzenia bloku tekstowego w poszukiwaniu brakującego znaku:
|
yourEmail.indexOf ("@") == -1 Ten warunek sprawdza, czy symbol @ nie jest obecny w zmiennej yourEmail (rys. 10.60).
yourEmail.indexOf (".") == -1
|
Rys. 10.60. Warunek zostanie spełniony, jeśli w zmiennej yourEmail nie pojawi się symbol @
Rys. 10.61. Komunikat wpisany w polu Value pojawi się w bloku dynamicznego tekstu o nazwie display
Rys. 10.62. Ten komunikat pojawi się w bloku dynamicznego tekstu o nazwie display w przypadku niespełnienia warunku
Rys. 10.63. Wprowadzenie nieprawidłowego adresu e-mail w bloku tekstu pobieranego powoduje wyświetlenie ostrzeżenia bloku dynamicznego tekstu (u góry). Wpisanie adresu zawierającego Symbol @ oraz kropkę powoduje wyświetlenie w bloku dynamicznego tekstu komunikatu z podziękowaniem (u dołu) |
Rys. 10.64. Flash sprawdza, czy nie brakuje symbolu @, kropki, a także ustala, czy blok tekstu pobieranego o nazwie yourEmail jest pusty
yourEmail.length == 0 Kiedy użytkownik kliknie przycisk, Flash sprawdzi długość łańcucha znakowego w bloku tekstu pobieranego i ustali, czy cokolwiek zostało wpisane (rys. 10.64). |
Wskazówka
Obiekt łańcucha znakowego posiada jedną właściwość, length, określającą liczbę znaków w łańcuchu. Jest to właściwość tylko do odczytu, użyteczna do sprawdzania względnego umiejscowienia znaków. Na przykład, budując interfejs internetowego sklepiku z blokami tekstu pobieranego do podawania cen, możesz sprawdzać wprowadzany tekst w celu ustalenia, czy znak kropki znajduje się trzy miejsca przed długością łańcucha, jak w wyrażeniu: input.indexOf (".") == input.length - 3 Jeśli powyższy warunek jest spełniony, można potraktować dwie ostatnie cyfry jako część dziesiętną. Następne ćwiczenie uzupełnia przedstawiony wcześniej proces sprawdzania poprawności wpisanego adresu e-mail. Tym razem nakażesz Flashowi upewnić się, że długość wprowadzonego łańcucha znakowego nie wynosi 0 (co oznacza, że odbiorca nic nie wpisał).
W celu sprawdzenia długości
|
Kiedy już posiadasz informacje o umiejscowieniu poszczególnych znaków w łańcuchu oraz o długości samego łańcucha znakowego, możesz zaznaczyć jego część i podstawić ją do innej zmiennej. Flash umożliwia wykorzystanie wyselekcjonowanych fragmentów łańcucha wraz z innymi łańcuchami znakowymi, a odbywa się to przy użyciu metod concat, fromCharCode, slice, split, substr lub substring. Większość tych metod jest do siebie podobna. W książce omówimy tylko metody substring (pozwalającą wykorzystać zaznaczony fragment łańcucha) i concat (umożliwiającą łączenie kilku oddzielnych łańcuchów znakowych). Możesz używać kombinacji tych dwóch metod do kontrolowania informacji przepływających między blokami tekstu pobieranego i resztą elementów filmu Flasha, by na końcu trafić do bloku dynamicznego tekstu.
W celu wykorzystania wyselekcjonowanego
|
Rys. 10.65. Nazwij blok tekstu pobieranego inputBox
Rys. 10.66. Nazwij blok tekstu dynamicznego outputBox
|
Rys. 10.67. Zmienna o nazwie beginning (początek) przechowuje pozycję początkową selekcji
Rys. 10.68. Zmienna o nazwie ending (koniec) przechowuje pozycję końcową selekcji
Rys. 10.69. Metoda substring tworzy podłańcuch na podstawie zawartości zmiennej inputBox, przechowującej indeksy indexA i indexB
Rys. 10.70. Zmienna beginning wskazuje początek podłańcucha znakowego, a zmienna ending - jego koniec
|
Do zmiennej przypisana zostanie pozycja początku selekcji.
Do zmiennej przypisana zostanie pozycja końca selekcji.
Metoda substring pojawi się za zmienną tekstu pobieranego, z podświetlonymi parametrami indexA i indexB. Parametr indeXa definiuje początek sekwencji znaków, który chcesz wyciąć, a parametr indexB oznacza koniec sekwencji (rys. 10.69).
|
Odbiorca może teraz wpisać tekst do bloku tekstu pobieranego i zaznaczyć jego fragment. W momencie najechania myszą utworzonego przycisku - Flash zapamięta pozycję zaznaczenia i podstawi ten podłańcuch do innej zmiennej. Po kliknięciu przycisku wybrany podłańcuch znakowy pojawi się w bloku dynamicznego tekstu (rys. 10.72). Wskazówka
|
Rys. 10.71. Zmienna outputBox wyświetla zawartość zmiennej selectedString (zaznaczony fragment łańcucha)
Rys. 10.72. Zaznaczony fragment „sentence here” (u góry) jest przenoszony do podłańcucha i wyświetlany w bloku dynamicznego tekstu poniżej przycisku (u dołu) |
Usprawnienie weryfikacji adresu e-mail za pomocą metody substring |
|
Możesz wykorzystać metodę substring w poprzednim ćwiczeniu w celu usprawnienia wyświetlania informacji zwrotnej. Przykładowo, zamiast ogólnego podziękowania po wprowadzeniu poprawnego adresu, możesz wyświetlić informację spersonalizowaną na podstawie znaków następujących po symbolu @. Twoje podziękowanie będzie wtedy skierowane do nazwy użytkownika, która najczęściej jest jego imieniem lub |
pseudonimem. Ustaw zmienną bloku dynamicznego tekstu w następujący sposób: "Thank you, " + yourEmail.substring (0, (yourEmail.indexOf("@"))) + ", we'll contact you soon." Podłańcuch zwróci selekcję fragmentu pomiędzy pierwszym znakiem (indeks 0) i symbolem @. |
Rys. 10.73. Stwórz trzy bloki tekstu pobieranego
Rys. 10.74. Nazwij blok dynamicznego tekstu display (wyświetlacz)
|
Za pomocą metody concat możesz połączyć wycięte łańcuchy znakowe w bardziej użyteczny sposób. Parametry metody concat są indywidualnymi wyrażeniami (oddzielonymi przecinkami), które możesz łączyć. Metoda concat ma takie samo działanie jak operator dodawania (+), który omawialiśmy wcześniej w tym rozdziale. Na przykład, poniższe dwa wyrażenia są względem siebie równorzędne: "Hello, ".concat (firstName, " ", lastName); "Hello, " + firstName + " " + lastName;
W celu połączenia dwóch
|
Metoda concat pojawi się w polu Value, zaraz za zmienną pierwszego bloku tekstu pobieranego. Zobaczysz podświetlone parametry string1 i stringN. Przedstawiają one wartości, które mają zostać powiązane (rys. 10.75).
|
Rys. 10.75. Metoda concat wiąże wartości określone w jej parametrach ze zmienną o nazwie title (tytuł)
Rys. 10.76. Powyższa metoda concat jest ekwiwalentem wyrażenia: title + " " + firstName + " " + lastName
Rys. 10.77. Flash wiąże zawartość trzech górnych pól tekstu pobieranego w jeden łańcuch znakowy, wyświetlany w dolnym polu dynamicznego tekstu
|
|
Modyfikowanie Istnieją dwie proste metody, umożliwiające modyfikację liter łańcucha znakowego: toUpperCase oraz toLowerCase. Obydwie metody zmieniają cały łańcuch znakowy na pisany, odpowiednio, dużymi lub małymi literami. Jeśli chcesz zmodyfikować tylko wybrane litery, musisz najpierw przygotować podłańcuchy znakowe, zawierające owe wybrane przez ciebie litery, jak to omówiliśmy w poprzedniej sekcji rozdziału. Modyfikuj podłańcuchy na pisane wielkimi lub małymi literami, a następnie łącz je z powrotem za pomocą metody concat.
W celu zmiany wielkości liter
|
Wskazówka
|
Rys. 10.78. Metoda toUpperCase przekształca znaki przechowywane w zmiennej myInput na pisane wielką literą
Rys. 10.79. Rezultat wykonania metody toUpperCase jest widoczny w bloku dynamicznego tekstu o nazwie display
|
Rozdział 10.
338
337
Kontrolowanie tekstu
10
Kontrolowanie tekstu
Dołącza wszystkie fonty
Dołącza wzory znaków specjalnych
Typ tekstu
Tekst pobierany w fazie projektowania
Rysuje ramkę i tło
Nazwa zmiennej bloku tekstu pobieranego = Widgets
Blok tekstu dynamicznego Fahrenheit
Nazwa zmiennej bloku tekstu pobieranego = Name
Blok tekstu pobieranego Celsius
Akcja stop w ujęciu kluczowym 1.
Maksymalna liczba znaków
Nazwa zmiennej
Wprowadza formatowanie HTML
Sposób wyświetlania tekstu (ilość linii)
Uchwyt zmiany rozmiaru pola
Dołącza wybrane fonty
Tekst pobierany w czasie odtwarzania, z dołączonym fontem
Tekst pobierany w czasie odtwarzania, bez dołączonego fontu
Nazwa zmiennej bloku tekstu pobieranego = Zip
Nazwa zmiennej bloku tekstu pobieranego = State
Nazwa zmiennej bloku tekstu pobieranego = City
Nazwa zmiennej bloku tekstu pobieranego = Address
Grafika towarzysząca
Blok tekstu dynamicznego
Dołącz wszystkie wykorzystane fonty
Ujęcie kluczowe 2. z etykietą #p
Ujęcie kluczowe 7. z etykietą #b
Kryjący prostokąt
Klon symbolu graficznego zawierający blok dynamicznego tekstu
Blok dynamicznego tekstu displayMyPage
Grafika tła
Maska w warstwie 5.
Tekst pobierany
Tekst dynamiczny
Widoczny fragment tekstu w bloku
Scroll = 1
Blok tekstu pobieranego
Klon pierwszego przycisku
Klon drugiego przycisku
Widoczna część bloku tekstowego
Właściwość maxscroll
Blok dynamicznego tekstu
Żaden z bloków tekstu pobieranego nie jest aktualnie zogniskowany
Zogniskowany jest blok tekstowy name
Blok dynamicznego tekstu
Blok tekstu pobieranego inputBox
Blok tekstu dynamicznego outputBox
Blok tekstu pobieranego inputBox
Blok tekstu dynamicznego outputBox
Blok tekstu pobieranego myInput
Blok dynamicznego tekstu o nazwie display
Kontrolowanie tekstu
Tekst pobierany
Tekst pobierany
Tekst dynamiczny
Wiązanie tekstu
Wyświetlanie tekstu HTML
Wyświetlanie tekstu HTML
Animowanie dynamicznego tekstu
Przewijanie bloku tekstowego
Przewijanie bloku tekstowego
Manipulowanie łańcuchami znakowymi
Kontrolowanie selekcji
Kontrolowanie selekcji
Ogniskowanie bloków tekstowych
Ogniskowanie bloków tekstowych
Analizowanie łańcuchów znakowych
Analizowanie łańcuchów znakowych
Analizowanie łańcuchów znakowych
Przegrupowywanie łańcuchów
Przegrupowywanie łańcuchów
Modyfikowanie łańcuchów znakowych
Tekst pobierany
Tekst pobierany
Tekst dynamiczny
Wiązanie tekstu
Wiązanie tekstu
Wyświetlanie tekstu HTML
Animowanie dynamicznego tekstu
Animowanie dynamicznego tekstu
Przewijanie bloku tekstowego
Przewijanie bloku tekstowego
Obiekt selekcji
Kontrolowanie selekcji
Ogniskowanie bloków tekstowych
Ogniskowanie bloków tekstowych
Obiekt łańcucha znakowego
Analizowanie łańcuchów znakowych
Analizowanie łańcuchów znakowych
Przegrupowywanie łańcuchów
Przegrupowywanie łańcuchów
Przegrupowywanie łańcuchów
Modyfikowanie łańcuchów znakowych