Actionscript/ AS 3.0/ Dicas/ Flash/ Flash CS 3/ Flash CS4/ Flex

Suavizar imagem no Flex/Flash

Tivemos uma surpresa hoje pela manhã, chegaram 8 e-mails perguntando a mesma coisa, como deixar a imagem mais suave quando o container ou moviclip que será despejada é menor.

O que acontece é que enquanto o Bitmap não estive preenchido ou melhor completo ao processo de carregar a imagem, o Bitmap em sí fica null, não é somente no Flex mais também no Flash.

Para solucionar o problema no Flash, aconselho ler isso aqui no blog do GSkinner(inglês).

Para o Flex, é fácil, adicione no evento complete=”” ao campo de Imagem.

	

Feito isso você pode aliviar os pixels mal posicionados na tela, Essa opção mudou muito no Flash Player 10, ficando bem melhor o resultado do que no Flash Player 9.

Existem outros links de referências que valem o click:
http://www.kevin-fitzpatrick.net/blog/?p=10

Actionscript/ Actionscript Frameworks/ AS 3.0/ Flash Componentes/ Flash CS 3/ Flash CS4

Criando um player de MP3 com Flash CS4 e actionscript 3.0

O exemplo abaixo, mostra como criar um player de música em actionscript 3.0 feito com alguns componentes básicos do Flash CS4, aquiles que vem por padrão no Flash CS3 e Flash CS4.
O projeto foi feito usando o Flex Builder, então procure nos arquevos do site como usar os componentes do Flash no Flex Builder.

Na atual versão do actionscript 3.0 é bem complicado usar a classe de som, para se ter uma idéia, foi necessário usar as classes Sound, SoundChannel,SoundTransform, só para dar o play e controlar o volume.
Em fim, segue abaixo o exemplo:

playermp3

Código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
package {
	import fl.controls.Button;
	import fl.controls.Slider;
 
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	import flash.media.Sound;
	import flash.media.SoundTransform;
	import flash.media.SoundChannel;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import fl.events.SliderEvent;
	import fl.controls.Label;
 
	[SWF(width="400",height="150",backgroundColor="0xF2F2F2",frameRate="25")]
	public class AS3Player extends Sprite
	{
		public var playButton:Button;
		public var stopButton:Button;
		public var volumeControl:Slider;
		public var urlSom:String = "mp3/seusom.mp3";
		public var MP3Request:URLRequest;
		private var musicaTransform:SoundTransform;
		private var musicaCanal:SoundChannel;
		private var musica:Sound;
		private var volLabel:Label;
 
 
		public function AS3Player()
		{
			super();
 
			MP3Request = new URLRequest(urlSom);
 
			musica = new Sound();
			musica.load(MP3Request);
			musicaCanal = new SoundChannel();
			musicaTransform = new SoundTransform(0.5,0);
 
 
 
			/**
			 * Montar os botões e Slider para controlar o som
			 *
			 * playButton - Toca o som;
			 * stopButton - Para o som;
			 * volumeControl - Aumenta e diminue o som;
			 * */
 
			playButton = new Button();
			playButton.label = "Tocar";
			playButton.x = 10;
			playButton.y = 20;
			addChild(playButton);
			playButton.addEventListener(MouseEvent.CLICK,SomAction);
 
			stopButton = new Button();
			stopButton.label = "Parar";
			stopButton.x = playButton.width + 20;
			stopButton.y = 20;
			addChild(stopButton);
			stopButton.addEventListener(MouseEvent.CLICK,SomAction);
 
			volumeControl = new Slider();
			volumeControl.direction = "horizontal"// ou vertical;
			volumeControl.minimum =0;
			volumeControl.maximum =1;
			volumeControl.doubleClickEnabled = true;
			volumeControl.tickInterval = .1;
			volumeControl.snapInterval = .1;
			volumeControl.value = musicaTransform.volume;
			volumeControl.liveDragging = true;
			volumeControl.x = 230;
			volumeControl.y = 20;
			addChild(volumeControl);
			volumeControl.addEventListener(SliderEvent.CHANGE,VolumeAction);
 
			volLabel = new Label();
			volLabel.text = "Volume";
			addChild(volLabel);
			volLabel.x = 250;
			volLabel.y = 40;
		}
 
		/**
		 * @public
		 * Controla o volume da música carregada;
		 * */
		public function VolumeAction(e:SliderEvent):void{
				musicaTransform.volume = volumeControl.value;
				musicaCanal.soundTransform = musicaTransform;
		}
 
		/**
		 * @public
		 * controla o som, play e stop;
		 * */
		public function SomAction(e:MouseEvent):void{
 
				var posicao:int = musicaCanal.position;
				if(playButton.label == "Tocar"){
					playButton.label = "Pausa";
					musicaCanal = musica.play(posicao);
				}else{
					musicaCanal.stop();
					playButton.label = "Tocar";
					musicaCanal.stop();
				}
		}
	}
}
Actionscript Frameworks/ AS 3.0/ Flash/ Flash CS 3/ Flex/ Flex 3/ Flex 3 Open-Source/ Flex Componentes/ frameworks/ Labs

