メインコンテンツまでスキップ

「ActionScript」タグの記事が21件件あります

全てのタグを見る

AS3でお絵かきFlashを作る (3)図形描画と配置選択ツールの追加

· 約2分
Yu Sasaki
Enterprise Security Manager / Advisor

作り込んでいく内に、Flashのレイアウトとファイルサイズが大きくなったので、下記のページに用意しました。

今回追加した機能は大きく分けてタイトルに書かれている2つです。 描画できる図形の種類を直線、長方形、楕円に増やしました。また、描いた図形を任意の場所に移動することが出来ます(「配置」ボタンをクリック後、図形をドラッグ&ドロップ)。そして、配置移動も履歴に残しているのでUndo、Redoの対象になります。 以下は作成後の反省点の一部の走り書き。

問題点や改善点

  • 図形の描画やオブジェクトのD&Dの際に、線分上に薄い青のエフェクトをかけると爽快感+視認性が上がるかなぁと試してみたんですが、実装したら煩わしい感じになってしまいました。エフェクトのON/OFFのチェックボックスをつけておこう。
  • 図形オブジェクトがD&Dでキャンバスのサイズ外に出てしまう。Flexコンポーネントの親子関係や背景色の設定し忘れ等からくる問題だと推測。
  • 描画ツールのボタンは押し込み式にして、選択しているツールを分かりやすくしよう。レイアウトいじるのは後回しになりがちだなぁ。
  • 長方形と楕円ツールは塗りつぶし設定の追加やShift+ドラッグ描画で正方形と円を作成できるようにしておこうかな。
  • 複数の図形が重なった際のドロップ処理の再考。

AS3でお絵かきFlashを作る (1)自由曲線のUndo、Redo

· 約1分
Yu Sasaki
Enterprise Security Manager / Advisor

お絵かきと銘打っていますが絵がかけるのはあくまで一機能で、最終的には頭の中のアイディアを楽しくまとめられるツールを作ってみたいと今は考えています。 まぁ最初は単なるペイントツールの機能を実装していきます。 さて、1回目は定番というか基本というかUndo(元に戻す)とRedo(やり直し)機能を実装してみました。 以下のFlash上でドラッグ&ドロップすると青い線を引けると思います。

ActionScript: Flash(*.swf)にmp3ファイルを埋め込む - Embedタグ

· 約2分
Yu Sasaki
Enterprise Security Manager / Advisor

外部ファイルをURLやパスを指定してロードする以外に、ファイルをFlashに埋め込むこむことも出来ます。下記の例で扱うファイルはmp3サウンドですが、これはテキストや画像ファイルに代えても処理の手順はさして変わりません(インスタンスを格納するデータ型が変化するだけです)。

ソースコード

次のコードはEmbedタグで指定したサウンドを再生する処理を表しています。 PlaySound.as

package info.yukun
{
import flash.display.Sprite;
import flash.media.Sound;
public class PlaySound extends Sprite
{
[Embed(source='sample.mp3')] // mp3ファイルのパスを指定(ここではカレントディレクトリのsample.mp3ファイル)
private static const SampleSound:Class;
private var sampleMp3:Sound = new SampleSound();
public function PlaySound():void
{
sampleMp3.play(); // サウンドの再生
}
}
}

コードの説明

[Embed(source='sample.mp3')] で指定されたmp3ファイルは、 private static const SomeSound:Class; で静的なプロパティにClass型として格納します。次に、 private var sampleMp3:Sound = new SampleSound(); でSoundクラス型変数にSampleSoundインスタンスを代入し、 これによって、play()メソッドを用いてサウンドを再生しています。 Embedにはsource属性の他にもsymbolというのがあるみたいです。後でさらっておこうかな。

参考にしたサイト

  • Embedding Resources with AS3 | BIT-101 Blog
  • Sound - ActionScript 3.0 コンポーネントリファレンスガイド

ActionScript: XMLの子要素の読み込み - XMLオブジェクトと「.. 」「[]」演算子

· 約3分
Yu Sasaki
Enterprise Security Manager / Advisor

