Flash tips「ボールで遊ぼう」 その1

教授:今日からは突如、Flashを勉強するぞ!

生徒:DTPにFlashは関係ないんじゃないですか?Webでよく動いたりするものを制作するソフトですよね。

教授:いままではそうじゃった!が、これからのデザイナーたるものWebもデザインできたらもっと楽しいじゃろ、創ることが楽しめないとデザイナーのデの字にもなれんぞ!創るならよりインタラクティブなWebを創れるようにFlashを今日から学ぶのじゃ、それもActionScriptをメインに。

生徒:ActionScriptって!?

教授:Flashをより面白く、自由自在に操るおまじないと覚えればいい。C++ や Javaなどと同じプログラム言語であることには違わないが、無理に難しく考える必要はない。ただ、いじっていて楽しめればいいのじゃ、。はははは

生徒:はははって、教授本当にわかってんの・・・・そのActionなんとかって?

教授:ただ、いじっていて楽しめればいいのじゃ、それが人生じゃ!はははは〜
生徒:はははって・・・・。
教授: とにかく、アクション(行動)するのみじゃ〜!人生アクション論じゃ〜!
生徒:ん〜、めちゃ、ポジティブ!!すてき!

まずはシーンにグレーのballを一つ描いて挿入からシンボルに変換をクリック。ファンクションのF8でもいっしょじゃ。タイプはムービークリップにチェック。

するとballが水色の枠にかこまれて一つの完成されたイラストになったじゃろ、これをインスタンスというのじゃ。

こんどはこのballというインスタンスにアクション(スクリプト)をくっつけてみるぞ!
そりゃ!

教授:これからこのballに命を吹き込むぞ。このballを右に移動させよう。まずのそ吹き込み方じゃ。「いつ」、「なにを」、「どのように動かすか?」これを吹き込むのじゃ。
まずは、「いつ」。onClipEventを使って文法の構造を考えてみよう。
onClipEvent(イベント){
どのように動かすか?の処理

これが文法の構造じゃ、最初はとりあえずこう創ると理由は考えず覚えることじゃな。

生徒:このイベントにはなにを入れるんですか?っていうかなにが入るんですか?
教授:おっと、そうじゃった。まずはイベントを入れないことにはballは動いてくれないからな。このイベントに入るものはもう限られているのじゃ。それは9つしかない。

load

unload

enterFrame

mouseDown

mouseUp

mouseMove

keyDown

keyUp

date

教授:イベントとはいつ発生するかが問題じゃ! それが選択の鍵となる。

1)loadはインスタンスがロードされるときのイベント
2)unloadはインスタンスがアンロードされたときのイベント
3)enterFrameはフレームが再生されるたびに行われるイベントじゃ。
他のmouseDownやkeyDownはマウスが押された場合や、キーボードが打たれて行われた場合のイベントじゃな・・・。

ballは右に動いていくという動きをしたいとすると、それは連続の作業じゃろ、その場合はenterFrameを使うと頭っから覚えてしまえ。つまりイベントの欄にはenterFrameといれてよしじゃな。

