icon FlashDevelop top

HOME

 

もくじ

  1. はじめに
  2. Flashはどうやって作るの?
  3. FlashDevelopで新しいプロジェクトを作成する
  4. 図形を表示させてみる
  5. Spriteとは何か
  6. 図形の描画
  7. 直線と曲線の描画
  8. 文字列の描画
  9. ビットマップの描画
  10. 図形の塗りつぶし
  11. マウスイベント
  12. キーボードベント
  13. タイマー
  14. ボタン
  15. オブジェクトの移動と回転
  16. 座標変換マトリックスによるオブジェクトの操作
  17. 音声の操作
  18. 色の操作
  19. フィルター効果
  20. ブレンド
  21. 時刻
  22. 配列
  23. ファイルの読み込み
  24. パッケージ

はじめに

 私は去年(2010)の9月から、Yahoo!ブログを開設したのですが、ブログパーツとしてフラッシュが使えることを知って、フラッシュのブログパーツを作ってみたいと考えるようになりました。
 「動く」ブログパーツとしてはフラッシュ以外にもアニメGIF画像やYouTube動画なども使えるのですが、アニメGIFは単純な動作しかできないし、色数も256色に制限されています。動画はYouTubeで見るのと同じで、あくまでムービーです。
 フラッシュだと、音が出せたり、対話型の動作も可能なので、ずっとおもしろいものが作れます。

ブログパーツとしてフラッシュでできること


Flashはどうやって作るの?

 有料のツールはプロ向きの何万円もするものからアマチュア向けの数千円のものまでありますが、ある程度の機能でいいなら無料ツールでも充分です。さらに、無料ツールでもプログラミングができるなら本格的なツールも利用可能です。
 お勧めとしては

FlashDevelop

です。これは、フリーソフトですが本格的なフラッシュを作成できます。ただし、ActionScriptのプログラミングが必要です。
 この講座では、FlashDevelopを使ってフラッシュを作成する方法を勉強していきます。以下での説明はFlashDevelop 3.3.4 RTMを使って行います。


FlashDevelopで新しいプロジェクトを作成する

 FlashDevelopを起動したら、メニューで

Project / New Project ...
を実行します。下のようなダイアログが表示されるので、AS3 Projectを選びNameLocationを入力してOKボタンをクリックします。
flashdevelop_newproject
 すると下のようなプロジェクトが作成されます。
flashdevelop_project

 作成されるソースは次のようになります。
package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author TN
	 */
	public class Main extends Sprite 
	{
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
		}
		
	}
	
}

このソースコードの意味ですが、Spriteから派生したMainというクラスを定義しています。つまり、フラッシュオブジェクトはSpriteクラスがベースになっています。
Mainクラスの初期化ですが、// entry pointというコメントの後にコードを追加していきます。


図形を表示させてみる

package 
{
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;
	
	/**
	 * ...
	 * @author TN
	 */
	public class Main extends Sprite 
	{
		private var shape1:Shape = new Shape();
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			shape1.graphics.lineStyle(2);
			shape1.graphics.drawCircle(300, 300, 100);
			stage.addChild(shape1);
		}
		
	}
	
}

flash_circle1

 このソースでshape1というShapeオブジェクトを定義し、そこに円を描画しています。shape1は表示領域stageに追加することにより表示されます。




次のページ ..