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. 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; //para 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; //para 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.

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; //para 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 para receber dados
 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.

Artigo de  Jonathan Lamim via Imaster

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s