ActionScriptのブログ記事

私が普段仕事でFlashの制作をしながらよく使っているActionScript2.0のテクニックをまとめてみました。
テクニックは大袈裟かもしれないですが。

内容としては、ダイナミックテキストの画像化(透過のため)、文字種確認、文字の置換、スムージング、ソート、swf設置パス取得、拡大縮小、乱数の取得、ブラー、です。

今さらActionScript2.0かよと思いながらも、現役言語なので。

すべて関数形式で記述しています。

文字の画像化

ダイナミックテキストはそのままですと透過できません。
そのため、ドロップシャドウフィルタを適用して強制的に画像扱いにしてしまいます。
ドロップシャドウフィルタは適用しても見栄えに影響を及ぼさないようにパラメータを設定します。

//引数は画像化対象のダイナミックテキスト function changeText(myText:TextField):Void{ var myDropShadowFilter = new flash.filters.DropShadowFilter(0,0,0xffffff,0); var myFilter:Array = myText.filters; myFilter.push(myDropShadowFilter); myText.filters = myFilter; }

文字種確認

たとえば、文字列Aの中から"あいうえお"以外の文字が使われていないかチェックする等のときに使います。
メールアドレスの形式チェックなんかもこの応用です。
使われていればfalseを返します。

//引数は調査対象文字列及び許可されている文字種 //戻りは、許可した文字以外が使われていればfalseです。 function checkString(origin_str:String , ok_str:String):Boolean{ var char_str:String; for (var i:Number = 0 ; i < origin_str.length ; i++){ char_str = origin_str.charAt(i); if ( ok_str.indexOf(char_str , 0) == -1)return false; } return true; }

文字の置換

文字の置換も私は関数化しています。
置換対象の文字で区切って、置換後の文字を挟んでくっつけます。
以下の関数は元文字、置換対象文字、置換後文字を渡すと元文字を置換して文字列を返します。

//引数は元文字、置換対象文字、置換後文字 function replaceString(origin_str:String , before_str:String , after_str:String):String{ var temp_arr:Array = origin_str.split(before_str); return temp_arr.join(after_str); }

スムージング

外部ロードの画像はそのままサイズを変更すると粗いです。
スムージングをしてあげることによって画質を保つことができます。

import flash.display.BitmapData; //引数はスムージング元MCとスムージング後MC function smoothMC(before_mc:MovieClip , after_mc:MovieClip):Void { var temp_bd:BitmapData = new BitmapData(before_mc._width, before_mc._height, true , 0x00000000); //基準点を左上として画像を描画するため、元MovieClipの基準点が中央等の場合は注意すること。 temp_bd.draw(before_mc); after_mc.attachBitmap(temp_bd, 0, "auto", true); //元々ステージ上に配置されているMovieClipでも消せるように最前面へ。 before_mc.swapDepths(_root.getNextHighestDepth()); before_mc.removeMovieClip(); }

ソート

値の並べ替えも頻繁に出てくるので関数化するとよいと思います。
以下の例では挿入ソートのアルゴリズムを使っています。
受け取った配列の中身を並び替えます。

//引数は対象配列及び昇順(true)降順(false)のどちらか function sortNumber(num_arr:Array , asc_boo:Boolean):Void{ var temp_num:Number; for(var i:Number = 1 ; i < num_arr.length ; i++){ temp_num = num_arr[i]; for(var j:Number = i ; j > 0 && temp_num > num_arr[j - 1] != asc_boo ; j--){ num_arr[j] = num_arr[j-1]; } num_arr[j] = temp_num; } }

swf設置パス取得

開発者がswfを設置しているパスを知らないということはそうないかと思うのですが、必要になったときのために。
urlを取得し、swfファイル名の前で文字列を分割することで取得します。
パスの記述方法が環境によって異なるため、スラッシュと円マークのどちらがファイルの区切りかをチェックしています。

function getPath():String{ var thisurl_str:String = _root._url; var slash_num:Number = Math.max(thisurl_str.lastIndexOf("/"),thisurl_str.lastIndexOf("¥¥")); var path_str:String = thisurl_str.substring(0, slash_num + 1); return path_str; }

拡大縮小

画像の拡大縮小も頻出するため、指定サイズ内に収まるように縦横比を保って拡大・縮小する関数も用意しています。

//引数はMCと横幅と縦幅 function changeSize(my_mc:MovieClip , width_num:Number , height_num:Number):Void{ var temp_num:Number; if(my_mc._width / width_num > my_mc._height / height_num){//横長の場合 temp_num = my_mc._width / width_num; } else{//縦長の場合 temp_num = my_mc._height / height_num; } temp_num = 100 / temp_num; my_mc._xscale = my_mc._yscale = temp_num; }

乱数の取得

乱数は制作物によっては頻繁に登場するため、値の幅(最小値と最大値)を指定するとその範囲内での乱数を戻り値と渡してくれるように関数を用意すると便利です。

//引数は最小値及び最大値 function getRandom(min_num:Number , max_num:Number):Number{ return Math.floor(Math.random() * (max_num - min_num + 1)) + min_num; }

ブラー

ブラーも比較的よく使うため関数化しています。

//引数はブラー対象のmc、水平方向のぼかし量、垂直方向のぼかし量、ぼかしの実行回数 import flash.filters.BlurFilter; function setBlur(my_mc:MovieClip , x_num:Number , y_num:Number , q_num:Number){ var my_bf:BlurFilter = new BlurFilter(x_num , y_num , q_num); my_mc.filters = new Array(my_bf); }

ActionScript 2.0対応バージョンはこちら

以前、フルFlashサイトの作り方の基本まとめ(ActionScript2.0)という記事を書きました。

せっかくなので、ActionScript3.0版も書いておこうかなと思います。
(2.0バージョンを少しいじった程度です)

なんか一般的にはフルFlashとフルFlashでなんか違うものみたいな扱いがされているような気が時々してしまいますが、別にそんなことないです。
前も書きましたが、フルFlashだからといってさほど特別なことをしているわけじゃありません。

このサンプル、どなたかの役に立ちますように。

仕様

・左上、中央上、右上、左、中央、右、左下、中央下、右下の9カ所にMovieClipを配置。

・中央のMovieClipのクリックによってフルスクリーン表示と通常のブラウザ内表示の切替。

・swffit v2.3.1を使用してブラウザが一定サイズ(今回は横300px×縦300px)以下になったときにはブラウザにてスクロールバー表示。

・表示にはSWFObject v2.1を使用。

ポイント・注意点

・stage.scaleMode = StageScaleMode.NO_SCALEを設定することでswfが拡大縮小されないようにする。
stage.scaleMode = "noScale"でも同様です。

・stage.align = StageAlign.TOP_LEFT;を設定することで座標を左上基準とする。
stage.align = "TL"でも同様です。

・Event.RESIZEとFullScreenEvent.FULL_SCREENのイベントをstageに設定することで、フルスクリーンモードの切替とステージのサイズ変更を検出する。

・stage.stageWidthとstage.stageHeightに合わせて配置するMovieClipインスタンスの位置を調整する。

・cssにて親要素のheightを100%指定しないとブラウザのスペースをフル活用できません。詳しくはAdobeの「高さ 100% の Flash のバグ」を参照。

