4/23金クールなコンテンツを作ってみよう。

AS3とおやつの会、第一回目の授業では、
・FlashIDEのドキュメントクラスを作ってみよう
・graphicsを使ってみよう
・イベント
・宿題
をやりました。

FlashIDEのドキュメントクラスを作ってみよう

flaファイルを作り、001.flaと名前を付けて任意のディレクトリ（例えば001）に保存。
↓
同じ階層に、FlashIDEからMain.asという名前のASファイルを作って保存。
一文字目は大文字の英字にするのがセオリー。
Main.asはよく使われるので、オススメ。
プログラムでは、特に理由がない場合は慣例に従う方が良い。
↓
FlashIDEのプロパティウィンドウの「ドキュメントクラス」欄に「Main」と記述（Main.asではない）。
これにより、001.flaとMain.asが関連していることを設定したことになります。
↓
まずは「おまじない(Spriteのインポート、継承)」を書いてもらう。

package {
	import flash.display.Sprite;
	public class Main extends Sprite {
		public function Main() {
			trace("Hello world");
		}
	}
}

package {

import flash.display.Sprite;

public class Main extends Sprite {

public function Main() {

trace("Hello world");

}

graphicsを使ってみよう

ステージ上に線を引く。
↓
Spriteを作ってdrawCircle
↓
「おまじない」の意味を説明。
↓
テキストフィールドを作って、
textField.text = “Hello world”;
をやるもエラー。アレレ？
↓
インポートを忘れちゃいけない
↓
テキストフィールドできた。

イベント

イベントリスナー
ENTER_FRAME
マウスクリック

/*
ここにコメントを書くといいかも。

*/
package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	
	[SWF(backgroundColor = 0x000000)]
	
	//Spriteを継承している
	public class Main extends Sprite {
		//privateのプロパティではアンダーバー（_）をつけるのをお勧め。
		private var _maru:Sprite;
		private var _moon:Sprite;
		
		//コンストラクタ
		public function Main() {
			this.graphics.lineStyle(1, 0xFF0000);
			this.graphics.moveTo(50, 50);
			this.graphics.lineTo(200, 50);
			this.graphics.lineTo(50, 200);
			this.graphics.lineTo(100, 20);
			this.graphics.lineTo(150, 200);
			this.graphics.lineTo(50, 50);
			
			_maru = new Sprite();
			_maru.graphics.beginFill(0x6666FF);
			_maru.graphics.drawCircle(100, 100, 50);
			_maru.graphics.endFill();
			this.addChild(_maru);
			
			var tf:TextField = new TextField();
			tf.text = "肉";
			tf.selectable = false;
			tf.x = 100;
			tf.y = 100;
			_maru.addChild(tf);
			
			var btn:Sprite = new Sprite();
			btn.graphics.beginFill(0xFF0000, 0.5);
			btn.graphics.drawRoundRect(0, 0, 50, 50, 20, 20);
			btn.graphics.endFill();
			btn.buttonMode = true;
			btn.addEventListener(MouseEvent.CLICK, onClick);
			this.addChild(btn);
			
			_moon = new Sprite();
			_moon.graphics.beginFill(0xFFFF00);
			_moon.graphics.drawCircle(50, 0, 25);
			_moon.graphics.endFill();
			_moon.x = 200;
			_moon.y = 200;
			this.addChild(_moon);
			
			this.addEventListener(Event.ENTER_FRAME , onEnter);
		}
		
		private function onClick(event:MouseEvent):void {
			trace("クリックしたよ！", event);
			_maru.x += 5;
		}
		
		private function onEnter(event:Event):void {
			_moon.rotation ++;
		}
	}
}

ここにコメントを書くといいかも。

package {

import flash.display.Sprite;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.text.TextField;

[SWF(backgroundColor = 0x000000)]

//Spriteを継承している

public class Main extends Sprite {

//privateのプロパティではアンダーバー（_）をつけるのをお勧め。

private var _maru:Sprite;

private var _moon:Sprite;

//コンストラクタ

public function Main() {

this.graphics.lineStyle(1, 0xFF0000);

this.graphics.moveTo(50, 50);

this.graphics.lineTo(200, 50);

this.graphics.lineTo(50, 200);

this.graphics.lineTo(100, 20);

this.graphics.lineTo(150, 200);

this.graphics.lineTo(50, 50);

_maru = new Sprite();

_maru.graphics.beginFill(0x6666FF);

_maru.graphics.drawCircle(100, 100, 50);

_maru.graphics.endFill();

this.addChild(_maru);

var tf:TextField = new TextField();

tf.text = "肉";

tf.selectable = false;

tf.x = 100;

tf.y = 100;

_maru.addChild(tf);

var btn:Sprite = new Sprite();

btn.graphics.beginFill(0xFF0000, 0.5);

btn.graphics.drawRoundRect(0, 0, 50, 50, 20, 20);

btn.graphics.endFill();

btn.buttonMode = true;

btn.addEventListener(MouseEvent.CLICK, onClick);

this.addChild(btn);

_moon = new Sprite();

_moon.graphics.beginFill(0xFFFF00);

_moon.graphics.drawCircle(50, 0, 25);

_moon.graphics.endFill();

_moon.x = 200;

_moon.y = 200;

this.addChild(_moon);

this.addEventListener(Event.ENTER_FRAME , onEnter);

}

private function onClick(event:MouseEvent):void {

trace("クリックしたよ！", event);

_maru.x += 5;

}

private function onEnter(event:Event):void {

_moon.rotation ++;

}

flash on 2010-4-23 – wonderfl build flash online

宿題

宿題は「クールなコンテンツを作ってみよう」です。
今回やった、graphicsやENTER_FRAME、MouseEventを使うといろいろできると思います。
宿題ができたら、自分のサイト（blog）やwonderflのURLをこのエントリーのコメントに貼り付けてください。
また、わからないこととかもこちらでお願いします。