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.

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