PESQUISA: 

 

Fórum de Flash
Fórum de discussão sobre Flash moderados por especialistas.

tutoriais
Os melhores tutoriais de Flash escritos em Português.

open sources
Milhares de "open sources" devidamente catalogadas e classificadas.

jogos
Centenas de viciantes jogos desenvolvidos em Flash.

websites
Selecção dos melhores websites em Flash.

bibliotecas
Bibliotecas de software, componentes, fontes e sons para Flash.

artigos
Artigos técnicos indispensáveis para profissionais em Flash.

Newsletter
Receba todos os dias a newsletter do Flash Web Training com as principais notícias sobre tecnologia e informática.
 
Curso Online
Curso de Flash 5 e MX com acompanhamento de formadores especializados.
 
flash shopping
Online Store com os melhores produtos dedicados ao Flash.
 
conferências
Principais conferências e eventos sobre Internet e Novas Tecnologias.
 
job opportunities
Anúncios de emprego para empresas que procuram profissionais de Flash.
 
suporte técnico
Caso tenha alguma dificuldade, contacte o nosso suporte técnico.

 

 
Homepage Tutoriais Avançados

Ficha Técnica
Autor: Flash Web Training
Versão: Flash MX 2004
Dificuldade: Avançado
Data de Publicação: 23/03/2004


Introdução

Uma nova funcionalidade do Flash MX 2004, é a habilidade de se poder importar informação CSS (Cascading Style Sheets) a partir de um ficheiro de texto. Em vez de termos um grande bloco de texto que usa a mesma fonte, cor, e estilo, poderemos usar as CSS para definir as propriedades de texto sem ter que quebrar o texto em múltiplos campos.

Este tutorial vai tentar ensinar-vos a maneira de aplicar uma estilo de CSS externo para a nossa animação. Mais à frente, vamos entender quais as tags CSS que são suportadas, e a maneira de poderem criar as vossas próprias tags CSS dentro do próprio Flash.

Ficheiro Swf


Downloads:

Flash Player icon Ficheiro Fla Tutorial em PDF

Como criar um tamanho de CSS para o vosso texto:

1. Criem um novo documento no Flash MX 2004. Atribuam medidas suficientemente grandes para que possam ver algum texto disposto.

2. Agora, cliquem sobre a ferramenta de texto na vossa caixa de ferramentas no lado esquerdo. No painel de Properties, seleccionem a opção de Dynamic Text:

3. Uma vez que tenham seleccionada a opção de Dynamic Text, desenhem uma caixa de texto na vossa stage. Façam a vossa caixa de texto grande o suficiente de maneira a que possam visualizar algumas linhas de texto sem problemas:

4. Com a caixa de texto desenhada, necessitaremos de fazer um pequeno ajustamento usando o painel de Properties. No vosso painel de Properties, certifiquem-se que a opção de Multiple No Wrap está seleccionado, e igualmente certifiquem-se que a opção de Render Text as HTML está igualmente seleccionado.

5. No lado esquerdo do painel de Properties, assegurem-se que renomeiam a vossa <instance name> para a palavra output.

6. Vamos começar a adicionar algumas actions. Seleccionem a primeira frame e pressionem a tecla de F9, para activarem a janela de Actions. Copiem e colem no painel das Actions o seguinte código:

var format = new TextField.StyleSheet();
var path = "http://www.nomedosite.com/flash.css";
var quick = "<br><p class='one'>Isto e somente um exemplo deste tutorial.</p><br><p class='two'> Isto e somente um exemplo deste tutorial.</p><br><p class='three'> Isto e somente um exemplo deste tutorial.</p><br><p class='four'> Isto e somente um exemplo deste tutorial.</p>";
format.load(path);
format.onLoad = function(loaded) {
if (loaded) {
output.styleSheet = format;
output.text = quick;
} else {
output.text = "Erro ao ler o ficheiro CSS!";
}
};

7. Vamos ao menu File, e escolhemos a opção de Publish Preview e de seguida HTML. Deveremos ver de seguida a nossa animação disposta no browser. Poderemos notar que a animação está formatada de uma maneira similar à animação que se fui anteriormente.

De momento temos uma animação a correr, é realmente benéfico para nós se entendermos a maneira como o código funciona, e a maneira como é disposto na animação.

Explicação do Código

Vamos tentar explicar porque razão o código funciona da maneira que poderemos ver quando testamos:

var format = new TextField.StyleSheet();

Antes de podermos começar a utilizar as CSS no Flash, devemos primeiro criar um novo objecto para podermos controlar o fluxo de informação da CSS através da nossa animação. Esta linha cria um novo estilo de objecto para ser utilizado no Flash. A variável format será usada no lugar de new TextField.StyleSheet();

Uma nota mais importante é que a variável format terá agora acesso a todos os métodos que uma Style Sheet Class tem. Por exemplo, poderemos simplesmente escrever format.load para ler um ficheiro CSS.

