<< Flash ActionScript2.0 実践講座1:Flashアニメーション制作の復習 | top | Flash ActionScript2.0 実践講座3:Flash OOP詳細 >>
Flash ActionScript2.0 実践講座2:ActionScript2.0導入
本日の予定
先週の内容を復習した後、オブジェクト指向プログラミングとは何かということについて、もう一度復習します。オブジェクト指向についての理解を深めた上でその確認として、ActionScript2.0を用いたオブジェクト指向プログラミングの基礎を学んでいきます。
本日のスライド
サンプルファイル
目次
- Flash応用講座 (2)
- オブジェクト指向ActionScript?入門
- インタフェイスと実装
- クラス(class)とは
- クラスとインスタンス
- クラスの継承
- ActionScript 2.0でのクラスの構造
- 例1:ImageViewerクラスの実装
- 例2:MovieClipクラスの拡張
- 例3:沢山のボールクラスを複製
- 今週の課題
Flash応用講座 (2)
参考図書
今後の講義で参考となりそうな図書を以下に紹介します。より詳しくActionScriptによるオブジェクト指向プログラミングを学びたい人や、アルゴリズムによる形態の生成などに興味を持つ人は買ってみてください。- Colin Moock著, Essential Actionscript 2.0, Oreilly & Associates Inc. 2004
- David Hirmes, Jd Hooge, Ken Jokol, Pavel Kaluzhny 他共著. Flash Math Creativity. Friends of ed, 2005
- 大重 美幸, FLASH ActionScript 2.0入門完全ガイド+実践サンプル集, ソーテック社, 2005
参考サイト
この講義でとりあげるFlashの実例として参考になりそうなサイトをいくつかピックアップしてみました。こちらも参考にしてみてください。- Levitated | the Exploration of Computation
- PRESSTUBE
- yugop.com
- FWA
- Gallery Incomplet- Flash Experiments by Grant S
前回の授業の復習
- アニメーションの基本
- シンボル
- グラフィック
- ボタン
- ムービークリップ
- キーフレーム
- トゥイーン
- イージング
- ネストされたムービークリップ
- ムービークリップの中にムービクリップが階層的に存在する
- ターゲットパス
- ムービークリップの場所を示す
- 絶対パス
- _root.(インスタンス名).(インスタンス名)....
- 相対パス
- this:自分自身
- _parent:一つ上の階層
- 3種類のアクション
- フレームアクション
- タイムライン上での時間の流れをコントロールする
- 代表的な命令
- gotoAndPlay(フレーム番号);
- 指定したフレームまで移動して、再生を続ける
- gotoAndStop(フレーム番号);
- 指定したフレームまで移動して、停止
- stop();
- 現在のフレームで、停止
- ボタンアクション
- ボタンとマウスポインタ(もしくはキー入力)の関連性(イベント)によって、命令がトリガーされる。つまり、ボタンによるインタラクションを実現することができる。
- on(イベント){ 処理内容 }
- イベント
- Press:ボタンにフォーカスがある場合にユーザーがデバイスの選択キーを押したとき
- Release:ボタンにフォーカスがある場合にユーザーがデバイスの選択キーを離したとき
- rollOver:ボタンがフォーカスを受け取ったとき
- rollOut:ボタンがフォーカスを失ったとき
- ムービークリップアクション
- ムービクリップシンボルの内部に書き込まれる命令。ムービクリップの状態に応じて、命令を実行することが可能。ムービクリップの「ふるまい」や「状態」を定義することが可能となる。
- onClipEvent(イベント)
- イベント
- load - ムービークリップがインスタンス化され、タイムラインに表示されると、アクションが即座に開始
- unload - ムービークリップがタイムラインから削除された後、最初のフレームでアクションが開始
- enterFrame - アクションはムービークリップのフレームレートで継続的にトリガ
- mouseMove - マウスを動かすたびに、アクションが開始
- mouseDown - 左マウスボタンを押すと、アクションが開始
- mouseUp - 左マウスボタンを離すと、アクションが開始
- keyDown - キーを押すと、アクションが開始 keyUp - キーを離すと、アクションが開始 data - loadVariables() アクションまたは loadMovie() アクションによってデータを取得すると、アクションが開始
- アクションスクリプトの分類
オブジェクト指向ActionScript入門
インタフェイスと実装
- 時計について考えてみる
- 日常的に時計を利用している
- 時計の内部の構造全てを理解しているか?
- 無数の事象の全てを理解することはできない
- プログラミングに関しても同じ
- 抽象化
- 実装の詳細はグループ化して隠蔽する(カプセル化)
- 共通のインタフェイスを提供
- インタフェイスさえわかればオブジェクトの機能を利用することができる
- 時計の場合:
- インタフェイス:時刻を合わせる、時刻を表示する
- 実装:時刻を表示するための内部機構
クラス(class)とは
- プログラムの際に必要となる「命令」を利用しやすいようにまとめて整理したもの
- オブジェクトの「設計図」のようなもの
- オブジェクト:プロパティ(data)とメソッドから構成されるオブジェクト指向プログラミングの構成単位
クラスとインスタンス
- クラス:オブジェクトの設計図 → 型紙
- インスタンス:クラスから作られたオブジェクト → 実体
- オブジェクトの仕様を決めた「クラス定義」を用意し、それにもとづいて「インスタンス」を生成する
- 例:車の場合
クラスの継承
- もとのクラスを拡張して、サブクラスを生成する
- 共通の機能は再利用が可能となる
ActionScript 2.0でのクラスの構造
- クラス定義ファイルの構造(外部ファイル)
class クラス名 {
//プロパティ
//コンストラクタ関数(※オブジェクト初期化の際に実行される関数)
function クラス名(){
}
//メソッド
function メソッド名(){
}
//関数
function 関数名(){
return(戻り値);
}
}
例1:ImageViewerクラスの実装
- 簡単なクラスを作成してみる
- ImageViewerクラス
- ビットマップファイルを読み込んで、ステージ上に配置する
- プロパティ
- なし
- メソッド
- loadImage(URL):URLの場所にあるイメージファイルをロードして表示する
- ImageViewerクラスのイメージ
- ファイル名”lmageViewer.as”
class ImageViewer {
//コンストラクタ関数
function ImageViewer(ターゲット){
//オブジェクトの初期化
}
//イメージを読み込んで表示
function loadImage(URL:Strings){
//イメージを読み込みと表示に関する命令
}
}
- クラス定義”ImageViewer.as”と、.flaファイルとの関連
- クラスの初期化
- ImageViewer.flaのフレームアクションとして記述
- ImageViewer.flaの1フレーム目に記入
//オブジェクトの初期化
var viewer:ImageViewer = new ImageViewer(this);
//イメージの読み込み
viewer.loadImage("photo.jpg");
- クラスの定義
- クラスファイル”ImageViewer.as”
class ImageViewer {
private var container_mc:MovieClip;//写真を配置するムービークリップ
//コンストラクタ関数
public function ImageViewer(target:MovieClip) {
//空ムービークリップ"container_mc"を生成
container_mc
= target.createEmptyMovieClip("container_mc", target.getNextHighestDepth());
}
public function loadImage(URL:String):Void {
//"container_mc"にURLにあるイメージファイルをロード
container_mc.loadMovie(URL);
}
}
- 完成!
例2:MovieClipクラスの拡張
- ムービークリップシンボルもMovieClipというクラスで定義される
- MovieClipクラスを拡張してサブクラスを生成し、独自のプロパティとメソッドを持ったムービークリップシンボルを作成してみる
- 作成の手順
- ムービークリップの作成
- リンケージの設定で、「AS2.0クラス」に関連づける
- 例:ムービークリップのサブクラスを使って、画面の境界でバウンドするボールのアニメーションを作ってみる
- ステージ上にボールの形を描き、右クリックしてシンボル化を選択
- 「詳細」ボタンを押して、詳しい設定画面に
- 名前「Ball」、識別子「Ball」、AS2.0クラス「Ball」にそれぞれ設定する
- 新規にActionScriptファイルを開いて「Ball.as」で保存
- 下記のスクリプトを記入する
class Ball extends MovieClip {
var xspeed:Number, yspeed:Number;
function Ball() {
xspeed = Math.random()*20-10;
yspeed = Math.random()*20-10;
}
function onEnterFrame():Void {
_x += xspeed;
_y += yspeed;
if (_x>Stage.width || _x<0) {
xspeed *= -1;
}
if (_y>Stage.height || _y<0) {
yspeed *= -1;
}
}
}
- 完成!
例3:沢山のボールクラスを複製
- ステージ上のボールを削除
- flaファイルの1フレーム目に以下のフレームアクションを挿入
//オブジェクトの初期化 var balls:CopyBalls = new CopyBalls(this, 100);
- 新規ActionScriptファイルを作成し、以下のスクリプトを「CopyBalls.as」の名称で保存
class CopyBalls {
var target_mc:MovieClip;
var num:Number;
function CopyBalls(mc:MovieClip, n:Number) {
target_mc = mc;
num = n;
makeBalls();
}
function makeBalls():Void {
for (var i:Number = 0; i<num; i++) {
var ball_mc:MovieClip
= target_mc.attachMovie("Ball", "ball_mc"+i, mc.getNextHighestDepth());
ball_mc._x = Math.random()*Stage.width;
ball_mc._y = Math.random()*Stage.height;
}
}
}
- 完成!
今週の課題
- Flashを用いたサイトで、独自の表現をしていて面白いと思うサイトのURLを挙げ、そのサイトのどういった部分が面白いのかを述べよ
- MLに投稿してください
- 複数でも構いません
- 来週の講義まで!
<< Flash ActionScript2.0 実践講座1:Flashアニメーション制作の復習 | top | Flash ActionScript2.0 実践講座3:Flash OOP詳細 >>


Comments
コメントはありません
Add Comment
トップページに戻る