Macromedia Flash

Výuka Flash (27.)

Úvodem  |  Výuka Flash |  Odkazy  |  Aplikace  |  Otázky a odpovědi

Kaskádové styly

Mnozí 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.

CSS vlastnost ActionScript vlastnost Seznam využití a možných hodnot
text-align textAlign Zarovnání textu. Dosadit můžeme left (vlevo), center (na střed), a right (vpravo).
font-size fontSize Pouze číselné vyjádření velikosti fontu.
text-decoration textDecoration Dekorace textu. Dosadit můžeme pouze none (žádná) a underline (podtrženo).
margin-left marginLeft Velikost okraje vlevo. Dosadit můžeme pouze číselné vyjádření.
margin-right marginRight Velikost okraje vpravo. Dosadit můžeme pouze číselné vyjádření.
font-weight fontWeight Druh písma. Dosadit můžeme normal a bold (tučné).
font-style fontStyle Styl písma. Dosadit můžeme normal a italic (kurzíva).
text-indent textIndent Odsazení textu. Dosadit můžeme pouze číselné hodnoty.
font-family fontFamily Čárkami oddělený seznam fontů v sestupném pořadí, které budou aplikovány. Následující fonty jsou nahrazeny, mono je převedeno na _typewriter, sans-serif na _sans a na _serif.
color color Hexadecimální vyjádření barvy textu. Jména barev není možné použít.
display display Způsob zobrazení textu. Dosadit můžeme inline, block a none.

V následující tabulce si ukážeme seznam HTML tagů, na které můžeme použít formátování ve Flashi.

Jméno stylu Jak je styl aplikován
p Zahrnuje všechny <p> tagy.
body Zahrnuje všechny <body> tagy. Pokud je definován styl pro tag <p> není jeho vzhled přepsán.
li Zahrnuje všechny <li> odrážky.
a Zahrnuje všechny <a> tagy (odkazy).
a:link Zahrnuje všechny <a> tagy (odkazy). Tento styl je aplikován po každém stylu.
a:hover Zahrnuje všechny <a> tagy (odkazy). Tento styl je aplikován, když nad něj najedeme myší. Po přejetí myší se styl změní na link.
a:active Zahrnuje všechny <a> tagy (odkazy). Tento styl je aplikován, když nad něj klikneme myší. Po uvolnění se styl změní na link.

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 
zformátováno podle zadaného CSS souboru.</p>"; textHTML += "<p> </p>"; textHTML += "<p>Další odstavec v podání <span class='barevny'>barevného
textu</span>.</p>"; textHTML += "<p><a href='http://www.chip.cz/'>Odkaz na www.CHIP.cz</a></p>"; // Ošetříme neúspěšné načtení stylu. testCSS.onLoad = function(status) { if (status) { txtPole.styleSheet = testCSS; txtPole.text = textHTML; } else { trace("Načtení neproběhlo úspěšně! Zkontrolujte existenci souboru!"); } }

Celý příklad je možné stáhnout si zde.

 


Závěr

Pro tento díl to bude vše. V příštím díle budeme pokračovat v poznávání Flashe.

 

Petr Rympler