auimages.china-pub.com/ebook3765001-3770000/3767755/ch05.pdf · 2013. 5. 24. · 9 ; 0 z é a 9k^ &...

5

� KEY_DOWN KEYUP ENTER_FRAME�

�

�

AS3.0 KeyboardEvent Keyboard

import flash.events.KeyboardEvent;import flash.ui.Keyboard;

4KeyboardEvent Keyboard

MouseEvent

1 ActionScript SimpleKeyboardControl

2 images

3 2 character.png images5-1

5-1 character.png images

4SimpleKeyboardControl

package{

import flash.net.URLRequest;import flash.display.Loader;import flash.display.Sprite;import flash.events.KeyboardEvent;import flash.ui.Keyboard;

[SWF(width="550", height="400",backgroundColor="#FFFFFF", frameRate="60")]

public class SimpleKeyboardControl extends Sprite{

public var characterURL:URLRequest= new URLRequest("../images/character.png");public var characterImage:Loader = new Loader();

public var character:Sprite = new Sprite();

public function SimpleKeyboardControl(){

characterImage.load(characterURL);character.addChild(characterImage);stage.addChild(character);character.x = 225;character.y = 150;

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

}

public function keyDownHandler(event:KeyboardEvent):void{

if (event.keyCode == Keyboard.LEFT){character.x -= 10;}else if (event.keyCode == Keyboard.RIGHT){character.x += 10;}else if (event.keyCode == Keyboard.DOWN){character.y += 10;}else if (event.keyCode == Keyboard.UP){character.y -= 10;}

}}

}

55-2

5-2

KeyboardEvent Keyboard

import flash.events.KeyboardEvent;import flash.ui.Keyboard;

Keyboard KeyboardEvent

stage

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

4keyDownHandler

public function keyDownHandler(event:KeyboardEvent):void{if (event.keyCode == Keyboard.LEFT){character.x -= 10;

}else if (event.keyCode == Keyboard.RIGHT){character.x += 10;

}else if (event.keyCode == Keyboard.DOWN){

character.y += 10;}else if (event.keyCode == Keyboard.UP){character.y -= 10;

}}

4 Keyboard.LEFT Keyboard.RIGHT

Keyboard.DOWN Keyboard.UP AS3.0

AS3.0 ASCII ASCII

ASCII 65 A

Windows

OS X SWF

OS X

Keyboard LEFT RIGHT

Flash Professional

Flash Professional

Ctrl+S

Shift

Flash Professional SWF

keyPressHandler if/elsex y 10

�

�

� x y

KEY_DOWN

Flash

AS3.0

� AS3.0 Event ENTER_FRAME� vx vy

� keyDownHandler

vx vy

� keyUpHandler

0� enterFrameHandler vx vy

1 ActionScript KeyboardControl

2 images character.png

3

package{

import flash.net.URLRequest;import flash.display.Loader;import flash.display.Sprite;import flash.events.KeyboardEvent;import flash.ui.Keyboard;import flash.events.Event;


public class KeyboardControl extends Sprite{//

public var characterURL:URLRequest= new URLRequest("../images/character.png");

public var characterImage:Loader = new Loader();public var character:Sprite = new Sprite();

// vx vypublic var vx:int = 0;public var vy:int = 0;

public function KeyboardControl(){

//characterImage.load(characterURL);character.addChild(characterImage);stage.addChild(character);character.x = 225;character.y = 150;

//stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

}public function keyDownHandler(event:KeyboardEvent):void

{if (event.keyCode == Keyboard.LEFT){vx = -5;}else if (event.keyCode == Keyboard.RIGHT){vx = 5;}else if (event.keyCode == Keyboard.UP){vy = -5;}else if (event.keyCode == Keyboard.DOWN){vy = 5;}

}public function keyUpHandler(event:KeyboardEvent):void{

if (event.keyCode == Keyboard.LEFT|| event.keyCode == Keyboard.RIGHT){vx = 0;}else if (event.keyCode == Keyboard.DOWN|| event.keyCode == Keyboard.UP){vy = 0;}

}public function enterFrameHandler(event:Event):void{

//character.x += vx;character.y += vy;

}}

}

4

KeyboardControl

vx vy

vx = -5;

vx x 5SWF

60fps 5 300

vx = -5;

x 0x x

5

vy = +5;

vy y y 05

5-3

5-3 x y

vx vy

vx

vy

velocityX velocityY

vx vy

keyDownHandler

public function keyDownHandler(event:KeyboardEvent):void{if (event.keyCode == Keyboard.LEFT){vx = -5;

}else if (event.keyCode == Keyboard.RIGHT){

vx = 5;}else if (event.keyCode == Keyboard.UP){vy = -5;

}else if (event.keyCode == Keyboard.DOWN){vy = 5;

}}

if/else x yvx vy enterFrameHandler

keyUpHandler

keyDownHandler

keyDownHandler

AS3.0 KeyboardEvent KEY_UPstage KEY_UP

stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);

keyUpHandler

keyDownHandler

5

keyDownHandler x y

enterFrameHandler

keyUpHandler 0

public function keyUpHandler(event:KeyboardEvent):void{if (event.keyCode == Keyboard.LEFT|| event.keyCode == Keyboard.RIGHT){vx = 0;

}else if (event.keyCode == Keyboard.DOWN|| event.keyCode == Keyboard.UP){vy = 0;

}}

||

true

if (event.keyCode == Keyboard.LEFT|| event.keyCode == Keyboard.RIGHT){...

0

enterFrameHandler

Event ENTER_FRAME Event

Event

import flash.events.Event;

addEventListener(Event.ENTER_FRAME, onEnterFrame);

stageKeyboardControl

8

enterFrameHandler

public function enterFrameHandler(event:Event):void{//character.x += vx;character.y += vy;

}

vx vyx y

KeyboardEvent.KEY_DOWN

KeyboardEvent.KEY_UP

Event.ENTER_FRAME

1

12fps 12fps

FlashFlash

1 Waylon Jennings Throw Another log on the Fire

24fps 24fps30fps

fps 6060

60

Event.ENTER_FRAME

ENTER_FRAME ENTER_FRAME

60

60

player.x += vx;player.y += vy;

x100 vx �5 SWF

�5 x 95�5 x 90

vx 0 0 x +=90

ENTER_FRAME AS3.0AS3.0ENTER_FRAME enterFrameHandler

�

�

�

AS3.0 stagestageWidth stageHeight

x y

1 enterFrameHandler

public function enterFrameHandler(event:Event):void{


//if (character.x < 0){character.x = 0;}if (character.y < 0){character.y = 0;}if (character.x + character.width > stage.stageWidth){character.x = stage.stageWidth - character.width;}

if (character.y + character.height > stage.stageHeight){character.y = stage.stageHeight - character.height;}

}

25-4

5-4

x 0 x y

x 0 x 0

if (character.x < 0){character.x = 0;

}

x x0

0 5-5

5-5

y 0 0

if (character.y < 0){character.y = 0;

}

y 0

x y

5-6

5-6 x y

5-7

5-7

height width

character.heightcharacter.width

2 100character.height character.width 100

stage stageWidth stageHeight

stage.stageWidthstage.stageHeight

550 400 stage.stageWidth 550stage.stageHeight 400

1 x y

2

if x y

if (character.x + character.width > stage.stageWidth){character.x = stage.stageWidth - character.width;

}if (character.y + character.height > stage.stageHeight){character.y = stage.stageHeight - character.height;

}

5-8

5-8

height width

StageBoundaries

1 enterFrameHandler



//if (character.x + character.width < 0){character.x = 550;}if (character.y + character.height < 0){character.y = 400;}if (character.x > stage.stageWidth){character.x = 0 - character.width;}if (character.y > stage.stageHeight){character.y = 0 - character.height;}

}

2

3 5-9

5-9

PAC-MAN Asteroids

ScreenWrapping

URLRequest Loader

public var characterURL:URLRequest= new URLRequest("../images/character.png");

public var characterImage:Loader = new Loader();

Loader

characterImage.load(characterURL);

SWFSWF SWF

images PNG

images SWF

ENTER_FRAME60

AS3.0 Loader

AS3.0 Loader

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Loader.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6

SWF images

1 DisplayObject

import flash.display.DisplayObject;

2

[Embed(source="../images/character.png")]public var CharacterImage:Class;

EmbedAS SWF

Class

AS3.0

3 Class

public var characterImage:DisplayObject = new CharacterImage();

DisplayObject

4 Sprite loader

character.addChild(characterImage);

5-10

5-10

9

11 SWF

11000

Phobos Phobos NASA2

http://photojournal.jpl.nasa.gov/Phobos

Full Resolution3

2 NASA3

2 background JPEG.jpg background.jpg

3 ActionScript BasicScrolling

4 BasicScrolling images

5 BasicScrolling

package{

import flash.display.Sprite;import flash.display.DisplayObject;

import flash.events.KeyboardEvent;import flash.ui.Keyboard;import flash.events.Event;


public class BasicScrolling extends Sprite{

//[Embed(source="../images/background.png")]public var BackgroundImage:Class;public var backgroundImage:DisplayObject

= new BackgroundImage();public var background:Sprite = new Sprite();

//[Embed(source="../images/character.png")]public var CharacterImage:Class;public var characterImage:DisplayObject

= new CharacterImage();public var character:Sprite = new Sprite();


public function BasicScrolling(){//background.addChild(backgroundImage);stage.addChild(background);background.x = -1325;background.y = -961;

//character.addChild(characterImage);stage.addChild(character);character.x = 225;character.y = 150;

//stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);

stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

}


if (event.keyCode == Keyboard.LEFT){vx = -5;}else if (event.keyCode == Keyboard.RIGHT){vx = 5;}else if (event.keyCode == Keyboard.UP){vy = -5;}else if (event.keyCode == Keyboard.DOWN){vy = 5;}

}

public function keyUpHandler(event:KeyboardEvent):void{

if (event.keyCode == Keyboard.LEFT|| event.keyCode == Keyboard.RIGHT)

{vx = 0;}else if (event.keyCode == Keyboard.DOWN

|| event.keyCode == Keyboard.UP){vy = 0;}

}


//background.x -= vx;

background.y -= vy;

//if (background.x > 0){background.x = 0;}if (background.y > 0){background.y = 0;}if (background.x < stage.stageWidth - background.width){background.x = stage.stageWidth - background.width;}if (background.y < stage.stageHeight - background.height){background.y = stage.stageHeight - background.height;}

}}

}

6 JPEG background.pngbackground.jpg

[Embed(source="../images/background.jpg")]

7 Phobos5-11

5-11

DisplayObject

import flash.display.Sprite;import flash.display.DisplayObject;import flash.events.KeyboardEvent;import flash.ui.Keyboard;import flash.events.Event;

SpriteSprite

public class BasicScrolling extends Sprite{

//[Embed(source="../images/background.png")]public var BackgroundImage:Class;public var backgroundImage:DisplayObject

= new BackgroundImage();public var background:Sprite = new Sprite();

//[Embed(source="../images/character.png")]public var CharacterImage:Class;public var characterImage:DisplayObject

= new CharacterImage();public var character:Sprite = new Sprite();

// vx vypublic var vx:int = 0;public var vy:int = 0;public function BasicScrolling(){...

Sprite

public function BasicScrolling(){

//background.addChild(backgroundImage);stage.addChild(background);background.x = -1005;background.y = -761;



}

background.x = -1325;background.y = -961;

Phobos 2561 1922 550400

Phobosx y 0

�1005 �7615-12

5-12

x y AS3.0

background.x = -(background.width - stage.stageWidth) / 2;background.y = -(background.height - stage.stageHeight) / 2;

enterFrameHandlerbackground

backgroundvx vy

background.x += -vx;background.y += -vy;

background

background background

if (background.x > 0){background.x = 0;

}if (background.y > 0){background.y = 0;

}if (background.x < stage.stageWidth - background.width){background.x = stage.stageWidth - background.width;

}if (background.y < stage.stageHeight - background.height){background.y = stage.stageHeight - background.height;

}

�

5-13

5-13

�

BetterScrolling.as

1 ActionScript

package{



public class BetterScrolling extends Sprite{

//[Embed(source="../images/background.png")]public var BackgroundImage:Class;public var backgroundImage:DisplayObject= new BackgroundImage();public var background:Sprite = new Sprite();

//[Embed(source="../images/character.png")]public var CharacterImage:Class;public var characterImage:DisplayObject= new CharacterImage();public var character:Sprite = new Sprite();


//public var rightInnerBoundary:uint;public var leftInnerBoundary:uint;public var topInnerBoundary:uint;public var bottomInnerBoundary:uint;

public function BetterScrolling(){

//background.addChild(backgroundImage);stage.addChild(background);background.x = -(background.width - stage.stageWidth) / 2;background.y = -(background.height - stage.stageHeight) / 2;//character.addChild(characterImage);stage.addChild(character);character.x = 225;character.y = 150;

//rightInnerBoundary= (stage.stageWidth / 2) + (stage.stageWidth / 4);leftInnerBoundary= (stage.stageWidth / 2) - (stage.stageWidth / 4);topInnerBoundary= (stage.stageHeight / 2) - (stage.stageHeight / 4);bottomInnerBoundary= (stage.stageHeight / 2) + (stage.stageHeight / 4);


}


if (event.keyCode == Keyboard.LEFT){vx = -5;}else if (event.keyCode == Keyboard.RIGHT){vx = 5;}else if (event.keyCode == Keyboard.UP){

vy = -5;}else if (event.keyCode == Keyboard.DOWN){vy = 5;}

}


if (event.keyCode == Keyboard.LEFT|| event.keyCode == Keyboard.RIGHT){vx = 0;}else if (event.keyCode == Keyboard.DOWN|| event.keyCode == Keyboard.UP){vy = 0;}

}


////background.x -= vx;//background.y -= vy;

//character.x += vxcharacter.y += vy;

//if(character.x < leftInnerBoundary){

character.x = leftInnerBoundary;background.x -= vx;

}if(character.x + character.width > rightInnerBoundary){

character.x = rightInnerBoundary - character.widthbackground.x -= vx;

}if(character.y < topInnerBoundary)

