Formatowanie tekstu za pomocą HTML i CSS, cz. 1

Autor: Marek Redesiuk, dodano: 19-12-2008
Kategoria: Programowanie i tworzenie

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 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).

Ocena 2.57/5 (51.3%) (492 głosów)

Komentarze:

  • Rozwinięcie
    Dodał: Gość data: 2009-11-21
    Może by tak teraz instrukcja krok-po-kroku jak przy pomocy flasha edytować takie pole tekstowe (plik txt), bo podrzucanie za każdym razem nowego jest średnio wygodne ;)

  • Dodał: Gość data: 2011-05-21
    szkoda ze nie ma informacji jak to sie robi w programie ked ^^ pozdrawiam


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.