Rozdział 25.
Formatowanie tekstu w polach tekstowych Flasha

W tym rozdziale:

• Korzystanie ze znaczników HTML w polach tekstowych

• Tworzenie łączy URL wewnątrz tekstów

• Znaczniki HTML i funkcje

• Zaznaczanie tekstu w polach tekstowych za pomocą skryptów

W tym rozdziale dowiesz się, jak kontrolować formatowanie i zaznaczanie pól tekstowych, wykorzystując znaczniki HTML i język ActionScript. We Flashu 5 znacznie poprawiono kontrolę nad formatowaniem i zaznaczaniem pól tekstowych.

Korzystanie ze znaczników HTML w polach tekstowych

Na rysunkach w poprzednich rozdziałach zapewne zauważyłeś opcję HTML w panelu Text Options. We Flashu 5 możesz korzystać ze znaczników HTML w wejściowych i dynamicznych polach tekstowych. We Flashu 4 nie mogłeś zastosować więcej niż jednego formatowania dla pola tekstowego. Na przykład, jeśli utworzyłeś pole tekstowe wykorzystujące pogrubioną czcionkę Verdana o rozmiarze 18 punktów, to w tym polu tekstowym nie mogłeś już zastosować innej czcionki ani zmienić jej rozmiaru lub koloru. We Flashu 5 możesz skorzystać ze znacznika <FONT>, by w tym samym polu tekstowym skorzystać z kilku krojów pisma, kolorów lub rozmiarów czcionki. Możesz nawet użyć znacznika <A HREF>, aby wewnątrz pola tekstowego tworzyć łącza do adresów URL!

Nowość! Możliwość korzystania ze znaczników HTML wewnątrz pól tekstowych filmów Flasha 5 coraz bardziej zbliża filmy do zasad działania aplikacji Generator Server firmy Macromedia. Korzystając z szablonów Generatora, możesz umieścić zmienne środowiska w dowolnym polu tekstowym (nawet statycznym!), aby uzyskać lepszą personalizację witryny. Jednak integracja HTML-a we Flashu 5 nie dorównuje dynamicznie formatowanemu tekstowi w szablonach Generatora.

Obsługiwane znaczniki HTML

Przy formatowaniu tekstu w polach tekstowych możesz korzystać ze znaczników HTML. Znaczniki możesz umieszczać w ciągach znaków (jako wartości zmiennych) w skryptach lub dodawać je, korzystając z paneli Character i Text Options (nie musisz wtedy znać ani pisać ich składni).

Kroje pisma i style akapitu

W polach tekstowych możesz korzystać ze znacznika <FONT> i podstawowych stylów czcionki (pogrubienie, kursywa i podkreślenie):

• <B> — tekst umieszczony między znacznikami <B> i </B> jest pisany pogrubioną czcionką;

• <I> — tekst umieszczony między znacznikami <I> i </I> jest pisany kursywą;

• <U> — tekst między znacznikami <U> i </U> jest podkreślony;

• <P> — tekst po tym znaczniku pisany jest w nowym akapicie; wewnątrz znacznika możesz użyć atrybutu ALIGN z wartością LEFT, RIGHT, CENTER lub JUSTIFY, aby określić wyrównanie akapitu;

• <BR> — ten znacznik powoduje przejście do nowej linii, w języku ActionScript jego odpowiednikiem jest operator newline;

• <FONT COLOR='#kod szesnastkowy'> — tego znacznika z atrybutem COLOR możesz użyć do zmiany koloru tekstu, kolor określany jest za pomocą wartości szesnastkowej, podobnie jak w zwykłym HTML, na przykład <FONT COLOR='#FF0000'>Ten tekst jest czerwony.</FONT> spowoduje wyświetlenie napisu na czerwono;

• <FONT FACE> — znacznik <FONT> z atrybutem FACE pozwala określić stosowany krój pisma, możesz także wykorzystywać czcionki systemowe; na przykład <FONT FACE='_sans'> spowoduje pisanie tekstu czcionką bezszeryfową;

• <FONT SIZE> — zmiana rozmiaru czcionki jest możliwa przy wykorzystaniu atrybutu SIZE znacznika <FONT>, zmieniając rozmiar, możesz korzystać z wartości bezwzględnych (punkty), na przykład <FONT SIZE='18'> lub wartości względnych, na przykład <FONT SIZE='+1'>.