{character.y = topInnerBoundary;background.y -= vy;

}if(character.y + character.height > bottomInnerBoundary){

character.y = bottomInnerBoundary - character.height;background.y -= vy;

}

//if (background.x > 0){background.x = 0;}if (background.y > 0){background.y = 0;}if (background.x < stage.stageWidth - background.width){background.x = stage.stageWidth - background.width;}if(background.y < stage.stageHeight - background.height){background.y = stage.stageHeight - background.height;}

}}

}

25-14

5-14

public var rightInnerBoundary:uint;public var leftInnerBoundary:uint;public var topInnerBoundary:uint;public var bottomInnerBoundary:uint;

rightInnerBoundary= (stage.stageWidth / 2) + (stage.stageWidth / 4);leftInnerBoundary= (stage.stageWidth / 2) - (stage.stageWidth / 4);topInnerBoundary= (stage.stageHeight / 2) - (stage.stageHeight / 4);

bottomInnerBoundary= (stage.stageHeight / 2) + (stage.stageHeight / 4);

/

enterFrameHandler

//character.x += vxcharacter.y += vy;

//if (character.x < leftInnerBoundary){


}else if (character.x + character.width > rightInnerBoundary){

character.x = rightInnerBoundary - character.widthbackground.x -= vx;

}if (character.y < topInnerBoundary){

character.y = topInnerBoundary;background.y -= vy;

}else if (character.y + character.height > bottomInnerBoundary){

character.y = bottomInnerBoundary - character.height;background.y -= vy;

}

if

if (character.x < leftInnerBoundary){


}

background.x -= vx;

1 enterFrameHandler


//character.x += vx

character.y += vy;


character.x = leftInnerBoundary;rightInnerBoundary

= (stage.stageWidth / 2) + (stage.stageWidth / 4);background.x -= vx;

}else if (character.x + character.width > rightInnerBoundary){

character.x = rightInnerBoundary - character.widthleftInnerBoundary= (stage.stageWidth / 2) - (stage.stageWidth / 4);

background.x -= vx;}if (character.y < topInnerBoundary){

character.y = topInnerBoundary;bottomInnerBoundary

= (stage.stageHeight / 2) + (stage.stageHeight / 4);background.y -= vy;

}else if(character.y + character.height > bottomInnerBoundary){

character.y = bottomInnerBoundary - character.height;topInnerBoundary

= (stage.stageHeight / 2) - (stage.stageHeight / 4);background.y -= vy;

}

//if (background.x > 0){

background.x = 0;leftInnerBoundary = 0;

}else if (background.y > 0){

background.y = 0;topInnerBoundary = 0;

}else if(background.x < stage.stageWidth - background.width)

{background.x = stage.stageWidth - background.width;rightInnerBoundary = stage.stageWidth;

}else if(background.y < stage.stageHeight - background.height){

background.y = stage.stageHeight - background.height;bottomInnerBoundary = stage.stageHeight;

}}

2

if

if (background.x > 0){

background.x = 0;leftInnerBoundary = 0;

}

backgroundbackground

leftInnerBoundary xx 0 5-15

5-15

5-15

else if (character.x + character.width > rightInnerBoundary){

character.x = rightInnerBoundary - character.widthleftInnerBoundary

= (stage.stageWidth / 2) - (stage.stageWidth / 4);background.x -= vx;

}

5-16

5-16

EvenBetterScrolling

x

7

3D

2D

distantBackground400 2000 5-17

5-17

foreground5-18

5-18

5-19

5-19

distantBackground foreground

foreground.x += -vx;foreground.y += -vy;distantBackground.x += -vx / 2;distantBackground.y += -vy / 2;

ParallaxScrolling

package{



public class ParallaxScrolling extends Sprite{

//[Embed(source="../images/distantBackground.png")]public var DistantBackgroundImage:Class;public var distantBackgroundImage:DisplayObject= new DistantBackgroundImage();public var distantBackground:Sprite = new Sprite();

//[Embed(source="../images/foreground.png")]public var ForegroundImage:Class;public var foregroundImage:DisplayObject= new ForegroundImage();public var foreground:Sprite = new Sprite();

//[Embed(source="../images/character.png")]public var CharacterImage:Class;public var characterImage:DisplayObject= new CharacterImage();public var character:Sprite = new Sprite();

// vxpublic var vx:int = 0;

public var rightInnerBoundary:uint;public var leftInnerBoundary:uint;

public function ParallaxScrolling(){

//distantBackground.addChild(distantBackgroundImage);stage.addChild(distantBackground);distantBackground.x= -(distantBackground.width - stage.stageWidth) / 2;distantBackground.y = 0;

//foreground.addChild(foregroundImage);stage.addChild(foreground);foreground.x

= -(foreground.width - stage.stageWidth) / 2;foreground.y = 0;


//rightInnerBoundary= (stage.stageWidth / 2) + (stage.stageWidth / 4);leftInnerBoundary= (stage.stageWidth / 2) - (stage.stageWidth / 4);


}


if (event.keyCode == Keyboard.LEFT){vx = -5;}else if (event.keyCode == Keyboard.RIGHT){vx = 5;}

}


if (event.keyCode == Keyboard.LEFT|| event.keyCode == Keyboard.RIGHT){vx = 0;}

}


//character.x += vx


character.x = leftInnerBoundary;rightInnerBoundary= (stage.stageWidth / 2) + (stage.stageWidth / 4);distantBackground.x -= vx / 2;foreground.x -= vx;

}if (character.x + character.width > rightInnerBoundary){

character.x = rightInnerBoundary - character.widthleftInnerBoundary= (stage.stageWidth / 2) - (stage.stageWidth / 4);distantBackground.x -= vx / 2;foreground.x -= vx;

}

//if (foreground.x > 0){

foreground.x = 0;distantBackground.x= -(distantBackground.width - stage.stageWidth) / 4;leftInnerBoundary = 0;

}if (foreground.x < stage.stageWidth - foreground.width){

foreground.x = stage.stageWidth - foreground.width;distantBackground.x= ((distantBackground.width - stage.stageWidth) / 4) * -3;rightInnerBoundary = stage.stageWidth;

}}

}}

x

x 01/4

if (foreground.x > 0){

foreground.x = 0;distantBackground.x

= -(distantBackground.width - stage.stageWidth) / 4;leftInnerBoundary = 0;

}

5-20

5-201/4

else if (foreground.x < stage.stageWidth - foreground.width){

foreground.x = stage.stageWidth - foreground.width;distantBackground.x

= ((distantBackground.width - stage.stageWidth) / 4) * -3;rightInnerBoundary = stage.stageWidth;

}

6

auimages.china-pub.com/ebook3765001-3770000/3767755/ch05.pdf · 2013. 5. 24. · 9 ; 0 z é a 9k^ &...

Documents