今回は前回の宿題の講評と、mouseXやDateクラスの使い方でした。
Arrayは便利だよ。
for文も覚えておこう。
|
1 2 3 |
var n:int = _array.length; for (var i:int = 0; i < n; i++) { } |
Arrayを使ってSpriteを整理
Arrayを使うと、Spriteの処理もいっぺんにできる。
例えば次の例のように、ほぼ同じSpriteが複数動くスクリプトがあるとする。
|
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 |
package { import flash.display.Sprite; import flash.events.Event; public class Main extends Sprite { private var _sp1:Sprite; private var _sp2:Sprite; private var _sp3:Sprite; public function Main () { _sp1 = new Sprite(); _sp1.graphics.beginFill(0xFF0000); _sp1.graphics.drawCircle(0,0,30); _sp1.graphics.endFill(); this.addChild(_sp1); _sp1.y = 100; _sp2 = new Sprite(); _sp2.graphics.beginFill(0xFF0000); _sp2.graphics.drawCircle(0,0,30); _sp2.graphics.endFill(); this.addChild(_sp2); _sp2.y = 200; _sp3 = new Sprite(); _sp3.graphics.beginFill(0xFF0000); _sp3.graphics.drawCircle(0,0,30); _sp3.graphics.endFill(); this.addChild(_sp3); _sp3.y = 300; this.addEventListener(Event.ENTER_FRAME,onEnter); } private function onEnter(event:Event):void{ _sp1.x +=0.5; _sp2.x +=0.5; _sp3.x +=0.5; } } } |
プログラミングでは、同じような処理は何回も書かずにまとめることが大事。
次のように書き換えることができる。
|
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 |
package { import flash.display.Sprite; import flash.events.Event; public class Main extends Sprite { //配列を作る private var _array:Array; public function Main () { //配列の初期化 _array = new Array(); for (var i:int = 0; i < 3; i++) { _array[i] = new Sprite(); _array[i].graphics.beginFill(0xFF0000); _array[i].graphics.drawCircle(0,0,30); _array[i].graphics.endFill(); this.addChild(_array[i]); } _array[0].y = 100; _array[1].y = 200; _array[2].y = 300; this.addEventListener(Event.ENTER_FRAME,onEnter); } private function onEnter(event:Event):void{ for (var i:int = 0; i < 3; i++) { _array[i].x += 0.5; } } } } |
もちろん、結果の動きは同じ。
http://wonderfl.net/c/wReV
この例では3つだから特に簡単になった、という気はしないが、これが5個、10個となると話はかわる。一括して処理したほうが楽だし、間違いがない。
また、例えばユーザーの操作によって数を変えたい、なんて場合はあらかじめちょうどいい数を用意しにくいので、Arrayを使ったほうがいい。
マウスに張り付く
mouseX,mouseYでマウスの座標を取得できる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
package { import flash.display.Sprite; import flash.events.Event; public class Main extends Sprite { private var _maru:Sprite; public function Main() { trace("Hello world"); _maru = new Sprite(); _maru.graphics.beginFill(0xFF0000); _maru.graphics.drawCircle(0, 0, 50); _maru.graphics.endFill(); this.addChild(_maru); this.addEventListener(Event.ENTER_FRAME, onEnter); } private function onEnter(event:Event):void { _maru.x = mouseX; _maru.y = mouseY; } } } |
マウスを追いかける2
次のようにすると、単にマウスの位置にmaruが張り付いているのではなく弾力のある動きになる。
|
1 2 |
_maru.x = _maru.x * 0.8 + mouseX * 0.2; _maru.y = _maru.y * 0.8 + mouseY * 0.2; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
package { import flash.display.Sprite; import flash.events.Event; public class Main extends Sprite { private var _maru:Sprite; public function Main() { trace("Hello world"); _maru = new Sprite(); _maru.graphics.beginFill(0xFF0000); _maru.graphics.drawCircle(0, 0, 50); _maru.graphics.endFill(); this.addChild(_maru); this.addEventListener(Event.ENTER_FRAME, onEnter); } private function onEnter(event:Event):void { //マウスを追っかける _maru.x = _maru.x * 0.8 + mouseX * 0.2; _maru.y = _maru.y * 0.8 + mouseY * 0.2; } } } |
クリック箇所に移動する
クリックした箇所に移動する。しかも、三つだ！
|
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 |
package{ import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; public class Main extends Sprite{ private var _maru:Sprite; private var _maru2:Sprite; private var _maru3:Sprite; private var _onPositionX:Number; private var _onPositionY:Number; public function Main(){ _onPositionX = 0; _onPositionY = 0; _maru = new Sprite(); _maru.graphics.beginFill(0xFF0000); _maru.graphics.drawCircle(0,0,50); _maru.graphics.endFill(); _maru.x = 100; _maru.y = 100; this.addChild(_maru); _maru2 = new Sprite(); _maru2.graphics.beginFill(0x00FF00); _maru2.graphics.drawCircle(0,0,40); _maru2.graphics.endFill(); _maru2.x = 100; _maru2.y = 100; this.addChild(_maru2); _maru3 = new Sprite(); _maru3.graphics.beginFill(0x0000FF); _maru3.graphics.drawCircle(0,0,30); _maru3.graphics.endFill(); _maru3.x = 100; _maru3.y = 100; this.addChild(_maru3); this.addEventListener(Event.ENTER_FRAME,onEnter); stage.addEventListener(MouseEvent.CLICK,onClick); } private function onClick(event:MouseEvent):void{ _onPositionX = mouseX; _onPositionY = mouseY; } private function onEnter(event:Event):void{ _maru.x = _maru.x*0.9+_onPositionX*0.1; _maru.y = _maru.y*0.9+_onPositionY*0.1; _maru2.x = _maru2.x*0.85+_onPositionX*0.15; _maru2.y = _maru2.y*0.85+_onPositionY*0.15; _maru3.x = _maru3.x*0.8+_onPositionX*0.2; _maru3.y = _maru3.y*0.8+_onPositionY*0.2; } } } |
Dateを使ってみよう
Dateクラスを使うと、年月日、時刻を取得できる。
|
1 2 |
var date:Date = new Date(); trace(date.getHours(),date.getMinutes(),date.getSeconds()); |
これを使うと、時計が作れる。
例えば、
date.getSeconds()
は0〜59の60段階の値をとる。
これで時計版の円を描くには、360度必要なので、
date.getSeconds()*6
とやればいい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
package{ import flash.display.Sprite; import flash.events.Event; public class Main extends Sprite{ private var _maru:Sprite; public function Main(){ _maru = new Sprite(); _maru.graphics.beginFill(0xFF0000); _maru.graphics.drawCircle(0,-200,10); _maru.graphics.endFill(); _maru.x = stage.stageWidth/2; _maru.y = stage.stageHeight/2; this.addChild(_maru); this.addEventListener(Event.ENTER_FRAME,onEnter); } private function onEnter(event:Event):void{ var date:Date = new Date(); _maru.rotation = date.getSeconds()*6; //trace(date.getMinutes(),date.getHours()); } } } |
宿題
Dateを使ってみようの続きで、時、分も表示してイケテル時計を作ろう。
自分のサイト/wonderflにアップして、このコメント欄に貼付けるといいとおもう。
