A ultima turma do Imersão Adobe Flex recebeu alguns “presentinhos”. Dentre eles o componente PodFlip, utilizado numa das aplicações que desenvolvemos aqui na DClick e que o pessoal já andou vendo por aí.

É verdade que o Flex 4 e com as novas capacidades 3D do Flash Player isso será bem mais fácil no futuro. Mas enquanto este dia não chega agora é a hora de compartilhar este componente com o restante de comunidade. Espero que seja util em algum projeto para vocês.

Clique aqui para fazer o download do código fonte deste screencast.

O screencast abaixo é bem simples, porém muito eficiente para proteger o seu código. É importante ressaltar que isso tudo é necessário, pois o Action Script 3 não possui construtor privado e muito menos a implementação nativa de Enum.

Ano passasdo perguntei ao Beck como passar parâmetros para Event Handlers adicionados dinamicamente, porque quando você adiciona Event Listener usando myComp.addEventListener(...), o handler deve esperar apenas o parâmetro do evento. O Beck deu uma solução para isso, mas deixou claro que é apenas uma solução "alternativa", não a melhor delas.

Alguns dias atrás eu estava trabalhando com requisições simultâneas para o servidor e queria guardar o parâmetro da chamada, mas não queria ter que retornar ele do Java, então pensei em uma outra solução para isso. Considerando que seu Event Handler está esperando uma Function que tem somente um parâmetro Event, eu criei uma outra Function que retorna uma Function esperando um parâmetro Event. Mas o segredo é que o escopo de Function Closure permite que você acesse parâmetros tanto da primeira quanto da segunda Function, então você pode fazer isso:

Mas e agora se você quiser usar esse Event Handler diretamente no MXML? Bem, você não pode fazer isso:

Isso não vai funcionar porque a Function que retorna da primeira Function está esperando um parâmetro Event. Então, você pode fazer assim:

Estranho, não? Talvez mais um patter do FreaktionScript?

Quando criamos um Container no Flex e não especificamos seu tamanho, o tamanho será calculado com base nos filhos que são adicionados ao Container. Porém, caso você especifique um tamanho para ele, o tamanho passa a ser o que você especificou e, caso ele seja menor do que o tamanho dos filhos, o componente exibirá uma ScrollBar.

Mas e se você quiser que ele volta a calcular o tamanho para você? Existem alguns casos em que precisamos que isso seja feito, porém não podemos atribuir "null" ou -1 como valor na propriedade para que o Container volte ao comportamento inicial.

Conversando com o Beck Novaes a muito tempo atrás, ele me apontou uma solução para isso. Se vocês olharem no código de alguns componentes do Flex (como o Container ou o UIComponent), vocês encontrarão várias referências para a função isNaN() e, como muitos de vocês devem saber, NaN é o valor atribuído a variáveis numéricas quando não estão com algum valor numérico atribuído.

Portanto, para que o componente calcule o tamanho para você, faça o seguinte:

Um exemplo completo:

Estranho, não? Seria esse mais um pattern do FreaktionScript?

Não é a primeira vez que entro com meu serial do Flex Builder e recebo a mensagem dizendo que meu serial é inválido. Dessa vez fiz uma procura e achei o que causa tal mensagem de erro.

Por algum motivo quando executamos o eclipse, ele não sobe com a permissão de admin na máquina, o que o impossibilita de criar o aquivo license.properties que é responsável por armazenar seu serial.

Para resolver o problema, bastei executá-lo via Terminal com o comando sudo.

sudo /Applications/eclipse/Eclipse.app/Contents/MacOS/eclipse

Com tal comando, o eclipse foi executado com permissão de admin, o que possibilitou o serial ser salvo sem problema algum.

Não sei se o mesmo acontece no windows, mas caso sim, basta executar o eclipse com permissão de admin que isso se resolverá.

Em minha estréia, trago para você este script para agilizar a construção de formulários Flex, ele apenas aponta "o caminho", você deverá implementar com os demais validadores.

Para isso vamos começar pela classe Event. chamaremos essa classe de CustomEvent, seu objetivo será criar o validador dentro do evento (mx.events.FlexEvent) creationComplete do campo, para isto foi necessário adicionar três propriedades à classe, que são: validateType do tipo Object que receberá as informações para configurar o validador, o validator do tipo coringa para que fique mais fácil de trabalhar com vários validadores diferentes (aqui vou trabalhar apenas com mx.validators.StringValidator e mx.validators.EmailValidator), e a constante contendo o nome do evento que vai caracterizar a configuração que chamamos de VALIDATECHANGE.

Os validadores são classes/tags separadas do campo, para agilizar o desenvolvimento precisamos dos validadores nos campos, para isso vamos manipular uma classe baseada no TextInput (spark.components.TextInput), de forma a permitir a passagem da configuração básica do validador na tag, trabalharemos com a tag CustomInput adicionando esses atributos, que são eles: validateType que distinguirá o tipo do validador, message contendo a mensagem que será enviada ao navegador em caso de erro, required caracteriza como requerido ou não, index que ocupará o lugar do id. Para manipulação interna foram criadas as propriedades: _initialized responsável por informar se é a primeira vez que o validador será criado,_params responsável por armazenar as configurações para criação do validador, e _validator o próprio validador.

Os campos serão criados no modelo da classe Form (mx.containers.Form), e como quero deixar meu formulário mais genérico, ou seja, quero que os ids, labels e validadores, sejam flexíveis, possibilitando uma criação dinâmica, foi criada então a tag CustomFormBase, que receberá os dados para configuração do formulário, dinamicamente, em uma única propriedade, e ainda receberá a ação do submit (que não foi trabalhada tão profundamente).

Nosso primeiro MXML é bem simples, utilizando a classe Repeater (mx.core.Repeater), dispondo as tag da maneira que desejamos que sejam vizualizadas. (atenção UX)

Já que criamos um padrão de construção, vamos continuar nele, separando o ActionScript do MXML, durante a criação do arquivo de referência da aplicação.

E adicionamos os dados (fake) fixos.

Por fim nossa chamada mãe.

exemplo
source

Este material foi registrado no http://cookbooks.adobe.com, local onde, a comunidade de desenvolvedores e usuários de tecnologias Adobe, podem compartilhar informações. E ainda no http://blog.pcsilva.com, origem do post.

Bom, poucas pessoas sabem para que serve o operador lógico "||=". Vou tentar explicar um pouco sobre ele.

Na documentação da adobe este operador é descrito da seguinte forma: "Assigns expression1 the value of expression1 || expression2.", traduzindo seria: "Atribui para expressão1 o valor de expressão1 ou da expressão2". Lembrando que para o operador lógico usamos com sintaxe "expressão1 operador expressão2".

Vou mostrar em exemplos mais claros como isso funciona.

Exemplo1:

Exemplo2:

Logo, visualizando a diferença dos 2 exemplos, concluímos que o operador lógico "||=" faz o mesmo que o código abaixo, porém de uma maneira mais "elegante".

Espero que tenham gostado.

Você sabe o que acontece no código abaixo?

Erro de compilação? Erro de execução? Nenhum dos dois. O resultado do trace é "Nome: Bruno Sales". A variável foi criada mesmo que o código dentro do IF não tivesse sido executado.
Isso acontece pois o ActionScript só tem 2 tipos de escopo: Global e Local; onde Local é considerado todo o escopo dentro de uma função.

Contudo, sugiro para que nunca utilizem algo deste tipo em seu processo de desenvolvimento. A lógica de seu código ficará muito confusa e causará sérios problemas para manutenção e debug.

Metadatas são declarações usadas em suas classes ActionScript/MXML que podem definir atributos de seus componentes, propriedades "bindable", eventos, etc. Quem programa em flex já deve conhecer algumas das mais comuns como [Bindable] e [Event], e para quem tem um conhecimento em Java, pode comparar metadatas com annotations.

As tags de metadata são associadas a declarações de classe, um único campo de data ou um método. Para associar uma metadata basta você escrevê-la em uma linha antes de sua propriedade ou método, como por exemplo:

Porém, isso não passa de uma implementação básica. Até o momento só utilizamos metadatas pré-definidas na sdk do Flex, e o que gostariamos mesmo seria criar nossas próprias metadatas, e saber como interpretá-las.

Vamos por passos. O exemplo a seguir mostra a implementação de uma metadata personalizada para atributos de uma classe.

Primeiro passo. Vamos criar nossa classe e definir uma Metadata personalizada em um atributo.

OBS: O flex 4 já reconhece e compila qualquer metadata automaticamente em qualquer classe. O flex 3 precisa de um parâmetro para reconhecer e compilar as metadatas, no caso da minha classe de exemplo, o parâmetro seria: -keep-as3-metadata+=MinhaTag

