CSS

8 jun, 2009

Aplicar estilo CSS com Action Script 2.0

Publicidade

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. 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 onde 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 objeto 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 estendida. 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 <a
href='http://www.onblogs.com.br/blog_do_jonathan'>aqui</a>
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.