Aplicar estilo CSS com Action Script 2.0
Canal: Flash | Autor: Jonathan Lamim Antunes | Publicado em: 18/05/2009 | Views: 2.751Desde 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.0import 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 %3Ca href="http://www.onblogs.com.br/blog_do_jonathan"%3Eaqui%3C/a%3E 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.
Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado
crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra.
Você não pode criar obras derivadas.
Action Script: Classe Argument.
Se queremos definir uma função que ace. Próximo artigo
Intercâmbio de dados entre Fla.
Tutorial mostrando como fazer troca de.
Veja matérias relacionadas com o assunto:
| 26/02/2010 | Dreamweaver: Inserindo Botões e Vídeos Flash |
| 09/02/2010 | Vídeo Aula - Vegas - Efeito Lens Flare, brilho no texto |
| 01/12/2009 | Flash: Efeito de foco de luz com mask |
| 13/11/2009 | Criando Barra de Menus em Flash pelo SWF Easy |
| 08/11/2009 | Microsoft Silverlight |
| 29/10/2009 | Aparência Cool Man Flash |
| 23/10/2009 | Flash: Lighter photo animation |
| 09/10/2009 | Flash: Simular Spectrum Analisador de Áudio |
| 21/09/2009 | Crie seu cursor personalizado em FLASH MX |
| 20/09/2009 | Construindo um banner pop up no Flash |









Obrigado!!!
"Eu sou iniciante em web design."
Valeu.
Fiz o código como no tutorial, e o Output diz: "Erro ao carregar o css".
Estou utilizando o AS2.0, já conferi.