Entre as novidades do Flash Player 10.1 existe a possibilidade de trabalhar a manipulação de som vinda do microfone. Dê uma olhada no estudo abaixo e deixe sua sugestão.
Ligue seu microfone e fone (é importante usar o fone), a webcam e dê uma olhada.
*Requer Flash Player 10.1
Quer saber mais sobre transformações de audio, veja os links abaixo.
Como (quase) todo mundo sabe, o Flash Player 10.1 e AIR 2.0 trazem suporte ao Multitouch, isso torna inúmeras possibilidades de interação viáveis. Ainda existe um grande problema que é a ausência de dispositivos preparados para este tipo de interação.
Para quem tem um Macbook Pro (entre outros dispositivos), já pode utilizar o Multitouch. No caso do Macbook, ainda existe a necessidade da aplicação estar rodando no AIR. Apesar disso, o desenvolvimento é extremamente simples, porém, é preciso muito cuidado com o que o dispositivo suporta.
Uma maneira simples de saber quais eventos o dispositivo suporta é usando:
Neste trace você poderá avaliar que tipo de eventos o dispositivo suporta, caso ele tenha suporte a Gestures, você ainda pode verificar quais eventos estão disponíveis.
trace(Multitouch.supportedGestures);
O código abaixo mostra as fases dos eventos, como não faria sentido disponibilizar um aplicativo em AIR para isso, depois do código está o print do retorno.
Um bom costume para programadores em geral, é buscar alguns desafios e tentar executá-los. Não necessariamente você precisa buscar algo extremamente complexo, só o fato de fazer algo já é um exercício e sempre positivo.
Há algumas semanas me pediram para criar um Puzzle, eu nunca havia criado um e fiquei imaginando como poderia para fazer isso. No caso existia a limitação do Flash Player, era necessário publicar no máximo, na versão 6.
Depois de entregue, resolvi portar para o AS3 e publicar aqui uma versão reduzida do código. Abaixo você pode vê-lo rodando.
Como já havia um layout definido para as peças do puzzle, eu as aproveitei. Como o foco nesse caso não é a estrutura do Fla, vamos direto pro código.
package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.net.URLRequest;
/**
* ...
* @author Bruno Ribeiro
* @link www.brunoribeiro.net
* @email contato@brunoribeiro.net
*/
public class Main extends MovieClip
{
private var _url : URLRequest;
private var _loader : Loader;
private var _bmp : BitmapData;
private var _mcImg : MovieClip;
private var _currentPiece : DisplayObject;
private var _item : int;
private var _inPosition : int;
public function Main()
{
_loadImage();
}
/**
* Carrega a imagem
*/
private function _loadImage() : void
{
_url = new URLRequest("http://www.brunoribeiro.net/blog/img/imgBase.jpg");
_loader = new Loader();
_mcImg = addChildAt(new MovieClip(), 0) as MovieClip;
_loader.load(_url);
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, _init, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_UP, _handlerRelease, false, 0, true);
}
/**
* Monta o quebra-cabeça
* @param e
*/
private function _init ( e : Event ) : void
{
_mcImg.addChild(_loader.content) as MovieClip;
var i : int = 0;
var j : int;
var bmp_temp : BitmapData;
var mc : MovieClip;
var target : MovieClip;
/**
* Pega o bitmapdata da imagem base
*/
_bmp = new BitmapData(_mcImg.width, _mcImg.height, true);
_bmp.draw(_mcImg, new Matrix());
for(i; i < 5; i++)
{
for( j =0; j <6; j++)
{
_item++;
mc = getChildByName("mc_" + i + "" + j) as MovieClip;
target = mc.mcTarget as MovieClip;
/**
* Cropa o trecho da imagem que importa
* A mascara já estava definida na timeline que recebi
*/
bmp_temp = new BitmapData(mc.width, mc.height, true);
bmp_temp.copyPixels(_bmp, new Rectangle(mc.x, mc.y, mc.width, mc.height), new Point(0, 0));
/**
* Adiciona a imagem ao target
*/
target.addChild(new Bitmap(bmp_temp));
/**
* Guarda a posição inicial para usar depois no hit
*/
mc.posX = mc.x;
mc.posY = mc.y;
/**
* Adiciona Listeners para o drag'n drop
*/
mc.addEventListener(MouseEvent.MOUSE_DOWN, _handlerClick, false, 0, true);
mc.addEventListener(MouseEvent.MOUSE_UP , _handlerRelease, false, 0, true);
}
}
/**
* Ao final troca a profundidade da imagem base
* reduz o alpha
* reposiciona as peças
*/
_mcImg.alpha = .3;
swapChildren(_mcImg, MovieClip(getChildByName("mc_00")));
_posicionaAleatorio();
}
/**
* Quando o usuário solta a peça
* Para o drag e verifica o posicionamento,
* se estiver dentro da área aceitável para
* o hit, a peça assume a posição correta
*
* @param e
*/
private function _handlerRelease(e:MouseEvent):void
{
/**
* Trata o releaseOutside
* caso o release não seja feito na peça
* eu removo o drag do objeto corrente
*/
var obj : MovieClip = e.currentTarget as MovieClip;
if (obj == null)
{
obj = _currentPiece as MovieClip;
}
obj.stopDrag();
/**
* Teste do hit
* Você pode aumentar/reduzir a sensibilidade
* modificando o valor 10
*/
if (obj.x >= (obj.posX - 10) && obj.x <= (obj.posX + 10))
{
if (obj.y >= (obj.posY - 10) && obj.y <= (obj.posY + 10))
{
obj.x = obj.posX;
obj.y = obj.posY;
obj.removeEventListener(MouseEvent.MOUSE_DOWN, _handlerClick, false);
obj.removeEventListener(MouseEvent.MOUSE_UP, _handlerRelease, false);
/**
* Adiciona 1 nos itens que estão em posicão
* e verifica se era a última peça
* em caso positivo, game over
*/
_inPosition++;
if(_inPosition == _item)
{
trace('game over');
}
}
}
}
/**
* No click, inicia o drag da peça
* @param e
*/
private function _handlerClick(e:MouseEvent):void
{
MovieClip(e.currentTarget).startDrag(false, new Rectangle(0, 0, stage.stageWidth, stage.stageHeight));
_currentPiece = e.currentTarget as DisplayObject;
}
/**
* joga as peças para a parte de baixo, onde você pode manipulá-las
* o posicionamento é aleatório
*/
private function _posicionaAleatorio () : void
{
var i : int = 0;
var j : int = 0;
for (i; i < 5; i++)
{
for (j = 0; j < 6; j++)
{
var mc : MovieClip = getChildByName("mc_" + i + "" + j) as MovieClip;
mc.x = randRange(0, (stage.stageWidth - mc.width));
mc.y = randRange(440, (stage.stageHeight - mc.height));
}
}
}
/**
* Gera número aleatório dentro de um ranger
* @param min
* @param max
* @return
*/
function randRange(min:Number, max:Number):Number
{
var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
return randomNum;
}
}
}
Essa talvez seja a forma mais fácil de fazer o puzzle com as peças em formato curvilíneo.
[UPDATE]
Esse post deveria ter sido publicado há 4 meses, no entanto, mais uma vez o WP me enganou.
Eu não programo em PHP por não gostar da linguagem (é gratuito. Tá, eu só tento evitar), isso algumas vezes é um problema, noutras uma solução.
Essa antipatia vem desde que comecei a programar, mas graças a isso, passo boa parte do tempo buscando soluções interessantes que me permitam não desenvolver nessa linguagem.
O WordPress, por exemplo, me permite ter sites dinâmicos sem esforço na parte client. Em um dos projetos em que estou trabalhando há uma grande integração com o WordPress, daí comecei a desenvolver um framework pra facilitar essa integração.
Abaixo você pode ver um exemplo simples dessa integração.
Num dos projetos que estou trabalhando, tive a necessidade de fazer um dump numa classe, depois de procurar um pouco na web, encontrei a função describeType.
Um exemplo rápido do uso:
Describe.as
package
{
public class Describe
{
private var _name : String;
private var _value : String;
public function Describe( name : String, value : String)
{
_name = this.name;
_value = this.value;
}
public function get value():String { return _value; }
public function set value(value:String):void
{
_value = value;
}
public function get name():String { return _name; }
public function set name(value:String):void
{
_name = value;
}
}
}
Main.as
package
{
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.utils.describeType;
[SWF(width=800, height=800, backgroundColor=0x000000, frameRate=30)]
public class Main extends MovieClip
{
private var _describe : Describe;
public function Main()
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
_describe = new Describe("Nome", "valor");
trace(describeType(_describe));
}
}
}
O retorno disso é:
Uma das coisas bacanas de se fazer como exercício, usando essa função, é uma espécie de navegador para suas classes.
** Neste exemplo estou compilando usando o SDK do Flex.
Há algumas semanas chegaram na agência com um desafio, criar um portfolio para um diretor de criação.
Fizemos um rápido brainstorm e baseado no que tinham me passado, sugeri usarmos alguns vídeos combinados com uma espiral, onde seria exibido o trabalho do diretor de criação. Comecei o processo e criei a espiral, mas na hora de produzir os vídeos… algo deu errado. Pra complementar, o Rodrigo Freire achou o portfolio de um diretor de arte que usava uma espiral, então abandonamos a idéia.
Pensei em reutilizar a espiral para exibir – tudo de maneira experimental, claro – resultado de busca, fazer filtro de dados, mostrar os posts desse blog de uma maneira diferente… enfim, eu queria usar isso para alguma coisa.
Como não cheguei a uma conclusão, estou publicando aqui o swf para que possam dar uma olhada, se houver alguma idéia, é só avisar.
O código fonte devo liberar em breve, só quero refatorar ele para que possam utilizar por aí, clique na imagem para ver um exemplo.
FlashVars é uma forma simples de parametrizar suas aplicações em Flash. O problema é que no AS2 as coisas eram relativamente mais simples, porém, menos organizadas.
A passagem do parâmetro a partir do HTML vai variar de acordo com a forma que você adiciona seu swf. Na maneira mais antiga de fazer isso, é só lembrar de adicionar ao fim das chamadas do SWF os parâmetros no seguinte formato:
Uma classe extremamente útil quando você está construindo um site, é a classe ColorTransform. Ela traz uma grande diversidade de possibilidades, desde pequenos efeitos de rollover até efeitos mais complexos, na verdade, o limite é a criatividade.
Abaixo alguns exemplos, esses códigos foram feitos apenas para ilustrar e não foram refatorados, em todo caso servem como material de estudo.
package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
import flash.text.TextColorType;
public class Sample extends MovieClip
{
private var _mc : MovieClip;
private const COLOROVER : Number = 0XCCFF00;
private const COLOROUT : Number = 0XCCCCCC;
public function Sample()
{
_mc = addChild(new MovieClip()) as MovieClip;
_mc.addEventListener(MouseEvent.ROLL_OVER, handlerOver, false, 0, true);
_mc.addEventListener(MouseEvent.ROLL_OUT, handlerOut, false, 0, true);
_drawRectangle();
}
public function _drawRectangle ():void
{
_mc.graphics.clear();
_mc.graphics.beginFill(0xCCCCCC, 1);
_mc.graphics.drawRect(0, 0, 200, 200);
_mc.graphics.endFill();
}
public fnction handlerOut(e:MouseEvent = null):void
{
var cor : ColorTransform = new ColorTransform()
cor.color = COLOROUT;
_mc.transform.colorTransform = cor;
}
public function handlerOver(e:MouseEvent = null):void
{
var cor : ColorTransform = new ColorTransform()
cor.color = COLOROVER;
_mc.transform.colorTransform = cor;
}
}
}
Outro Exemplo
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
import flash.text.TextColorType;
public class Sample2 extends MovieClip
{
private var _mc : MovieClip;
private var _transform : ColorTransform;
private const COLOROVER : Number = 0XCCFF00;
private const COLOROUT : Number = 0XCCCCCC;
public function Sample2()
{
_mc = addChild(new MovieClip()) as MovieClip;
_mc.addEventListener(MouseEvent.ROLL_OVER, handlerOver, false, 0, true);
_mc.addEventListener(MouseEvent.ROLL_OUT, handlerOut, false, 0, true);
_transform = new ColorTransform();
_drawRectangle();
}
public function _drawRectangle ():void
{
_mc.graphics.clear();
_mc.graphics.beginFill(0xCCCCCC, 1);
_mc.graphics.drawRect(0, 0, 200, 200);
_mc.graphics.endFill();
}
public function handlerOut(e:MouseEvent = null):void
{
addEventListener(Event.ENTER_FRAME, _handlerEventOut, false, 0, true);
removeEventListener(Event.ENTER_FRAME, _handlerEventOver);
}
public function handlerOver(e:MouseEvent = null):void
{
addEventListener(Event.ENTER_FRAME, _handlerEventOver, false, 0, true);
removeEventListener(Event.ENTER_FRAME, _handlerEventOut);
}
private function _handlerEventOut(e:Event):void
{
_transform.redOffset -= 10;
_mc.transform.colorTransform = _transform;
if (_mc.transform.colorTransform.redOffset <= -10)
{
removeEventListener(Event.ENTER_FRAME, _handlerEventOut);
}
}
private function _handlerEventOver(e:Event):void
{
_transform.redOffset += 10;
_mc.transform.colorTransform = _transform;
if (_mc.transform.colorTransform.redOffset >= 250)
{
removeEventListener(Event.ENTER_FRAME, _handlerEventOver);
}
}
}
}
Outra classe que pode dar uma ajuda é a TextFormat segue um exemplo:
public class Item extends MovieClip
{
private var _label : TextField;
private var _txtFormatOver : TextFormat;
private var _txtFormatOut : TextFormat;
public function Item()
{
buttonMode = true;
_txtFormatOver = new TextFormat();
_txtFormatOver.color = 0xFFFFFF;
_txtOut = new TextFormat();
_txtOut.color = 0x767676;
_label = addChild(new TextField());
addEventListener(MouseEvent.ROLL_OVER, _handlerOver, false, 0, true);
addEventListener(MouseEvent.ROLL_OUT, _handlerOut, false, 0, true);
}
private function _handlerOut(e:MouseEvent = null):void
{
_label.setTextFormat(_txtFormatOut);
}
private function _handlerOver(e:MouseEvent = null):void
{
_label.setTextFormat(_txtFormatOver);
}
}
Muita gente tem me perguntado sobre como passar parâmetros através de eventos no AS3.
No AS2 eu, assim como muitos outros, havia criado uma classe Delegate que permitia a passagem de parâmetros, agora é hora de dar uma olhada em como fazer o mesmo no AS3.
Acho que a forma mais fácil de fazer isso é criar uma classe que estenda a Event, então, segue o código.
CustomEvent.as
package com.ribeiro.events {
import flash.events.Event;
public class CustomEvent extends Event {
/**
* Não estou tipando o argumento para que possa ser passado qualquer
* Tipo de objeto;
*/
public var argumment : *;
/**
* Construtor
*
* @param type
* @param bubbles
* @param cancelable
* @param ... a
*/
public function CustomEvent ( type : String, bubbles : Boolean = false,
cancelable : Boolean = false, ... a : * )
{
super(type, bubbles, cancelable);
argumment = a;
}
}
}
Classe que dispara o evento:
/**
* Sua classe precisa estender MovieClip, Sprite ou EventDispatcher
**/
public class SuaClasse extends MovieClip
/**
* No momento do disparo do evento
**/
dispatchEvent(new CustomEvent(SuaClasse.Evento, false, false, "agrumento1", "argumento2"));
Last
Twitter
LinkedIn
Facebook