var path = " http://www.nomedosite.com/flash.css";

 

Esta linha específica a localização do ficheiro CSS que será lido no Flash.

var quick = "<br><p class='one'> Isto e...";

A variável quick contém o texto que será disposto na caixa de texto. A linha actual é bastante extensa, de modo que só reproduzimos parte dela. Como podem notar, o texto está formatado com as tags HTML. As tags de HTML serão reproduzidas propriamente porque, se bem se lembram, utilizamos a opção de Render Text como um botão HTML, nas propriedades do texto.

format.load(path);
Nesta linha, dizemos ao Flash para ler um ficheiro CSS para o formato do objecto. Lembrem-se que o formato é somente uma extensão do objecto/class TextField.StyleSheet() que lemos anteriormente.
format.onLoad = function(loaded) {
if (loaded) {
output.styleSheet = format;
output.text = quick;
} else {
output.text = "Error loading CSS file!";
}
};

Esta função aplica um formato CSS para o campo de texto que criamos para o nosso filme. Antes de aplicarmos o ficheiro CSS, tivemos a preocupação de dizer ao Flash para ler primeiramente o ficheiro CSS antes de expor o texto no campo de texto. Somente depois do ficheiro CSS ser lido, iremos dizer ao Flash para transferir a informação contida em format e o texto em HTML contido em quick para o campo de texto chamado output.

Está claro, que existem momento em que o ficheiro CSS poderá não ler, devido a um caminho de URL mal inserido. Devido a tal, foi inserido um comando para que fosse disposta uma mensagem de erro caso o ficheiro CSS não fosse totalmente lido. Poderemos testa-lo, inserindo uma linha de URL aleatória na variável Path e prevendo de seguida a animação.

Pequena revisão

Vamos tentar nesta secção, fazer uma pequena revisão da nossa animação. Primeiramente, temos um campo de texto chamado output. Ao mesmo tempo aparece a caixa de texto, e o código atribuído a correr por detrás. Primeiro, para a variável format são atribuídos todos os poderes do Textfield.StyleSheet objecto/classe. O seguinte passo é identificar o caminho do ficheiro CSS e o texto que será disposto no campo de texto será criado.

A secção de código é concluída com a função que é activada quando ficheiro é lindo (onLoad). Primeiro, o Flash certifica-se de que o ficheiro CSS é lido, e se o ficheiro CSS é lido, o estilo de texto é aplicado ao campo de texto, e finalmente o texto HTML é disposto no campo de texto igualmente. Está claro, de que o texto HTML é gerado o texto formatado de acordo com o estilo definido na CSS.

O ficheiro CSS

Nas ActionScripts, devem ter reparado que existe um ficheiro que seria lido Apartir de um servidor. Ora bem, aqui vamos dar-vos a conhecer o código contido nesse ficheiro CSS.

.one {
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: bold;
color: #396780;
}
.two {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #2D5164;
}
.three {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #1D3441;
}
.four {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #000000;
}

Se analisarmos o texto HTML na variável quick, iremos ver uma que será exposta da seguinte maneira:

<p class='one'>Isto e somente um exemplo deste tutorial.</p>

Notem que a linha cima referida, está formatada de acordo com o estilo “one” retirado do ficheiro CSS. Se quisermos mudar o texto one por four por exemplo, iremos notar que o texto na nossa animação absorve as características definidas no estilo four do ficheiro CSS. Igualmente, se quisermos remover todas as tags <p>, o formato do texto será o que definirmos manualmente no painel de Properties do painel de texto.

Enquanto que as CSS contêm inúmeras propriedades que podem modificar vários elementos das propriedades de texto, a corrente implementação de uma CSS no Flash é um pouco limitada.

A seguinte tabela, vai tentar ilucidar-vos que tags do Flash MX 2004 são suportadas e interpretadas:

A lista que aqui expomos contém várias tags que provavelmente iremos utilizar, mas quando utilizamos um programa como o DreamWeaver para criar as tags de CSS, a maioria das tags geradas por esses programas serão ignoradas pelo Flash. Se por exemplo, o vosso ficheiro CSS incluir uma linha de texto de background-color, o Flash irá simplesmente saltar essa linha e somente irá aplicar as propriedades que ele entende.

Com esta tabela, chegamos ao fim deste tutorial. As CSS podem ser realmente úteis para os sites de Flash, que podem conter grandes volumes de informação, e agora teremos a possibilidade de implementar os estilos de CSS usando somente um simples style sheet.

 

Esperamos que este trabalho vos tenha sido de alguma ajuda para os vossos trabalhos futuros. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.

Bons trabalhos!
Pedro Teixeira

 
« Anterior   
 
Copyright ©2002-2008 Desenvolvimento de Sites , Serviços de Web Design Todos os direitos reservados