onClipEvent(enterFrame){
どのように動かすか?の処理

どうじゃ、ここまではいいかな?
生徒:ええ、ここまではボクにもわかります。

教授:よしよし、では次にはどのように動かすか?の処理に入れる呪文じゃな。
このballを右に動かしたい場合は座標に動く数値を入れてあげればいいのじゃ。
左右の座標は_xじゃ、上下の座標は_y。右に動くと1から2の位置に動きそして3・4・・・と、どんどん増えていくことになる。これを変数というのじゃ。どんどん変化する数と覚えるといいかな。

this._x = this._x+1

これが答えじゃ。これを解説するぞ。
「this._x
」というのは「ボールの右の位置は?」というようなことじゃ。「this」 はボールのことで、間に「 .」(ドット)を入れて、「_x」(左右の座標は?)ということじゃ。
=」は数学のイコールとは違って代入という。代わりにこっちを・・という意味じゃ
this._x+1「ボールの右の位置は?に1を足していきますね」
ということとなる。
そして、この「どうのように動かすのか?の処理」というのは最後に必ず「」(セミコロン)をにつけるという決まりがあるので覚えておいてくれ。いや、信じてくれ。

onClipEvent(enterFrame){
this._x=this._x+1;
//どのように動かすか?の処理

これで右に動く呪文は終わりじゃ。
これはどのような意味か忘れないためにもちゃんと解説を付けて置くこともわすれるでないぞ。「//」をつけると解説を付けることができるのじゃ。プログラムを最初から2つ用意していつでも切り替えられるようにするときにも頻繁に「//」は使用するから便利じゃよ。


今まで説明してものをアクションを書く欄に書き込むとこのような状態になる。
文字の打ち間違えがないか確認した後はキーボードのコマンド+リターンを押してFlashを実際に動かしてみよう。1ピクセルずつ右にballが移動していれば成功じゃ!!


教授:つぎはこのballがマウスにちょっと遅れてくっついてくるというActionScriptじゃ
マウスは横にも縦にも移動するじゃろ、そこで_xmouse(横に動くマウス)と
_ymouse(縦に動くマウス)という呪文を使うことにしよう。

書き出しは先ほどと同じように

onClipEvent(イベント){
どのように動かすか?の処理

この構成のみでOKじゃ・・・・よ。(ふふふ)
生徒:その笑いはなんですか〜

教授:まずはイベント。マウスは移動するballはそれを追いかけるつまり連続の作業じゃろ、その場合はなんじゃったかな?
生徒:はい、enterFrameです。
教授:うむうむ、そうじゃったな。
onClipEvent(enterFrame){
どのように動かすか?の処理

次は「どのように動かすか?の処理」を考える・・・。どうじゃ?
生徒:そうですねこれもballの座標の問題だからthis._xとthis._yを使うのでは・・?
教授:グレイトじゃ!横の動きはthis._x、そして縦も動くからthis._yじゃ!
ここでマウスの動きの _xmouse(横に動くマウス)と_ymouse(縦に動くマウス)を代入すると考えればいいのじゃ。つまり・・・
onClipEvent(enterFrame){
this._x=_Xmouse;
this._y=_ymouse;

と書いてしまいそうじゃが、それでは動かんのじゃ・・・。「=」を「+=」という代入演算子とう物に替えなければならない。
「=」というのは右辺の内容を左辺に代入だった
「+=」は左右辺を加算したものを代入ということなのじゃ

算術演算子
+
は足す、+は引く、*は掛ける、/は割る、は割った余りと考えると

代入演算子はこうなる
右辺の内容を左辺に代入
+=
左右辺を足して代入
ー=
左右辺を引いて代入
*=
左右辺を掛けて代入
/=
左右辺を割って代入
%=
左右辺を割った余りを代入

ならばマウスを追う場合はではなく+=を使用するのじゃな。
そしてマウスにちょっと遅れるからマウスの動きを6で割ってみるとしよう。
それには _Xmouse/6_ymouse/6と言う感じで書き換えてみる。

onClipEvent(enterFrame){
this._x+=_Xmouse/6;
this._y+=_ymouse/6;

そして最後にupdateAfterEvent() を使用してみる。これはなにか?ということはFlashについてくるActionScript 辞書で調べてみる・・・。
生徒:え〜、そんなの知らないよ〜
教授:知らなくて結構じゃ、これから学ぶことなのだからな。

説明
アクション; onClipEvent ハンドラ内で呼び出すか、setInterval に渡す関数またはメソッドの一部として呼び出すと、表示を更新します。ムービーに設定されたフレーム/秒とは関係なしに表示が更新されます。updateAfterEvent への呼び出しを onClipEvent ハンドラ内または setInterval に渡す関数またはメソッドの一部として行わなかった場合、呼び出しは無視されます。

つまり、フレームや秒とは関係なしに表示をつぎつぎと更新してくれるおまじないということがわかる。しかし、これを使わなくての何ら問題はない。つけなくても同じように動くのじゃ。しかし、今回はつけておこう・・・、いや学んでおこうではないか!

それで、完成したActionScriptがこれじゃ!
onClipEvent(enterFrame){
this._x+=_Xmouse/6;
//数字で動くスピードを操作

this._y+=_ymouse/6;
//数字で動くスピードを操作

updateAfterEvent();
//あってもなくてもいいのじゃ

生徒:う〜ん、本当にマウスにballがちょっと遅れながらくっついてきますね。
教授: そうじゃろ、もっとballを遅らせたかったら代入演算子の数字を大きくしてやったらいいのじゃ。ballを沢山創ってそれぞれの代入演算子の数字を替えたりするとまた面白いぞ。
生徒:なんとなくActionScriptの楽しさがわかってきました。
教授: そうか、そうか、もっともっと奥の深い世界じゃから、最初はその喜びを持続させて
自分でどんどんスクリプトをいじってみる事じゃな。面白い発見や、誰も考えなかったことがアイディアでうかぶかもしれんのじゃ!
今回やったFlashの元はここに置いてあるので自分でスクリプトを見てうまく動かなかったら、みてみることじゃな。
生徒:photoshop も面白いけれどFlashも面白い!
教授: そうじゃろ!ActionScrptはまず文章の構図を考えて、その後に必要なイベントを考える、次に必要な演算子などを組み立てていくのじゃ。そのスクリプトの構成があっていればほぼ90%できたも同然じゃ、あとは沢山書きまくって、どれだけ綺麗なスクリプトが書けるか?じゃな。とにかく書くことじゃ、enterFrameというつづりもソフトが勝手に表示してくれても、自分の意志で自分でタイプするのじゃ〜

はははは

生徒:・・・・、罠にはまっちゃったみたい・・・、でも、ハマりそう・・・・。

 

MacOSXでDTPを!