Łącza URL

Możesz użyć znacznika <A> z atrybutem HREF, aby w tekście umieszczać łącza do innych stron lub witryn. Na przykład, możesz wpisać poniższy kod HTML do wartości tekstowej przypisanej do pola tekstowego, aby kliknięcie tekstu powodowało otwarcie witryny The Makers:

<A HREF='http://www.themakers.com'>Witryna The Makers</a>

Możesz także określić atrybut TARGET znacznika <A>. Atrybut ten pozwala ustalić, w którym oknie przeglądarki zostanie wyświetlona strona określona w atrybucie HREF. Podobnie jak w zwykłym HTML, możesz użyć wartości _top, _parent, _self lub _blank (zostały omówione przy akcji getURL). W dalszej części tego rozdziału dowiesz się, jak za pomocą znacznika <A HREF> wywoływać wewnętrzne funkcje Flasha.

Ostrzeżenie! Nie możesz bezpośrednio wpisywać znaczników HTML do pól tekstowych, ponieważ byłyby one traktowane jako zwykły tekst i wyświetlane w odtwarzanym filmie. Znaczniki są wykorzystywane w skryptach. Są także używane, chociaż tego nie widzisz, gdy formatujesz tekst przy użyciu panelu Character.

Formatowanie tekstu za pomocą paneli Character i Text Options

Do formatowania tekstu nie musisz używać znaczników HTML. Możesz skorzystać z panelu Character, aby formatować tekst we wszystkich typach pól tekstowych (statycznych, wejściowych i dynamicznych). W przypadku wejściowych i dynamicznych pól tekstowych będziesz musiał włączyć opcję HTML w panelu Text Options, aby korzystać z formatowania HTML w skryptach. W tej sekcji zademonstrujemy, jak korzystać z formatowania HTML w statycznych i dynamicznych polach tekstowych.

1. Utwórz nowy plik Flasha (klawisze Ctrl+N lub Command+N). Korzystając z okna Movie Properties (klawisze Ctrl+M lub Command+M), ustal kolor tła. Film zapisz w pliku htmlText.fla.

2. Wybierz narzędzie Text Tool i otwórz panel Text Options. Upewnij się, że z rozwijanej listy wybrana jest opcja Static Text. Kliknij obraz i wpisz poniższy tekst (użyj klawisza Enter po słowie Bible), korzystając z czcionki Verdana o rozmiarze 18 punktów:

Flash 5 Bible

by Robert Reinhardt & Jon Warren Lentz

3. Zaznacz pierwszą linię wpisanego tekstu i za pomocą panelu Character zmień rozmiar czcionki na 24 punkty i kliknij ikonę B, aby pogrubić krój (rysunek 25.1). W pole URL panelu Character wpisz poniższy adres URL:

http://www.amazon.com/exec/obidos/ASIN/0764535153

Rysunek 25.1. Możesz zmieniać formatowanie części tekstu znajdującego się w polu tekstowym

4. Teraz zaznacz tekst Robert Reinhardt i w pole URL panelu Character wpisz poniższy adres e-mail:

mailto:[e-mail]

5. Zaznacz tekst Jon Warren Lentz i w pole URL panelu Character wpisz poniższy adres e-mail:

mailto:[e-mail]

Zobacz na rysunku 25.2, jak w środowisku edycyjnym jest wyświetlany tekst z przypisanym adresem URL.

Rysunek 25.2. Tekst z przypisanym adresem URL jest podkreślony przerywaną linią. W finalnej wersji filmu .SWF podkreślenie nie będzie widoczne

6. Zapisz film. Wybierz polecenie File/Publish Preview/HTML, aby przetestować działanie filmu w oknie przeglądarki. Gdy klikniesz pierwszą linię, przeglądarka pobierze stronę witryny Amazon.com zawierającą opis anglojęzycznej wersji książki „Flash 5. Biblia”. Jeśli klikniesz imię lub nazwisko któregoś z autorów książki, otworzy się klient e-mail, pozwalając na wysłanie elektronicznego listu.

Formatowanie pól tekstowych za pomocą skryptów

W tej sekcji będziemy kontynuować poprzedni przykład. Skonwertujemy statyczne pole tekstowe na dynamiczne pole tekstowe i przy użyciu skryptu zmienimy formatowanie.

