Pintura para criar um aplicativo em Flash CS3

Conforme explicado no concurso do Flash Actionscript: ferramenta de apagar você não pode "apagar" uma determinada área de um Sprite, MovieClip, ou de forma em que as linhas ou retângulos foram desenhados usando o cursor gráfico. Há, de fato, o único método clear() , no entanto, não tem efeito sobre toda a área do objeto. A solução para este problema reside na possibilidade de usar o Bitmap e objetos BitmapData. Como veremos nós podemos diretamente acessar e manipular dados de bitmap, a fim de "apagar" golpes com um verdadeiro instrumento de "borracha".

Apresentamos dois métodos diferentes para alcançar o "gate". per esempio. O primeiro "desenhar" (excluir) os dados diretamente para o BitmapData utilizando o método fillRect() - também pode ser usado setPixel() por exemplo. O segundo método, o que eu preferir, usa os métodos de fusões (blendMode).

Primeiro de tudo vamos ver que tipo de organização é minimamente necessário para atingir um Pintor do Flash simples. O esquema apresentado a seguir aplica-se tanto as propostas do "gate":

padrão de bitmap

Eu criei três camadas: a primeira, MovieClip ou Sprite, de fundo e trabalho do manipulador de eventos (MouseDown, MouseMove e MouseUp). O segundo, o Bitmap é o nosso camadas principais, uma que realmente gráficos desenhados serão aplicadas e em que o "gate". , ecc…). A camada de terceira e última, a forma, aborda duas questões: a primeira é que ele permite usar diretamente as funções fornecidas pelo cursor gráfico (como lineStyle , drawRect() , etc ...). Também aumenta o desempenho durante o gráfico de monitoramento, conforme explicado em detalhes abaixo.

MÉTODO 1 - acesso direto aos dados bitmap

) dalla Shape (layer 3) alla Bitmap (layer 2). Esta "amostra" usando o método fillRect() diretamente no BitmapData (camada 2) após o projeto foi copiado (usando o método draw() ) de Shape (camada 3) para Bitmap (camada 2).

Carregando flash ...

Para entender como ele funciona aqui é o mesmo filme com a camada de decomposição e pseudo-3D - desenhado em caixa colorida - Fonte :

Carregando flash ...

Como você pode ver você desenhar na camada 3, o Shape. Ao levar o evento MouseUp do conteúdo é copiado para o Formato Bitmap (e, portanto, os dados estão em BitmapData) e depois a forma é limpa ( clear() ).

Nota: este último ponto, o clear() na forma, não deve ser subestimada. Alguns exemplos do pintor em Flash (quase todos falta um "gate" true) desenhar diretamente em um MovieClip, ou de forma, mantendo os dados sobre o último desenhado. Depois de um tempo 'você desenhar o sistema fica mais lento, como a área de "vetor" dos aumentos de MovieClip. No método apresentado por mim este problema é resolvido na medida em que o vetor de dados de forma, quando eles são copiados para o bitmap são tasformati em bits ea forma serão eliminados, liberando memória e devolvê-lo ao fluxo de design!

Mantendo pressionada a tecla Ctrl (controle) é "excluída" diretamente através do BitmapData fillRect() . Isto é possível porque fillRect() , como outros métodos que atuam sobre BitmapData, permitem que você defina a "cor" por 0xARGB, onde A é o valor de alfa, a transparência.

O código é o seguinte - Fonte :

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
. MouseEvent ; flash.events importação. MouseEvent ;
. BitmapData ; flash.display importação. BitmapData ;
. Bitmap ; flash.display importação. Bitmaps ;
. GradientType ; . flash.display importação GradientType ;
/ /
. Matrix ; importações flash.geom. Matrix ;
/ /
Boolean = false ; md var: Boolean = false;
/ /
Sprite = new Sprite ( ) ; var event_spr: Sprite = new Sprite ();
event_spr ) ; addChild (event_spr);
/ /
Number = event_spr . stage . stageWidth ; var area_width: Número = event_spr estágios stageWidth;..
Number = event_spr . stage . stageHeight - 32 ; area_height var: Número .. = event_spr estágios stageHeight - 32;
/ /
String = GradientType . LINEAR ; fillType var: string = GradientType . LINEAR;
: Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var cores: matriz = [0xFF0000, 0x00FF00, 0x0000FF];
: Array = [ 1 , 1 , 1 ] ; var alphas: Matriz = [1, 1, 1];
: Array = [ 0 , 128 , 255 ] ; relações var: Matriz = [0, 128, 255];
String = SpreadMethod . PAD ; spreadMethod var: string = SpreadMethod PAD;.
: Matrix = new Matrix ( ) ; var matriz: Matrix = new Matrix ();
createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; . matrix createGradientBox (area_width, area_height, 1, 0, 0);
/ /
event_spr . graphics ) { com (event_spr. gráficos) {
fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, cores, alphas, relações, matriz spreadMethod);
0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
; endFill ();
}
/ Evento / Pintura
( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; event_spr addEventListener (. MouseEvent MOUSE_DOWN, _onMouseDown.);
( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; event_spr addEventListener (. MouseEvent MOUSE_MOVE, _onMouseMove.);
( MouseEvent . MOUSE_UP , _onMouseUp ) ; event_spr addEventListener (. MouseEvent MOUSE_UP, _onMouseUp.);
( MouseEvent . MOUSE_OUT , _onMouseUp ) ; event_spr addEventListener (. MouseEvent MOUSE_OUT, _onMouseUp.);
/ /
BitmapData = new BitmapData ( event_spr . width , event_spr . height , true , 0 ) ; var bmpd: BitmapData = new BitmapData (event_spr. largura, altura event_spr, true, 0.);
Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd);
bmp ) ; addChild (bmp);
/ Forma / Temporary
Shape = new Shape ( ) ; draw_shape var: Forma = new Forma ();
draw_shape ) ; addChild (draw_shape);
/ /
e : MouseEvent ) : void { função _onMouseDown (e: MouseEvent ): void {
) ; debug ("_onMouseDown");
: uint = 0xffffff ; var c: uint = 0xFFFFFF;
. lineStyle ( 10 , c , 1 ) ; .. draw_shape gráficos lineStyle (10, c, 1);
. moveTo ( e . localX , e . localY ) ; .. draw_shape gráficos moveTo (and. localX e localY.);
md = true;
}
/ /
e : MouseEvent ) : void { _onMouseUp function (e: MouseEvent ): void {
md = false;
. draw ( draw_shape ) ; .. bmp bitmapData draw (draw_shape);
. clear ( ) ; . draw_shape gráficos clear ().;
}
/ /
e : MouseEvent ) : void { _onMouseMove function (e: MouseEvent ): void {
) ; debug ("_onMouseMove");
md && ! e . ctrlKey ) { if (md & &! e. ctrlKey) {
. lineTo ( e . localX , e . localY ) ; .. draw_shape gráficos lineTo (and. localX e localY.);
( md && e . ctrlKey ) { Else} if (md & & e. CtrlKey) {
. fillRect ( new Rectangle ( e . target . mouseX - 10 , e . target . mouseY - 10 , 20 , 20 ) , 0 ) ; .. bmp bitmapData fillRect (novo Rectangle (alvo and. mouseX - 10, e alvo mouseY - 10, 20, 20), 0...);
}
}
/ /
v : String ) : void { debug function (v: string ): void {
: Date = new Date ( ) ; var d: Date = new Date ();
d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + "" + d. getSeconds () + "" + getMilliseconds d. () + "" + st);
}

Linha 61, como mostrado no código acima, funciona assim, quando a tecla Control está pressionado. Como você pode ver esta seção do código desenha diretamente no BitmapData com uma cor 0, 0 × 0000!

MÉTODO 2 - Uso de Blends

Este é provavelmente o melhor método a ser usado quando se permite qualquer tipo de "gate". Ao contrário do método anterior não acessar diretamente os dados presentes bitmap BitmapData, mas tirar proveito de mistura (blendMode) e copiar o bitmap usando o método draw().

Carregando flash ...

3D versão - fonte :

Carregando flash ...

. No exatamente da mesma maneira que copiar os dados da forma Bitmap, o "gate" é "simultaneamente", copiando os dados da Forma Bitmap, mas desta vez, definindo o blendMode o método draw() para erase .

