![]() |
Macromedia FlashVýuka Flash (27.) |
||||||||||||||||||||||||||||||||||||||||||||||||||||
Úvodem | Výuka Flash | Odkazy | Aplikace | Otázky a odpovědi |
|||||||||||||||||||||||||||||||||||||||||||||||||||||
Kaskádové stylyMnozí určitě znají kaskádové styly (CSS) především z psaní HTML stránek. Kaskádové styly si můžeme představit jako soubory pravidel, které specifikují, jak má daný text (HTML dokument apod.) po vzhledové stránce vypadat. Styly využijeme zejména tehdy, pokud budeme tvořit rozsáhlejší web, na kterém se bude nacházet spousta formátování textu (tučné, odsazení, barva pozadí apod.). V případě, že bychom poté chtěli něco na webových stránkách změnit, museli bychom měnit jednotlivé části zvlášť. Pomocí CSS si vytvoříme jednotlivé styly, které budeme aplikovat na daný text a při nutné změně se nám efektivnost značně zvýší. Pomocí CSS můžeme vytvořit tzv. třídy, u kterých specifikujeme, jak má zvolený element vypadat. Název třídy se skládá z úvodní tečky, po které následuje název třídy. Po názvu třídy se nacházejí závorky "{ a }", mezi které vepisujeme vlastnosti, jak má být daný text formátován. Přiřadit tuto třídu danému HTML tagu můžeme jednoduše pomocí atributu class. <font class="font1"></font> .font1 { font-family: Verdana; color: #FF8000; font-weight: bold; } Výsledek: Testovací CSS text. Jak si můžeme všimnout, tak se již do atributu class tečka nepíše. Jednotlivé třídy se nejčastěji vkládají do externího "*.css" souboru, který je poté vložen do stránky. Druhou možností je také umístění do tagu style v HTML stránce: <style type="text/css"> .font1 { font-family: Verdana; color: #FF8000; font-weight: bold; } </style> Nyní si ukážeme jednotlivé CSS vlastnosti, které můžeme využít při formátování textu ve Flashi. V následující tabulce nalezneme seznam CSS vlastností, ActionScript vlastností a jejich možné hodnoty.
V následující tabulce si ukážeme seznam HTML tagů, na které můžeme použít formátování ve Flashi.
K práci se styly slouží v ActionScriptu třída StyleSheet. Poté, co vytvoříme její instanci, můžeme importovat do dokumentu zvolený soubor obsahující definice stylů. // Vytvoříme instanci CSS třídy. var testCSS = new TextField.StyleSheet(); // Načteme soubor se styly. testCSS.load("styl.css"); // Ošetříme neúspěšné načtení stylu. testCSS.onLoad = function(status) { if (status) { trace("Načtení proběhlo úspěšně!"); } else { trace("Načtení neproběhlo úspěšně! Zkontrolujte existenci souboru!"); } } K tomu, aby byl příklad plně funkční musíme umístit do stejného adresáře styl jménem "styl.css". Na následujícím příkladě si ukážeme plně funkční ukázku formátování textu v textovém poli. Nejprve si ukážeme styl (styl.css), který bude aplikován na zadaný text: p{ font-family : Verdana; font-size: 16px; display: inline; } .barevny{ color: #FF6600; font-weight : bold; } a{ color: #0000FF; } a:hover{ color: #FF0000; font-weight : bold; } Nyní již následuje kód, který bude obstarávat formátování uvnitř textového pole. // Vytvoříme instanci CSS třídy. var testCSS = new TextField.StyleSheet(); // Načteme soubor se styly. testCSS.load("styl.css"); // Nadefinujeme si HTML text. var textHTML:String = "<p>Toto je testovací ukázka HTML, které bude Celý příklad je možné stáhnout si zde.
ZávěrPro tento díl to bude vše. V příštím díle budeme pokračovat v poznávání Flashe.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||