1. Zapisz film Flasha z poprzedniej sekcji pod nową nazwą — htmlText_dynamic.fla. Prosimy Cię o to, ponieważ być może będziesz chciał w przyszłości skorzystać z przykładu ze statycznym polem tekstowym, a za chwilę skonwertujemy je na dynamiczne pole tekstowe.

2. Zaznacz pole tekstowe i otwórz panel Text Options. Zmień typ pola na Dynamic Text i zaznacz opcję HTML. W polu Variable wpisz nazwę zmiennej book (książka). Teraz pole tekstowe możesz modyfikować za pomocą skryptu, operując na zmiennej book. Wyłącz opcję Border/BG, jeśli nie chcesz widzieć ramki wokół pola tekstowego.

3. Zapisz film i przetestuj go (klawisze Ctrl+Enter lub Command+Enter). W czasie odtwarzania filmu w środowisku testowym wybierz polecenie Debug/List Variables. W oknie Output powinieneś zauważyć znaczniki HTML (zauważ także, że w tym oknie zmienna book i jej wartość wyświetlania jest w jednej linii):

Level #0:

Variable _level0.$version = "MAC 5,0,30,0"

Variable _level0.book = "<P ALIGN=\"LEFT\"><FONT FACE=\"verdana\" SIZE=\"24\" COLOR=\"#000000\"><A HREF=\"http://www.amazon.com/exec/obidos/ASIN/0764535153\"><B>Flash 5 Bible</B></A></FONT></P><P ALIGN=\"LEFT\"><FONT FACE=\"verdana\" SIZE=\"18\" COLOR=\"#000000\">by <A HREF=\"mailto:[e-mail]\">Robert Reinhardt</A> &amp; <A HREF=\"mailto:[e-mail]\">Jon Warren Lentz</A></FONT></P>"

Teraz w oknie Output widzisz poprawną składnię formatowania HTML w języku ActionScript. Zauważ, że wszystkie cudzysłowy poza pierwszym i ostatnim poprzedzone są lewym ukośnikiem (\), na przykład <FONT FACE=\"verdana\">. Wynika to z faktu, że wartość zmiennej book jest ciągiem znaków zawartych między cudzysłowami, więc wszystkie pozostałe cudzysłowy muszą być poprzedzone lewym ukośnikiem, by program odróżniał, gdzie naprawdę kończy się wartość tekstowa.

4. Zamknij okno odtwarzające film i powróć do głównej listwy czasowej filmu. Utwórz nowe dynamiczne pole tekstowe i w panelu Text Options zaznacz opcje HTML i Word wrap. Upewnij się, że na drugiej rozwijanej liście jest wybrana opcja Multiline. W polu Variable wpisz nazwę zmiennej book2. Nowe pole tekstowe powinno być tej samej wielkości co poprzednie.

5. Dodaj nową warstwę i nadaj jej nazwę actions (skrypty). Kliknij dwukrotnie pierwsze ujęcie tej warstwy, aby otworzyć edytor skryptów. Zmiennej book2 przypisz ciąg znaków z formatowaniem HTML o następującej treści:

book2 = "<FONT FACE=\"Verdana\" SIZE=\"24\" COLOR=\"#0000FF\"><B><A HREF=\"http://www.amazon.com/exec/obidos/ASIN/0764533568\">Flash 4 Bible</A></B></FONT><BR><FONT SIZE=\"18\" COLOR=\"#000000\">by <A HREF=\"mailto:[e-mail]\">Robert Reinhardt</A> & <A HREF=\"mailto:[e-mail]\">Jon Warren Lentz</A>"

Uwaga! W skrypcie powyższy kod powinien stanowić jedną linię.

6. Zapisz i przetestuj film. W polu tekstowym book2 pojawi się tekst sformatowany przy użyciu skryptu z warstwy actions.

Możesz także używać zmiennych do wypełniania pól tekstowych z formatowaniem HTML, na przykład:

bookURL = "http:// www.amazon.com/exec/obidos/ASIN/0764533568";

bookName = "Flash 4 Bible";

book2 = "<A HREF\"" + bookURL + "\">" + bookName + "</A>";

Korzystając ze zmiennych i metod języka ActionScript, możesz nawet formatować dane z zewnętrznych źródeł załadowane do filmu, na przykład rekordy baz danych lub listy. W następnej sekcji dowiesz się, jak z poziomu formatowanych pól tekstowych wywoływać funkcje.

Wywoływanie funkcji w formatowanych polach tekstowych

We Flashu możesz nie tylko formatować pola tekstowe, ale także wywoływać w nich funkcje, korzystając ze znacznika <A> i atrybutu HREF o wartości asfunction:funkcja,argument. Na przykład, jeśli chcesz połączyć tekst z funkcją powodującą wczytanie filmu .SWF do klonu klipu filmowego, możesz utworzyć własną funkcję zawierającą akcję loadMovie i odniesienie do niej umieścić w znaczniku <A HREF> pola tekstowego. Skrypt wyglądałby następująco (znak ¬ oznacza kontynuację tej samej linii kodu, nie umieszczaj go w rzeczywistym kodzie):

function myMovie(name){

loadmovie(name, _rootmcHolder);

}

myText = "<A HREF=\"asfunction:myMovie,movie.swf\"> Kliknij, ¬

aby wczytać film</A>";

W powyższym kodzie tekst wewnątrz znaczników <A></A> wywoła funkcję myMovie i przekaże jej wartość tekstową movie.swf jako argument name.

Wskazówka! Parametr asfunction może przekazać tylko jedną wartość tekstową. Nie musisz umieszczać argumentu w cudzysłowach. Jeśli chcesz przekazać inną wartość, użyj operatora + by dodać ją do formatowanej wartości tekstowej.

Jeśli potrzebujesz przekazać więcej niż jeden argument, będziesz musiał wysłać jeden ciąg znaków, w którym argumenty oddzielisz przecinkiem (lub innym znakiem). Następnie skorzystaj z metody split (znak ¬ oznacza kontynuację tej samej linii kodu, nie umieszczaj go w rzeczywistym kodzie):

function myMovie(name){

var tempArgs = name.split(",");

var mcTarget = tempArgs[0];

var swfUrl = tempArgs[1];

loadMovie(swfUrl, mcTarget);

}

myArgs = "_root.mcHolder,movie.swf";

myText = "<A HREF=\"asfunction:myMovie," + myArgs + "\"> Kliknij, ¬

aby wczytać film</A>";

W tym przykładzie do funkcji myMovie przekazywany jest argument name. W funkcji za pomocą metody split powstaje tablica o nazwie tempArgs. Elementami tej tablicy są dwa ciągi znaków, które w zmiennej myArgs oddzielone są przecinkiem.

Na CD-ROM-ie! Źródłowe pliki z przykładami formatowania HTML i zastosowania parametru asfunction znajdziesz na CD-ROM-ie w katalogach ch25\HTML text fields i ch25\asfunction.

Właściwości pola tekstowego

Wejściowe i dynamiczne pola tekstowe posiadają dwie właściwości, które są dostępne z poziomu języka ActionScript: scroll i maxscroll. Za pomocą tych właściwości możesz kontrolować, które linie tekstu są widoczne, jeśli pole zawiera więcej linii tekstu niż jest w stanie wyświetlić.

• scroll — pobierając wartość tej właściwości, poznasz aktualny numer wyświetlanej linii (pierwszej od góry pola tekstowego). Możesz także zmienić wartość właściwości, aby pole tekstowe wyświetlało inne linie.

• maxscroll — ta właściwość zwraca maksymalną wartość, jaką może przyjąć właściwość scroll. Możesz ją tylko odczytywać.

Aby zrozumieć działanie tych właściwości, musisz poznać zasadę numerowania linii w polu tekstowym. Przypuśćmy, że zmiennej myText przypisałeś wartość tekstową składającą się z 10 linii. Jeśli chcesz użyć tego tekstu w dynamicznym polu tekstowym o nazwie article, które potrafi wyświetlić naraz co najwyżej pięć linii tekstu, pozostałe pięć linii ze zmiennej myText nigdy nie zostanie wyświetlone. Aby przewinąć tekst w polu tekstowym i wyświetlić linie od 2. do 6. (a nie od 1. do 5.), możesz utworzyć klon przycisku i przypisać mu następujący skrypt:

