r25-07.doc

(132 KB) Pobierz
Action Script. Podstawy.

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:robert@theMakers.com

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

mailto:jon@theflashbible.com

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:robert@theMakers.com\">Robert Reinhardt</A> &amp; <A HREF=\"mailto:jon@theflashbible.com\">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:robert@theMakers.com\">Robert Reinhardt</A> & <A HREF=\"mailto:jon@theflashbible.com\">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++;

...

Zgłoś jeśli naruszono regulamin