Aplicar estilo CSS com Action Script 2.0

Desde o Flash Player 7 podemos aplicar estilos CSS a caixas de texto geradas como HTML. Para isso temos à disposição a Classe StyleSheet no Action Script 2.0 e no Action Script 3.0. Neste tutorial vamos descrever seu uso na versão 2.0 do Action Script.

Por Softwares Pular para comentários

Desde o Flash Player 7 podemos aplicar estilos CSS a caixas de texto geradas como HTML. Para isso temos ? disposi??o a Classe StyleSheet no Action Script 2.0 e no Action Script 3.0. Neste tutorial vamos descrever seu uso na vers?o 2.0 do Action Script.

COMO FAZER

Para podermos inserir estilos CSS no Flash necessitamos, em primeiro lugar, que o texto a ser formatado seja renderizado como HTML, isto ? independente da vers?o do Action Script utilizada. No tutorial vamos utilizar uma caixa de texto din?mico com nome da inst?ncia "caixa_txt". Escolhemos uma caixa de texto din?mico aonde o c?digo ? igualmente v?lido para aplicar estilos a componentes TextArea e Label cuja propriedade HTML tem o valor TRUE.

A primeira coisa a fazer ? criar um novo objeto StyleSheet, para isso come?amos o c?digo com:

import TextField.StyleSheet; //necess?rio para poder criar o objeto StyleSheet
var estilosCSS:StyleSheet = new StyleSheet();

O passo seguinte ? completar o ebjeto estiloCSS com defini?es de estilos. Isto pode ser feito de duas maneiras.

A primeira op??o ? inserir defini?es de estilo com ActionScript, de forma concreta com o m?todo setStyle. Neste bloco de c?digo cria-se um objeto StyleSheet e insere-se nele uma defini??o de estilo para a etiqueta A, de modo que fique personalizado o aspecto dos links. O m?todo setStyle recebe dois par?metros, o primeiro ? o nome da etiqueta ou a classe a personalizar e o segundo s?o as pr?prias defini?es de estilo expressadas na forma de objeto com propriedades.

C?digo AS 2.0

import TextField.StyleSheet; //necess?rio para poder criar o objeto StyleSheet
var estilosCSS:StyleSheet = new StyleSheet();
var objetoDeEstiloj:Object = new Object();
objetoDeEstiloj.color = "#666666";
objetoDeEstiloj.textDecoration = "underline";
estilosCSS.setStyle("A", objetoDeEstiloj);
delete objetoDeEstiloj;

Esse c?digo ? a vers?o extendida. As ?ltimas cinco linhas podem ser substitu?das por esta, mesmo que seja menos leg?vel:

estilosCSS.setStyle("A", {color:"#666666",textDecoration:"underline"});
Se fixar os nomes das propriedades, ver? que textDecoration ? parecida, mas n?o igual, a text-decoration, propriedade empregada em CSS. Isto indica que se definimos estilos com ActionScript os nomes das propriedades s?o um pouco diferentes e ter?o que ter equival?ncias muito claras. A seguir veremos a correspond?ncia entre propriedades do ActionScript e do CSS.

































































Propriedade CSS Propriedade equivalente ActionScript (v?lido para 2.0 y 3.0)
color color
display display
font-family fontFamily
font-size fontSize
font-style fontStyle
font-weight fontWeight
kerning kerning (somente para arquivos criado sno Windows)
leading leading
letter-spacing letterSpacing
margin-left marginLeft
margin-right marginRight
text-align textAlign
text-decoration textDecoration
text-indent textIndent


At? aqui vimos a primeira maneira de completar um objeto StyleSheet com defini?es de estilo, vejamos agora a segunda op??o, que ? mais interessante.

Essa segunda alternativa consiste em carregar as defini?es a partir de um arquivo externo com o m?todo load. Isto nos permite manter totalmente a independ?ncia entre os estilos e o filme swf, evitando ter que compilar novamente o swf para aplicar as modifica?es. Al?m do mais, n?o teremos que nos preocupar com as propriedades equivalentes em ActionScript j? que este arquivo externo ? uma folha de estilo CSS com as propriedades pr?prias do CSS.

Para chamar o m?todo load ? necess?rio enviar como par?metro a url do arquivo externo que cont?m as defini?es de estilo.

Al?m do mais, dever? ser definida a fun??o que ser? executada para receber e carregar o arquivo externo. Nesta fun??o ter? que ser testado se o arquivo foi carregado corretamente, e se foi, aplicar os estilos ? caixa de texto atrav?s de sua propriedade StyleSheet.

import TextField.StyleSheet; //necess?rio para poder criar o objeto StyleSheet
var estilosCSS:StyleSheet = new StyleSheet(); // criamos o objeto StyleSheet
var texto:String="Clique aqui para mais informa?es."; // texto HTML a formatar
estilosCSS.onLoad = function(success:Boolean) { // fun??o executada para receber dados externos
if (success) { // se o arquivo foi carregado corretamente
caixa_txt.styleSheet = estilosCSS; // aplicamos os estilos
caixa_txt.htmlText = texto; // aplicamos ao texto HTML
} else { // se o arquivo n?o foi carregado corretamente
trace("Erro ao carregar o arquivo CSS");
}
};
estilosCSS.load("folha1.css");

Para finalizar, uma coisa muito importante a ser levada em conta ? que o estilo deve ser aplicado antes do valor do texto HTML, caso contr?rio n?o ser?o aplicados os estilos.

Compartilhe com seus amigos:
Jonathan Lamim
Jonathan Lamim Empreendedor digital, ex-programador (decidi abandonar a carreira após 12 anos), especialista em marketing de conteúdo e agora atuando exclusivamente com Marketing Digital, em projetos de Marketing de Conteúdo, produção de conteúdo para internet, além de escrever ebooks e criar cursos ligados ao marketing digital de um modo geral.
FACEBOOK // TWITTER: @jonathanlamimkt
Quer conversar com o(a) Jonathan, comente:
Carregar comentários
Quantos celulares a Motorola tem em linha?
5(14,90%)
10(55,76%)
15(11,51%)
20(9,48%)
26(8,35%)