on(release){

article.scroll = article.scroll + 1;

lub

on(release){

--> article.scroll++;[Author:RJ]

}

Właściwość maxscroll zwraca maksymalny numer górnej linii wyświetlanej w polu tekstowym. W poprzednim przykładzie (10 linii) właściwość maxscroll była równa 6. Jeśli tekst wyświetlany w polu tekstowym article posiadałby 20 linii, właściwość maxscroll byłaby równa 16.

Na CD-ROM-ie! Na CD-ROM-ie w katalogu ch25\scrollProps znajduje się film Flasha scrollProp_simple.fla. Film korzysta z właściwości scroll, więc jesteś w stanie zobaczyć w polu tekstowym całą wypowiedź Abrahama Lincolna. Bardziej zaawansowany mechanizm przewijania tekstu, wykorzystujący przeciągalny pasek przewijania, znajdziesz w pliku scrollProp_advanced.fla.

Manipulacja tekstem za pomocą obiektu Selection

Na końcu tego rozdziału omówimy jeszcze obiekt Selection, który jest nowością we Flashu 5. Jest podobny do obiektu Mouse — nie tworzy się jego klonów, ponieważ naraz aktywne może być tylko jedno pole tekstowe. We Flashu 4 nie miałeś możliwości sprawdzenia, które pole jest aktywne. Mogłeś wyłączyć żółty prostokąt dla pól tekstowych i klonów przycisków, ale nie miałeś kontroli nad kolejnością przełączania się pól po naciśnięciu klawisza Tab i nie potrafiłeś automatycznie aktywować wybranego pola tekstowego.

Obiektu Selection możesz używać dla wejściowych i dynamicznych pól tekstowych. Do części operacji obiekt Selection wykorzystuje nazwę zmiennej przypisanej do pola tekstowego. W następnych sekcjach omówimy metody obiektu.

Metoda getBeginIndex

Metoda ta wykrywa i zwraca początek zaznaczonego tekstu w polu tekstowym. Jeśli nie ma aktywnego pola tekstowego lub nie jest w nim zaznaczony żaden tekst, funkcja zwraca wartość -1. Podobnie jak w przypadku obiektu typu Array, indeks zaznaczonego tekstu liczony jest od zera. Dla tej metody nie musisz określać docelowej ścieżki, ponieważ w polu tekstowym może być zaznaczony co najwyżej jeden fragment tekstu. Korzystając ze zmiennej startIndex, pokażemy zasadę działania metody getBeginIndex():

onClipEvent(mouseMove){

startIndex = Selection.getBeginIndex();

trace("startIndex = " + startIndex);

}

Dopóki w filmie nie zaznaczysz dowolnego fragmentu tekstu (rysunek 25.3), w oknie Output będzie się pojawiał komunikat startIndex = -1.

Rysunek 25.3. Pole tekstowe, w którym indeks początku zaznaczenia wynosi 3

Na CD-ROM-ie! Na CD-ROM-ie w katalogu ch25\SelectionObject w pliku getBeginIndex.fla znajduje się film, dzięki któremu poznasz wartości zwracane przez metodę getBeginIndex(). W tym samym katalogu znajdziesz także przykładowe filmy przedstawiające pozostałe metody.

Metoda getEndIndex

Ta metoda jest bardzo podobna do metody getBeginIndex(), ponieważ zwraca indeks końca zaznaczonego tekstu w polu tekstowym (rysunek 25.4). Jeśli nic nie jest zaznaczone, metoda zwraca wartość -1.

Rysunek 25.4. Pole tekstowe z indeksem początku zaznaczenia wynoszącym 5 i indeksem końca równym 9

Metoda getCaretIndex

Ta metoda obiektu Selection zwraca indeks określający aktualną pozycję kursora w aktywnym polu tekstowym (rysunek 25.5). Podobnie jak w przypadku poprzednich dwóch metod, jeśli w czasie wywołania metody getCaretIndex() nie ma kursora w żadnym polu tekstowym, zwracana jest wartość -1.

Rysunek 25.5. Pole tekstowe z indeksem położenia kursora wynoszącym 5

Metoda getFocus

Metoda zwraca nazwę zmiennej przypisanej do aktywnego pola tekstowego razem z pełną ścieżką do niej; jeśli zaznaczyłeś pole lub umieściłeś kursor wewnątrz pola tekstowego (na przykład z przypisaną zmienną o nazwie myOutput) znajdującego się na głównej listwie czasowej, wywołanie metody Selection.getFocus() zwróci wartość _level0.myOutput. Jeśli żadne pole tekstowe nie jest aktywne, metoda zwróci wartość null.

Metoda setFocus

Prawdopodobnie jest to najważniejsza metoda obiektu Selection. Za jej pomocą możesz uaktywnić dowolne pole tekstowe — użytkownik nie musi kliknąć pola, aby w nim pisać. Korzystanie z metody jest bardzo proste: po prostu wywołaj metodę setFocus() obiektu Selection, a jako jej argument wpisz absolutną ścieżkę adresową pola tekstowego (a dokładniej — ścieżkę przypisanej do niego zmiennej):

onClipEvent(load){

Selection.setfocus("_root.testInput");

}

Powyższy skrypt przypisany do pustego klonu pliku filmowego powoduje uaktywnienie pola tekstowego z przypisaną zmienną testOutput. Jeśli w polu tekstowym znajduje się jakikolwiek tekst, zostanie on w całości zaznaczony. Argumentem metody setFocus() musi być wartość tekstowa. Jeśli użyjesz następującego skryptu:

myTextField = _root.testOutput;

Selection.setfocus(myTextField);

metoda setFocus() nie zadziała. Dlaczego? W pierwszej linii zmiennej myTextField przypisaliśmy wartość zmiennej _root.testOutput, a nie jej nazwę. Aby zapobiec takiej sytuacji, po prostu nazwę pola tekstowego (przypisanej do niego zmiennej) umieszczaj w cudzysłowach:

myTextField = "_root.testOutput";

Selection.setfocus(myTextField);

Metoda setSelection

Ostatnią metodą obiektu Selection jest setSelection(). Ta metoda pozwala zaznaczyć fragment tekstu w aktywnym polu tekstowym z poziomu języka ActionScript. Metoda przyjmuje dwa argumenty: indeks początku i końca zaznaczenia. Numeracja indeksu jest taka sama jak w metodach getBeginIndex() i getEndIndex(). Ta metoda nie działa, jeśli żadne z pól tekstowych nie jest aktywne. Poniższy skrypt powoduje zaznaczenie fragmentu tekstu między indeksami 5 i 9 pola tekstowego testInput:

onClipEvent(load){

Selection.setFocus("_root.testInput");

Selection.setSelection(5,9);

}

Na CD-ROM-ie! Daniel Szecket z Magritte's Cow (www.magrittescow.com) przygotował parę przykładów zastosowania metod obiektu Selection. Przykłady znajdują się na CD-ROM-ie w katalogu ch25\SelectionObject\daniel_szecket. Ćwiczenie eksperta jego autorstwa znajdziesz w rozdziale 35., „Format RealMedia”.

Podsumowanie

• W polach tekstowych możesz korzystać z formatowania HTML, ale obsługiwane są tylko podstawowe znaczniki formatowania tekstu.

• W wartościach zmiennych przypisanych do wejściowych lub dynamicznych pól tekstowych możesz umieszczać znaczniki HTML. Wszystkie cudzysłowy (") używane w atrybutach znaczników HTML muszą być poprzedzone lewym ukośnikiem (\).

• Parametr asfunction atrybutu HREF znacznika <A> pozwala przypisać funkcję do fragmentu tekstu pola tekstowego. Do wywoływanej w ten sposób funkcji możesz przekazać jeden argument.

• Właściwość scroll wejściowego i dynamicznego pola tekstowego pozwala kontrolować, która część tekstu jest wyświetlana w polu tekstowym. Właściwość maxscroll zwraca największy możliwy numer górnej linii (pierwszej linii wyświetlanej w polu), jaki można wpisać do właściwości scroll.

• Obiekt Selection języka ActionScript pozwala sterować zaznaczeniem tekstu oraz aktywnością pól tekstowych w filmie Flasha.

Jeśli w atrybutach znaczników będziesz używał apostrofu ('), nie musisz go poprzedzać lewym ukośnikiem (przyp. tłum).

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

2 C:\helion\f5bpopr\r25-06.doc

Do korekty technicznej: skrócona wersja skryptu.

---