・フルスクリーン表示はflash player9以降の機能です。

・flashの表示にSWFObject v2.1を使う必要は必ずしもないですが、フルスクリーン表示のためにallowFullScreenのパラメータをtrueにすることは忘れずに。

サンプル

サンプルの表示はこちらです(同窓表示です)。

サンプルのダウンロードはこちらです(html,css,js,swf,fla,asファイル)。
flaはCS3形式で保存されています。
flaはMovieClipインスタンスの配置とFullflashsampleクラスの読込用であり、ActionScriptの記述はありません。
ActionScriptのコードはすべて外部のFullflashsample.asに記述しています。

ActionScriptのコード

package{ /*配置MovieClip(基準点はすべて中央) lt_mc：左上 mt_mc：中央上 rt_mc：右上 lm_mc：左 mm_mc：中央(全画面表示の切替に使用) rm_mc：右 lb_mc：左下 mb_mc：中央下 rb_mc：右下 */ //使用しているクラス import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.events.FullScreenEvent; import flash.display.StageScaleMode; import flash.display.StageAlign; import flash.display.StageDisplayState; //クラス定義 //MovieClipインスタンスを操作するため、MovieClipクラスを継承 public class Fullflashsample extends MovieClip{ //コンストラクタ function Fullflashsample(){ //ステージサイズ変更に伴う拡大縮小無しと基準を左上固定の設定 stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; //ステージサイズ変更時イベント設定 stage.addEventListener(Event.RESIZE , resizeStage); //スクリーンモード切替時イベント設定 stage.addEventListener(FullScreenEvent.FULL_SCREEN , changeScreen); //中央のMovieClipクリック時イベント設定 mm_mc.addEventListener(MouseEvent.CLICK , clickMc); //初期表示のため、最初に一回位置調整 changeLocation(); } //ステージサイズ変更時関数 private function resizeStage(event:Event):void { //MovieClipの位置調整以外にステージサイズ変更時の処理があればここに記述 changeLocation();//MovieClip位置調整 } //MovieClip位置調整関数 private function changeLocation(){ //MovieClip毎の位置調整 //本来まとめられる部分もあるが、わかりやすさ優先で各MovieClip毎に記述 //左上 lt_mc.x = lt_mc.width / 2 lt_mc.y = lt_mc.height / 2; //中央上 mt_mc.x = stage.stageWidth / 2; mt_mc.y = mt_mc.height / 2; //右上 rt_mc.x = stage.stageWidth - rt_mc.width / 2; rt_mc.y = rt_mc.height / 2; //左 lm_mc.x = lm_mc.width / 2 lm_mc.y = stage.stageHeight / 2; //中央 mm_mc.x = stage.stageWidth / 2; mm_mc.y = stage.stageHeight / 2; //右 rm_mc.x = stage.stageWidth - rm_mc.width / 2; rm_mc.y = stage.stageHeight / 2; //左下 lb_mc.x = lb_mc.width / 2; lb_mc.y = stage.stageHeight - lb_mc.height / 2; //中央下 mb_mc.x = stage.stageWidth / 2; mb_mc.y = stage.stageHeight - mb_mc.height / 2; //右下 rb_mc.x = stage.stageWidth - rb_mc.width / 2; rb_mc.y = stage.stageHeight - rb_mc.height / 2; } //スクリーンモード切替時関数 //引数がtrue：フルスクリーン　false：ブラウザ内表示(通常) private function changeScreen(event:FullScreenEvent):void{ if(event.fullScreen != true){//ブラウザ内表示へ //ブラウザ内表示への切替時の処理記述 } else{//フルスクリーン表示へ //フルスクリーン表示への切替時の処理記述 } } //中央のMovieClipクリック時関数 private function clickMc(event:MouseEvent):void{ if(stage.displayState != StageDisplayState.NORMAL){//現在フルスクリーン stage.displayState = StageDisplayState.NORMAL; } else{//現在ブラウザ内表示(通常) stage.displayState = StageDisplayState.FULL_SCREEN; } } } }

ActionScript3.0基本学習シリーズの目次はこちらです。
外部ライブラリ学習シリーズの目次はこちらです。

今回は前回制作した内容にイベントの設定を付け加えてみます。
イベントはActionScript3.0で制作する場合に避けては通れないものです(単純なアニメーションぐらいなら必要ないかもしれないですが)。
また、ActionScript2.0との違いの一つとしてよく取り上げられます。ActionScript2.0から3.0に移行する際に引っかかるポイントのようです。

イベントとは

イベントとは特定の事象が発生した際の通知ぐらいに考えてください。

たとえば、マウスをクリックした際に絵を切り替えるなら、マウスをクリックしたというイベント通知を取得して絵の切替処理を行うことになります。

ActionScript2.0の場合にはインスタンス上に
on(press)
と書くだけでマウスプレスのイベントを取得できましたが、ActionScript3.0では異なります。

今回加える処理

まず、前回は画像のロードが完了してもしなくても表示リストに追加しましたが、今回は画像のロード完了を待って表示リストへの追加を行います。
今後画像ビューアの制作を進めていくに当たって、ロードしたものをただ順番に表示するだけではなく、ロード完了した画像の表示切替等を制御する必要がありますので。

また、マウスクリックした際に画像を回転する処理を加えています。
画像ビューアとして画像回転は特に必要ないのですが、クリックされたことを判断するための仮処理です。

スクリプト

まず、スクリプトはこちら。

package { //必要クラスのimport import flash.display.Sprite; import flash.net.URLRequest; import flash.display.Loader; import flash.events.Event; import flash.events.MouseEvent; //クラス定義 public class ImageViewer extends Sprite { //メンバプロパティ private var loader:Loader; //コンストラクタ public function ImageViewer() { loader = new Loader();//インスタンス生成 var url_req:URLRequest = new URLRequest("http://www.aoharu-b.com/cgi/sk/img/as3/img/test1.jpg");//インスタンス生成 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, finishLoad);//ロード完了イベント設定 loader.addEventListener(MouseEvent.CLICK , clickImage);//クリックイベント設定 loader.load(url_req);//画像ロード } //ロード完了メソッド private function finishLoad(event:Event):void{ addChild(loader);//表示リストへの追加 } //クリックメソッド private function clickImage(event:MouseEvent):void{ event.target.rotation++;//loaderを一度ずつ回転 } } }

以下は実行結果です。
(クリックすると画像が回ります)

イベント処理の設定

今回追加や変更を加えた箇所について一つずつ解説していきます。

-----------7〜8行目-----------
import flash.events.Event;
import flash.events.MouseEvent;

イベント取得に必要なクラスのインポートを行っています。
import flash.events.Event;はロード完了取得用です。
import flash.events.MouseEvent;はマウスクリック取得用です。

Eventクラスについては公式サイトのEventに、MouseEventクラスについては公式サイトのMouseEventに詳しい解説が載っています。

-----------20〜21行目-----------
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, finishLoad);
loader.addEventListener(MouseEvent.CLICK , clickImage);

20行目がロード完了イベントの設定です。loaderがロード完了した際にfinishLoadというメソッドを呼び出すように設定しています。
21行目はマウス完了イベントの設定です。loaderがマウスクリックされた際にclickImageというメソッドを呼び出すように設定しています。

addEventListenerがイベント取得を設定するためのメソッドです。
ロード完了した際にはloader.contentLoaderInfo、マウスクリックした際にはloaderとaddEventListenerの呼び出しが異なることに注意してください。

-----------26〜28行目-----------
private function finishLoad(event:Event):void{
addChild(loader);//表示リストへの追加
}

ロード完了時に呼び出されるメソッドです。
loaderを表示ツリーに追加しています。

メソッドの定義は
メソッド属性 function メソッド名(引数):戻り値の型
という書き方をします。
引数はそのメソッドが受け取る値、戻り値はそのメソッドが呼び出し元に返す値です。
戻り値についてはまだ使用していないため、現時点では気にしないで大丈夫です。
Voidは戻り値がないという意味です。

他のクラスからアクセスすることがないため、属性はprivate(同クラス内でのみアクセス可能)にしてあります。
もちろん、public(どこからでもアクセス可能)にしても動作します。

引数のevent:EventはEventクラスのデータを、インスタンスeventにて受け取ることを意味します。
今回は使用していませんが、Eventクラスのイベントを受け取る場合はこのように記述します(インスタンス名は変更して平気です)。

-----------31〜33行目-----------
private function clickImage(event:MouseEvent):void{
event.target.rotation++;
}

こちらはマウスクリック時に呼び出されるメソッドです。

引数のevent:MouseEventはMouseEventクラスのデータを、インスタンスeventにて受け取ることを意味します。

event.targetはイベント通知元を意味します。つまり、今回の場合はloaderと同意となります。

rotationはloaderのプロパティです。
プロパティとは性質を表すデータのことです。
rotationは回転角度を示すプロパティです。

各クラス毎にx座標を示すx、y座標を示すy、透過度を示すalpha等、様々なプロパティが用意されています。
ActionScript2.0のように_はつきませんので注意してください。

event.target.rotation++;はevent通知元(loader)の回転角度を1増やすことを意味します。
++を--に変えると1減ります。
5増やしたいならevent.target.rotation = event.target.rotation + 5あるいはevent.target.rotation += 5と書きましょう。

「ここで定義したどちらのメソッドも同じ名前のeventというインスタンスを使っているけれど大丈夫なのか」
そう考えるかもしれません。
まったく問題ありません。
この二つは同じ名前ですが、変数のスコープのルールによって、異なるものとして処理されています。
これについては後述いたします。

変数のスコープ

-----------14行目-----------
private var loader:Loader;

-----------18行目-----------
loader = new Loader();

前回のスクリプトでは、この2行は1行にまとまってコンストラクタの中に記述していました。
var loader:Loader = new Loader();
といった風に。

なぜ今回、二つに分けて前半をコンストラクタ外に書いたかと言うと、ActionScript3.0ではメソッド内にて定義した変数がそのメソッド内でのみ有効だからです。
つまり、コンストラクタ内で定義した変数はコンストラクタ内でしかアクセスできません。
今回はloaderインスタンスをロード完了後に表示ツリーに追加するため、コンストラクタ内だけで完結しません。
そのため、コンストラクタ外からもアクセスできるよう、クラスの最初に書きました。

この変数の有効範囲のことを変数のスコープと呼びます。
変数のスコープについて

さきほど、eventという名前のインスタンスを各メソッドで用意しても問題ないと書いたのは、変数のスコープというものが存在するからです。
finishLoadの中で定義した変数はfinishLoadの中でのみ有効であり、clickImageの中で定義した変数はclickImageでのみ有効となります。

メソッドの外にて定義した変数はプロパティの扱いになり、属性指定によっては他のクラスからアクセスできます。
今回はprivateとして定義したため、他のクラスからはアクセスできません。

変数、定数の属性については以下のものが用意されています(定数については別記事にて説明いたします)。

• public：どこからでも参照可能
• private：同じクラス内でのみ参照可能
• protected：同じクラスあるいは派生クラスにて参照可能
• internal：同じパッケージ内で参照可能
• static：インスタンスではなくクラスに属するように指定

最初の4つの同時指定はできません。省略した場合のデフォルト値はinternalです。
詳しくは公式サイトのクラスプロパティの属性及びステートメント、キーワード、ディレクティブをご覧下さい。

まとめ

イベントは今後ずっと使っていく知識です。
import、addEventListener、そして対応するメソッドの定義がイベント使用のためのセットですので、お忘れなく!!

今回使用したファイルはまとめてサーバにアップしてあります。

前の記事"AS 3.0 基本学習1-1 画像ビューア制作-画像のロード"はこちらです。
ActionScript3.0基本学習シリーズの目次はこちらです。

ActionScript3.0基本学習シリーズの目次はこちらです。
外部ライブラリ学習シリーズの目次はこちらです。

前回の記事にてActionScript3.0の開発環境構築を行いました。
今回より実際に制作を通じての学習開始です。

何回か(10回ぐらい?)に分けて、画像ビューアの制作を基礎から解説しつつやっていくことにしました。
なぜ画像ビューアかというと、画像のロード、マウスイベント、XMLからのデータ取得といった重要事項を学ぶことができるからです。

第一回の今回は、外部画像のファイルのロード方法について解説します。
また、今後頻出する基本単語を多数説明させていただきます。

スクリプト

まずは、スクリプト。
http://www.aoharu-b.com/cgi/sk/img/as3/img/test1.jpgというjepgファイルを表示するスクリプトです。
画像を表示するために最低限必要な内容のみです。

package { //必要クラスのimport import flash.display.Sprite; import flash.net.URLRequest; import flash.display.Loader; //クラス定義 public class ImageViewer extends Sprite { //コンストラクタ public function ImageViewer() { var loader:Loader = new Loader();//インスタンス生成 var url_req:URLRequest = new URLRequest("http://www.aoharu-b.com/cgi/sk/img/as3/img/test1.jpg");//インスタンス生成 loader.load(url_req);//画像ロード this.addChild(loader);//表示リストへの追加 } } }

すぐ下が実行結果です(画像表示するだけですが)。

ここから下、スクリプトについて解説していきます。
最初ということで用語解説中心で退屈だと思いますが、今後ずっと使っていく重要用語ばかりです!!
(スクリプトを書く内に自然と身につくので、無理して暗記とかはしなくて大丈夫だと思います)

コメント文

スクリプト上の
//〜
の部分はコメント文です(〜は任意の文字列)。
スクリプトを見やすくするために書く説明文であり、実行にはなんの影響もありません。

複数行になる場合は
/*〜
〜
〜*/
という書き方をします(〜は任意の文字列)。

コメント文を適切に挿入することによって後からスクリプトを見たときに理解しやすくなります。
第三者にスクリプトを渡すときに理解しやすくしてもらう目的もあります。

package(パッケージ)

1行目に
package{
と書かれています。

パッケージとはなにかと言うと、書いたスクリプトの所属するグループです。
今回は特にグループ分けしていないのでpackageとしか書かれていませんが、これをグループ分けする際には
package packageName{
という書き方をします(packageNameの部分は任意です)。

「パッケージなんてなぜ必要なのさ?」
と思う人もいるかもしれないですね。
スクリプト量が増えてきてさらに外部ライブラリ読み込みなんかしていくと、これがないと煩雑でよくわからなくなります。
制作していくうちに重要性が自然とわかっていくかと思います。

ActionScript3.0にて用意されているパッケージについては公式サイトすべてのパッケージにて見ることが可能です。

オブジェクト指向

ActionScript3.0はクラスベースのオブジェクト指向言語です。

オブジェクト指向というのは部品の組み合わせによって物を構築していくという考え方です。

たとえばRPGを作る際にＸＸＸクエストという一つの完成品を作るのではなくマップ、キャラクターといった部品を作っていくイメージです。
ＸＸＸクエストという一つの完成品を作った場合にはそれはそのものＸＸＸクエストでしかありませんが、部品ベースで作った場合には他のゲームに流用がききます。
「ＸＸＸクエストで作ったキャラクターという部品をＺＺＺファンタジーでも使おう」
なんてことが容易にできます。

オブジェクト指向について詳しくはここでは説明しませんので、興味ある方はWikipediaのオブジェクト指向プログラミングのページをご覧下さい。

Class(クラス)と継承(インヘリタンス)

クラスベースのオブジェクト指向言語ではクラスという要素が理解する上で非常に重要になってきます。

では、クラスとは何かというと、属性と操作をセットにした雛形です。
たとえば、本というクラスがあったなら、属性はページ数、作者、出版社といった項目です。クラスを示す情報だと考えてください。
操作はページを進める、ページを戻すといったものになるでしょう。クラスにて行われる処理だと考えてください。

で、さらに、このクラスはそのまま使うだけではなく、このクラスを元にしたインスタンスというオブジェクトを生成することができます。
インスタンスは日本語に置き換えると実態、オブジェクトは物といったイメージでしょうか。

たとえば、本というクラスを元にして週刊少年ジャンプ2010年6号というインスタンスを作るといった感じです。
たとえば、車というクラスがあるならば、そこからカローラ、フェラーリといったインスタンスが作られます。

インスタンスの生成、インスタンスの操作の繰り返しによってプログラムは動きます。

説明長くなりましたが、スクリプトの解説に戻ります。
ちょっと間を飛ばして8行目についてです。

8行目に
public class ImageViewer extends Sprite {
と書かれています。
ここで行われているのはクラスの定義です。

クラスの定義は
クラス属性 class クラス名 extends 継承クラス名
という書き方をします。

今回の場合、ImageViewerがクラス名です。
publicはクラス属性になります。
クラス属性とはクラスへのアクセス範囲等を示すものとなります。

ActionScript3.0では以下のクラス属性が用意されています。

• public：どこからでも参照可能
• internal：同じパッケージ内で参照可能
• dyanamic：インスタンスでのプロパティ追加可能
• final：クラスの拡張を制限

publicとinternalの同時指定はできないといった注意点があります。省略した場合のデフォルト値はinternalです。
詳しくは公式サイトのステートメント、キーワード、ディレクティブをご覧下さい。

「なんでクラス属性なんてものが必要なのさ? 全部publicにしておけばいじゃん! finalとかいらないじゃん!」
と思うかもしれません。

とりあえず今は
「下手に自由度を持たせると開発者の思わぬところで内部の情報が書き変わってしまいかねない」
ぐらいに考えておいてください。

extendsは継承(インヘリタンス)を意味します。
extends SpriteはSpriteクラスを継承するの意味です。
継承とは、その名前の通り、他のクラスの内容を受け継ぐことです。
この継承という考え方があるからこそ、既存クラスの有効活用ができ、また、内容の重複したクラスが乱立することを防げます。
継承しない場合はextendsを書く必要はありません。

SpriteというクラスはActionScript3.0にて初めから用意されています。
表示を行う上での基本となるクラスです。
今回は画像を表示するためにこのSpriteクラスを継承しています。
Spriteクラスについて詳しくは公式サイトのSpriteをご覧下さい。

まとめますと、この8行目は
Spriteクラスを継承したどこからでも参照可能なImageViewerという名前のクラスの定義
を行ったということになります。

注意点としまして、クラス名とファイル名は等しくしてください。
今回の場合、ファイル名はImageViewer.asです。

ActionScript3.0では初めから用途に合わせて様々なクラスが用意されています。
公式サイトにすべてのクラスが一覧でまとめられています。

import(インポート)

クラスを使うためには、使用するクラスをimport(インポート)してあげる必要があります。
今回は3行目〜5行目で行っています。
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.display.Loader;

つまり、今回は3つのクラスをインポートしてあげています。
たとえば
import flash.display.Sprite;
はflash.displayパッケージのSpriteクラスをインポートしています。
もしもここで
import flash.display.*;
と書くと、flash.displayパッケージの全クラスがインポートされます。

「最初に全部インポートしておけばいいじゃん」
と思うかもしれないですね。
ActionScriptの場合、インポートしても使用しなかったクラスはswfファイルに出力されませんので、容量が無駄に増えることはないですし。
今は
「スクリプトの読みやすさを考慮するために、必要なクラスだけインポートする」
と考えておいてください。
全部インポートしているとなにをどう使っているかがすごくわかりづらくなりますので。

function(メソッド)とコンストラクタ

11行目に
public function ImageViewer() {
と書かれています。
これはメソッド(操作)の定義です。
ImageViewerという名前のどこからでも参照できるメソッドを定義したということになります。

publicはこのメソッドの属性です。
メソッドの属性もクラスの属性同様、どこまでアクセスを許すか等を指定するものです。

属性として以下のものが用意されています。

• public：どこからでも参照可能
• private：同じクラス内でのみ参照可能
• protected：同じクラスあるいは派生クラスにて参照可能
• internal：同じパッケージ内で参照可能
• final：拡張を制限
• static：インスタンスではなくクラスに属するように指定
• override：継承時の書き換え許可
• native：ネイティブコードでの実装

最初の4つについては同時指定不可(省略した場合のデフォルト値はinternal)、nativeは独自に作成するコードでは使用できない等の注意点があります。
詳しくは公式サイトのステートメント、キーワード、ディレクティブをご覧下さい。

今回のImageViewerというメソッド名はクラス名と同じです。
クラス名と同じ名前を指定したメソッドはコンストラクタとなります。
コンストラクタとは、クラスからインスタンスが生成されたときに自動で実行されるメソッドです。

コンストラクタにはpublicしか指定できません。
特にpublicと指定しなくてもpublicとなるため、今回クラス属性を書く必要はなかったのですが、説明用に書いています。

まとめますと、今回のスクリプトでは、パブリッシュによってImageViewerクラスのインスタンスが生成され、それと同時にこのImageViewerメソッドの中身が実行されます。

メソッドについて詳しくは公式サイトのメソッドにて解説されています。
次回記事でももう少し詳しく取り上げる予定です。

インスタンスの生成

12行目の
var loader:Loader = new Loader();
はLoaderクラスのインスタンスをloaderという名前で生成しています。
varは変数を意味します。
変数は変更可能なデータぐらいにお考え下さい。
公式サイトの変数に解説があります。

変数名は英数記号の半角が使用可能ですが、数字から始めてはいけない、すでにActionScript3.0にて定義されている名称(予約語)は使えないというルールがあります。

Loaderクラスはswf、jpeg、png、gifのファイルをロードするのに使用されるクラスです。
公式サイトLoaderに詳しい解説があります。

13行目
var url_req:URLRequest = new URLRequest("http://www.aoharu-b.com/cgi/sk/img/as3/img/test1.jpg");
は、url_reqという名称でURLRequestクラスのインスタンスを生成しています。
また、その際に引数としてhttp://www.aoharu-b.com/cgi/sk/img/as3/img/test1.jpgという文字列を渡しています。
ダブルクオーテーションで挟むことによって文字列を意味します。

引数とはメソッドに渡すデータです。
メソッドが処理するために必要なデータを渡すために引数はあります。
データを必要としない場合には引数は使用しません。
引数は0個のときも10個のときもあります。
いくつの引数を渡すかはメソッドの定義に左右されます。

URLRequestはURLを元にデータをロードする際に使用されます。
公式サイトURLRequestに詳しい解説があります。

画像のロード

14行目
loader.load(url_req);
にてついに画像のロードが行われています。

loadはLoaderクラスのメソッド、url_reqは引数です。

Loaderクラスのインスタンスはloadメソッドにて該当URLの画像をロードすることができます。
つまり、この場合、url_reqに設定したURLを元にしてファイルをロードします。

表示リストへの追加

ActionScript2.0の場合、画像をロードした時点で表示も行われましたが、3.0は違います。
画像をロードした上で、表示リストへの追加というものをしてあげる必要があります。

15行目がそれです。
this.addChild(loader);
thisはスクリプトが書かれているインスタンスを示します。
今回の場合はImageViewerクラスから作られたインスタンスです。

addChildは表示リストに画像を追加するためのメソッドです。
つまり、15行目はImageViewerのインスタンス上にloaderを表示することを意味します。

注意点

flash playerは他のドメインへのアクセスを制限する等のセキュリティ関係の処理を行っています。
今回のスクリプトをダウンロードして使用する際、画像ファイルへのパスは変更するようにしてください。
(自分のドメイン上、あるいはローカルでの使用の場合はswfからの相対パスの記述等)。

まとめ

最初ということで用語についてそれなりに細かく説明したため、内容長くなってしまいました。
お疲れ様です。
ただ、どれも本当に重要な内容です。
今回の内容と次回学習予定のイベントさえ理解していれば、あとはリファレンス見つつどんなクラスがあるか調べればかなりのものが作れてしまうと言っても多分過言ではないぐらいに。

次回からは用語説明等は控えめにしつつ、要点のみ解説して行く予定です。

今回使用したファイルはまとめてサーバにアップしてあります。

次の記事"AS 3.0 基本学習1-2 画像ビューア制作-イベント"はこちらです。
前の記事"AS 3.0 基本学習0 環境構築-FLEX SDKインストール"はこちらです。
ActionScript3.0基本学習シリーズの目次はこちらです。

ActionScript3.0基本学習シリーズの目次はこちらです。
外部ライブラリ学習シリーズの目次はこちらです。

このblogにActionScriptの情報目当てで訪れてくださっている方、けっこう多いです。
本当にありがたいことです。

そういった方々に報いるためにも、2010年はActionScript3.0関連の情報をblogに少しずつでも掲載していきたいなと思っています。
私自身、昨年は3.0からかなり離れて生活していたので(2.0ばかり)、そんな自分の勉強の復習の意味もありです。
文法をずらずら並べても面白くないので、画像ビューア等を実際に制作することを通じて記事を書いていく予定です。

ということで、まず今回は環境構築。
無料配布されているFLEX SDKのインストールと動作確認についてです。
FlashやFlex Builderを持たれている人は環境構築なしで作れるのですが、持っていない人もたくさんいるかと思います。

FLEX 3.5 SDKのシステム要件

FLEXの現在の最新バージョンは3.5です(4シリーズも出ているのですがまだベータ版です)。

システム要件はSustem requirementsに掲載されています(英語ページ)。

• Windows 2000, Windows XP, or Windows Server® 2003, Java 1.4 (Sun, IBM, or BEA) or 1.5 (Sun)


• Mac OS X v10.4.x, Java 1.5 (as shipped from Apple) on PowerPC or Intel processor


• Red Hat® Enterprise Linux® 3 or 4, SUSE® 10, Java 1.4 (Sun, IBM, or BEA) or 1.5 (Sun)


• Solaris™ 9, 10, Java 1.4 or 1.5 (Sun) Compilers only


• 512MB of RAM (1GB recommended)


• 200MB of available hard-disk space

上の4項目は対応OSとJavaのバージョン(Javaについては後述)。
下の2項目は512MBのメモリ(推奨は1GB)と200MBのハードディスク空き領域。

Javaのインストール

Javaというのはプログラミング言語の一つです。
Javaという言語で書かれたソフトウェアを動かすときにはPC内にそのための環境をインストールする必要があります。
FLEXを動かすためには必須です。

私はMacOSを使用しているのですが、Java環境は最初からインストールされていました。
MacOSにインストールされているJava環境を確認するには
Application/Utility/Java Preference
を起動してください。

もしもJava環境が古い、あるいは入っていないという方はAppleのApple Developer Connectionにてダウンロード可能です。
(MacOSの場合はSUNからのダウンロードではありません)

その他OSの場合はJava SE Development Kit 5.0u21にてダウンロードできます。
OS毎にインストール手順を説明しているとすごく長くなってしまうため、ここでは省きます。
Javaの環境構築についてはすでにかなりの情報ありますのでGoogle等でお調べ下さい。

Flex SDKのダウンロード

Download Adobe Flex 3.5 SDKにてダウンロードできます。

特にAdobeからの連絡とか必要ないのであれば上の二つ、"Please send me six Flex Builder™ Getting Started messages"と"Please send me six Flex Builder™ Getting Started messages..."のチェックははずしましょう。

その下にダウンロードしたFlex SDKをどのような環境で使うか、どのようなバックエンドと接続されるかという二つの質問がありますが、答えなくても問題なくダウンロードできます。

Adobe Flex 3.5 SDKの"Download now"をクリックするとダウンロード開始です。
flex_sdk_3.5.zipというファイルがダウンロードされます。約120MBとけっこう大きいファイルです。

Flex SDKのインストール

インストールというか、ほぼ解凍するだけですね。

まず解凍してください。
ant、asdoc等のフォルダが生成されます。

解凍したフォルダはどこか好きな場所に移動して問題ありません。
ただ、そのフォルダまでのパスに日本語が入ると動作するかわからないため、WindowsならCドライブ直下、MacならMacintosh HD直下のDeveloper内あたりでしょうか。

この時点で、単体動作のFlashPlayerがない人はインストールしておきましょう。
(作ったswfをテストする際にわざわざブラウザを使うのは面倒なことも多そうなため)

FlashPlayerはruntimes/playerフォルダの中です。
10、lnx、mac、winというフォルダがあります。
lnx、mac、winフォルダにはそれぞれのプラットフォームでのFlash Player9インストール用のファイルが入っています。
10の中にも同じようにlnx、mac、winというフォルダがあり、こちらはFlash Player10インストール用です。

Flash Playerの古いものはセキュリティ的に恐いので、なるべく新しいバージョンを使用しましょう(テスト上しようがなく古いバージョンを使うケースもあるでしょうが)

Flash Playerインストール後はPCを再起動いたしましょう。

パスの設定

今後、ActionScript3.0で書いたプログラムをパブリッシュするためにはbinフォルダ内ののmxmlcというファイルを使用します。
このファイルの使用を少しでも楽にするため、このbinフォルダまでのパスを張っておくことをお勧めいたします。
パスを張ることによってどのフォルダからでもmxmlcファイルに直接アクセス可能になるからです。

WindowsXPの場合は

• マイコンピュータにて右クリック→プロパティ→詳細設定→環境変数


• システム環境変数のPATHという項目にbinディレクリまでのパスを記入する。
  たとえばC直下にflex_sdkというフォルダを作ってその中が解凍したフォルダの中身であれば、
  C:\flex_sdk\bin

MacOSの場合は

• ログインしているユーザのHomeフォルダにある.bash_profileというファイルを開く(ない場合は新規作成しましょう)。こちらのファイルは不可視ファイルとなっているため、気をつけてください。


• .bash_profileにPATH=$PATH:binまでのパスを記入。
  Macintosh HDのDeveloperにflex_sdkというフォルダを作ってその中が解凍したフォルダの中身であれば、
  PATH=$PATH:/Developer/flex_sdk/bin

パスを張る作業は失敗するとPCそのものの不具合にも繋がりかねませんので、よく注意して行ってください。

テスト用ファイル

テスト用のファイルは用意されているみたいなのですが、せっかくですし自分で用意してみました。
テスト用プログラムの定番として画面に"Hello World"と表示されます。

package { import flash.display.Sprite; import flash.text.TextField; public class HelloWorld extends Sprite { public function HelloWorld() { var textF:TextField = new TextField(); textF.text = "Hello World!!"; addChild(textF); } } }

このファイルをHelloWorld.asというファイル名にて任意の場所に保存してください。
ファイルをダウンロードしたい方はこちら。

パブリッシュ

Windowsならコマンドプロンプト、MacOSならターミナルにて
mxmlc HelloWorld.as
と実行すればHelloWorld.swfというファイルが生成されるはずです。

HelloWorld.asはパスも含めて指定してください。WindowsでCドライブの直下ならC:\HelloWorld.asといった形に。
もちろん、格納フォルダまでcdコマンドで移動するのでも構いません。

このHelloWorld.swfをダブルクリックして実行すればflash playerが立ち上がり、そこにHello Worldと表示されているはずです。

以下、実行結果です。

シェルファイル・バッチファイル制作

今後、制作をするにあたり、毎回毎回コマンドを打ち込んでいると面倒なため、MacOSならシェルファイル、Windowsならバッチファイルを制作した方が良いです。
要はその中にコマンドを記述しておくことで、ファイルを実行するだけでswfがパブリッシュされるようにできます。

Windows用バッチファイルの例(ファイルの拡張子はbat、実行アプリケーションはコマンドプロンプト)
ファイルをダウンロードしたい方はこちら。

mxmlc -default-size 600 400 -default-frame-rate=12 -default-background-color=0xffffff -use-network=false HelloWorld.as pause

MacOS用シェルファイルの例(ファイルの拡張子はsh、実行アプリケーションはターミナル)
ファイルをダウンロードしたい方はこちら。

#!/bin/sh NOW_DIR=`dirname $0` cd ${NOW_DIR} mxmlc -default-size 600 400 -default-frame-rate=12 -default-background-color=0xffffff -use-network=false HelloWorld.as

パブリッシュ対象のasと同じフォルダに置けば、これらのファイルを実行するだけでswfが生成されます。

ちなみに、
-default-size 600 400 -default-frame-rate=12 -default-background-color=0xffffff -use-network=false
の部分はコマンドのオプションとなります。
本当はもっとたくさん種類があるのですが、とりあえずよく使いそうなものたちだけ指定しました。

• -default-siz：swfのサイズ横px×縦px


• -default-frame-rate：フレームレート(1秒あたりの呼び出し回数)


• -default-background-color：背景色


• -use-network：外部ファイルの読み込み可・不可(デフォルト値がfalseなので今回指定の必要はないのですが、今後trueにて使うことが多いため記述しておきました)

コンパイラオプションについてもっと詳しく知りたい方はAbout the application compiler options をご覧下さい(英語ページ)

シェルファイルやバッチファイルを用意しておけば、今後、asファイルのファイル名やパラメータを変更するだけで楽にパブリッシュができます。

環境設定はここまでです。
次回より実際に制作について学習します。

今回使用したファイルはまとめてサーバにアップしてあります。

次の記事"AS 3.0 基本学習1-1 画像ビューア制作-画像のロード"はこちらです。 ActionScript3.0基本学習シリーズの目次はこちらです。

外部ライブラリ学習シリーズの目次はこちらです。

ActionScript3.0基本学習の記事一覧です。
記事が追加される度、このページも更新いたします。

• No.1-2 画像ビューア制作-イベント 2010.2.13掲載


• No.1-1 画像ビューア制作-画像のロード 2010.1.6掲載


• No.0 環境構築-FLEX SDKインストール 2010.1.4掲載

ActionScript 3.0対応バージョンはこちら

先日スタートしました青春Bの新コンテンツオンラインギャラリー-SEISYUN-B online exhibition by creators-、考えてみると青春Bで初めてのフルflashコンテンツですね。
青春B以外では作ったことありますが。

まあ、別にフルflashと言っても作り方はそうではないflashとさほど違いはないわけです。
ステージサイズに合わせて位置調整を行うだけなので。
凝ったものを作ろうとすると話は別ですが、凝ったものを作るならフルflashじゃなくても難しいわけですし。

せっかくの機会なので、フルflashサイト(ActionScript2.0)の基本構造を掲載しておきます。
サンプル制作してみました。
どなたかの役に立ったなら嬉しいです。

仕様

・左上、中央上、右上、左、中央、右、左下、中央下、右下の9カ所にMovieClipを配置。

・中央のMovieClipのクリックによってフルスクリーン表示と通常のブラウザ内表示の切替。

・swffit v2.3.1を使用してブラウザが一定サイズ(今回は横300px×縦300px)以下になったときにはブラウザにてスクロールバー表示。

・表示にはSWFObject v2.1を使用。

ポイント・注意点

・Stage.scaleMode = "noScale"を設定することでswfが拡大縮小されないようにする。

・Stage.align = "LT"を設定することで座標を左上基準とする。

・onFullScreenとonResizeをStageのイベントとして設定し、フルスクリーンモードの切替とステージのサイズ変更を検出する。

・Stage.widthとStage.heightに合わせて配置するMovieClipの位置を調整する。

・cssにて親要素のheightを100%指定しないとブラウザのスペースをフル活用できません。詳しくはAdobeの「高さ 100% の Flash のバグ」を参照。

・フルスクリーン表示はflash player9以降の機能です。

・flashの表示にSWFObject v2.1を使う必要は必ずしもないですが、フルスクリーン表示のためにallowFullScreenのパラメータをtrueにすることは忘れずに。

・flash player9以降が対象ならActionScript3にすれば良いのにというツッコミはなしで。

サンプル

サンプルの表示はこちらです(同窓表示です)。

サンプルのダウンロードはこちらです(html,css,js,swf,flaファイル)。
flaはCS3形式で保存されています。

ActionScriptのコード

/*配置MovieClip(基準点はすべて中央) lt_mc：左上 mt_mc：中央上 rt_mc：右上 lm_mc：左 mm_mc：中央(全画面表示の切替に使用) rm_mc：右 lb_mc：左下 mb_mc：中央下 rb_mc：右下 */ //ステージサイズ変更に伴う拡大縮小無しと基準を左上固定の設定 Stage.scaleMode = "noScale"; Stage.align = "LT"; //MovieClipの位置調整用関数 function resizeFlash():Void{ //MovieClip毎の位置調整 //本来まとめられる部分もあるが、わかりやすさ優先で各mc毎に記述 //左上 lt_mc._x = lt_mc._width / 2 lt_mc._y = lt_mc._height / 2; //中央上 mt_mc._x = Stage.width / 2; mt_mc._y = mt_mc._height / 2; //右上 rt_mc._x = Stage.width - rt_mc._width / 2; rt_mc._y = rt_mc._height / 2; //左 lm_mc._x = lm_mc._width / 2 lm_mc._y = Stage.height / 2; //中央 mm_mc._x = Stage.width / 2; mm_mc._y = Stage.height / 2; //右 rm_mc._x = Stage.width - rm_mc._width / 2; rm_mc._y = Stage.height / 2; //左下 lb_mc._x = lb_mc._width / 2; lb_mc._y = Stage.height - lb_mc._height / 2; //中央下 mb_mc._x = Stage.width / 2; mb_mc._y = Stage.height - mb_mc._height / 2; //右下 rb_mc._x = Stage.width - rb_mc._width / 2; rb_mc._y = Stage.height - rb_mc._height / 2; } //中央のmcクリック時にフルスクリーンかブラウザ内表示(通常)か切替 mm_mc.onPress = function():Void{ if(Stage["displayState"] != "normal"){//現在フルスクリーン Stage["displayState"] = "normal"; } else{//現在ブラウザ内表示(通常) Stage["displayState"] = "fullScreen"; } } //イベント設定用Object stageListener = new Object(); //ステージへのイベント設定 Stage.addListener(stageListener); //スクリーンモード切替時に呼ばれる関数 //引数true：フルスクリーン　引数false：ブラウザ内表示(通常) stageListener.onFullScreen = function(boo:Boolean):Void{ //スクリーンモードによって固有の処理が有る場合はここに記述 } //スクリーンサイズ変更時に呼ばれる関数 stageListener.onResize = function():Void{ resizeFlash(); } resizeFlash();//位置調整のために最初に一度呼び出しておく

1年以上振りにflash素材のページに新素材を掲載しました。
youtubeから動画を引っ張ってきて表示する素材です。flaファイル付きです。
上に貼付けているやつがサンプルです。
タイトル部分をクリックすると一覧が表示されます。
動画はyoutubeから選んだものなので、もちろん青春Bとはまったく関係ありません。

元々青春B内のとあるコンテンツ用に作ったものなのですが、どのサイトでも汎用的に使える素材かなと思って公開することにしました。

flashを目的として青春Bに来られている方が多数いらっしゃることはずっと知っていましたので、もっとflash素材ページを充実させなきゃと思いながらも、ずっと放置したままでいました。
今後はもう少し定期的に更新を……と思ってはいます……。

なにかリクエスト等ありましたらぜひご連絡下さい!

今後ともよろしくお願いいたします。

※外部ライブラリ学習シリーズの目次はこちらです。
※使用しているPapervision3DのバージョンはPublic Beta 2.0 - Great Whiteです。

前回、前々回と文字列の円運動について書きましたが、今回はさらにその応用として、螺旋運動をさせてみます。
つまり、円運動に高さの概念を加えます。

螺旋のパラメータ設定

まず、変数にて螺旋運動の周回数と螺旋の高さを決めておきます。

後ほど出てくるActionScriptのコードでは主に以下の部分が該当します。

-----------38〜39行目-----------
private var spiral_int:int = 3;//螺旋における周回数
private var height_int:int = 600;//螺旋高さ

初期角度の決定

円運動というのは0度〜360度の角度を持ちます。
ただ、今回は角度を0度〜1080度(0〜360×周回数)として扱います。
たとえば、720度という角度は2回転時点、900度という角度は2周半時点を意味します。

初期角度の決定は後ほど出てくるActionScriptのコードでは主に以下の部分が該当します。

-----------62行目-----------
degrees_arr.push(i * 360 * spiral_int / text_str.length);//角度を均等に分割

描画処理

現在の角度が上限である1080度に対してどこまで増えているかを元に高さを計算します。
また、1080を達した際には0に戻す式を加えます。

後ほど出てくるActionScriptのコードでは主に以下の部分が該当します。

-----------78行目-----------
text_arr[i].y = -1 * (height_int * degrees_arr[i] / (360 * spiral_int)) + basicy_int;

-----------91行目-----------
degrees_arr[i] %= 360 * spiral_int;

結果

"SEISYUN-B CREATIVE LIFE RECOMMENDATION "

という文字列が螺旋運動します。マウス位置によって全体の角度が変更されます。

ソース

/* * 文字列を文字に切り離しての螺旋運動 * use papervision3d */ package { //必要なクラスのimport import flash.display.Sprite; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.materials.special.Letter3DMaterial; import org.papervision3d.typography.Text3D; import org.papervision3d.typography.fonts.HelveticaBold; import flash.events.Event; public class Sample12 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var display:DisplayObject3D; private var degrees_arr:Array = new Array();//角度格納用配列 private var text_arr:Array = new Array();//文字格納配列 private var text_str:String = "SEISYUN-B CREATIVE LIFE RECOMMENDATION "; private var letterformat:Letter3DMaterial; private var basicx_int:int = 0;//基準x座標 private var basicz_int:int = 0;//基準z座標 private var basicy_int:int = 300;//基準y座標 private var radius_int:int = 500;//半径 private var speed_int:int = 3;//毎回の移動角度 private var spiral_int:int = 3;//螺旋における周回数 private var height_int:int = 600;//螺旋高さ //コンストラクタ public function Sample12() { init();//初期化関数開始 } //初期化関数 public function init():void{ viewport = new Viewport3D(550 , 400); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); display = new DisplayObject3D(); //文字の設定　引数は色コード・透過度 letterformat = new Letter3DMaterial(0x0000ff , 0.8); //文字の分解とText3Dインスタンス生成 for(var i:int = 0 ; i < text_str.length ; i++){ text_arr.push(new Text3D(text_str.charAt(text_str.length - i -1) , new HelveticaBold() , letterformat)); degrees_arr.push(i * 360 * spiral_int / text_str.length);//角度を均等に分割 display.addChild(text_arr[i]); } scene.addChild(display); addEventListener(Event.ENTER_FRAME , onEnterFrame);//ENTER_FRAMEイベント定義 } //ENTER_FRAME時関数 public function onEnterFrame(event:Event):void { //各文字の座標及び角度計算と角度の増加 for(var i:int = 0 ; i < text_str.length ; i++){ text_arr[i].x = Math.sin(degrees_arr[i] * Math.PI/180) * radius_int + basicx_int; text_arr[i].z = Math.cos(degrees_arr[i] * Math.PI/180) * radius_int + basicz_int; text_arr[i].y = -1 * (height_int * degrees_arr[i] / (360 * spiral_int)) + basicy_int; //rotationYにおいての文字の反転が行えなかったため、scaleXを角度によって変更することで反転表示に対応 if(degrees_arr[i] % 360 > 90 && degrees_arr[i] % 360 < 270){ text_arr[i].rotationY = degrees_arr[i] + 180; text_arr[i].scaleX = 1; } else{ text_arr[i].rotationY = degrees_arr[i]; text_arr[i].scaleX = -1; } degrees_arr[i] += speed_int; degrees_arr[i] %= 360 * spiral_int; } //円形文字全体の角度変更 //マウスカーソルの位置に合わせて水平方向の角度を変更 //横に回すということはy座標中心に回すということ display.rotationY = ((mouseX / 550) * 180 - 90); //マウスカーソルの位置に合わせて垂直方向の角度を変更 //縦に回すということはx座標中心に回すということ display.rotationX = ((mouseY / 400) * 180 - 90); renderer.renderScene(scene, camera, viewport);//描画 } } }

ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。

Papervision3Dについての学習はとりあえずこれで一段落かなと思っています。
次はどうしようかな……。

文字列の円運動2(表示物のネスト)‐Papervision3Dのお勉強(10)‐へ。

※外部ライブラリ学習シリーズの目次はこちらです。
※使用しているPapervision3DのバージョンはPublic Beta 2.0 - Great Whiteです。

前回、文字列の円運動について勉強しましたが、今回はさらにその続きです。
今回は円運動している文字列全体をマウス位置に合わせて角度変更させてみます。

文字列のDisplayObject3Dへの格納

前回は文字列を一つ一つの文字へと分け、それぞれをScene3Dオブジェクト上に配置しました。

今回は "文字個別の角度変更" と同時に、文字列全体の角度変更も行いたいため "文字列全体としてのコントロール" も同時に行います。

文字一つ一つで "円運動するための角度" と "円運動そのものの角度" の両方を計算するのはかなり骨が折れそうなので……。

文字一つ一つをDisplayObject3Dのインスタンスに格納し、文字が格納されたDisplayObject3DのインスタンスをScene3Dのインスタンス上に格納するという手順を踏みました。

後ほど出てくるActionScriptのコードでは主に以下の部分が該当します。

-----------51行目-----------
display = new DisplayObject3D();

-----------56行目〜63行目-----------
//文字の分解とText3Dインスタンス生成
for(var i:int = 0 ; i < text_str.length ; i++){
text_arr.push(new Text3D(text_str.charAt(text_str.length - i -1) , new HelveticaBold() , letterformat));
degrees_arr.push(i * 360 / text_str.length);//角度を均等に分割
display.addChild(text_arr[i]);
}

scene.addChild(display);

文字列の角度変更

ENTER_FRAME時に呼び出される関数内にて、文字それぞれの角度変更と同時に、文字列全体の角度変更を行います。

後ほど出てくるActionScriptのコードでは主に以下の部分が該当します。

-----------90行目〜97行目-----------
//円形文字全体の角度変更
//マウスカーソルの位置に合わせて水平方向の角度を変更
//横に回すということはy座標中心に回すということ
display.rotationY = ((mouseX / 550) * 180 - 90);

//マウスカーソルの位置に合わせて垂直方向の角度を変更
//縦に回すということはx座標中心に回すということ
display.rotationX = ((mouseY / 400) * 180 - 90);

結果

"SEISYUN-B CREATIVE LIFE RECOMMENDATION "

という文字列が円運動していて、マウス位置によって円運動の角度が変更されます。

円の端の方がうまく表示されないのは、わたしのコーディングが原因でしょうか？　理由をご存知の方がいましたらぜひご教授いただきたいです。

ソース

/* * 文字列を文字に切り離しての円運動(円の角度変更あり) * use papervision3d */ package { //必要なクラスのimport import flash.display.Sprite; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.materials.special.Letter3DMaterial; import org.papervision3d.typography.Text3D; import org.papervision3d.typography.fonts.HelveticaBold; import flash.events.Event; public class Sample11 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var display:DisplayObject3D; private var degrees_arr:Array = new Array();//角度格納用配列 private var text_arr:Array = new Array();//文字格納配列 private var text_str:String = "SEISYUN-B CREATIVE LIFE RECOMMENDATION "; private var letterformat:Letter3DMaterial; private var basicx_int:int = 0;//基準x座標 private var basicz_int:int = 0;//基準z座標 private var radius_int:int = 500;//半径 private var speed_int:int = 3;//毎回の移動角度 //コンストラクタ public function Sample11() { init();//初期化関数開始 } //初期化関数 public function init():void{ viewport = new Viewport3D(550 , 400); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); display = new DisplayObject3D(); //文字の設定　引数は色コード・透過度 letterformat = new Letter3DMaterial(0x0000ff , 0.8); //文字の分解とText3Dインスタンス生成 for(var i:int = 0 ; i < text_str.length ; i++){ text_arr.push(new Text3D(text_str.charAt(text_str.length - i -1) , new HelveticaBold() , letterformat)); degrees_arr.push(i * 360 / text_str.length);//角度を均等に分割 display.addChild(text_arr[i]); } scene.addChild(display); addEventListener(Event.ENTER_FRAME , onEnterFrame);//ENTER_FRAMEイベント定義 } //ENTER_FRAME時関数 public function onEnterFrame(event:Event):void { //各文字の座標及び角度計算と角度の増加 for(var i:int = 0 ; i < text_str.length ; i++){ text_arr[i].x = Math.sin(degrees_arr[i] * Math.PI/180) * radius_int + basicx_int; text_arr[i].z = Math.cos(degrees_arr[i] * Math.PI/180) * radius_int + basicz_int; //rotationYにおいての文字の反転が行えなかったため、scaleXを角度によって変更することで反転表示に対応 if(degrees_arr[i] > 90 && degrees_arr[i] < 270){ text_arr[i].rotationY = degrees_arr[i] + 180; text_arr[i].scaleX = 1; } else{ text_arr[i].rotationY = degrees_arr[i]; text_arr[i].scaleX = -1; } degrees_arr[i] += speed_int; degrees_arr[i] %= 360; } //円形文字全体の角度変更 //マウスカーソルの位置に合わせて水平方向の角度を変更 //横に回すということはy座標中心に回すということ display.rotationY = ((mouseX / 550) * 180 - 90); //マウスカーソルの位置に合わせて垂直方向の角度を変更 //縦に回すということはx座標中心に回すということ display.rotationX = ((mouseY / 400) * 180 - 90); renderer.renderScene(scene, camera, viewport);//描画 } } }

ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。

次回はさらにもうちょっとだけ円運動について勉強する予定です。

文字列の円運動3(螺旋の表現)‐Papervision3Dのお勉強(11)‐へ
文字列の円運動‐Papervision3Dのお勉強(9)‐へ。