Basicamente não mudou nada, apenas a forma de chamar o evento enter frame.Vou seguir os mesmos passos do artigo anterior, explicando passo a passo. Faremos dois relógios, um analógico e outro digital.

Primeiro vamos entender a classe Date. Através desta classe podemos manipular todos os elementos relacionados a tempo, ou seja, hora, minuto, milésimos, dia, ano, etc. A utilização desta classe é muito simples e pode ser usado em qualquer trabalho que necessite de manipulação de tempo. Seja somente exibir a data e hora, como para algo mais especifico. Neste artigo vamos nos reter a somente fazer o relógio.

Primeiro passo: Precisar ter pelo menos o Flash CS3 instalado para poder trabalhar com o ActionScript 3.0.

Segundo passo: Desenhar o relógio, vou estar disponibilizando para download o design do relógio. Mas quem desejar criar o próprio, pode usar as ferramentas de desenho do flash, ou usar outro software. Vamos fazer dois relógios, um será somente analógico e o outro digital.

Obs.: O ponto de registro dos ponteiros devem ficar na parte central inferior, ou seja, a base do ponteiro, onde irá girar.

Terceiro passo: Após criar os relógios, vamos instanciar os ponteiros que devem ser movieClip e caxa de texto, campo dinâmico, para poder receber os eventos da classe Date.

Os ponteiros, dê os seguintes nomes:

• hora_mc
• minuto_mc,
• segundo_mc;

Caixas de textos:

• hora_txt,
• minutos_txt,
• segundo_txt,
• dia_txt, mes_txt,
• ano_txt,
• semana_txt;

Obs.: Os nomes devem estar sem acento!

Quarto passo: Após dar os respectivos nomes ao objetos, vamos a programação. Crie uma nova layer, e renomeie para ~AS3.0.

Quinto passo: Abra o painel Actions. Indo em Window > Actions ou apertando F9.

Sexto passo: A programação!

Com o painel Actions aberto, vamos inserir a primeira linha:

import flash.events.Event;

Nesta linha, importamos a classe Event, para podermos utilizar o ENTER_FRAME.

Nas próximas linhas vamos zerar a posição dos ponteiros para zero (0).

clockAnalogico_mc.horas_mc.rotation = 0;
clockAnalogico_mc.minutos_mc.rotation = 0;
clockAnalogico_mc.segundos_mc.rotation = 0;

Obs.: Os ponteiros, neste caso, se encontram dentro de um movieClip clockAnalogico_mc.

O próximo código, fará a chamada da função disparar_relogio.

this.addEventListener(Event.ENTER_FRAME, dispara_relogio);

Nesta linha, declaramos um “ouvinte” que chama o evento ENTER_FRAME através da função declarada dentro dos parênteses. Após está linha declaramos a função que receberá todo o corpo do código.

function dispara_relogio(e:Event):void
{
}

Dentro das chaves iremos por todo o código responsável por fazer o relógio funcionar. Primeiro declaramos o objeto da classe Date, com o nome time.

var time:Date = new Date();

Nas linhas seguintes, declaramos as variáveis que iram receber os eventos da classe Date.

var hora:Number;
var minuto:Number;
var segundo:Number;
var semana:Number;
var dia:Number;
var mes:Number;
var ano:Number;
var dataSemana:String;

Após declarado as variáveis, vamos instanciar os eventos as variáveis.

hora = time.getHours();
minuto = time.getMinutes();
segundo = time.getSeconds();
semana = time.getDay();
dia = time.getDate();
mes = time.getMonth();
ano = time.getFullYear();

Para simplificar, hora recebe a hora atual obtida pelo objeto time, que foi declarado no topo deste bloco, e através do método getHours() que obtemos a hora, isso ocorre para os outros eventos, mas obtendo seus respectivos valores.

Nos próximos passos que irmos dar funcionalidade ao relógio, primeiro o analógico.

// Análogico
clockAnalogico_mc.horas_mc.rotation = hora * 30;
clockAnalogico_mc.minutos_mc.rotation = minuto * 6;
clockAnalogico_mc.segundos_mc.rotation = segundo * 6;

Cada ponteiro recebe seu respectivo valor. Nome do objeto instanciado, e a propriedade rotation, que é responsável por fazer o ponteiro girar, como seu valor, recebe o evento hora multiplicado por 30, exemplo: se for 14h o ponteiro será rotacionado 420º em seu eixo, porque 14 * 30 = 420. Isso ocorre o mesmo para os minutos e os segundos, mas ao invés de 30, será multiplicado por 6. Por estar dentro de um evento ENTER_FRAME, o codigo contigo dentro desta função ficará se repetindo infinitamente, até que a aplicação seja fechada. Isso faz com que os ponteiros se movimentem.

E com isso concluímos o relógio analógico. Agora faremos o relógio digital.

Dando continuidade ao código, vamos inserir o código responsável por fazer o relógio digital.

// Digital
clockDigital_mc.hora_txt.text = hora;
clockDigital_mc.minuto_txt.text = minuto;
clockDigital_mc.segundo_txt.text = segundo;

Cada caixa de texto (que estão contidas dentro do movieClip clockDigital_mc) recebe seus respectivos valores, usando os mesmos eventos usados nos ponteiros, mas não iremos multiplicar por valor algum.

Basicamente nosso código está pronto, mas vamos manipular os eventos dia, mês, ano e dia da semana. Como já foi declarado anteriormente, vamos apenas manipulá-lo.

dataSemana = dia + "/" + mes + "/" + ano;
switch (semana)
{
case 1: clockDigital_mc.semana_txt.text = dataSemana + " - Segunda-feira"; break;
case 2: clockDigital_mc.semana_txt.text = dataSemana + " - Terça-feira"; break;
case 3: clockDigital_mc.semana_txt.text = dataSemana + " - Quarta-feira"; break;
case 4: clockDigital_mc.semana_txt.text = dataSemana + " - Quinta-feira"; break;
case 5: clockDigital_mc.semana_txt.text = dataSemana + " - Sexta-feira"; break;
case 6: clockDigital_mc.semana_txt.text = dataSemana + " - Sábado"; break;
default: clockDigital_mc.semana_txt.text = dataSemana + " - Domingo"; break;
}

A variável dataSemana que é do tipo String, recebe o arranjo de dia/mes/ano, para ser usado dentro da instrução switch, que detecta qual e o dia da semana, e escreve na caixa de texto semana_txt (que esta dentro do movieClip clockDigital_mc) o arranjo da data junto com o dia da semana. Os valores obtidos pelo método getDay() vai de zero (0) a seis (6), respectivamente, Domingo, segunda-feira,…

Nosso código completo fica assim:

import flash.events.Event;
clockAnalogico_mc.horas_mc.rotation = 0;
clockAnalogico_mc.minutos_mc.rotation = 0;
clockAnalogico_mc.segundos_mc.rotation = 0;
this.addEventListener(Event.ENTER_FRAME, dispara_relogio);
function dispara_relogio(e:Event):void
{
var time:Date = new Date();
var hora:Number;
var minuto:Number;
var segundo:Number;
var semana:Number;
var dia:Number;
var mes:Number;
var ano:Number;
var dataSemana:String;
hora = time.getHours();
minuto = time.getMinutes();
segundo = time.getSeconds();
semana = time.getDay();
dia = time.getDate();
mes = time.getMonth();
ano = time.getFullYear();
// Análogico
clockAnalogico_mc.horas_mc.rotation = hora * 30;
clockAnalogico_mc.minutos_mc.rotation = minuto * 6;
clockAnalogico_mc.segundos_mc.rotation = segundo * 6;
// Digital
clockDigital_mc.hora_txt.text = hora;
clockDigital_mc.minuto_txt.text = minuto;
clockDigital_mc.segundo_txt.text = segundo;
dataSemana = dia + "/" + mes + "/" + ano;
switch (semana)
{
case 1: clockDigital_mc.semana_txt.text = dataSemana + " - Segunda-feira"; break;
case 2: clockDigital_mc.semana_txt.text = dataSemana + " - Terça-feira"; break;
case 3: clockDigital_mc.semana_txt.text = dataSemana + " - Quarta-feira"; break;
case 4: clockDigital_mc.semana_txt.text = dataSemana + " - Quinta-feira"; break;
case 5: clockDigital_mc.semana_txt.text = dataSemana + " - Sexta-feira"; break;
case 6: clockDigital_mc.semana_txt.text = dataSemana + " - Sábado"; break;
default: clockDigital_mc.semana_txt.text = dataSemana + " - Domingo"; break;
}
}

É isso ai, duvidas só postar em comentários.

Arquivos: Design do Relógio.

Até++!

Nesta última parte dessa série sobre as novidades do Flash CS5 vou mostrar para vocês as novidades do painel de Ações, o novo painel Code Snippets, novas opções no painel de Erros e sobre a integração com o Flash Builder.

Novidades do painel de Ações

Se tinha alguma coisa no Flash que precisava urgentemente de mudanças esse com certeza era o painel de Ações. Depois de algumas novas funcionalidades vindas no Flash CS3, o painel de ações foi deixado de lado na versão CS4 mas na versão CS5 trouxe melhorias a muito tempo pedido pelos desenvolvedores.

A principal melhoria, é que agora é possível usar Code Hints para Classes customizadas e importadas. O recurso Code Hints para quem não conhece exibe no painel de ações os métodos e propriedades que um determinado objeto possa ter, além dos parametros da funções, e esse recurso só funcionava para Classes e funções que vem com o Flash.

Além do Code Hints, agora o painel de Ações automaticamente fecha blocos de ações que usam chaves. Ao criar um bloco de comandos e usar o abre chave ({) e for para a próxima linha, o Flash automaticamente insere um fecha chave (}) evitando assim algum erro sintaxe.

Outra novidade do painel de Ações é que ele automaticamente importa as Classes que estiver usando. Por exemplo, se você estiver criando uma Classe e nessa Classe você for usar um MovieClip, você é obrigado a importar a Classe MovieClip para que sua Classe funcione corretamente, então você tem que saber que a Classe MovieClip se encontra dentro do pacote flash.display.MovieClip. Com o recurso de automaticamente importar a Classe, você não precisa mais ter que decorar em quais pacotes cada Classe fica.

Novo painel Code Snippets

Uma novidade bem bacana é o painel Code Snippets. Nesse painel você encontra diversos códigos prontos para serem usados (algumas ações precisa que um objeto no qual deseja atribuir a ação esteja selecionado), eliminando a necessidade de ficar escrevendo sempre os mesmos códigos. Para usar esse painel, vocês escolhem quais das ações que deseja usar e só precisam clicar duas vezes sobre ela que o painel de Ações será aberto com as ações para aquela opção.

Outra forma de uso do painel, é selecionar qual ação que deseja, clicar com o botão direito do mouse e selecionar a opção Copy to clipboard. O Flash irá exibir uma mensagem dizendo que a ação foi copiada para seu clipboard e vai pedir para você abrir o painel de ações e colar as ações nele.

No próprio painel existem dois botões com as mesmas funcionalidades citadas acima, o primeiro botão com o símbolo de um frame com ações (com o @) ao ser clicado copia as ações para o frame atual e o segundo botão com dois quadrados copia as ações para seu clipboard.

A parte mais legal desse painel é a possibilidade de adicionar novos códigos a ele e compartilhar com outros usuários seus códigos. Para adicionar novos códigos ao painel, basta abrir o painel e clicar no botão Options (um botão em forma de uma engrenagem) e selecionar a opção “Create New Code Snippet”.

Uma nova janela se abrirá, nela podemos inserir um nome para a Ação que estamos criando, uma descrição que será mostrada quando o mouse estiver sobre a ação no painel, se tiver alguma ação no painel de Ações selecionada e clicar no botão Auto Fill o Flash preenche o campo Code com ela, o campo code preenchemos com as ações que queremos adicionar ao painel e por último podemos selecionar a última opção caso desejamos que o Flash automaticamente coloque no lugar de instance_name_here a instancia do objeto selecionado (forçando o usuário a selecionar um objeto para aplicar determinada ação).

Ao terminar de criar um novo Snippet, ele será criado dentro de uma pasta chamada Custom. Se quiser mover esse código para uma outra pasta será preciso editar o XML que armazena todos os códigos do painel. Para edita-lo basta clicar no botão Options, Edit Code Snippets XML. Vale lembrar que para editar esse XML é preciso conhecer XML para evitar erros na hora de salvar.

Para compartilhar suas ações com outros usuários basta clicar no botão Options e selecionar a opção Export Code Snippets XML. Todas as ações que estão em seu painel serão salvos em um arquivo XML e é esse arquivo XML que você irá disponibilizar para outros usuários importarem para o Flash. Caso queiram remover todas as outras ações e deixar apenas as suas ações mais uma vez terão que editar o XML. Para importar o XML com Ações de outros usuários o processo é praticamente o mesmo de exportar, basta clicar no botão Options e selecionar a opção Import Code Snippets XML.

Um dos problemas que a Adobe precisa melhorar nesse painel é o compartilhamento dessas ações. Quando você decide exportar essas ações você não pode escolher quais das Ações do painel deseja exportar e o mesmo vale quando se importa um XML, se você importar um XML que tem as mesmas ações que o seu painel, o Flash não ignora essas ações e importa elas deixando itens duplicados. Fora que ficar editar XML não é algo legal né.

É possível também remover determinadas ações do painel, basta selecionar a ação desejada e clicar com o botão direito do mouse sobre ela e selecionar a opção Delete Code Snippet. Outra opção é selecionar a ação que deseja remover e clicar em Options, Delete Code Snippet. E por último, é possível retornar o painel com as ações originais, para fazer isso basta selecionar a opção Options, Reset to Default XML.

Novas opções do painel de Erros (Compiler Errors)

O painel de erros recebeu novas opções, agora é possível esconder ou mostrar os erros ou avisos (warnings) que seu arquivo teve ao ser compilado. Uma facilidade a mais para nós desenvolvedores.

Outra opção inserida foi a possibilidade de navegar entre as mensagens através de botões (setas).

Integração com o Flash Builder 4

Anteriormente, se você queria usar o Flex (agora Flash Builder) para criar uma Classe (já que o painel de ações do Flash era muito inferior comparado ao Flex), o processo era muito chato. Você tinha que criar um projeto novo, criar sua Classe, depois copiar do Flex o ActionScript e colar no Flash, testar, se fosse modificar alguma coisa tinha que repetir o processo e assim vai. Agora esse processo está muito mais fácil, ao criar uma nova Classe, o Flash oferece a possibilidade de escolher em qual dos dois softwares usar, o Flash ou Flash Builder.

Se decidir usar o Flash Builder, ele será aberto (caso ele não esteja aberto) e perguntará aonde está seu arquivo fla salvo e perguntará aonde deseja salvar o projeto.

No Flash Builder aparecem três novas opções, a primeira chamada Publish in Flash Professional é o mesmo que no Flash ir em File, Publish, ou seja serão gerados seus arquivos selecionados no painel Publish Settings. A segunda opção chamada Test Movie in Flash Professional é o famoso Ctrl+Enter (ou Cmd+Return se estiver no Mac), o Flash Builder irá chamar o Flash para compilar seu arquivo e você poderá testa-lo. Ao fechar do arquivo compilado volta-se ao Flash Builder. E a última opção chama-se Debug in Flash Profissional, onde o Flash Builder novamente leva vocês de volta ao Flash no modo de Debug para debugar seu arquivo para achar algum erro ou verificar seu comportamento.

Conclusões

Não tem como não ficar contente com as novidades que a versão CS5 do Flash recebeu, principalmente o painel de Ações que a muitos anos estava devendo comparado a outros IDE de desenvolvimento em Flash. A integração com o Flash Builder também foi bem vinda, além das novidades na parte de texto e o novo painel Code Snippets que na minha opinião ainda pode ser melhorado para melhor utilização.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Nessa segunda parte de uma série de três artigos falo sobre o novo painel SWF History, novas opções com a ferramenta de texto e sobre o Componente FLVPlayback.

Quem não acessou a primeira parte da série pode acessar através do link abaixo.

Novidades do Flash CS5 – Parte 1

Painel SWF History

No painel de propriedades (Properties) agora existe uma nova opção chamada SWF History. Esse painel armazena informações como tamanho, data e hora que o swf foi gerado ao usar Ctrl+Enter (Cmd+Enter no Mac) ou no menu Control – Test Movie. Sempre que você testa seu arquivo o painel atualiza as informações.

O bacana desse painel é que nós temos um feedback de quando houve novas versões do arquivo. Outra opção legal dele é que ele avisa quando o tamanho do SWF gerado tenha aumentado de forma significante, como se estivesse nos avisando que algo de errado poderia ter acontecido para que o arquivo tenha ficado muito maior comparado a versão anterior.

O painel exibe apenas as três últimas informações do swf gerado, mas vocês podem recuperar todas as outras informações clicando no botão Log, que irá exibir no painel Output todas as outras informações.

Existe ainda a possibilidade de apagar o histórico clicando no botão Clear. Esse painel funciona apenas para arquivos salvos para o Flash CS5, se estiver com um arquivo que foi salvo nas versões anteriores o painel ira mostrar as informações, mas ao salvar para outra versão do Flash e abrir o arquivo novamente não existirá as informações anteriores.

Novas opções da Ferramenta Texto

A ferramenta texto foi a que mais obteve novas funcionalidades no Flash CS5. Anteriormente, tínhamos três opções na hora de criar um campo de texto, Texto estático, Texto dinamico e Texto input. Agora no CS5, essas três opções ficam disponíveis apenas quando selecionamos a opção Classic Text, mas a maior novidade é o formato TLF Text (ou Text Layout Format). Com essa opção selecionada ainda podemos criar campos de texto da forma anterior (texto estático, dinamico e input), só que com ele temos uma infinidade de opções a mais de personalização.

Vamos começar pela novidade mais legal, a possibilidade de criar campos de textos ligados, quem utiliza o InDesign conhece essa funcionalidade já faz um tempo. O que essa ferramenta faz basicamente é dizer ao Flash que existem dois ou mais campos de texto em posições diferentes, fontes, cores e tamanhos diferentes, e se um desses campos não tiver espaço para exibir o texto desejado o texto seguirá para o próximo campo ligado.

Mas como fazer isso? Selecionem a ferramenta de Texto, no painel Properties (propriedades) selecionem a opção TFL Text e no palco criem um campo do tamanho que desejarem e com um texto maior que o tamanho do campo. Vocês vão reparar que no lado superior esquerdo e no lado inferior direito vão aparecer duas caixas (se o texto for maior que o tamanho do campo de texto a caixa do lado direito inferior aparece com cor vermelha), ao clicar em uma dessas caixas o cursor do mouse muda indicando que se clicar no palco um novo campo de texto irá ser criado e ele estará ligado a um outro campo, se você já tiver um campo no palco e clicar sobre ele os dois campos ficam ligados.

Infelizmente a criação de campos ligados só fica disponível para arquivos que usam ActionScript 3 e FlashPlayer 10, mais um bom motivo para que os usuários passem a adotar o ActionScript 3 como linguagem de programação padrão no Flash pois as demais versões não terão atualizações.

Continuando com as novidades da Ferramenta de Texto, vou mostrar agora como criar campos de texto com colunas. Mais uma vez com a ferramenta de texto selecionada e a opção TLF Text selecionada, criem um campo de texto no palco do tamanho que desejam e insiram um texto qualquer. No painel Properties (ou propriedades) na aba Container and Flow existe uma opção chamada Columns (colunas) onde a primeira opção é a quantidade de colunas que o campo de texto terá e a segunda opção é o espaçamento dessas colunas.

Novidades do Componente FLVPlayBack

No Flash CS5 existem duas versões do Componente FLVPlayback, uma chamada apenas de FLVPlayback e a outra chamada FLVPlayback 2.5. A diferença entre as duas versões basicamente é que na versão 2.5 melhora a performance e a correção de vídeos em streaming, além da possibilidade do uso de DVR (que significa Digital Video Recorder) que possibilita novas opções no streaming de vídeo no Flash. Outra novidade são os novos Skins do Componente, que agora exibem a duração e o tempo do vídeo.

Mas a novidade mais legal é a possibilidade de assistir o vídeo no palco do Flash sem a necessidade de exportar seu arquivo para teste. Com o Componente no Palco e com o vídeo desejado selecionado, o Componente se comporta no palco da mesma maneira que se comporta quando se testa seu arquivo.

Conclusões

Sem dúvida as novidades mais legais até agora do Flash CS5 vem da ferramenta de Texto, mas ainda existe a terceira e última parte dessa série de artigos sobre as novidades do Flash CS5, e na última parte mostrarei as novidades no painel de ações, um novo painel chamado Code Snippets, novidades no painel de Erro e sobre a integração do Flash CS5 com o Flash Builder 4.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Nessa primeira parte da série de artigos sobre o Flash CS5, estarei mostrando para vocês as novidades visuais, criação de aplicativos para iPhone, novos elementos gráficos da ferramenta Deco Tool, novas opções para a ferramenta Bone e integração com serviços online chamado Adobe CS Live.

Novo visual

Pela terceira vez, a Adobe decide mudar a identidade visual dos aplicativos do pacote Creative Suite. A primeira mudança que percebemos já começa no ícone dos aplicativos, alteração que não me agradou muito.

Além dos ícones, a tela inicial também passou por alterações e ficaram bem mais legais comparado as mudanças nos ícones.

E ae tela de boas vindas também passou por algumas alterações.

Criando aplicativos para iPhone

Mesmo com a proibição da Apple com relação a criação de aplicativos para iPhone, iPad e iPod que não usem a IDE da Apple a Adobe não removeu a função de criação de aplicativos para iPhone. Quando você instala o Flash CS5 aparece uma opção para instalar ou não essa opção, então quem não quiser instalar não é obrigado.

A criação de aplicativos é praticamente o mesmo processo de criação de aplicativos em Adobe AIR, você tem um painel com diversas opções de personalização.

Novos elementos gráficos para a ferramenta Deco Tool

A ferramenta Deco tool para quem não conhece, é uma ferramenta que permite criar elementos gráficos de forma facilitada e com diversas opções de personalização. Eu particularmente nunca cheguei a usar essa ferramenta, mas com tantas opções algum dia ela poderá ser útil.

Novas opções para Bone Tool

A ferramenta Bone Tool permite criar estruturas semelhante a um esqueleto. E agora no Flash CS5 podemos criar animações mais realistas com as novas opções disponíveis para a ferramenta.

Adobe CS Live

Outra novidade bem legal da suite CS5 é a integração com o serviço CS Live. São 5 tipos de servidores online que prometem aumentar a produtividade, diminuir o desperdício de tempo e maior colaboração entre os envolvidos nos projetos. Os serviços oferecidos são:

• Adobe BrowserLab – Permite testar sites em diferentes browser e sistemas operacionais, criar comparações e diagnósticos.
• Adobe CS Review – Permite criar avaliações de projetos, obtenção de comentários, etc.
• Acrobat.com – Permite criar Web conferências, troca de arquivos e colaboração na criação de arquivos.
• Adobe Story (beta) – Permite a criação de roteiros para vídeos.
• SiteCatalyst® NetAverages™ – Permite verificar as partes mais acessadas de seu site, quais navegadores usados, sistemas operacionais, etc.

O acesso a esses serviços está em um menu no canto superior direito dos programas, você precisa ter uma Adobe ID para fazer login e poder ter acesso a todos a esses serviços.

Mais informações sobre o Adobe CS Live pode ser encontrado através desse link.

Conclusões

Esse foi apenas um aperitivo com as novidades do Flash CS5. No próximo artigo mostrarei novidades na criação de campos de texto, novas opções para vídeo, e novidades no painel Properties. Lembrando que todos os aplicativos da suite CS5 estão disponíveis para teste no site da Adobe para Windows e Mac, vocês podem usar os programas por 30 dias de forma gratuita.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Entre os formatos mais comuns de videos temos:

.wmv – Só no roda no windows (sem plugin)

.mov – precisa de quicktime

.avi – precisa de activex

.flv – precisa do flash player

Cada formato de vídeo tem a sua exigência porém o mais indicado é o .flv.

Motivo: Quem nunca acessou o YouTube ou site do genero, para rodar este formato é necessário tem instalado o Flash Player, mas quem não tem, acho que todo pc que tem acesso a internet tem este player. Por ser um dos mais utilizados ele é o mais indicado, mais de 98% dos computadores tem o player instalado. Então chega de dúvidas ao inserir um video no seu site utilize o formato .FLV.

Vou explicar como inserir um arquivo Flash (.swf) e como configurá-lo.

Inserindo o arquivo:

Insert > Media > SWF ou Ctrl+Alt+F

Selecione o arquivo desejado e OK

Ao ter inserido aparecerá as seguinte opções em Properties

Loop: Faz com que o arquivo fique dando loop sem parar.

Autoplay: Inicia a exibição automaticamente

W: Largura

H: Altura

V Space: Espaçamento Vertical

H Space: Espaçamento Horizontal

File: Localização do arquivo SWF

Src: Localização do arquivo fonte do SWF

Quality: A qualidade que será exibida do filme

Scale: Escala em relação ao filme

Bg: Cor de Background

Edit: Abre o Flash para que você edite o arquivo FONTE.

Align: Alinhamento em relação à página

Wmode: Uma opção nova no CS4 na qual é possivel colocar transparência no filme SWF

Play: Faz com que o arquivo rode dentro do próprio Dream

Class: Aplica uma classe(css) no filme

Parameters…: Abre uma nova janela permitindo a inserção de parâmetros

Dica: Para impedir a exibição do menu direito do filme adicione aos parâmetros – Menu com value False ou 0

Olá Pessoal,

Sou Márcio Silva, e neste tutorial mostrarei os primeiros passos para que você possa começar a desenvolver seus aplicativos, jogos e animações utilizando o Papervision3D Engine.

Pré-requisitos: Conhecimento em Action Script 3.0. Conhecimento em Adobe Flash CS4.

O que é Papervision 3D?

Papervision 3D (P3D) é uma Engine Open Source para criação de Cenas 3D no Adobe Flash. Com esta engine podemos manipular de uma forma simplificada elementos 3D, escondendo detalhes de baixo nível. Esta engine não realiza cálculos físicos, como por exemplo gravidade, atrito, colisão elástica e inelástica, entre outros. Para isto é necessário a utilização de outras engines destinadas apenas a realizar cálculos físicos, isto será tema de outros tutoriais.

Como começar?

Como escrevi nos pré-requisitos, é indispensável o conhecimento de básico ao intermediário no Action Script 3.0. A API do P3D é totalmente orientada a objetos e possui uma documentação de código muito boa. Neste tutorial, utilizo como ferramenta o Adobe Flash CS4 para programar e rodar a aplicação.

Passo 1 – Primeiramente você deve baixar o P3D que está hospedado no Google Code: http://code.google.com/p/papervision3d/.

Passo 2 – Crie um pasta com o nome de sua escolha e descompacte o conteúdo do arquivo .ZIP .

Passo 3 - Abra o Adobe Flash CS4, e crie um novo arquivo .FLA do tipo AS3 com o nome PlaneP3D.fla. Coloque as seguintes configurações:

Passo 4 – Para que o Adobe Flash encontre as definições de classe do Papervision 3D é necessário configurar o Library Path. Vá em Edit->Preferencces->Action Script, clique em ActionScript 3.0 Settings. Informe o diretório onde você descompactou o Papervision 3D. No meu caso ficou como mostrado abaixo:

Passo 5 – Crie um Action Script File (.AS) com o nome de PlaneP3D.as.

Passo 6 – No arquivo PlaneP3D.as coloque o seguinte código.

Alguns comentários sobre o código

O que é Viewport3D?

Para explicar o que é a Viewport3D, só fazer uma analogia à tela de cinema, onde é projetado o filme para que seja possível assistí-lo. Portanto, é uma região retangular onde é projetado a Cena 3D.

O que é uma Camera3D?

A Camera utilizada aqui é a mesma que você já conhece do cinema, ela grava o que acontece no mundo e projeta na tela (View Port).

O que é Scene3D?

A Cena 3D é basicamente o mundo que se deseja ver.

O que é BasicRenderEngine?

Fazendo novamente analogia ao cinema,  o Basic Render Engine é o Diretor, ele grita “Ação” e tudo acontece: A Camera começa a filmar, projetando a Cena na View Port. Por isso nada acontece se ele não “ordenar” através do método renderScene ().

O Construtor da classe Plane dá o pontapé inicial adicionando a View Port ao stage, pois o restante dos objetos serão renderizados dentro dela. Todos os objetos pertencentes à Cena, neste caso o Plano, devem ser adicionados ao objeto scene. Como nesta cena o plano será deslocado para a direita à cada ENTER_FRAME, um listener foi adicionado.

Pronto, se você não pressionou CTRL + ENTER para ver o que acontece, pressione agora e veja o resultado.

Veja o resultado final aqui PlaneP3D.

Baixe os arquivos deste tutorial: http://blog.creativerender.com/wp-content/uploads/2010/03/papervision_beginner.zip

Autor: Márcio Silva – Colunista de Flash & ActionSctipt MXSTUDIO.
Site: www.creativerender.com e www.marciosilva.net

Qualquer dúvida envie um e-mail para contato@creativerender.com ou acesse nosso fórum

Neste tutorial, irei mostrar a vocês como criar uma Galeria de Imagens com XML no Flash utilizando o efeito LightBox presente em algumas páginas HTML. Os requisitos para esse tutorial são:

• Flash 8, Flash CS3 ou Flash CS4
• Conhecimento com interação do Flash com XML
• Componente FlashLightBox

Criando o XML

Vamos começar criando o XML. O arquivo XML irá conter o nome das imagens e a legenda que será exibida. Tanto o arquivo XML quanto as imagens precisam estar no mesmo diretório do arquivo FLA do Flash. Salvem o XML com o nome de imagens.xml.

<?xml version="1.0" encoding="utf-8"?>
<imagens>
   <foto>
      <imagem>imagem.jpg</imagem>
      <texto>Moto Ayrton Senna</texto>
   </foto>
   <foto>
      <imagem>imagem1.jpg</imagem>
      <texto>Mclaren do Senna</texto>
   </foto>
   <foto>
      <imagem>imagem2.jpg</imagem>
      <texto>Capacete Senna</texto>
   </foto>
   <foto>
      <imagem>imagem3.jpg</imagem>
      <texto>Ferrari Shumacher</texto>
   </foto>
   <foto>
      <imagem>imagem4.jpg</imagem>
      <texto>Loro</texto>
   </foto>
   <foto>
      <imagem>imagem5.jpg</imagem>
      <texto>Trator do Sítio</texto>
   </foto>
   <foto>
      <imagem>imagem6.jpg</imagem>
      <texto>Carroça antiga</texto>
   </foto>
</imagens>

Download do Componente FlashLightBox

Para criar o efeito LightBox vamos usar o Componente que eu desenvolvi. O link para baixar o Componente e instruções de como instalar estão em meu Blog.

Componente FlashLightBox

Criando a galeria

Após terem baixado e instalado o Componente, vamos criar um novo arquivo no Flash. Abram o painel de Componentes (Ctrl+F7 ou Window, Components) e joguem para o palco o Componente FlashLightBox, abram o painel Properties e dêem instancia de flb para ele. O Componente pode estar posicionado no local que desejar, ele não irá aparecer quando seu arquivo rodar.

Diferentemente das outras galerias que mostrei como criar aqui no MXStudio, nessa galeria não é preciso criar nenhum MovieClip, campo de texto, nem nada. Tudo será criado a partir do ActionScript. Nós vamos carregar as imagens, adicionar uma borda a cada imagem e adicionar uma sombra usando o Filtro DropShadow, cada imagem será dimensionada para um tamanho randomico, assim como sua posição e rotação. Podemos mover as imagens pela tela e para ver a imagem com o tamanho original clicamos duas vezes sobre a imagem para que ela seja revelada com o efeito LightBox.

Vamos as ações da Galeria, quem estiver usando o ActionScript 2, copiem e colem essas ações no mesmo frame que o Componente está:

/* Importa a Classe do Filtro DropShadow */
import flash.filters.DropShadowFilter;
/* Alinha o arquivo para o canto superior esquerdo */
Stage.align = "TL";
/* Desabilitamos o dimencionamento do arquivo */
Stage.scaleMode = "noScale";
/* Variável que vai ser usada no setInterval */
var intervalo:Number = new Number();
/* Variável usada no duplo clique do mouse */
var count:Number = 0;
/* Variável que armazena o total de itens do XML */
var total:Number = new Number();
/* Criamos um listener */
var listener:Object = new Object();
/* Criamos uma instancia da Classe XML */
var xml:XML = new XML();
/* Ignoramos os espaços em branco */
xml.ignoreWhite = true;
/* Carregamos o arquivo XML */
xml.load("imagens.xml");
/* Ao carregar o arquivo XML */
xml.onLoad = function(ok) {
	/* Se não deu erro */
	if (ok) {
		/* Identificamos o primeiro nó do XML */
		xmlNode = this.firstChild;
		/* Armazena o total de itens do XML */
		total = xmlNode.childNodes.length;
		/* Chama a função carrega */
		carrega();
	} else {
		/* Mostra a mensagem de erro */
		trace("Erro");
	}
}
/* Função que carrega as imagens */
function carrega() {
	/* Criamos um laço para percorrer todos os itens do XML */
	for (var i=0; i<total; i++) {
		/* Criamos um novo MovieClip */
		var mc:MovieClip = this.createEmptyMovieClip("mc"+i, this.getNextHighestDepth());
		/* Criamos um MovieClip que servirá de alvo para carregar a imagem */
		var holder:MovieClip = mc.createEmptyMovieClip("holder", mc.getNextHighestDepth());
		/* Rotacionamos o MovieClip de forma randomica */
		mc._rotation = Math.round(Math.random()*-30)+10;
		/* Armazena o número do nó do XML */
		mc.id = i;
		/* Ao precionar do Mouse no MovieClip */
		mc.onPress = function() {
			/* Jogamos ele pra cima de tudo */
			this.swapDepths(this._parent.getNextHighestDepth());
			/* Incrementamos a variável do duplo clique */
			count++;
			/* Se ela for igual a 1 */
			if (count == 1) {
				/* Movimenta o MovieClip */
				startDrag(this, false);
				/* Iniciamos um intervalo para saber se o usuário irá clicar novamente */
				/* Fazemos isso para saber se é um clique duplo ou não */
				intervalo = setInterval(verifica, 250);
			/* Se a variável for igual a 2 */
			/* Significa que o duplo clique aconteceu */
			} else if (count == 2) {
				/* Zeramos a variável */
				count = 0;
				/* Encerramos o intervalo */
				clearInterval(intervalo);
				/* Chamamos a função carrega do Componente FlashLightBox */
				/* A função recebe o endereço da imagem e o texto para a legenda */
				flb.carrega(xmlNode.childNodes[this.id].childNodes[0].firstChild.nodeValue, xmlNode.childNodes[this.id].childNodes[1].firstChild.nodeValue);
			}
		};
		/* Ao soltar do Mouse */
		mc.onRelease = mc.onReleaseOutside = function() {
			/* Paramos de movimentar o MovieClip */
			this.stopDrag();
		}
		/* Criamos uma instancia da Classe DropShadowFilter */
		var sombra:DropShadowFilter = new DropShadowFilter();
		/* Modiciamos o angulo */
		sombra.angle = 45;
		/* Modificamos o blurX e blurY */
		sombra.blurX = 5;
		sombra.blurY = 5;
		/* Modificamos a distancia */
		sombra.distance = 3;
		/* Modificamos a intencidade da sombra */
		sombra.strength = 0.75;
		/* Criamos um Array que armazena os filtros usados */
		var filtro:Array = new Array();
		/* Adicionamos ao Array a sombra */
		filtro.push(sombra);
		/* Aplica a sombra ao MovieClip */
		mc.filters = filtro;
		/* Criamos uma instancia da Classe MovieClipLoader */
		var loader:MovieClipLoader = new MovieClipLoader();
		/* Carregamos a imagem */
		loader.loadClip(xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue, holder);
		/* Modificamos o tamanho dela randomicamente */
		holder._xscale = (Math.random()*20)+60;
		holder._yscale = holder._xscale;
		/* Modificamos a posição da imagem */
		holder._x = 10;
		holder._y = 10;
		/* Adicionamos um listener a instancia da Classe MovieClipLoader */
		loader.addListener(listener);
	}
}
/* Função chamada caso o usuário não clique duas vezes sobre a imagem */
function verifica() {
	/* Zera a variavel */
	count = 0;
	/* Encerramos o intervalo */
	clearInterval(intervalo);
}
/* Ao carregar a imagem */
listener.onLoadInit = function(alvo:MovieClip) {
	/* Definimos a cor de fundo da borda */
	alvo._parent.beginFill(0xFFFFFF, 100);
	/* Começamos a desenhar a borda de acordo com o tamanho da imagem */
	alvo._parent.lineTo(0, 0);
	alvo._parent.lineTo(0, alvo._height+20);
	alvo._parent.lineTo(alvo._width+20, alvo._height+20);
	alvo._parent.lineTo(alvo._width+20, 0);
	/* Termina de desenhar */
	alvo._parent.endFill();
	/* Modifica a posição do MovieClip de forma randomica */
	alvo._parent._x = Math.round(Math.random()*(Stage.width-alvo._width));
	alvo._parent._y = Math.round(Math.random()*(Stage.height-alvo._height));
}

Quem estiver usando ActionScript 3 as ações são essas:

/* Alinha o arquivo para o canto superior esquerdo */
stage.align = StageAlign.TOP_LEFT;
/* Desabilitamos o dimencionamento do arquivo */
stage.scaleMode = StageScaleMode.NO_SCALE;
/* Variavel que armazena o MovieClip selecionado */
var alvo:MovieClip;
/* Variável que armazena a quantidade de itens do XML */
var total:Number = new Number();
/* Criamos uma instancia da Classe XML */
var xml:XML = new XML();
/* Criamos uma instancia da Classe URLLoader */
var arquivo:URLLoader = new URLLoader();
/* Carregamos o XML */
arquivo.load(new URLRequest("imagens.xml"));
/* Adicionamos um event listener chamando a função arquivoOk */
arquivo.addEventListener(Event.COMPLETE, arquivoOk);
/* Função chamada assim que o XML é carregado */
function arquivoOk(event:Event):void {
	/* Armazenamos os dados do XML na instancia da Classe XML */
	xml = new XML(event.target.data);
	/* Armazenamos o total de itens */
	total = xml.foto.length();
	/* Chama a função carrega */
	carrega();
}
/* Função que carrega as imagens */
function carrega() {
	/* Criamos um laço para percorrer todos os itens do XML */
	for (var i=0; i<total; i++) {
		/* Criamos um MovieClip */
		var mc:MovieClip = new MovieClip();
		/* Rotacionamos ele randomicamente */
		mc.rotation = Math.round(Math.random()*-30)+10;
		/* Habilitamos o clique duplo do Mouse */
		mc.doubleClickEnabled = true;
		/* Adicionamos um event listener para quando o mouse for clicado no MovieClip */
		mc.addEventListener(MouseEvent.MOUSE_DOWN, mcPress);
		mc.addEventListener(MouseEvent.MOUSE_UP, mcRelease);
		/* Adicionamos um event listener para o clique duplo */
		mc.addEventListener(MouseEvent.DOUBLE_CLICK, mcDoble);
		/* Armazena o número do nó do XML */
		mc.id = i;
		/* Criamos uma instancia da Classe DropShadowFilter */
		var sombra:DropShadowFilter = new DropShadowFilter();
		/* Modificamos o angulo da sombra */
		sombra.angle = 45;
		/* Modificamos o blurX e blurY */
		sombra.blurX = 5;
		sombra.blurY = 5;
		/* Modificamos a distancia */
		sombra.distance = 3;
		/* Modificamos a intencidade da sombra */
		sombra.strength = 0.75;
		/* Criamos um Array para armazenar os filtros utilizados */
		var filtro:Array = new Array();
		/* Adicionamos no Array a sobra criada */
		filtro.push(sombra);
		/* Adiciona os filtros ao MovieClip */
		mc.filters = filtro;
		/* Criamos uma instancia da Classe Loader */
		var loader:Loader = new Loader();
		/* Desabilitamos o mouse */
		loader.mouseEnabled = false;
		/* Carregamos a imagem */
		loader.load(new URLRequest(xml.foto[i].imagem));
		/* Modificamos o tamanho da imagem randomicamente */
		loader.scaleX = (Math.random()*0.2)+0.6;
		loader.scaleY = loader.scaleX;
		/* Modificamos a posição da imagem */
		loader.x = 10;
		loader.y = 10;
		/* Adicionamos um event listener para saber quando terminou de carregar a imagem */
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderOk);
		/* Adiciona a imagem ao MovieClip criado */
		mc.addChild(loader);
		/* Adiciona o MovieClip ao palco */
		addChild(mc);
	}
}
/* Função chamada quando a imagem termina de ser carregada */
function loaderOk(event:Event):void {
	/* Criamos uma referencia para a imagem */
	var loader:Loader = event.target.loader;
	/* Criamos uma referencia ao MovieClip */
	var mc:MovieClip = MovieClip(loader.parent);
	/* Definimos a cor de fundo da borda */
	mc.graphics.beginFill(0xFFFFFF, 1);
	/* Começamos a desenhar a borda no MovieClip de acordo com o tamanho da imagem */
	mc.graphics.lineTo(0, 0);
	mc.graphics.lineTo(0, loader.height+20);
	mc.graphics.lineTo(loader.width+20, loader.height+20);
	mc.graphics.lineTo(loader.width+20, 0);
	/* Termina de desenhar */
	mc.graphics.endFill();
	/* Modifica a posição do MovieClip de forma randomica */
	mc.x = Math.round(Math.random()*(stage.stageWidth-mc.width));
	mc.y = Math.round(Math.random()*(stage.stageHeight-mc.height));
}
/* Função chamada quando clicamos duas vezes sobre a imagem */
function mcDoble(event:MouseEvent):void {
	/* Chamamos a função carrega do Componente FlashLightBox */
	/* A função recebe o endereço da imagem e o texto para a legenda */
	flb.carrega(xml.foto[event.target.id].imagem, xml.foto[event.target.id].texto);
}
/* Função chamada quando clica com o mouse sobre o MovieClip */
function mcPress(event:MouseEvent):void {
	/* Identificamos o alvo */
	alvo = MovieClip(event.target);
	/* Coloca o alvo a frente dos demais MovieClips */
	addChild(alvo);
	/* Movimenta o MovieClip */
	alvo.startDrag();
}
/* Função chamada quando soltamos o botão esquerdo do mouse */
function mcRelease(event:MouseEvent):void {
	/* Paramos de movimentar o MovieClip */
	event.target.stopDrag();
}

Aqui está um exemplo da galeria funcionando:
Exemplo galeria

Conclusões

Chegamos ao fim de mais um tutorial. Um exemplo bem simples de como usar o Componente FlashLightBox e uma oportunidade para aprender a criar uma galeria usando apenas ActionScript.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO
Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum