Formatowanie tekstu w dynamicznych polach tekstowych za pomocą zewnętrznych arkuszy styli CSS oraz znaczników HTML. Style CSS i znacznik img są implementowane od wersji Flash MX 2004.
Nie wpadajmy jednak w zbytnią euforię Flash obsługuje tylko nieznaczna część znaczników HTML i właściwości styli CSS.
Jednak do stworzenia ciekawych i estetycznie wyglądających tekstów implementacja jest wystarczająca. Jako że nauka CSS i HTML nie jest przedmiotem tego tematu nie będę opisywał ich działania, zainteresowanych odsyłam do wspaniałego kursu HTML i CSS autorstwa Sławka Kokołowskiego . Wymienię jednak te, które Flash implementuje (wykonuje):
CSS
text-align – left, centem, right
text-size – wartość liczbowa
text-decoration – none, underline
margin-left – wartość liczbowa
margin-right – wartość liczbowa
font-weight – normal, bold
font-style – normal, italic
font-indent – wartość liczbowa
font-family – typ czcionki
color – wartość hex kolorów, nazwy kolorów nie są odczytywane
display – inline, block, none Warto wspomnieć, że przy podawaniu wartości liczbowych możemy pomijać jednostki rozmiaru, Flash nie rozróżnia px czy pt .
HTML
<a> – href, target
<b>
<font> – color, face, size
<img> – src(jpeg, swf), id, width(px), height(px), align(left, right), hspace, vspace. Można ładować pliki zewnętrzne jak i pliki z biblioteki o podanym identyfikatorze (linkage)
<i>
<li>
<p> – align(left, right, center), class
<span> – class
<u>
<textformat> – indent, loading, leftmargin, rightmargin
Znacznik taxtformat nie wchodzi w skład HTML jest on obsługiwany jedynie w środowisku autorskim Flasha, odpowiada za wcięcia akapitów odstępy pomiędzy wierszami i marginesy.
Zacznijmy działać
Otwieramy nowy dokument Flasha. Otwieramy panel Components (Ctrl+F7) klikamy na listę UI Components i za pomocą myszki przenosimy komponent TextArea na scenę. Użyjemy tego komponentu z prostego powodu; oferuje on nam pasek przewijania, więc jest idealny w zastosowaniu dla wyświetlanego tekstu.
Zaznaczamy myszką komponent na scenie i w panelu Properties (standardowo na dole ekranu) ustawiamy w polach W i H (width i height) jakieś sensowne rozmiary np. 550 i 400. Oczywiście pole tekstowe musi mieścić się w obrębie sceny 🙂 Za pomocą panelu Align (Ctrl+K) ustawiamy jego współrzędne x i y na 0. Warto wspomnieć tutaj o tym, że współrzędne x i y muszą leżeć na pełnych wartościach niezawierających ułamków, może to być x=7 i y = 3, ale nie x=7.3 i y = 3, 2.
Zaglądamy jeszcze raz do panelu Properties i w okienku Components (<Instance Name>) nadajemy polu tekstowemu unikalna nazwę np. my_txt. Dzięki temu będziemy mogli odwoływać się do niego poprzez ActionScript.
Rozciągamy warstwę na 3 klatki (zaznaczając myszką 2 i 3 klatkę i wciskając klawisz F5). Zostawiamy pole tekstowe w spokoju, nic więcej nie będziemy musieli przy nim robić, dla świętego spokoju blokujemy warstwę z nim poprzez kliknięcie na ikonie kłódki w etykiecie warstwy.
Tworzymy nowa warstwę nad obecną, dzielimy ją na 3 ujęcia kluczowe(F6). Przygotowujemy obrazek *.jpg o wymiarach 100x100px (nazwa: grafika_1). Przygotowujemy filmik *.swf o wymiarach 100x100px (nazwa: flash_1).
Przygotujemy teraz plik CSS i TXT, z których Flash będzie pobierał dane. Plik CSS (nazywamy go: my_style): Plik TXT (nazywamy go: tekst):
Dysponując plikami my_style.css, tekst.txt oraz grafika_1.jpg i flash_1.swf zapisanymi w folderze razem z plikiem, Flasha przechodzimy ponownie do jego edycji zaznaczając 1 klatkę najwyższej warstwy.
Wciskamy klawisz F9, otwierając tym samym edytor ActionScriptu dla danej klatki. Wstawiamy w niej kod:
System.useCodepage = true;my_txt.html = true;my_txt.multiline = true;my_txt.wordWrap = true;var cssPath:String = "my_style.css";var textPath:String = "tekst.txt";var myStyle:TextField.StyleSheet = new TextField.StyleSheet();var myText:LoadVars = new LoadVars();
Kod ten ma za zadanie pozwolić poprawne wyświetlanie polskich znaków z wczytanych plików, ustawia parametry pola tekstowego my_txt. Zmienne cssPath i textPath przechowują ścieżki do pliku *.css i *.txt. Oraz tworzą dwa obiekty myStyle i myText do pierwszego wczytamy style do drugiego treść. Kod dla drugiej klatki:
myStyle.onLoad = function(succes) {if (succes) {my_txt.styleSheet = this;gotoAndStop(3);} else {my_txt.text = "Błąd przy wczytywaniu styli";}};myStyle.load(cssPath);stop();
Kod w tej klatce wczytuje plik *.css podany w zmiennej cssPath, jeżeli plik zostanie pobrany pomyślnie do pola tekstowego my_txt zostanie dołączone formatowanie i film przejdzie do 3 klatki, jeżeli wczytywanie się nie powiedzie zostanie wyświetlony komunikat o błędzie. Kod dla trzeciej klatki:
myText.onLoad = function(succes) {if (succes) {my_txt.text = this.tekst;} else {my_txt.text = "Błąd przy wczytywaniu treści";}};myText.load(textPath);
Kod wczytuje dane z pliku podanego w zmiennej textPath i wyświetla je w polu my_txt, jeżeli operacja się nie powiedzie dostaje wyświetlony komunikat o błędzie. Kolejność ładowanie CSS i treści nie jest przypadkowa, poprawnym jest ładowanie w pierwszej kolejności styli a po nich treści.
Sprawdzamy nasz film (Ctrl+Enter), jeżeli wszystko zrobiliśmy prawidłowo zobaczymy sformatowany tekst i obrazki.
Plik css_1
Film został podzielony na trzy klatki, aby zwiększyć czytelność jego struktury, nic nie stoi na przeszkodzie, aby cały skrypt umieścić tylko w jednej klatce zagnieżdżając funkcję wczytującą treść w funkcji wczytującej style:
System.useCodepage = true;my_txt.html = true;my_txt.multiline = true;my_txt.wordWrap = true;var cssPath:String = "my_style.css";var textPath:String = "tekst.txt";var myStyle:TextField.StyleSheet = new TextField.StyleSheet();var myText:LoadVars = new LoadVars();myStyle.onLoad = function(succes) {if (succes) {my_txt.styleSheet = this;myText.onLoad = function(succes) {if (succes) {my_txt.text = this.tekst;} else {my_txt.text = "Błąd przy wczytywaniu treści";}};myText.load(textPath);} else {my_txt.text = "Błąd przy wczytywaniu styli";}};myStyle.load(cssPath);
Plik css_2
Marek Redesiuk . .