Segundo Passo. Precisamos de algum método que nos retorne o nome da propriedade que contenha a minha nova metadata.

Este método, nos retorna uma lista de propriedades do parâmetro object cujo metadata seja identica ao parâmetro metadataName.

Terceiro Passo. Utilizar o método com nossa classe de teste.

O resultado do trace deste método seria: "propriedade: nome - valor: Bruno Sales".

Pronto. Com essa base, você será capaz de implementar metadatas personalizadas de atributos em sua aplicação. Para métodos e classes, fica para uma próxima vez.

Andre Michelle é um dos programadores por traz do Hobnox Audiotool, uma aplicação RIA utilizando de varias formas de mostragem e manipulação de som.

Ele criou esse exemplo da aplicação de um algoritmo que chama Karplus Strong. Este algoritimo serve para gerar sons com o mesmo timbre e aparência das cordas de um violão. É realmente legal ver esses exemplos performando a nova API de sons do Flash Player 10. No site, Andre Michelle precisou escrever que "não foi usado nenhum sample de som de violão neste exemplo. Tudo é gerado dinamicamente em AS3.", tamanha a semelhança a um violão real. Há outros exemplos bem interessantes também, veja abaixo.
http://lab.andre-michelle.com/karplus-strong-guitar

Olá pessoal, essa é o segundo post da sequência de três partes sobre Dynamic Sounds no Flash Player 10. Veja aqui a primeira parte da sequência. A idéia inicial era fazer um grande screencast explicando como gerar sons dinâmicos e as novas features da API de som, mas enquanto estava criando o screencast concluí que o conteúdo seria melhor entendido se fosse escrito. Da mesma forma que a tesoura não serve para pregar mas para cortar e o martelo não serve para cortar mas para pregar, creio que um screencast, pelo seu caráter visual, serve muito bem para demonstrar um sistema ou detalhar o funcionamento de uma classe em Actionscript 3.0 mas não serve tão bem para demonstrar conceitos abstratos, pois estes necessitam imaginação. Logo abaixo, está o download da classe utilizada para gerar sons dinâmicos no Flash 10.

Imaginem agora, eu tentando explicar em um screencast essa fórmula:

Fórmula básica da onda senóide
y(t) = A * seno(2 * π * F * t + f);

sendo:

A → A amplitude máxima da onda.
π → o número PÍ (3,14....);
F → A frequência da nossa onda.
t → o tempo, que pode ser em segundos(s), milissegundos(ms) etc.
f → a fase da nossa onda que no nosso caso é sempre zero.

Pois bem, a API de som do Flash Player 10 utiliza ByteArray para guardar em buffer o som manipulado. Se o nosso objeto Sound (flash.media.Sound) não carregou nenhum arquivo de audio (wav, mp3, midi etc.) o Sound Object vai disparar um evento(flash.events.SampleDataEvent) do tipo SAMPLE_DATA de tempos em tempos, sempre que ele precisar de uma nova amostra de som. As amostras de som guardadas em buffer pelo objeto variam entre 0.3 e 0.5 segundos. Portanto o objeto dispara esse evento aproximadamente 2 vezes e meia por segundo.

Capturamos este evento com uma função handler:

Esta função captura o evento gerado e aplica a formula acima para gerar os dados do som preenchendo o ByteArray.

O ByteArray é preenchido com números que indicam a oscilação de onda sonora. Por isso a necessidade de usar a formula básica da onda senóide para cria-los. A nova Sound API do Flash 10 pega esses números e transforma-os no som que ouvimos quando colocamos esse algoritmo para funcionar.

Simplificando a função:

A frequência (Hz):
Precisamos da frequência da nota musical que queremos tocar e, como o Flash Player utiliza o bitrate de 44100 Hz (maior qualidade), precisamos dividir a frequência(por exemplo 440 Hz para o Lá do piano) pelo bitrate do flash. Assim obtemos a Frequência Angular e utilizamos ela para o cálculo na formula.

O ByteArray e a quantidade de Samples:
O ByteArray é preenchido com números que indicam a oscilação de onda sonora. Por isso a necessidade de usar a formula básica da onda senóide para cria-los. A nova Sound API do Flash 10 pega esses números e transforma-os no som que ouvimos quando colocamos esse algoritmo para funcionar. Outro detalhe importante é que o ByteArray é preenchido de dois em dois samples. Um é o lado esquerdo, o outro é o lado direito do som Stereo.

O tempo:
A variação espacial da onda sonora acontece em função do tempo. O tempo no nosso exemplo está diretamente ligado a quantidade de Samples dentro do ByteArray, de maneira que o objeto Sound vai “espalhar” os samples em um espaço de 0.3 até 0.5 segundos que é o tamanho do buffer para sons gerados. Por isso os 'estalos' acontecem com quantidades de samples muito pequenas.

O “event.position”:
De maneira geral, o event.position representa a posição atual na linha do tempo do som em execução. Ele pode ser usado como uma “compensação” para a latência, (entenda, a comunicação entre a placa mãe e a placa de som), somando-o com o tempo, modificando em tempo de execução a quantidade de Samples no ByteArray. Isto também está relacionado com os possíveis 'estalos' do som.

Pois bem, na terceira parte da sequência vamos ver alguns usos interessantes para a nova API de som do Flash Player 10.

Deixo aqui o download da classe NotesPlayer que criei com o algoritmo pronto para usar e o link para o projeto no google.code, com o objetivo de criar um suporte para músicos, com mapas de acordes e varios usos para a API de som.

Até!

Pode parecer uma coisa boba, mas muita gente ainda tem dúvidas de como fazer o bind em functions no Flex. O maior problema com isso é que, como o resultado de uma function pode depender de muitos fatores, o Flex não tem como saber se o valor foi atualizado ou não, portanto o bind não funciona.

Considere um exemplo bobo onde temos dois TextInput e o segundo tem um bind para uma function que multiplica o valor do primeiro por 3 sempre. Algumas pessoas tentariam fazer dessa maneira:

Dessa maneira, o valor nunca será atualizado, pois o Flex não tem como saber que o “tiValor1.text” lá dentro da function deverá ser monitorado. Uma das soluções possíveis, e mais utilizadas pela maioria das pessoas, é passar uma propriedade que seja bindable como parâmetro para a function. Assim, toda vez que o valor bindable for atualizado a function será chamada novamente. Dessa maneira:

Dessa maneira, o bind com a function irá funcionar perfeitamente, mesmo sem utilizar a metadata tag [Bindable]. Mas e em casos no qual não temos como passar um valor bindable como parâmetro para a function? Um outro exemplo bobo seria de que o segundo TextInput deveria receber um valor aleatório sempre que o do primeiro TextInput fosse atualizado. Você passaria uma propriedade bindable pra function, mesmo que ele não fosse utilizada dentro da function?

Bom, lendo a documentação do Flex, você poderá encontrar uma outra solução que poucos programadores costumam utilizar. Metadata tag [Bindable] em conjunto com um evento declarado no Bindable. Nesse caso, você dispararia esse evento toda vez que desejasse que os lugares que fazem bind com a function atualizem seus valores. Exemplo:

Dessa maneira o bind também irá funcionar e atualizará o valor do segundo TextInput corretamente, sem a necessidade de uma "gambiarra" passando uma propriedade bindable inútil como parâmetro.

Olá Pessoal,

Vamos publicar uma série de 3 posts(incluindo screencasts) falando a respeito da criação dinâmica de sons, um dos novos recursos do Flash 10. Este é o primeiro deles e contém a aplicação, a "parte prática" do que você vai aprender na "parte teórica"(próximo post-screencast).

Nessa aplicação exemplo você pode gerar sons em notas musicais específicas, como por exemplo A(Lá Maior), G(Sól Maior), Em(Mí menor) e muitas outras. Divirta-se e fique atento para os próximos Screencasts!

ps.: Necessário o plugin do Flash 10 instalado para visualizar a aplicação.

Eu havia postado uma breve introdução sobre efeitos 3D nativos do Flash Player 10 há algum tempo. Com base naquele estudo e um entendimento melhor de como o FP10 funciona, criei este componente que, apesar de comum para quem usa frameworks 3D (Papervision, etc...), funciona muito bem nativo e consequentemente fica muito mais leve.

Além disso o componente funciona com qualquer DisplayObject, tornando sua interatividade ainda maior.

A demo a seguir mostra o componente e algumas de suas propriedades:

Você pode visualizar aqui o código fonte.
(Não esqueça que este é um projeto FP10. Para este funcionar vá em Propriedade do Projeto > Flex compiler > Require Flash Player e preencha com 10.0.0).

Veja através deste screencast como seria fácil construir seu "próprio Skype" ou colocar a funcionalidade de Voip em suas aplicações Flex e Flash.

Clique aqui para fazer o download.