Componente Google Maps para Flex 3

Eu só tinha anunciado essa notícia no Blog em inglês. E cometi o erro de não publicar aqui também na versão Brasileira.

O Componente mapas do google para o Flex aka(GoogleFlexMaps). Eu até tinha publicado a tão recém e aguardada obra do Google para plataforma Flash Player, tornando assim usar seus serviços tão htmlzados.
Em fim, Vocês pode usar o componente que torna a sintaxe bem mais fácil, bem mais completa ao ponto de vista de desenvolvimento Flex.

1
2
3
4
5
6
7
8
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:google="com.igorcosta.*"  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
    <google : GoogleFlexMap
      key="sua chave de desenvolvedor"
      width="100%" height="100%"/>
 
</mx>

E quanto aos desenvolvedores Flash? Eu também pensei neles e fiz uma alteração no componente .swc que pode aceitar dentro do Flash. Basta apenas usar uma instancia nova. Porém não garanto 100% perfeição em todos os recursos que o Google Maps funciona, para isso indico o SDK padrão do Flex.

Baixe aqui o .swc para seus projetos tanto em Flex quanto Flash.

Veja aqui a documentação do Componente* ( em ingles)

Caso você seja curioso ou quer o código fonte por simplesmente por gostar de fazer hacks,

Boa sorte em seus uso.

Adobe CS3.0/ AS 3.0/ Dicas e truques/ Flash CS 3

#1 – Planejando uma aplicação RIA de sucesso, cuidados que deve-se tomar.

De ontem para hoje eu me deparei em um projeto interno que está sendo desenvolvimento onde o principal objetivo é otimizar a aplicação Flex. E um dos laços que faz isso melhorar a aplicação, são loops, tamanho de swf, hardware envolvido, etc. Os loops sejam eles for, for each, while, do while, for in, timer. E por incrível que possa parecer, os resultados podem não deixar muita gente contente, mais é uma pura verdade quando você faz uma aplicção para ser usada em quaisquer circunstâncias, sejam elas ótimas ou muito más, de todo jeito tem que ser testada e funcionar.

Qual equepamento foi usado?

Geralmente quando faço um aplicativo eu procuro testar em qualquer hardware que vocês imaginar, sejam máquenas excelentes e tops de linhas até maquinas com 8 anos de vida como um K6 da AMD, lembram?

O equepamento foram 2, seguem abaixo:

AMD K6 com 256mb de memóri processador de 550Mhz, placa de video de 32bits e resolução máxima de 1024×768, com sistema Operacional Windows 2000.

Intel core 2 duo com 4Giga de memória, placa de video 32bits resolução de 1280×800 com sistema operacional Vista Home Premium.

Primeiro problema: Compatibilidade

Flash Player 9 não é compatível com Windows 2000, a versão do último build a 0.75 não pode ser instalada. já a versão 9.045 roda tranqüilamente. Problema resolvido, vamos ao segundo teste.

Segundo Teste: Performance de Frames Rates

No AMD K6-II com uma taxa de 24fps em uma aplicação Flex o consumo da memória chega a picos entre 17mb e 23mb, consideravelmente alto, já que essa versão do build tem esse bug, então a pergunta do tal “você quer interromper esse script ou continuar” aparece sempre. Então diminuímos para 16fps e problema resolvido o aplicativo começa a executar tranqüilamente perfeito.

No Intel core 2 Duo com o FPS em 24 o aplicativo chega a consumir entre picos de 3mb até 4mb de memória, com o FPS, chega aumentar cerca de 40% ‘a mais o uso de memória.

Resultados
Em todas as vias use o padrão de 40fps caso sua aplicação for usada nessas poderosas máquenas, se não sabe use o fps do K6-II com toda certeza vai rodar em qualquer máquena.
Como no meu caso eu não sei quais máquenas isso vai ser executado como por exemplo eu posso saber se for usado internamente em uma intranet e peço ao pessoal de infra para me passar uma auditoria. Então publicamente onde todo tipo de PC se conecta na internet, então preferir levar o resto da aplicação em 16fps.

Terceiro teste: Intervalos de chamadas de métodos

Testando chamada de métodos por intervalos de tempos cheguei a conclusão que é impossível alcançar uma perfeição no caso de uso de intervalos por for. Tem até um documento no LiveDocs que reforça meu pensamento, como a aplicação é feita colaborativa, o uso de loops como os citdos no título deste artigo, faz com que a dependência do hardware seja um fator descritivo entre qual delas irá rodar mais rápido, como eu preciso controlar isso e executar no mesmo intervalo de tempo, então eu preciso realmente usar Timer e não for or do while.

Timers, são ótimos nisso, qualquer aplicativo multi-usuário e colaborativo que se preze usa Timers para despachar eventos. O que em minha super máquena potente não sentirá isso nem tampouco a AMD K6-II. Ambas farão a tarefa no mesmo tempo.

Quarto teste: Tamanho do SWF

Como já cheguei a uma conclusão e que muitos dizem que me preciptei, você não espera pelo futuro próximo para saber que naquile dia eu previ o futuro.
Usar módulos não funciona, o que eu usei? o MASAPI, não preciso nem explicar o por que do uso, ele por sí só se explica.
Separo todas as partes por swf do tipo (Application), e carrego no Main Application todas as dependências dos arquevos externos e o framework por RSL, o que resulta para eu um SWF com 30kb e o MASAPI cuida do resto.
Então feito, tamanho de SWF não será problema. Eu vi que um conhecido meu o Arthur lançou um chamado Bulk Loader . Sem dúvida pelo que já li é promissor para caramba, não testei, mais comparando com a capacidade dos criadores e colaboradores, eles não faz besteiras.

Quinto teste – Arquetetura usada para Design Patterns: MVC

Tem gente que ainda acredita no Carningorm da Adobe, eu desaconselho usar, o Carningorm teve seu imporante papel na evolução do Flex e é inquestionável seu uso na versão do Flex 1.5. Já não tenho o que dizer na versão 2.0. No Flex 2, o SDK ganhou tanta maturidade que o que eu vi e vejo por ai é gente usando seu próprio framework para MVC, não faz sentindo usar um framework que para você no campo real não agrega valor tanto do lado do desenvolvedor para treinar sua equepe em aprender Carningorm quanto para quem está pagando por ele.
Por que não focar sua equepe em desenvolver seu próprio framework particular?
Foi e é o que faço sempre em meus projetos específicos e em consultoria. Focar a empresa em desenvolver seu próprio framework para MVC, assim eu tenho de imediato do lado do desenvolvedor uma certa intimidade no que foi feito, a conversa flui mais rápida do que algo que já está pronto no mercado e você tem que adaptá-lo até o máximo para rodar.

Porém nesse específico caso como já havia-se feito parte do software em PureMVC, tive que continuar com o PureMVC. Quem não conhece vale a pena e muito, o PureMVC tem menos idade que o Carningorm, mais é estilo completão, uma de suas características que batem o Carningorm é a documentação completa, coisa que até hoje Carningorm não definiu nada além de tutorial defasado e sem perspectiva de sobrevivência.
O que mais gostei e estou enamorado com o PureMVC são o Facade (extrutura singleton para MVC), Observer(provê encapsulamento do objeto na notificação do callback) .

No meu pessoal, eu copiei essa idéia, facilita muito deixa a complexidade de lado, deixa livre a dependência de versões do Flex SDK.

Sexto teste: Trabalho em equepe de duas pessoas acima.

Sem dúvida um controle de versão é ótimo nestes casos, use o SVN, ele tem se comportado bem com o Flex Builder tanto plug-in quanto Stand Alone. CVS é bom mais não tem comandos que o SVN possui. Já que todos dizem que o SVN é usado em grande maioria e será a substituto do CVS.
Para trabalhar com o Flex Project e SVN, você pode marcar todos os diretórios do seu projeto menos é claro da pasta BIN, não faça isso, caso contrário seu swf terá comportamentos que só o voodoo poderá explicar.

No caso de trabalho solitário, você sozinho pode controlar o histórico local de seu .mxml ou .as, pois o Flex Builder 2/3 já vem o History Local que por padrão guarda até 10x o arquevo salvo. É uma boa quando você quer voltar as alterações de arquevos independentes.

Sétimo teste: Internacionalização.

Eu já vi e desaconselho, se a sua aplicação for vista ou usada apenas por brasileiros, por que usar Multi-Idiomas? Isso é um trabalho de trouxa que quer impressionar o chefe ou à sí mesmo em dizer que tal aplicativo é visualizado em vários idiomas. Lembre-se do alvo, não esqueça que o propósito fundamental do Flex é focado no usuário. Se ele fala só português e será usado só por quem domina o idioma, esqueça essa questão.
Agora no caso de aplicações para américa latina ou mundo, ai sim o uso da internacionalização ( Resource Bundle) é obrigatório, constando neste caso não use traduções dentro do MXML ou actionscript, por favor use o compilador para isso.

Conclusão desta primeira parte.

A segunda parte está vindo por ai.

Flash CS 3/ Flex/ Flex 3/ Flex 3 Designers/ Flex 3 Open-Source/ Flex 3 SDK/ Notícias

Flex Skin Design Extensions para CS3

Quem trabalha na elaboração de interfaces para aplicações ricas ou interfaces para sistemas, costumam usar aplicações vetoriais para desenhar o sublinhar o que essas aplicações terão ou usarão.
Não é de hoje que o Photoshop, Illustrator, Flash e Fireworks ambos da familia CS3 faz isso. Porém a Adobe sentiu que tinha um certo impecílio para fazer fluir isso de forma amigável para os designers.

Como o foco do Flex era justamente developers, mais por fortes influências da Adobe por se tratar de uma empresa que também tem uma forte linha de produtos para designers, visto que é o grande foco da Adobe agora é integrar Designers e Developers síncrona e de forma amigável, a Adobe está disponibilizando isso no novo Flex Builder 3, o que chama-se de Import Skin artwork. Como o Fireworks, Flash, Illustrator e Photoshop faz isso com perfeição e ambas as ferramentas trabalham com edição de imagens ou vetores. Cada aplicativo agora pode ser feito o skin com essas novas extensões de suporte ao Flex 3.

Clique aqui e baixe a extensão para o Fireworks CS3 para uso de Skin nas suas aplicações Flex.

Clique aqui e baixe a extensão para o Flash CS3, em conjunto com o Flash Component Kit, você pode fazer uso de criação de novos componentes com interfaces bem diferenciadas.

Clique aqui e baixe a extensão para o Illustrator CS3, que trabalha justamente com imagens do tipo (*.ai), que são suportadas no Flex 3.

Clique aqui e baixe a extensão para o famoso PhotoShop CS3, ele também trabalha com o Skin import wizard para deixar suas aplicações com Skin mais profissionais.

Em fim, essas pequenas mudanças irão ter grande impacto na maneira como você criou ou irá criar aplicações Flex. De uma forma que Designers agora poderão fazer parte da equepe de desenvolvimento utilizando desses editores de imagens para criação de aplicações flex parecerem menos Flex default theme.

Adobe CS3.0/ AS 3.0/ Flash CS 3/ Flex/ Flex Componentes

Como usar o Flash CS3 com o Flex?

O Flex Doc Team tornou público um documento em PDF que ajuda o desenvolvedor a criar e interagir Flash CS3 SWF com o SWF do Flex.

Essa integração não é apenas feita usando Flash Local Connection, você pode criar componentes diferenciados (bem diferentes mesmo), que o Flex não é capaz de criar, e interagir usando os componentes do Flex para os mesmos.

Eu já fiz alguns experimentos alguns meses atrás que foi criar Gráficos no Flex sem o Flex Charts, usando só o Flash CS3 + Tweener(uma biblioteca pública feita pelo Zé). Você pode ver o exemplo aqui.
Quando se entra no Mundo do Flash, você pode ter inúmeras opções de componentes 100% diferentes dos atuais e corriqueiros HBox,Vbox, Buttons … etc.

Saiba mais, Imprima o PDF e saiba mais.

Flash CS 3/ Flex

Flex 2.0.1 e Flash CS3

Caso você já tenha acesso ao Flash CS3 e esteja importando alguns filmes(.swf) ou apenas movieclips para serem estendidos ou usar como UI de algum componente pessoal, Você pode ter tido algum problema como eu tive, o Design view acaba parando de funcionar, se por um acaso você usa um movieclip que tenha um framerate maior que 25 frames por segundo.

Porém Potter me anunciou hoje que eles consertaram esse errinho ignóbil que vou te contar, me tirou uma tarde toda para descobrir isso e tive que mudar para Flash8 e continuar fazendo.

Caso agora como não preciso mais, quem tiver à procura. Podem baixar aqui.

À propósito hoje eles começaram a venda oficial e quem comprar direto do site já pode ter direito ao link para download.

Minha dica é, comprem direto do site Adobe/US. O preço tá mais em conta e os impostos são mais baratos. Aproveitem.

Flash CS 3

Novidades do Flash CS 3 – parte 1

Antes que você baixe o Flash CS 3 que estará disponível só dia 18 para download, acompanhe de perto as novidades que o Flash CS 3 vai trazer de benefícios será uma série de vários posts relacionados ao novo Flash ( aka Flash 9).

Na ENG já começamos a preparar material para começarmos a oferecer à partir do dia 18 desse mês a primeira turma para Flash CS 3 e com muito Actionscript 3.0 nesse curso, mais detalhes e garantia de sua vaga nessa turma mande e-mail para ana.carolina@eng.com.br

Bom, sobre o Flash CS 3, muita coisa mudou e muita coisa inútil foi removida, de imediato você tem as seguintes alterações:


* Clique na imagem para ampilar

Novo Start Page

Em nosso Start Page, agora você vai ter só suporte ao Actionscript 3.0 e Actionscript 2.0, novos templates para BREW com suporte a Flash lite, em outros posts comentarei sobre.
Foram removidas definitivamente a brincadeira que a Macromedia criou na época que era Flash Slide Presentation e Flash Form Presentation, com a chegada do Actionscript 3.0 a definição de aplicação ficou bem mais clara para o ponto de vista Developer e Designer. Para o Developer com toda certeza ele vai optar por usar Flex ao invés de Flash, e para o Designer com orientação a programação de elementos visuais ele com toda certeza vai usar o Flash CS 3 como apenas Flash File.


A time line agora ganhou um botão de auto-hide, resumindo, agora você usa o botão logo abaixo do documento, antes no Flash 8 era logo acima, e dificil acesso por um atalho de teclado.

Novos workspace, isso com toda certeza foi adotado depois que o pessoal conheceu o Eclipse à fundo. Agora você pode setar seus workspace e exportá-los e importá-los de outros usuários, e assim ficar acostumado com o ambiente que você desenvolve em outra instalação do Flash.

Amanhã tem mais.