XMLのパースの練習に、AmazonのWebサービスAPIを用いて本を検索し、表紙の縮小画像をStage上にランダムに配置するFlashをAS3で書いてみました。 追記:現時点はAPI仕様が変わった為、下記のプログラムは機能しません。。

AS3でMind MapぽいFlashを作る (4)右クリックメニューを各ノードとステージに追加

· 約2分
Yu Sasaki
Enterprise Security Manager / Advisor

今回は各ノードとステージに右クリックメニューを追加しました。コンテキストメニューorショートカットメニューとも言うのかな。 試しにノード(文字が書いてある所)の上や、そうでない背景の黒い所で右クリックしてみると、二つの固有のメニュー項目が出現します。

AS3でMind MapぽいFlashを作る (3)各ノード間の線分に文字列を表示

· 約2分
Yu Sasaki
Enterprise Security Manager / Advisor

なんだか段々色がダークになってきましたね。 お馴染みですが前々回と同じくRキーで全ノードがランダムに散ったり各ノードをD&Dできたりします。あと最適化を少ししましたので、前より微妙にパフォーマンスが上がっているかと思います。

ActionScript: マウスをイベントリスナーに登録

· 約5分
Yu Sasaki
Enterprise Security Manager / Advisor

先ずは下のFlashの円にマウスポインタを合わせたり、クリック・ダブルクリックなどするとそれに伴ったアクションがあります。

2019-01-14追記:Flashのサポート終了に伴い、本ページからFlashへのリンクを削除しました。

このFlashの仕様をコードに書きおこす際、1つのクラスに全ての機能を書き込む方法もありますが(この場合はその方がコード量が少なくなる)、折角なのでOOに基づいたコードを書いてみました。が、OOのパターンを適応途中に飽きたので少し崩しています(ぇー)。

ソースコード

上のFlashは以下の三つのクラスで描かれています。

  1. Main.as
  2. Ball.as
  3. EventMonitor.as

Main.as

MainクラスではマウスイベントをキャッチするBallクラス(後述)とその結果を観測し画面左上に出力するEventMonitorクラス(後述)のインスタンスを生成し画面への出力登録を行っています。ball変数をEventMonitorのコンストラクタに渡しているのはEventMonitorからマウス座標等を取得する為のballインスタンスのメソッドを呼び出すからです。

今回はイベントを発生させるオブジェクトがball一つですので後述のコードにしましたが、複数あるときはパターンに合わせた方が良いと考えます。

package info.yukun
{
import flash.display.Sprite; // タイムラインを使わない場合、MovieClip より軽い
public class Main extends Sprite
{
private var ball:Ball; // Ballクラス型の変数
private var monitor:EventMonitor; // イベントのモニタリング用のクラス
// コンストラクタ: ここからプログラムコードを読んでいく
public function Main():void
{
init();
}
private function init():void
{
ball = new Ball(); // Ballインスタンスを作成
ball.x = stage.stageWidth / 2; // オブジェクトの表示位置(中央)
ball.y = stage.stageHeight / 2;
ball.regEvent(); // マウスイベントリスナーの登録
addChild(ball); // 最上位のSpriteにballオブジェクトを表示
monitor = new EventMonitor(ball);
monitor.x = 0; // 左上に設置
monitor.y = 0;
addChild(monitor);
}
}
}

Ball.as

次に、冒頭のFlashに描かれている青い円を描画するBallオブジェクトを読んでみましょう。先ず、コンストラクタのBallとinit()メソッドで青い円を描画しています。

次にregEvent()メソッドでイベントリスナーの登録手続きを書いています。大抵この規模のコードですとMain.asでball.addEventListener(ホニャララ)とリスナー登録しているコードを散見しますが、オブジェクトの振る舞いはオブジェクト毎に持たせた方がOOぽいし、何だか再利用できそうな希望の片鱗を与えてくれるのでBallクラスにregEvent()メソッドを付けてみました。これはMainクラスから呼び出されることで、ballのマウスのイベントリスナーの一括登録が行われます。

