Blog Fellyph Cintra » stage http://www.fellyph.com.br/blog Thu, 12 Jan 2012 21:34:08 +0000 en hourly 1 Resize em ActionScript 3.0 http://www.fellyph.com.br/blog/flash/resize-em-actionscript-30/ http://www.fellyph.com.br/blog/flash/resize-em-actionscript-30/#comments Mon, 13 Oct 2008 05:23:58 +0000 Fellyph http://www.fellyph.com.br/blog/?p=259 Olá pessoal uma ação bastante útil para quem desenvolve flash para Web é o tratamento do redimensionamento de tela de um arquivo flash. Para um site isso significa você reposicionar os elementos na tela ou fazer outro tipo de tratamento. … Continue lendo →]]>

Olá pessoal uma ação bastante útil para quem desenvolve flash para Web é o tratamento do redimensionamento de tela de um arquivo flash. Para um site isso significa você reposicionar os elementos na tela ou fazer outro tipo de tratamento. Nesse Post vou trabalhar somente com o FlashDevelop.

  • A abra o FlashDevelop
  • Crie um novo projeto e em seguida uma nova classe.

Então vamos ao 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

package classes {
 
    //Importamos as classes que vamos utilizar
	import flash.events.Event;
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
 
	/**
	* ...
	* @author Fellyph Cintra http://www.fellyph.com.br/blog/
	*/
 
	// lembrando que nossa classe extends de sprite
	public class Resize extends Sprite{
 
		public function Resize() {
 
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = "TL";
			stage.addEventListener(Event.RESIZE, onResize);
 
			/*
			 * O StageScaleMode classe fornece valores para a propriedade stage.scaleMode.
			 * ela fica responsável pela escala dos objetos no palco quando o stage for redimencionado
			 * no nosso exemplo foi passado no_scale ou seja os objetos ficarão com tamanho fixo no stage
			 * a segunda propriedade é o align que recebe "TL" = TOP_LEFT resumindo o canto superior esquerdo
			 * sera  o ponto de orientação do stage.
			 * Por Fim adicionamos o Evento RESIZE , toda vez que houver um redimencionamento no stage
			 * a função onRezise vai ser chamada.
			 *
			 */
		}
 
                public function onResize(e:Event) {
			trace('Faz Alvo quando redimencionar a tela')
 
			trace("largura do stage Exibida : " + stage.stageWidth);
			trace("largura real do stage : " + stage.width );
			/*
			 * Nos Dois últimos traces é trabalhado duas propriedades do
			 * stage relacionadas a largura, a primeira traz a largura do stage exibida na tela
			 * a segunda traz o tramanho real do stage o tamanha que ele
                         * foi criado independente da exibição.
			 * Isso também é impregado para altura
			 */
			trage("altura do stage Exibida :" + stage.stageHeight );
			trace("altura real do estage : " + stage.height);
		}	
 
	}
 
}

se estiver usando o Flash o código ficará da seguinte forma :

1
2
3
4
5
6
7

	stage.scaleMode = StageScaleMode.NO_SCALE;
	stage.align = "TL";
	stage.addEventListener(Event.RESIZE, onResize);
 
	public function onResize(e:Event) {
		trace('Faz Alvo quando redimencionar a tela')
	}

Ok agora vamos trabalhar com um objeto no palco vamos criar um quadrado e definir seu posicionamento.

Primeiro posicionar um shape no centro do palco:

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

package classes {
 
	import flash.display.Shape;
    import flash.events.Event;
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
 
	/**
	* ...
	* @author Fellyph Cintra http://www.fellyph.com.br/blog/
	*/
 
	public class Resize2 extends Sprite{
 
		public var forma:Shape;
 
		public function Resize2() {
 
			// agora vamos criar um shape no palco
			forma = new Shape();
			forma.graphics.beginFill(0x990000);
			forma.graphics.drawRect(0, 0, 150, 150);
			forma.graphics.endFill();
			addChild(forma);
 
			// vamos posicionar o shape no centro do pal
			forma.x = (stage.stageWidth/2) - (forma.width/2);
			forma.y = (stage.stageHeight/2) - (forma.height/2);
 
			//fazemos o tratamento no stage
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = "TL";
			stage.addEventListener(Event.RESIZE, onResize);
 
			/*
			 * usamos o mesmo código para posicionar no centro
			 * dentro do método onResize, agora toda vez que o stage
			 * for redimensionado o shape forma irá para o centro do stage
			 */
 
		}
 
		public function onResize(e:Event) {
			forma.x = (stage.stageWidth/2) - (forma.width/2);
			forma.y = (stage.stageHeight/2) - (forma.height/2);
		}
	}
 
}

Segundo tratar um shape estilo rodapé :

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

package classes {
 
	import flash.display.Shape;
    import flash.events.Event;
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
 
	/**
	* ...
	* @author Fellyph Cintra http://www.fellyph.com.br/blog/
	*/
 
	public class Resize3 extends Sprite{
 
		public var forma:Shape;
 
		public function Resize3() {
 
			// agora vamos criar um shape no palco
			// com uma diferença o shape tem a mesma lagura do palco
			forma = new Shape();
			forma.graphics.beginFill(0x990000);
			forma.graphics.drawRect(0, 0,stage.stageWidth, 50);
			forma.graphics.endFill();
			addChild(forma);
 
			// vamos posicionar o shape no limite inferior do palco
			// ele vai funcionar como uma especie de rodapé
 
			forma.x = 0;
			forma.y = stage.stageHeight - forma.height;
 
			//fazemos o tratamento no stage
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = "TL";
			stage.addEventListener(Event.RESIZE, onResize);
 
			/*
			 *
			 */
 
		}
 
		public function onResize(e:Event) {
			//repetimos o posicionamento com um diferença mudamos também a largura do shape
			forma.x = 0;
			forma.y = stage.stageHeight - forma.height;
			forma.width = stage.stageWidth;
 
		}
	}
 
}

E o resultado é :

(Please open the article to see the flash file or player.)

Por fim vamos trabalhar com quatro shapes ao mesmo tempo :

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

package classes {
 
	import flash.display.Shape;
    import flash.events.Event;
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
 
	/**
	* ...
	* @author Fellyph Cintra http://www.fellyph.com.br/blog/
	*/
 
	public class Resize4 extends Sprite{
 
		public var forma1:Shape;
		public var forma2:Shape;
		public var forma3:Shape;
		public var forma4:Shape;
 
		public function Resize4() {
 
			//criamos 4 formas
			forma1 = new Shape();
			forma1.graphics.beginFill(0xCC0000);
			forma1.graphics.drawRect(0, 0,150, 50);
			forma1.graphics.endFill();
			addChild(forma1);
 
			forma2 = new Shape();
			forma2.graphics.beginFill(0xFFCC00);
			forma2.graphics.drawRect(0, 0,50, 150);
			forma2.graphics.endFill();
			addChild(forma2);
 
			forma3 = new Shape();
			forma3.graphics.beginFill(0x009900);
			forma3.graphics.drawRect(0, 0,150, 50);
			forma3.graphics.endFill();
			addChild(forma3);
 
			forma4 = new Shape();
			forma4.graphics.beginFill(0x000099);
			forma4.graphics.drawRect(0, 0,50, 150);
			forma4.graphics.endFill();
			addChild(forma4);
 
			// fazemos seu posicionamento
			forma1.y = 0;
			forma1.x = (stage.stageWidth/2 ) - (forma1.width/2);
 
			forma2.y = (stage.stageHeight/2) - (forma2.height/2)
			forma2.x = stage.stageWidth - forma2.width;
 
			forma3.y = stage.stageHeight - forma3.height;
			forma3.x = (stage.stageWidth/2 ) - (forma3.width/2)
 
			forma4.y = (stage.stageHeight/2) - (forma4.height/2)
			forma4.x = 0;
 
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = "TL";
			stage.addEventListener(Event.RESIZE, onResize);
 
			/*
			 * notem que o resize pode ser aplicado a mais de um objeto no palco
			 */
 
		}
 
		public function onResize(e:Event) {
			forma1.y = 0;
			forma1.x = (stage.stageWidth/2 ) - (forma1.width/2);
 
			forma2.y = (stage.stageHeight/2) - (forma2.height/2)
			forma2.x = stage.stageWidth - forma2.width;
 
			forma3.y = stage.stageHeight - forma3.height;
			forma3.x = (stage.stageWidth/2 ) - (forma3.width/2)
 
			forma4.y = (stage.stageHeight/2) - (forma4.height/2)
			forma4.x = 0;
		}
	}
 
}

O Resultado que temos é esse:

(Please open the article to see the flash file or player.)

]]> http://www.fellyph.com.br/blog/flash/resize-em-actionscript-30/feed/ 6