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.



