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 http://www.kurshtml.boo.pl. 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): Pobierz plik my_style.css (rar) Plik TXT (nazywamy go: tekst): Pobierz plik my_tekst.txt (rar)

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 www.bannerflash.pl. Pliki do pobrania (WinRAR 240KB).