後の二つのメソッド、mousePosition()とgetState()はEventMonitorクラスから呼び出されるものです。このメソッドを通して、画面左上にマウス座標等を表示します。ここでも機能の分離を行っています。すなわち、情報を投げる側(Ball)と観測し表示する側(EventMonitor)です。

package info.yukun
{
import flash.display.Sprite;
import flash.events.MouseEvent; // マウスイベント用
public class Ball extends Sprite
{
private var radius:Number; // 円の半径
private var color:uint; // 色
private var event_state:String; // イベントの状態
public function Ball(radius:Number = 50, color:uint = 0xA3D5FF)
{
this.radius = radius;
this.color = color;
this.event_state = "";
init();
}
public function init():void
{
graphics.beginFill(color);
graphics.drawCircle(0, 0, radius); // 円の描画
graphics.endFill();
}
// イベントリスナーの登録
public function regEvent():void
{
// このオブジェクトにクリックが発生したら登録したメソッド(onMouseEvent)を実行、と読む
addEventListener(MouseEvent.CLICK, onMouseEvent);
doubleClickEnabled = true; // ダブルクリックの検出を可能にする
addEventListener(MouseEvent.DOUBLE_CLICK, onMouseEvent);
addEventListener(MouseEvent.MOUSE_DOWN, onMouseEvent);
addEventListener(MouseEvent.MOUSE_MOVE, onMouseEvent);
addEventListener(MouseEvent.MOUSE_OUT, onMouseEvent);
addEventListener(MouseEvent.MOUSE_OVER, onMouseEvent);
addEventListener(MouseEvent.MOUSE_UP, onMouseEvent);
addEventListener(MouseEvent.MOUSE_WHEEL, onMouseEvent);
}
public function onMouseEvent(event:MouseEvent):void
{
event_state = event.type;
trace(event_state);
switch(event_state) {
case MouseEvent.ROLL_OVER:
this.color = 0x0006FA;
init();
break;
case MouseEvent.ROLL_OUT:
this.color = 0xA3D5FF;
init();
break;
}
}
public function mousePosition():String
{
// この場合、軸の原点は円の中心(オブジェクトのSpriteを基準)
return "("+ Math.floor(mouseX) + ", " + Math.floor(mouseY) + ")";
}
public function getState():String
{
return event_state;
}
}
}

EventMonitor.as

最後になりましたが、マウスイベントの内容やマウス座標の表示を行うEventMonitorクラスです。 ここでのイベントリスナーの登録は、

addEventListener(Event.ENTER_FRAME, onEnterFrame);

ですね。 フレームが更新される毎に、第二引数に登録したonEnterFrame()メソッドを実行します。Event.ENTER_FRAMEはアニメーションさせる時に良く使うプロパティですが、ここではマウス座標やマウスクリックイベント情報を取得し出力する為に使われています。

package info.yukun
{
import flash.display.Sprite;
import flash.events.Event;
import flash.text.*;
public class EventMonitor extends Sprite
{
private var ball:Ball; // 観測オブジェクト
private var monitor_label:TextField; // 表示ラベル
private var TITLE:String;
public function EventMonitor(ball:Ball)
{
this.ball = ball;
init();
}
public function init():void
{
TITLE = "イベントモニター";
monitor_label = new TextField();
monitor_label.text = TITLE;
monitor_label.autoSize = TextFieldAutoSize.LEFT;
monitor_label.selectable = false;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
addChild(monitor_label);
}
private function onEnterFrame(event:Event):void
{
var text:String = TITLE + "\n";
text += "マウス座標(原点はボールの中心): " + ball.mousePosition() + "\n";
text += "発生イベント: " + ball.getState() + "\n";
monitor_label.text = text;
}
}
}

AS3になりJavaやC#に似て格段に扱いやすくなったように感じます。OOはGUIにマッチする設計手法ですしね。 話し変わりますが、以前windows.hを用いたGUIのコードではイベントループで悪戦苦闘してたっけ。今なら多少は上手く書けるかな。どうだろ。