terça-feira, 19 de maio de 2009

Trocadilhos Geek

Olá, hoje escutei mais um "trocadilho geek", então resolvi postá-los aqui para homenagear seus autores e mudar um pouco de assunto...

"Escreveu, não leu... Estoura o Buffer!"
(Rodrigo P. Botelho)


"O que o listener não vê, o código não sente..."
(Mateus P. Vanzo)


Se você tem algum, me mande no e-mail idemax@gmail.com que eu publico aqui!

domingo, 17 de maio de 2009

Loader do Stage e de aquivos externos (Preloader)

Olá, ví alguns posts na internet sobre esse assunto mas sempre estavam faltando algo. Nesse post vou tentar mostrar os dois principais carregadores em actionscript 3.0, o carregamento do STAGE e de um arquivo externo, no caso, uma imagem JPEG.

Esse post também é dedicado ao meu amigo que está com dificuldades nesse assunto.

Segue abaixo o código da classe Main:

package  
{
import fl.controls.ProgressBarMode;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.ProgressEvent;
import flash.net.URLRequest;

/**
* ...
* @author www.idemax.net
*/
public class Main extends MovieClip
{
private var externalLoader:Loader;

public function Main()
{
stop();

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

loaderInfo.addEventListener(Event.INIT, onStageLoaderInit);
loaderInfo.addEventListener(ProgressEvent.PROGRESS, onStageLoaderProgress);
loaderInfo.addEventListener(Event.COMPLETE, onStageLoaderComplete);
}

/**
* Iniciou o carregamento do STAGE
* @param event
*/
private function onStageLoaderInit(event:Event):void
{
event.target.removeEventListener(Event.INIT, onStageLoaderInit);

stageLoader.label.text = '0%';
}

/**
* Enquando está carregando o STAGE
* @param event
*/
private function onStageLoaderProgress(event:ProgressEvent):void
{
var pct:Number = Math.round((event.bytesLoaded / event.bytesTotal) * 100);

stageLoader.label.text = pct + '%';
}

/**
* O STAGE acabou de carregar
* @param event
*/
private function onStageLoaderComplete(event:Event):void
{
event.target.removeEventListener(Event.COMPLETE, onStageLoaderComplete);

addFrameScript(1, onFrame2);

gotoAndStop(2);
}

/**
* Linha do tempo no FRAME 2
*/
private function onFrame2():void
{
botao.label = 'carregar imagem externa';
botao.addEventListener(MouseEvent.CLICK, onButtonClick);

externalLoader = new Loader();
externalLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onExternalLoaderProgress);
externalLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onExternalLoaderComplete);
}

/**
* Quando o botão de 'carregar imagem externa' é clicaco
* É iniciado o Loader
* @param event
*/
private function onButtonClick(event:MouseEvent):void
{
botao.enabled = false;

barra.mode = ProgressBarMode.MANUAL;

externalLoader.load(new URLRequest('imagem_externa.jpg'));
}

/**
* Enquando carrega a imagem externa
* @param event
*/
private function onExternalLoaderProgress(event:ProgressEvent):void
{
barra.setProgress(event.bytesLoaded, event.bytesTotal);
}

/**
* A imagem externa está carregada
* @param event
*/
private function onExternalLoaderComplete(event:Event):void
{
event.target.removeEventListener(Event.COMPLETE, onExternalLoaderComplete);

externalLoader.width = 550;
externalLoader.height = 400;

addChild(externalLoader);
}

}

}

Clique aqui para ver um exemplo on-line ou no link abaixo para fazer o download dos arquivos:

Paint em Actionscript 3.0

Olá, fiz um protótipo bem simples de "Paint" em Actionscript 3.0. Nele você pode escolher a cor, o tamanho do pincél e limpar a tela.


Classe principal:


package
{
import fl.controls.Button;
import fl.controls.ColorPicker;
import fl.controls.Slider;
import fl.events.ColorPickerEvent;
import fl.events.SliderEvent;
import flash.display.MovieClip;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.text.TextField;
import flash.ui.Mouse;

/**
* ...
* @author www.idemax.net
*/
public class Main extends MovieClip
{
private var margin:Number = 10;
private var rounding:Number = 20;
private var border:Number = 5;
private var defaultWord:String = 'desenhe na área branca acima';
private var brushMinimum:Number = 1;
private var brushCurrent:Number = 10;
private var brushMaximum:Number = 100;
private var drawEnable:Boolean = false;
private var startDrawingEnable:Boolean = false;

private var container:MovieClip;
private var panel:MovieClip;
private var panelTitle:TextField;
private var infoLabel:TextField;
private var drawStage:MovieClip;
private var tools:MovieClip;
private var toolsTitle:TextField;
private var labelColorPicker:TextField;
private var colorPicker:ColorPicker;
private var currentColor:uint;
private var slider:Slider;
private var labelSlider:TextField;
private var currentBrushSize:Number;
private var brushCicle:MovieClip;
private var drawMask:MovieClip;
private var drawContainer:MovieClip;
private var lineDraw:MovieClip;
private var button:Button;
private var linesDraw:Array;
private var drawMouseInspector:MovieClip;

/**
* Construtora da Classe
* Adiciona os listeners necessários e aplica as configurações básicas
* Os eventos "MainEvents" são personalizados
*/
public function Main()
{
loaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);

stage.align = 'TL';
//stage.scaleMode = StageScaleMode.NO_SCALE;

stage.addEventListener(Event.RESIZE, onResizeStage);

addEventListener(MouseEvent.ROLL_OUT, onRollOutApplication);

addEventListener(MainEvents.CREATE_PANEL, onCreatePanelHandler);
addEventListener(MainEvents.CREATE_TOOLS, onCreateToolsHandler);

addEventListener(MainEvents.UPDATE_INFO_LABEL, onUpdateInfoLabelHandler);
addEventListener(MainEvents.UPDATE_BRUSH, onUpdateBrushHandler);

addEventListener(MainEvents.UPDATE_COMPLETE_BRUSH, onUpdateCompleBrushHandler);
addEventListener(MainEvents.UPDATE_COMPLETE_INFO_LABEL, onUpdateCompleInfoLabelHandler);

addEventListener(MainEvents.DRAW_START, onDrawStartHandler);
addEventListener(MainEvents.DRAWING, onDrawingHandler);
addEventListener(MainEvents.DRAW_COMPLETE, onDrawCompleteHandler);
}

/**
* Inicia a criação da aplicação quando a mesma foi totalmente carregada
* @param e
*/
private function onCompleteHandler(e:Event):void
{
dispatchEvent(new MainEvents(MainEvents.CREATE_PANEL));
}

/**
* Re-cria a aplicação quando as dimensões do STAGE são alteradas
* OBS.: Se houver desenho, ele será perdido
* @param e
*/
private function onResizeStage(e:Event):void
{
dispatchEvent(new MainEvents(MainEvents.CREATE_PANEL));
}

/**
* ANTI-BUG: Se o usuário rolar para fora da aplicação ele para de desenhar se estiver do modo DESENHO
* @param e
*/
private function onRollOutApplication(e:MouseEvent):void
{
dispatchEvent(new MainEvents(MainEvents.DRAW_COMPLETE));
}

/**
* Cria e configura os listeners dos elementos visuais, exceto os componentes das ferramentas
* @param e
*/
private function onCreatePanelHandler(e:MainEvents):void
{
if (container != null)
{
removeChild(container);
container = null;
}

container = new MovieClip();
addChild(container);

panel = new MovieClip();
panel.graphics.beginFill(0xcccccc);
panel.graphics.drawRoundRect(0, 0, stage.stageWidth - (margin * 2), stage.stageHeight - (margin * 2), rounding, rounding);
panel.graphics.endFill();
panel.x = panel.y = margin;
container.addChild(panel);

panelTitle = new TextField();
panelTitle.autoSize = 'left';
panelTitle.htmlText = 'Desenhando com o actionscript 3.0';
panelTitle.x = panelTitle.y = margin;
panel.addChild(panelTitle);

infoLabel = new TextField();
infoLabel.autoSize = 'left';
infoLabel.text = defaultWord;
infoLabel.x = margin;
infoLabel.y = panel.height - infoLabel.textHeight - margin;
panel.addChild(infoLabel);

drawStage = new MovieClip();
drawStage.graphics.lineStyle(border, 0x000000, .25);
drawStage.graphics.beginFill(0xffffff);
drawStage.graphics.drawRoundRect(0, 0, stage.stageWidth / 100 * 75, infoLabel.y - (panelTitle.y + panelTitle.textHeight + (margin * 2)), rounding, rounding);
drawStage.graphics.endFill();
drawStage.x = margin;
drawStage.y = panelTitle.y + panelTitle.textHeight + margin;
panel.addChild(drawStage);

drawContainer = new MovieClip();
panel.addChild(drawContainer);

drawMask = new MovieClip();
drawMask.graphics.beginFill(0x000000);
drawMask.graphics.drawRoundRect(0, 0, stage.stageWidth / 100 * 75, infoLabel.y - (panelTitle.y + panelTitle.textHeight + (margin * 2)), rounding, rounding);
drawMask.graphics.endFill();
drawMask.x = margin;
drawMask.y = panelTitle.y + panelTitle.textHeight + margin;
panel.addChild(drawMask);

drawContainer.mask = drawMask;

drawMouseInspector = new MovieClip();
drawMouseInspector.addEventListener(MouseEvent.ROLL_OVER, onRollOverMouseInspector);
drawMouseInspector.addEventListener(MouseEvent.ROLL_OUT, onRollOutMouseInspector);
drawMouseInspector.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownMouseInspector);
drawMouseInspector.addEventListener(MouseEvent.MOUSE_UP, onMouseUpMouseInspector);
drawMouseInspector.graphics.beginFill(0xff0000, 0);
drawMouseInspector.graphics.drawRoundRect(0, 0, stage.stageWidth / 100 * 75, infoLabel.y - (panelTitle.y + panelTitle.textHeight + (margin * 2)), rounding, rounding);
drawMouseInspector.graphics.endFill();
drawMouseInspector.x = margin;
drawMouseInspector.y = panelTitle.y + panelTitle.textHeight + margin;
panel.addChild(drawMouseInspector);

tools = new MovieClip();
tools.graphics.lineStyle(border, 0x000000, .25);
tools.graphics.beginFill(0xffffff);
tools.x = drawStage.x + drawStage.width + margin;
tools.y = drawStage.y;

toolsTitle = new TextField();
toolsTitle.autoSize = 'left';
toolsTitle.htmlText = 'Ferramentas';
toolsTitle.x = toolsTitle.y = margin;
tools.addChild(toolsTitle);

container.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownContainer);
container.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveContainer);
container.addEventListener(MouseEvent.MOUSE_UP, onMouseUpContainer);

dispatchEvent(new MainEvents(MainEvents.CREATE_TOOLS));
}

/**
* Crias e configuras os listeners dos componentes das ferramentas
* @param e
*/
private function onCreateToolsHandler(e:MainEvents):void
{
linesDraw = new Array();

labelColorPicker = new TextField();
labelColorPicker.autoSize = 'left';
labelColorPicker.text = 'Selecione a cor:';
labelColorPicker.x = margin;
labelColorPicker.y = toolsTitle.y + toolsTitle.textHeight + (margin * 3);
tools.addChild(labelColorPicker);

colorPicker = new ColorPicker();
colorPicker.addEventListener(ColorPickerEvent.CHANGE, onColorPickerChange);
colorPicker.x = labelColorPicker.x + labelColorPicker.textWidth + margin;
colorPicker.y = labelColorPicker.y;
tools.addChild(colorPicker);

currentColor = colorPicker.selectedColor;

labelSlider = new TextField();
labelSlider.autoSize = 'left';
labelSlider.text = 'Tamanho do pincel:';
labelSlider.x = margin;
labelSlider.y = colorPicker.y + colorPicker.height + (margin * 3);
tools.addChild(labelSlider);

slider = new Slider();
slider.addEventListener(SliderEvent.CHANGE, onSliderChange);
slider.minimum = brushMinimum;
slider.maximum = brushMaximum;
slider.x = margin * 2;
slider.y = labelSlider.y + labelSlider.textHeight + margin;
slider.value = brushCurrent;
tools.addChild(slider);

currentBrushSize = slider.value;

button = new Button();
button.addEventListener(MouseEvent.CLICK, onClickButtonCleanScreean);
button.label = 'limpar tela';
button.x = margin;
button.y = slider.y + slider.height + (margin * 3);
tools.addChild(button);

tools.graphics.drawRoundRect(0, 0, stage.stageWidth - drawStage.width - (margin * 5), button.y + button.height + margin, rounding, rounding);
tools.graphics.endFill();
panel.addChild(tools);
}

/**
* O usuário rolou para dentro da área de desenho
* @param e
*/
private function onRollOverMouseInspector(e:MouseEvent):void
{
var mc:MovieClip = e.target as MovieClip;
mc.addEventListener(Event.ENTER_FRAME, onEnterFrameDrawStage);
}

/**
* O usuário rolou para fora da área de desenho
* @param e
*/
private function onRollOutMouseInspector(e:MouseEvent):void
{
var mc:MovieClip = e.target as MovieClip;
mc.removeEventListener(Event.ENTER_FRAME, onEnterFrameDrawStage);

dispatchEvent(new MainEvents(MainEvents.UPDATE_COMPLETE_BRUSH));
dispatchEvent(new MainEvents(MainEvents.UPDATE_COMPLETE_INFO_LABEL));
}

/**
* O usuário começa a desenhar na área de desenho
* @param e
*/
private function onMouseDownMouseInspector(e:MouseEvent):void
{
startDrawingEnable = true;
}

/**
* O usuário parou de desenhar
* @param e
*/
private function onMouseUpMouseInspector(e:MouseEvent):void
{
startDrawingEnable = false;
}

/**
* O usuário soltou o botão esquerdo do mouse dentro da aplicação
* @param e
*/
private function onMouseUpContainer(e:MouseEvent):void
{
dispatchEvent(new MainEvents(MainEvents.DRAW_COMPLETE));
}

/**
* O usuário está movimentando o mouse dentro da aplicação
* @param e
*/
private function onMouseMoveContainer(e:MouseEvent):void
{
dispatchEvent(new MainEvents(MainEvents.DRAWING));
}

/**
* O usuário tenta desenhar dentro da aplicação
* A aplicação verifica se o usuário está tentando
* dentro da área de desenho
* @param e
*/
private function onMouseDownContainer(e:MouseEvent):void
{
if (!startDrawingEnable) return;
dispatchEvent(new MainEvents(MainEvents.DRAW_START));
}

/**
* Dispara enquanto o usuário está com o mouse dentro da área de desenho
* @param e
*/
private function onEnterFrameDrawStage(e:Event):void
{
dispatchEvent(new MainEvents(MainEvents.UPDATE_INFO_LABEL));
dispatchEvent(new MainEvents(MainEvents.UPDATE_BRUSH));
}

/**
* Posiciona o ponteiro de desenho na mesma posição do mouse do usuário
* enquanto o mesmo se encontra na área de desenho
* @param e
*/
private function onUpdateBrushHandler(e:MainEvents):void
{
if (infoLabel == null) return;
if (brushCicle != null) drawContainer.removeChild(brushCicle);

Mouse.hide();

brushCicle = new MovieClip();
brushCicle.graphics.lineStyle(border, 0x000000, .5);
brushCicle.graphics.beginFill(currentColor);
brushCicle.graphics.drawCircle(drawContainer.mouseX, drawContainer.mouseY, currentBrushSize);
brushCicle.graphics.endFill();
drawContainer.addChild(brushCicle);
}

/**
* Atualiza o LOG de posição cartesiana do ponteiro do mouse na área de desenho
* enquanto o mesmo se encontra na área de desenho
* @param e
*/
private function onUpdateInfoLabelHandler(e:MainEvents):void
{
if (infoLabel == null) return;
infoLabel.text = 'x: ' + drawStage.mouseX + ' - y: ' + drawStage.mouseY;
}

/**
* Seta a mensagem padrão quando o usuário não está com o
* ponteiro do mouse sobre a área de desenho
* @param e
*/
private function onUpdateCompleInfoLabelHandler(e:MainEvents):void
{
infoLabel.text = defaultWord;
}

/**
* Quando o ponteiro do mouse sai da área de desenho, o ponteiro de desenho some
* e da lugar novamente ao ponteiro do mouse
* @param e
*/
private function onUpdateCompleBrushHandler(e:MainEvents):void
{
if (brushCicle != null)
{
drawContainer.removeChild(brushCicle);
brushCicle = null;
}

Mouse.show();
}

/**
* Fecha a linha desenhada pelo usuário e deixa a variável preparada para uma nova
* @param e
*/
private function onDrawCompleteHandler(e:MainEvents):void
{
drawEnable = false;

if (lineDraw == null) return;

lineDraw.graphics.endFill();
lineDraw = null;
}

/**
* Desenha as linhas referente ao ponteiro do mouse
* @param e
*/
private function onDrawingHandler(e:MainEvents):void
{
if (!drawEnable) return;

lineDraw.graphics.lineTo(drawContainer.mouseX, drawContainer.mouseY);
}

/**
* Cria um ponto caso o usuário somente queira pontilhar
* e inicia a nova linha
* @param e
*/
private function onDrawStartHandler(e:MainEvents):void
{
var dot:MovieClip = new MovieClip();
dot.graphics.beginFill(currentColor);
dot.graphics.drawCircle(drawContainer.mouseX, drawContainer.mouseY, currentBrushSize);
linesDraw.push(drawContainer.addChild(dot));

lineDraw = new MovieClip();
lineDraw.graphics.moveTo(drawContainer.mouseX, drawContainer.mouseY);
lineDraw.graphics.lineStyle(currentBrushSize * 2, currentColor);
linesDraw.push(drawContainer.addChild(lineDraw));

drawEnable = true;
}

/**
* Guarda a cor escolhida
* @param e
*/
private function onColorPickerChange(e:ColorPickerEvent):void
{
var cp:ColorPicker = e.target as ColorPicker;
currentColor = cp.selectedColor;
}

/**
* Guarda o tamanho do pincel escolhido
* @param e
*/
private function onSliderChange(e:SliderEvent):void
{
var sld:Slider = e.target as Slider;
currentBrushSize = sld.value;
}

/**
* Limpa os desenho feitos
* @param e
*/
private function onClickButtonCleanScreean(e:MouseEvent):void
{
for (var i:int = 0; i < linesDraw.length; i++)
{
var mc:MovieClip = linesDraw[i] as MovieClip;
drawContainer.removeChild(mc);
}

linesDraw = new Array();
}

}

}

Classe de eventos:


package
{
import flash.events.Event;

/**
* ...
* @author www.idemax.net
*/
public class MainEvents extends Event
{

public static const CREATE_PANEL:String = 'createPanel';
public static const CREATE_TOOLS:String = 'createTools';

public static const UPDATE_INFO_LABEL:String = 'updateInfoLabel';
public static const UPDATE_BRUSH:String = 'updateBrush';

public static const UPDATE_COMPLETE_INFO_LABEL:String = 'updateCompleteInfoLabel';
public static const UPDATE_COMPLETE_BRUSH:String = 'updateCompleteBrush';

public static const DRAW_START:String = 'drawStart';
public static const DRAWING:String = 'drawing';
public static const DRAW_COMPLETE:String = 'drawComplete';

public function MainEvents(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}

}

}

Clique aqui para ver um exemplo on-line ou no link abaixo para fazer o download dos arquivos: