Resize em ActionScript 3.0

Publicado em 12 de outubro de 2008 por Fellyph
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 é :

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash 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:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Esta entrada foi publicada em Flash, Tutoriais e marcada com a tag , , , , . Adicione o link permanente aos seus favoritos.

6 respostas a Resize em ActionScript 3.0

  1. flavio disse:
    13 de outubro de 2008 às 4:07

    Como usar isso no Flash CS3 ?

  2. Marcos Paiva disse:
    13 de outubro de 2008 às 4:44

    Bem legals Fellyph, utilissimo isso no flash!

  4. Marcos disse:
    22 de outubro de 2008 às 10:52

    Obrigado cara, bacanas mesmo. Ajudo muito vlw

  5. Osiris disse:
    6 de março de 2009 às 12:21

    Muito bom mesmo Fellyph!!
    Estou aprendendo agora a mexer com classes e esse tutorial ja foi de grande ajuda.

  6. Rafael disse:
    14 de outubro de 2009 às 8:35

    Prezado. Vou poderia me ajudar no redimensionamento de sites em HTML?

    Grato

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">