Coluna Flash – Utilizando CSS com Flash

Introdução

Hoje vamos entender como o Flash exibe a leitura de um css externo anexado a um texto corrido. É muito útil quando temos muito texto no site e necessitamos atualiza-los de forma dinâmica… um exemplo disso seria você, desenvolvedor, criar dezenas de página, arredondemos para 60, e o cliente resolve que o texto não pode ser mais Verdana, corpo 10, cor 0×666666, e sim, Arial 11, 0×000000, o que fazer?…. A solução natural seria abrir todos os 60 arquivos e alterá-los um a um…. podem ver que o trabalho é no mínimo maçante (um saco), nesse caso, se o desenvolvedor fez o trabalho com CSS (Cascading Style Sheets) ele terá de alterar unicamente o css (um arquivo css), e não mais os 60 arquivos, dessa forma, quando o solicitador pedir para alterar propriedades do texto, você fará até com gosto a manutenção, já que agora ela não mais se tornará despendiosa!

Pré-Requisitos

Este artigo é básico, não é necessário conhecer ActionScript a fundo.
Nível Básico.

Arquivo Final

Objetivo

Aperfeiçoar técnicas de programação dentro do Flash 8.

Conteúdo

No Flash 8, abra um novo documento em branco.

Inicialmente, vamos abrir o painel de components (CTRL+F7), arraste dois TextArea, eles se encontram na árvore UI, onde estão os componentes para formulário.
O nome de instância dos objetos são: texto e exibe, onde texto mostrará o conteúdo textual e exibe mostrará as tags de css disponíveis no documento.
Esses componentes podem ser esticados para melhor visualização.

Abra o Dreamweaver 8, ou, caso não possua o bloco de notas:

Digite o seguinte texto:

.titulo {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#990000;
font-weight:bold;
}
corpo {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10;
color:#000000;
}
corpoDetalhe {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10;
color:#FF0000;
font-style:italic;
}

Nesse tutorial não entrarei em detalhes do css, mas para quem não conhece, basicamente aplicamos fontes, cores e tamanhos diferentes.
Salve-o como estilos.css na mesma pasta que vamos salvar o flash (isso não é obrigatório, porém, para aprendizado fica mais fácil).

Voltando ao Flash 8.

Com isso pronto, o resto é código, criem um novo layer de actions (~AS) e digitem:

/* Importamos a classe TextArea para utilizar o componente de visualização e edição de texto. */
import mx.controls.TextArea;
/* Importamos a classe StyleSheet para o css */
import TextField.StyleSheet;
/* Declaração dos 2 TextArea */
var exibe:TextArea;
var texto:TextArea;
/* Declaração do CSS */
var estilos:StyleSheet = new StyleSheet();
/* Lendo o arquivo .css */
estilos.load(“estilos.css”);
/* Quando ler o css o que fazer? */
estilos.onLoad = function(success:Boolean):Void {
if (success) {
/* Resposta: os campos TextArea poderão ler html e não serão editáveis */
exibe.html = true;
exibe.editable = false;
/* Exibe no TextArea os estilos css convertidos em String (getStylesNames retorna um array, precisamos passar para String, para exibição dos mesmos) */
exibe.text = estilos.getStyleNames().toString();
texto.html = true;
texto.editable = false;
/* No TextArea texto exibimos na propriedade styleSheet o próprio objeto css do onLoad */
texto.styleSheet = this;
/* Texto a ser exibido no texto: Como podemos observar, podemos aplicar os estilos usando o tradicional span class usado no html ou mesmo inserir via xml, com inserção de tags personalizadas, como boa regra de xhtml, toda tag aberta deve ser fechada, não esqueça nunca disso. */
texto.text = “<span class=’titulo’>Macromedia Flash 8</span><br><corpo>Estamos carregando um arquivo CSS externo.<br>O nome do arquivo é <corpoDetalhe>estilos.css.</corpoDetalhe></corpo>”;
}
};

É só salvar o documento na mesma pasta do css agora, a sugestão do nome é styleSheet.fla.
É só testar!

Obs.: Isso também pode (e deve) ser aplicado a textos chamados de fora.
Obs.2: Apesar deste artigo utilizar os componentes, isso não é necessário, aplique isso direto a campos dinâmicos.

Espero que tenham gostado e apliquem isso aos próximos trabalhos em Flash, dúvidas ou sugestões são bem vindas.
Abraços e até a próxima!

Download dos arquivos

Autor: Leandro Amano – Colunista de Flash do MXSTUDIO

Site: www.leandroamano.com.br
Leandro Amano é designer/desenvolvedor Adobe, iniciou sua carreira profissional em 1999, atualmente é Adobe User Group Leader do FlashFor, diretor de criação da Digital Bug e instrutor Oficial na ENG DTP & Multimídia, centro de treinamentos oficiais Adobe/Macromedia, onde ministra a tecnologia Adobe Flash em São Paulo – SP.