O código é o seguinte - Fonte :

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
. MouseEvent ; flash.events importação. MouseEvent ;
. BitmapData ; flash.display importação. BitmapData ;
. Bitmap ; flash.display importação. Bitmaps ;
. GradientType ; . flash.display importação GradientType ;
/ /
. Matrix ; importações flash.geom. Matrix ;
/ /
Boolean = false ; md var: Boolean = false;
/ /
Sprite = new Sprite ( ) ; var event_spr: Sprite = new Sprite ();
event_spr ) ; addChild (event_spr);
/ /
Number = event_spr . stage . stageWidth ; var area_width: Número = event_spr estágios stageWidth;..
Number = event_spr . stage . stageHeight - 32 ; area_height var: Número .. = event_spr estágios stageHeight - 32;
/ /
String = GradientType . LINEAR ; fillType var: string = GradientType . LINEAR;
: Array = [ 0xFF0000 , 0x00FF00 , 0x0000ff ] ; var cores: matriz = [0xFF0000, 0x00FF00, 0x0000FF];
: Array = [ 1 , 1 , 1 ] ; var alphas: Matriz = [1, 1, 1];
: Array = [ 0 , 128 , 255 ] ; relações var: Matriz = [0, 128, 255];
String = SpreadMethod . PAD ; spreadMethod var: string = SpreadMethod PAD;.
: Matrix = new Matrix ( ) ; var matriz: Matrix = new Matrix ();
createGradientBox ( area_width , area_height , 1 , 0 , 0 ) ; . matrix createGradientBox (area_width, area_height, 1, 0, 0);
/ /
event_spr . graphics ) { com (event_spr. gráficos) {
fillType , colors , alphas , ratios , matrix , spreadMethod ) ; beginGradientFill (fillType, cores, alphas, relações, matriz spreadMethod);
0 , 0 , area_width , area_height ) ; drawRect (0, 0, area_width, area_height);
; endFill ();
}
/ Evento / Pintura
( MouseEvent . MOUSE_DOWN , _onMouseDown ) ; event_spr addEventListener (. MouseEvent MOUSE_DOWN, _onMouseDown.);
( MouseEvent . MOUSE_MOVE , _onMouseMove ) ; event_spr addEventListener (. MouseEvent MOUSE_MOVE, _onMouseMove.);
( MouseEvent . MOUSE_UP , _onMouseUp ) ; event_spr addEventListener (. MouseEvent MOUSE_UP, _onMouseUp.);
( MouseEvent . MOUSE_OUT , _onMouseUp ) ; event_spr addEventListener (. MouseEvent MOUSE_OUT, _onMouseUp.);
/ /
BitmapData = new BitmapData ( event_spr . width , event_spr . height , true , 0 ) ; var bmpd: BitmapData = new BitmapData (event_spr. largura, altura event_spr, true, 0.);
Bitmap = new Bitmap ( bmpd ) ; var bmp: Bitmap = new Bitmap (bmpd);
bmp ) ; addChild (bmp);
/ Forma / Temporary
Shape = new Shape ( ) ; draw_shape var: Forma = new Forma ();
draw_shape ) ; addChild (draw_shape);
/ /
e : MouseEvent ) : void { função _onMouseDown (e: MouseEvent ): void {
) ; debug ("_onMouseDown");
: uint = ( ! e . ctrlKey ? 0xffffff : 0x000000 ) ; var c: uint = (e ctrlKey 0xffffff: 0x000000!.?);
. lineStyle ( 10 , c , 1 ) ; .. draw_shape gráficos lineStyle (10, c, 1);
. moveTo ( e . localX , e . localY ) ; .. draw_shape gráficos moveTo (and. localX e localY.);
md = true;
}
/ /
e : MouseEvent ) : void { _onMouseUp function (e: MouseEvent ): void {
md = false;
. draw ( draw_shape , null , null , ( e . ctrlKey ? "erase" : "normal" ) ) ; .. bmp bitmapData draw (draw_shape, null, null, (and. ctrlKey "apagar" ou "normal")?);
. clear ( ) ; . draw_shape gráficos clear ().;
}
/ /
e : MouseEvent ) : void { _onMouseMove function (e: MouseEvent ): void {
) ; debug ("_onMouseMove");
md ) { if (md) {
. lineTo ( e . localX , e . localY ) ; .. draw_shape gráficos lineTo (and. localX e localY.);
}
}
/ /
v : String ) : void { debug function (v: string ): void {
: Date = new Date ( ) ; var d: Date = new Date ();
d . getMinutes ( ) + ":" + d . getSeconds ( ) + ":" + d . getMilliseconds ( ) + ": " + v ) ; trace (d. getMinutes () + "" + d. getSeconds () + "" + getMilliseconds d. () + "" + st);
}

Este código não é muito diferente do ano anterior. A verdadeira diferença está na linha 52! Isso determina o "modo de mistura" ao copiar do Bitmap forma quando a tecla Control está pressionado é usado a mistura erase .
Isso é tudo! Voltaremos logo que o bitmap e as diferenças entre MovieClip, Sprite, Shape e objetos Bitmap ... tudo visual!

4 comentários para "Criar um aplicativo em Flash CS3 Pintura"

  1. 31 mar 2008 Undolog.com »Blog Archive» Como salvar imagens em Flash CS3 :

    [...] Como salvar imagens em Tags Flash CS3: ActionScript 3.0, Bitmap, BitmapData, Flash CS3, GD, GD Library, Internet, PHP, Flash Salvar Imagem, Desenvolvimento Flash CS3 TutorialsCon o uso de Bitmap é tão melhor que é imediatamente deseja criar uma pintura de pequeno porte. Já vimos como pintar um pouco (veja Criando uma pintura € ™ aplicação em Flash CS3 e Painter: aplicação simples para desenho em Flash CS3 Pro) pode suportar um "eliminador" verdadeira - função de apagar, graças ao uso forma e determinada camada Bitmap. Vamos dizer que o Flash (em oposição a Flex) não permite a codificação (como JPG ou PNG) ele automaticamente salva as imagens Bitmap. No entanto, você pode contorná-la usando um script do lado do servidor ea capacidade de enviar dados em Flash POST. [...]

  2. 08 de outubro de 2008 Guide to Flash CS3 ActionScript 3: eventos de mouse | Marcello Surdo:

    [...] Criar um Paint no Flash CS3 [...]

  3. 30 de outubro de 2008 Gianni:

    Excelente solução, adequado até para as soluções de Web innnumerevoli aplicativo gráfico.

Deixe um comentário

XHTML PERMIT TAG: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> CÓDIGO DE INSERÇÃO:
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL