Vou abordar neste Tutorial algumas formas possíveis de se trabalhar com esse tipo de dado.
Mas antes vamos conhecer algumas tarefas comuns de datas e horas.

• Trabalhar com objetos de Date;
• Obter data e hora atual;
• Acesso a unidades individuais da data e hora (dias, anos, horas, minutos, segundos …);
• Cálculos aritméticos com datas e horas;
• Conversão entre fusos horários;
• Realização de ações repetitivas;
• Realizar tarefas em tempos específicos, pré programados.

Trabalhar com objetos de Date:

Para criar um objeto de Date é muito simples. Veja o exemplo:
Sem parâmetros no construtor teremos uma resposta base com data e hora atuais.

var _data:Date = new Date();

trace(_data); //Mon May 16 11:31:53 GMT-0300 2011

Se colocarmos um único parâmetro, o construtor Date() irá devolvê-lo como milissegundos e a data de 1 de janeiro de 1970 como mostrar no exemplo abaixo.

// milissegundos por dia

var _mls:int = 1000 * 60 * 60 * 24;

var _data:Date = new Date(_mls);

trace(_data) // Thu Jan 1 22:00:00 GMT-0200 1970

Acesso a unidades individuais da data e hora:

Definindo uma data e entendendo os parâmetros:

var _data:Date = new Date(2011, 4, 16, 11, 45, 30, 0);

trace(_data); //Mon May 16 11:45:30 GMT-0300 2011

Vamos entender como tudo funciona:

2011 – aponta o ano;

4 – aponta o mês começa a contar do 0;

16 – aponta o dia do mês;

11 – aponta a hora;

45 – aponta os minutos;

30 – aponta os segundos;

0 – aponta os milissegundos;

Podemos obter valores da nossa unidade de tempo através de suas propriedades:

fullYear, month (de 0 a 11), date (de 1 a 31), Day, hours, minutes, seconds, milliseconds.

Cálculos aritméticos com data e hora:

Para que serve isso?

Já me fiz essa pergunta, RS.

Bom quando vamos criar um relógio digital ou um contador de data regressivo, precisamos realizar cálculos aritméticos para chegar em um determinado resultado. Para facilitar nosso trabalho podemos criar algumas constantes para armazenar valores que irão nos auxiliar. Veja o exemplo:

// Encontrar milissegundos por minuto:

var _mlsM:int = 1000 * 60;

// Econtrar milissegundos por hora:

var _mlsH:int = 1000 * 60 * 60;

// Encontrar milissegundos por dia:

var _mlsD:int = 1000 * 60 * 60 *24;

Exemplo:

var _mlsM:int = 1000 * 60;

var _mlsH:int = 1000 * 60 * 60;

var _mlsD:int = 1000 * 60 * 60 * 24;

// Pegamos a data atual

var _data:Date = new Date();

// acrescentar o periodo de 30 dias

var _data2:Date = new Date(_data.getTime() + (30 * _mlsD));

trace(_data2); // Wed Jun 15 15:33:59 GMT-0300 2011

Conversão entre fusos horários:

Neste tópico veremos como converter o fuso horário. Issó é útil para calcular com mais precisar horários em lugares diferentes. Precisei de algo semelhante em um projeto que desenvolvi há algum tempo onde eu tive que montar 5 relógios e cada um mostrava a hora em um fuso horário diferente.

Para que possamos fazer a conversão do fuso horário primeiro temos que calcular o valor do fuso horário em milissegundos.

// Pegamos a data atual

var _data:Date = new Date(“Wed Jun 15 15:59:20 GMT-0300 2011″);

// convertendo fuso horário em milissegundos

var _fmls:Number = _data.getTimezoneOffset() * 60 * 1000;

_data.setTime(_data.getTime() + _fmls);

trace(_data); //Wed Jun 15 18:59:20 GMT-0300 2011

Abordarei  apenas um item que é o Timer.

Usaremos ele para a criação de um Relógio em um tutorial posterior.

Timer

Uma das melhores formas de se manipular funções de tempo é usar a Classe Timer.

É simples e de fácil entendimento. Então vamos ver um exemplo.

package

{

import flash.display.Sprite;

import flash.events.TimerEvent;

import flash.utils.Timer;

public class calculaTempo extends Sprite

{

public function calculaTempo()

{

// constructor code

// criando novo timer

var _tempo:Timer = new Timer(1000, 5);// repetirá a cada segundo por 5 vezes

// eventos

_tempo.addEventListener(TimerEvent.TIMER, _conta);

_tempo.addEventListener(TimerEvent.TIMER_COMPLETE, _terminou);

// startando o timer

_tempo.start();

}

public function _conta(e:TimerEvent):void

{

// retornará o tempo

trace(“Contou ” + e.target.currentCount);

}

public function _terminou(e:TimerEvent):void

{

// retornara somente quando terminar o ciclo de 5 disparos

trace(“Terminou”);

}

}

}

Por hora é isso ai pessoal espero ter esclarecido um pouco mais sobre o uso dessa classe e em breve iremos criar um relógio usando esses conhecimentos. Até o próximo.

Você também pode conferir esse tutorial e muito mais em meu blog: diegowebmotion.worpress.com

Apesar da tecnologia Flash ser o saco de pancadas dos fãs de padrões web, a Adobe vem trabalhando duro para abraçar o HTML 5. A empresa lançou o seu próprio player de vídeo HTML5 e ferramentas de exportação HTML5 para Dreamweaver e Illustrator (e o fireworks poxa). Agora a Adobe lança o Wallaby, um novo conversor de Flash para HTML5.

Wallaby é uma livre aplicação Adobe AIR que permite aos designers e desenvolvedores converter arquivos Adobe Flash (Flas) em HTML5 baseado em padrões, CSS3 e arquivos javascript.

O objetivo do Wallaby é bastante claro: dispositivos IOS da Apple. O código gerado  depende só de alguns recursos CSS Webkit, o que significa que os resultados do Wallaby não irão funcionar em todos navegadores web. Em outras palavras, o Wallaby ainda não é a solução para quem gostaria de fazer o salto do Flash para HTML5.

É ótimo ver a Adobe usando o padrão CSS Animations, mas infelizmente as animações só funcionam de forma confiável em navegadores baseados no Webkit (Safari, Chrome).

Wallaby também não irá converter alguns elementos em Flash para HTML5, porque simplesmente não existe equivalente em HTML5. Mas Wallaby irá avisar quando seu arquivo FLA não será exportado para HTML5. Confira uma lista completa de recursos com suporte Flash, na página de documentação do Wallaby no Adobe Labs.

O ponto fraco do Wallaby é não poder converter o Actionscript para Javascript, segundo o gerente sênior de produtos da Adobe Creative Suite, Tom Barclay, por enquanto, o principal uso do Wallaby sera para converter banners em Flash em algo que os usuário do IOS podem ver. Para esse caso, o Wallaby funciona bem. Para qualquer coisa além disso, teremos que ajustar as coisas à mão no editor de texto.

Mas só porque o Wallaby não faz muitas coisas, não significa que não pode ser um ponto de partida para converter filmes mais complexos do Flash.

Barclay não descartou a possibilidade de que Wallaby poderá um dia converter o Actionscript em Javascript.

Visite o Adobe Labs para adquirir o Wallaby.

Agora, vamos usar essa imagem abaixo ou uma outra qualquer para fazer o carregamento dela via actionscript, de preferência salve está imagem no mesmo diretório do seu arquivo flash.

Agora dentro do flash pressione F9 para abrir o painel “actions” e digite

//caminho relativo da imagem em relação ao arquivo flash
var urlImg:URLRequest = new URLRequest("naruto.jpg");
//classe loader utilizada para carrregar nossa imagem
var imgLoad:Loader = new Loader();
//método load precisa como parametro um objeto do tipo "URLRequest"
imgLoad.load(urlImg);
//adiciona o loader que no nosso caso é uma imagem na timeline
addChild(imgLoad);

Nossa imagem foi adicionada ao palco, vamos alterar a scala dela para 60% para percebermos as alterações ocorridas, digite

imgLoad.scaleX = .6;//.6 é igual á 0.6 que por sua vez é igual 60%
imgLoad.scaleY = .6;

Perceba que nossa imagem fico bem detonada, para suavizar esse desgaste na imagem, vamos criar uma função que vai adicionar um smothing em tempo de execução.

function suavizaImg(img:Loader):void
{
	//pega o contéudo do Loader e o transforma em um Bitmap
	var image:Bitmap = img.content as Bitmap;
	//ativando o smoothing
	image.smoothing = true;
}

Faça a chamada da função na linha debaixo onde estamos adicionando a imagem no palco e passe como parâmetro o objeto Loader, ficando assim

addChild(imgLoad);
suavizaImg(imgLoad);

Observe que vai acontecer um erro, esse diz que não pode acessar um método ou uma propriedade de referência nula.

Mas por que isso acontece? Quando utilizamos o método load da classe Loader fazemos o download do arquivo e no momento que fazemos essa chamada suavizaImg(imgLoad); esse download ainda não foi concluído. Solução: adicionar um evento que vai nos dizer quando esse download está completo.
Vamos remover

addChild(imgLoad);
suavizaImg(imgLoad);
imgLoad.scaleX = .6;//.6 é igual á 0.6 que por sua vez é igual 60%
imgLoad.scaleY = .6;

e logo abaixo de

 imgLoad.load(urlImg);

vamos adicionar o nosso evento

imgLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, imgCarregada);

Observação: a função “imgCarregada” é responsável pelo evento ou seja, essa função apenas vai ser executada quando o download estiver completo e dentro dela vamos adicionar aquelas 2 linhas que agente apagou

function imgCarregada(e:Event):void
{
        //vamo remove o evento já que não vamos mais precisar dele
	imgLoad.contentLoaderInfo.removeEventListener(Event.COMPLETE, imgCarregada);

	addChild(imgLoad);
	imgLoad.scaleX = .6; //.6 é igual á 0.6 que por sua vez é igual 60%
	imgLoad.scaleY = .6;
	suavizaImg(imgLoad);
}

Faça alguns teste alterando scaleX e scaleY e ativando e desativando o smoothing.
Pronto, chegamos ao fim do meu primeiro tutorial. Segue abaixo o código completo.

//caminho relativo da imagem em relação ao arquivo flash
var urlImg:URLRequest = new URLRequest("naruto.jpg");
//classe loader utilizada para carrregar nossa imagem
var imgLoad:Loader = new Loader();
//método load precisa como parametro um objeto do tipo "URLRequest"
imgLoad.load(urlImg);
//evento que vai nos dizer quando o download estiver concluido
imgLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, imgCarregada);

function suavizaImg(img:Loader):void
{
	//pega o contéudo do Loader e o transforma em um Bitmap
	var image:Bitmap = img.content as Bitmap;
	//ativando o smoothing
	image.smoothing = true;
}

function imgCarregada(e:Event):void
{
	//vamo remove o evento já que não vamos mais precisar dele
	imgLoad.contentLoaderInfo.removeEventListener(Event.COMPLETE, imgCarregada);

	//adiciona o loader na timeline
	addChild(imgLoad);
	imgLoad.scaleX = .6;//.6 é igual á 0.6 que por sua vez é igual 60%
	imgLoad.scaleY = .6;
	suavizaImg(imgLoad);
}

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é++!

]]> http://www.mxstudio.com.br/desenvolvimento/flash/relogio-em-flash-usando-actionscript-3-0/feed/ 2 http://www.mxstudio.com.br/desenvolvimento/flash/novidades-do-flash-cs5-parte-3/ http://www.mxstudio.com.br/desenvolvimento/flash/novidades-do-flash-cs5-parte-3/#comments Fri, 04 Jun 2010 15:23:39 +0000 Natan D. Alves http://www.mxstudio.com.br/?p=3984 Olá comunidade.

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.