SWiSH Forum

Peter

Witam!

Długo szukałem w internecie sposobu na używanie stylu CSS w swishu. Nie mogłem znaleźć nic odpowiedniego i prostego. Znalazłem sposób w dokumentacji do FlashMX 2004 na stronie http://livedocs.adobe.com/flash/mx2004/ . Sposób jest wytłumaczony dość dokładnie na stronie http://www.kirupa.com/developer/mx2004/css.htm i http://www.kirupa.com/developer/mx2004/cssfile.htm Trochę go uprościłem i dostosowałem do Swish-a. Mam nadzieję, że komuś się to przyda.

W pierwszej części tutoriala wytłumaczę jak przygotować pole tekstowe do którego dynamicznie ładowany jest tekst, w kolejnej części wystylizujemy tekst zewnętrznym plikiem stylu (CSS)

Cześć pierwsza:

Pierwszym krokiem jest przygotowanie pola tekstowego
(jest to opisane również w innym temacie http://forum.swish.pl/vie...53d5f1a404e911c)

1) Tworzymy pole tekstowe
2) Tworzymy nazwę pola tekstowego np.: wynik
3) NIE zaznaczamy opcji Target
4) Ustawiamy pole tekstowe jako dynamiczne (Dynamic)
5) Przypisujemy polu dynamicznemu zmienna (Var:) np.: tekst
6) Zaznaczamy opcje (<>) Render text as HTML

Następnie konwertujemy pole tekstowe (Modify > Convert > Convert to Movie Clip) do Movie Clipu.

Nowemu MC nadajemy nazwę PoleTekstu

W zakładce Script dla sceny, w której chcemy wyświetlić nasz tekst, wpisujemy kod:

Kod:

onSelfEvent (load) {
_root.PoleTekstu.loadVariables("pliktekstowy.txt");
}

Teraz otwieramy Notatnik Windows (lub inny edytor tekstu) i tworzymi plik tekstowy:

&tekst=To jest tekst, któremu nadajemy styl zewnętrznym CSS Możemy również wstawić do tekstu link<a href="nogo#">Link</a>
 
Wygląd naszego tekstu jest ograniczony tylko naszą wyobraźnią i ubogim zestawem selektorów i właściwość. Ale o tym później. &

Plik tekstowy musi zaczynać się i kończyć znakiem "&". Na początku tekstu po znaku & wstawiamy zmienną, którą zdefiniowaliśmy wcześniej, podczas tworzenia pola tekstowego. W naszym przypadku jest to tekst.

Zapisujemy tekst z rozszerzeniem .txt (Gdy chcemy wyświetlić polskie znaki kodujemy plik jako UTF-8)

Teraz przechodzimy do tworzenia pliku CSS, który doda styl naszemu tekstowi.

Kod:

.jeden {
color: #0080c0;
font-size: 16px;
}

.dwa {
color: #808080;
font-size: 18px;
}

.trzy {
color: #0080c0;
font-size: 18px;
}

a {
text-decoration: underline;
color: #000000;
font-size: 18px;
}

a:hover {
text-decoration: none;
}

OK.Przechodzimy do drugiej części:

Musimy zmusić swisha do wyświetlenia naszego tekstu wraz ze stylem, który wcześniej przygotowaliśmy.

W zakładce Script dla sceny, w której chcemy wyświetlić nasz tekst, do kodu dopisujemy:

Kod:

var format = new TextField.StyleSheet();
var path = "flash.css";
format.load(path);
_root.PoleTekstu.wynik.styleSheet = format;

co daje nam:

Kod:

onFrame(1) {
_root.PoleTekstu.loadVariables("pliktekstowy.txt");
var format = new TextField.StyleSheet();
var path = "flash.css";
format.load(path);

_root.PoleTekstu.wynik.styleSheet = format;
}

Wyjaśnienie:

Kod:

var format = new TextField.StyleSheet();

Tworzy obiekt, który będzie kontrolował używanie CSS w animacji. W dalszej cześci kodu zmienna format będzie zastępować new TextField.StyleSheet();

Kod:

var path = "swish.css";

Ta linia kodu to ścieżka do pliku CSS. Zmienna path to ścieżka do pliku ze stylem.

Kod:

format.load(path);

W tej linijce obiekt, który umożliwia używanie CSS w animacji (format), ładuje nasz plik css do animacji.

Kod:

_root.PoleTekstu.wynik.styleSheet = format;

Teraz przypisujemy polu tekstowemu, które znajduje się w MC PoleTekstowe, nasz styl CSS.

Zapisujemy naszą animację.
Wszystkie pliki naszej anicmaji (plik tekstowy, styl css i samą animację) Muszą znajdować się w tym samym folderze.

I to wszystko. Klikamy Play Movie. Teraz tekst wygląda ładnie, dba o to styl CSS.

Kilka uwag na koniec:

Tekst nie może być maskowany!

Flash Player interpretuje tylko niewielką liczbą selektorów i właściwośći.
Lista ta, pochodząca ze strony http://livedocs.adobe.com/flash/mx2004/, przedstawia obsługiwane właściwości.

text-align
Recognized values are left, center, and right.

font-size

Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

text-decoration
Recognized values are none and underline.

margin-left
Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

margin-right
Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

font-weight
Recognized values are normal and bold.

font-style
Recognized values are normal and italic.

text-indent
Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

font-family
A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. If you specify a generic font name, it will be converted to an appropriate device font. The following font conversions are available: mono is converted to _typewriter, sans-serif is converted to _sans, and serif is converted to _serif.

color
Only hexadecimal color values are supported. Named colors (such as blue) are not supported. Colors are written in the following format: #FF0000.

display
Supported values are inline, block, and none.