AS3.0とAS2.0で同じような動きをさせる実験

AS3.0とAS2.0で同じような動きをさせる実験 [Edit]

投稿者：田中正吾 | 投稿日：2006.07.04 | [AS 3][ActionScript][サンプル]

AS3.0では、AS2/1とでは色々と変わった点があるようです。
今回は「四角を横移動させる動き」を題材にして、AS2.0とAS3.0で同じように書いてみようと思います。
最後にサンプルflaも置きますので、ちょっと長いですが、まずは文章で制作の流れを追ってみてください。

[スクリプト概要]

パブリッシュしたその瞬間から四角の移動が始まるムービーを作る。

AS2.0では、横移動クラス(cMoveSquareAS2)と結び付いた四角のムービークリップをattachMovieで使い配置するスクリプトで行きます。

さてAS3.0ではどうなるのでしょうか・・・。

　2006/7/4 初稿。
　2006/7/5 加筆修正。それに伴って、サンプルzip修正
　2206/7/7 addChildについてリンク

----

[AS2.0での書き方]

まず、Flash8アプリケーションでAS2を書いてみます。

0.ファイルを作る
cMoveSquareAS2.flaを新規で制作します。

1.四角のムービークリップを作る
四角を書いてムービークリップ化。
ムービークリップの名前は何でも大丈夫です。
サンプルではPartとしました。
とりあえず、あとでattachMovieするのでステージ上から消します。

2.横移動クラスを作る
cMoveSquareAS2.asとして外部asファイルを作成します。

　class cMoveSquareAS2 extends MovieClip
　{
　　public function cMoveSquareAS2()
　　{
　　　// はじめに中央に寄せる位置移動
　　　_x = 277;
　　　_y = 184;
　　}
　　
　　function onEnterFrame():Void
　　{
　　　// 横移動処理
　　　this._x += 1;
　　}
　}

3.ライブラリとリンケージとクラスの結び付けを行う
さて、ライブラリに
さきほどの四角のムービークリップがあるかと思いますが

　リンケージ名「Square」
　クラス名「cMoveSquareAS2」

にして、OKボタンを押す。

すると、四角のムービークリップとcMoveSquareAS2クラスが結び付けられます。

4.フレームに四角を配置するスクリプトを書く（この場合、attachMovie）
最後に1フレーム目でattachMovieの記述をして配置。

_root.attachMovie( "Square" , "s1" , 1000 );

5.パブリッシュしてみる
パブリッシュしてみると四角が横に動きます。

----

[AS3.0での書き方]

こちらは、Flash9 Public Alpha アプリケーションでAS3.0書いてみます。

0.ファイルを作る
cMoveSquareAS3.flaを新規で制作します。

1.四角のムービークリップを作る
四角を書いてムービークリップ化。
ムービークリップの名前は何でも大丈夫です。
サンプルではPartとしました。
とりあえず、あとでattachMovieに該当するAS3.0の処理をするので
やっぱりステージ上から消します。

2.横移動パッケージを作る
cMoveSquareAS3.asとして外部asファイルを作成します。

　package {
　　
　　// 表示クラスの読込
　　import flash.display.MovieClip;
　　// イベントクラスの読込
　　import flash.events.Event;
　　
　　public class cMoveSquareAS3 extends MovieClip
　　{
　　　// Squareの元ネタを宣言しておく
　　　var s1:Square;
　　　
　　　function cMoveSquareAS3()
　　　{
　　　　// DisplayObjectとしてライブラリからSquare呼び出し。
　　　　s1 = new Square();
　　　　// EnterFrameイベントの仕込み = 下記のonEnterと関連する。
　　　　stage.addEventListener(Event.ENTER_FRAME, onEnter);
　　　　// AS2でのattachMovieに相当するaddChild
　　　　addChild(s1);
　　　　// はじめに中央に寄せる位置移動
　　　　s1.x = 277;
　　　　s1.y = 184;
　　　}
　　　
　　　// EnterFrameイベント
　　　function onEnter(event:Event)
　　　{
　　　　// 横移動処理
　　　　s1.x += 1;
　　　}
　　　
　　}
　}

3.四角自体のクラスをつくる。
Square.asとして外部asファイルを作成します。
今回は前述2.で横移動を行っているのでここでは
基本的なクラスのみです。

package {
　
　// 表示クラスの読込
　import flash.display.MovieClip;
　
　public class Square extends MovieClip
　{
　　function Square()
　　{
　　　
　　}
　}
　
}

4.ライブラリでクラスの結び付けを行う
ライブラリに
さきほどの四角のムービークリップがあるかと思いますが

　クラス名「Square」

にして、四角のムービークリップとSquareクラスと結び付けます。

5.ドキュメントとパッケージの結び付けを行う
ファイル＞パブリッシュ＞Flash設定＞ActionScriptのバージョン＞設定ボタンで
Document class の欄を、「cMoveSquareAS3」にしてOKを押します。

すると、このflashドキュメント自体がcMoveSquareAS3クラスと結び付けられます。

6.パブリッシュしてみる
パブリッシュしてみると四角が横に動きます。

----

というわけで、いかがでしたでしょうか。

ソースを見てみるとガラリと変わった部分もあれば
横移動の動かし方だけを見てみるとそう変わらないように見えるところもありますね。

また、私が今回のソースを書いてみて変わったなと思うのは

　・classの上にpackageという概念がでてきた。
　・リンケージとかattachMovieはなくなって、addChildというものが登場。
　　addChildについて：Macromedia Flash非公式テクニカルノート : 「DisplayObjectContainer.addChild()メソッド」
　・ライブラリから呼び出すときもリンケージじゃなくて、クラスで呼ぶようになった。
　・ムービークリップのプロパティから　_　が無くなった。（例 : _x　→　x）

の４点です。これはとても気になりました。

今回のご説明したサンプルソースも以下に置きます。

　＞＞四角横移動AS2/AS3ソースをダウンロード！

　▲免責事項▼
　このサンプルを使用した場合のいかなる損害も、
　制作者田中正吾及び F-site は、その責を負いません。
　ご自身の責任においてご使用ください。

あとは、みなさんそれぞれ気になる点を文献を見つつ、
情報を補完していただければと思います。

私も、本f-siteの野中さんの記事「Flash Professional 9 ActionScript 3.0 Preview」を、参考にさせていただきました。

文末となりますが、
ここまでこの記事を見ていただいた方、ありがとうございました。

追伸
AS3.0は、表示レベルから仕様が大幅に変わったので、私は驚きと戸惑いばかりです。
今回の実験でも、完成に至るまで、スクリプトエラーを連発し、机上で悶絶していることもしばしば。。
でも、やっぱり表示されると面白いです。

F-site