速習Webデザイン ActionScript3.0を読む　その2

Book FLASH AS3

速習Webデザイン ActionScript 3.0

速習Webデザイン ActionScript 3.0

書いてたのがなぜか消えちゃったんでもう一回思い出しながら書きます。。。。(´Д⊂

part2 表示オブジェクトのコントロール:基本 のつづき

  • 04-01
    • 表示リストの最上位がStageオブジェクト。
    • オーサリング時に操作できる最上位はメインタイムライン。
    • p080にあるコメントを使ったコードヒントって覚えておくと便利そう。

part3 変数と定数

  • 01-01
    • 変数は「variable」、定数は「constant」なのでそれぞれ宣言する時は以下の書式。

var 変数 : データ型 ;


const 定数 : データ型 = 値 ;

  • 02-01　グローバル変数
    • functionステートメントの外側で定義された変数。
    • 記述されたタイムラインのMCが存在している限り変数の値も保持。
    • メインタイムラインに定義された場合、そのSWFファイルが閉じられるまで存在する。
    • AS1.0/2.0ではタイムライン変数と呼ばれていた。
  • 02-02　ローカル変数
    • functionステートメントの実行とともに生成され処理終了時に破棄される。
    • 同じ名前のグローバル変数とローカル変数は別々に管理されるが、混乱を招くため別の名前を付けるべき。
  • Let's TRY!!
    • p093の章末問題にチャレンジ。
    • 課題はステージ上の回転するMCをクリックするごとに回転方向をかえろ、というもの。
    • ヒントに従ったら簡単にできた。作ったスクリプトは以下。

var rot:int = 3;

_mc.addEventListener(MouseEvent.CLICK,xReverse);
　　function xReverse(evt){
　　　　rot *= -1;
　　}

_mc.addEventListener(Event.ENTER_FRAME, xEnterFrame);
　　function xEnterFrame(evt) {
　　　　_mc.rotation += rot;
　　}

　if(条件式){
　　処理
　}


または


　if(条件式){
　　処理A
　}else{
　　処理B
　}

    • 条件式は「true」か「false」のどちらかを返すことになる。

速習Webデザイン ActionScript3.0を読む　その1

Book FLASH AS3

速習Webデザイン ActionScript 3.0

速習Webデザイン ActionScript 3.0

いろいろ迷って一番即戦力になりそうなこの本購入。
読書メモつけていきます。

part1　イベント処理

  • 01-03　
    • イベント名は"click"と文字列で指定しても良いが、定数で指定するとスクリプトコードの色が変わりミスしにくい。
    • ここで関数の中にある「evt」という変数について触れられてないので以下のスクリプトを書き足して出力を確認。evtにはクリック情報が格納されてた！

_btn.addEventListener(MouseEvent.CLICK,xClick)

function xClick(evt){
　　　trace("クリック！");
　　　trace(evt);
}

      • 出力

クリック！
[MouseEvent type="click" bubbles=true cancelable=false eventPhase=2 localX=21.35 localY=6 stageX=192 stageY=49 relatedObject=null ctrlKey=false altKey=false shiftKey=false buttonDown=false delta=0]

  • 01-04　
    • 「addEventListenner()」で設定したイベント処理は「removeEventListener()」で削除できる。
  • 02-02　
    • デフォルトでは「doubleClick」イベントは無効になっているので、設定する場合はdoubleClickEnabledプロパティをtrueにする*1。
  • 02-03　
    • mouseOverとrollOverイベントの違い。(mouseOverは一つ一つのオブジェクトに反応)
  • 03-01　
    • キーが押されたことをフォーカスに関係なく無条件に取得するために「Stageオブジェクト」にイベントハンドラを設定。
    • キー操作のプレビューをする時はプレビューウィンドウの「キーボードショートカットの無効」にチェックを入れておく。
  • 03-02
    • さっき調べたことが書いてあった。「evt」には自動的にそのイベントに関する情報を持ったオブジェクトが格納される。
    • 「変数.プロパティ」の書式でそのプロパティにアクセスできる。
  • 04-01
    • 「enterFrame」もシステムイベントの一つ。
    • 「enterFrame」イベントは、イベント処理を設定したオブジェクトがステージからなくなってもイベントハンドラが実行され続ける。

part2 表示オブジェクトのコントロール:基本

  • 01-02
    • 表示オブジェクトコンテナのツリー構造の起点になる最上位の表示オブジェクトコンテナがStageオブジェクト。*2
  • 02-03
  • 02-04
    • テキストフィールドのプロパティをスクリプトで記述することにより枠線や色など指定できる。
  • 03-01
    • 接触判定用メソッドのひとつが「DisplayObject.hitTestObject(ターゲットオブジェクト)」。
  • 03-02
  • 03-03
    • ページ移動用のボタンに、現在のページ用のボタンのイベントハンドラを削除させている。(p.074)自分自身を削除しているのが変な感じ。

*1:「btn.doubleClickEnabled=true;」など

*2:AS3ではメインタイムラインもStageオブジェクトの子と考える。

ActionScript3.0入門ノートななめよみ　その1

FLASH AS3

ActionScript3.0入門ノート←教材はこれ！

  • 本屋さんで買うかどうかさんざん悩んで結局買わなかった本のWEB版をななめよみしてます。
  • 本の方でどれだけ加筆されて分かりやすくなってるか比べてみたい。
  • 現在2章途中まで読んで見たけど、説明はそれほど詳しくないみたい。AS2マスターしてること前提なのかな。
  • とりあえず気になったことメモ。
    • 関数は戻り値返すが、メソッドは返さない。
    • int型は正負の整数、unit型は正の整数。
    • データ型は次の2種類に分類される。
プリミティブ型
実際の値を持つ→Boolean、int、Null、Number、String、uint、void
オブジェクト型(コンポジット型)
値への参照を持つ→Object、Array、Date、Error、Function、RegExp、XML、XMLList
    • あくまで値への参照なんで実体はひとつ。

ArrayやDateなどのオブジェクト型のデータの場合には、変数の値を移動しても参照を渡すだけで実体は１個である点に注意が必要です。たとえば、次のようにArrayクラスのインスタンスを変数aに作り、変数aの値を変数bに代入します。このとき、変数aと変数bは同じインスタンスを参照しているだけなので、どちらか一方の変数の値を更新するともう片方も値が変わります

http://oshige.com/flash/as3note/2007/05/24.html
    • データ型をチェックする演算子。初めて知った。1章のスクリプトにしれっと「as」があって意味分からんかったし。
is
データ型が一致したときtrue、それ以外はfalseを返す。
as
データ型が一致したときその値を返し、一致しないときはnullを返す。
typeof
as演算子は評価した値を評価したデータ型にして返す。←キャスト
    • それにしてもサンプルスクリプトによく出てくる「for (i=0; i」の意味が分かりません。
    • データ型の変換はなるほどー。だからint(Date型)でエポック秒取り出したりできたんだ、なるほど。
    • [0x」って16進数ってことだったのか、気づいてなかった(´Д⊂
    • 演算子がオペレータで演算の対象がオペランド。
    • 否定演算子「!」を使ってこんなトグルちっくなことができるなんて！

表示と非表示のトグル

test_btn.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(event:MouseEvent):void {
ball_mc.visible = !(ball_mc.visible);
}

http://oshige.com/flash/as3note/2007/05/25.html
    • ビット単位演算って大学でやった覚えがないな−、情報知能なのに（/ω＼）意味は分かったけど何に役立つかはまだ見えてません。。。
    • 三項演算子「?」って便利だけどいざというとき使えなさそうな気がする。マスターしたい。
    • switch文ってbreakすることデフォにすればいいのにと思ってたけど、break抜かしたこんな使い方があるとは！！

var a:int = 7;
switch (a) {
case 5 :
case 7 :
case 9 :
trace("アタリ：5、7、9のどれかでした");
break;
default :
trace("はずれです");
}

出力結果：
アタリ：5、7、9のどれかでした

http://oshige.com/flash/as3note/2007/05/27.html
    • そしてcaseで直接指定もできるのか！

var a:int = 7;
switch (true) {
case (a<5) :
trace("5未満");
break;
case (a>=5 && a<=10) :
trace("5以上10未満");
break;
case (a>10) :
trace("10以上");
break;
}

出力結果：
5以上10未満

http://oshige.com/flash/as3note/2007/05/27.html
  • そんなわけで1章2章ななめよみしてみました。途中休憩も入れて2時間くらいかかったかな？
  • なかなか勉強になりました。
  • 本買って実家とかにこもってじっくり読みたいかも。

第4回：Flash Liteでゲームを作ろう！

FlashLite

第4回←教材はこれ！

  • 時計待ち受け作るだけで目的達成なんだけどせっかくなんでもうちょい勉強。
  • 上下キーしか使えないので数字キーを使っての操作と。
  • 今回作るゲームは表示された数字の早押しゲーム。
  • 自分のケータイにサンプルファイル転送して遊んでみる。ちゃんと動く。
  • 基本的に文字は画像ベース。フォントによる機種依存がないため。
  • 最初の画面のスタートボタンに次のスクリプト。

on (press, keyPress "0") {　←二つ同時に指定できる！
gotoAndPlay("setNo");
}

  • ボタンが押されるか、数字の「0」が押されたら「setNo」に飛ぶと。
  • そして同じく第1フレームには変数の初期化として以下のスクリプト。

countOK = 0; //成功カウント
countNG = 0; //失敗カウント

  • この二つの変数を使って得点計算をすると言うことですね。
  • スタートボタンの背景矩形がステージをはみ出してるのは、機種によってステージ幅比が異なった場合のため。
  • このゲームのメインとなるsetNoフレーム。
  • 至る所にスクリプト書かれてて面倒な印象(笑)
  • 最初に実行されるのが以下のスクリプト。

rNo = random(10);//表示する数字をランダムで選定
rndNo.No = rNo;//ランダムの数値を表示させる

rndNo._x = random(200) + 20;//数値の表示位置をランダムで配置
rndNo._y = random(140) + 20;

play();//再生

  • このスクリプトの2行目で指定されている「rndNo.No」については、ステージ外の左側にある「数字」のムービークリップ(インスタンス名：randNo)の数字オブジェクトの中にはダイナミックテキスト(変数名：No)が配置されている。
  • このタイムラインは11フレーム目でplay()されると25フレーム目まですすむ。
  • 25フレームには次のスクリプトが。

//時間切れの場合は失敗カウント+1
countNG++;

//数値表示処理へ戻る
gotoAndPlay("setNo");

  • このフレームに来るまでに数字キーが押せなかったら時間切れで失敗カウント「countNG」が+1される。
  • で、25フレームまでに数字が押された場合の処理が、ステージ外の左側にある「空ボタン」に以下のように記述されている。

on (keyPress "0") {
　　　if (rNo==0) {
　　　　　　　　call("hit");
　　　　} else {
　　　　　　　　call("miss");
　　　　}
}

on (keyPress "1") {
　　　if (rNo==1) {
　　　　　　　　call("hit");
　　　　} else {
　　　　　　　　call("miss");
　　　　}
}

//途中省略

on (keyPress "9") {
　　　　if (rNo==9) {
　　　　　　　　call("hit");
　　　　} else {
　　　　　　　　call("miss");
　　　　}
}

  • 変数「rNo」の値と比較して同じであればラベル「hit」へ、違っていればラベル「miss」へ。
  • ここでcall()関数について。

ここでポイントとなるのが、call()関数です。Flash Lite 1.1ではfunctionを使用できません。そのため、このcall()を代用することになります。call()では引数としてフレームの番号またはラベルを指定し、そのフレームのスクリプトが実行させることとなります。

  • なるほど単純にgotoAndPlayとは違ってそのラベルに行ってスクリプトの実行をすると。
  • 「miss」のスクリプトは失敗カウント「countNG」が+1されるだけ。
  • 「hit」のスクリプトは以下。

//成功カウント+1
countOK++;

//再生を停止
stop();

//数字が弾けるアニメーションを再生
tellTarget("/rndNo") {
play();
}

  • 実はムービークリップ「rndNo」には数字が弾けるアニメーションが続きに用意されており、それを再生させる。
  • そしてもちろんその弾けたアニメの最終フレームには次のスクリプト。

//成功した場合はルートの再生が停止するので
//数字が弾けるアニメーション終了後に、
//ルートを数字表示処理から再生させる
tellTarget("/") {　　　　　　　←この指定自体が分かるようなわからんような。。。
gotoAndPlay("setNo");
}

//数字は最初に
gotoAndStop(1);　←このムービークリップ自体も1フレーム目へ

  • はいそんで、ここまでの仕組みだと新たに数字が出てくると永久に繰り返してしまうので、全体制御に関してが3ページ目。
  • 時間制限を設けるためにタイムバーのムービークリップを設置。
  • 20秒(12fpsで240フレーム)でタイムバーの最終フレームへ。そこに記述されるスクリプトが以下。

tellTarget("/") {
　　　　gotoAndStop("end");
}

  • ゲームの結果画面、ラベル「end」のフレーム。記述されるスクリプトは以下。

stop();

//得点の計算
point = countOK - countNG;

//得点によってメッセージを変更
if (point <= 0) {
　　　　tellTarget("info") { gotoAndStop(1); }
　} else if (point > 0 and point <= 10) {
　　　　tellTarget("info") { gotoAndStop(2); }
　} else if (point > 10 and point <= 15) {
　　　　tellTarget("info") { gotoAndStop(3); }
　} else if (point > 15 and point <= 20) {
　　　　tellTarget("info") { gotoAndStop(4); }
　} else if (point > 20) {
　　　　tellTarget("info") { gotoAndStop(5); }
}

  • ここで結果表示にムービークリップ(インスタンス名：info)が使われている。各フレームにそれぞれの結果を用意している。
  • そんなわけで全体的にゲームブックのパラグラフ分岐的な趣き。プログラムっぽくないけど分かりやすいかも。
  • 最後にバイブ機能を使う場合についての記述が。

バイブレーター機能を用いる場合は、fscommand2()を使用して下記のように記述します。

fscommand2("StartVibrate", [オンの時間], [オフの時間], [繰り返し回数]);
fscommand2("StopVibrate");

　下記の例では、バイブレーター機能を2.5秒間オン／1秒間オフを2回繰り返します。

fscommand2("StartVibrate", 2500, 1000, 2);

  • 「StartVibrate」と「StopVibrate」は対にする必要ないってことかな？

第3回：時計待ち受けを作ろう！

FlashLite

第3回←教材はこれ！

  • さ、実践的な待ち受け画面作成！
  • 早速サンプルをDLして自分のケータイで動作確認。動いてます。
  • FLASH CS4でプレビューしようとしたらDevice Centralが立ち上がった。
  • 再生できなかったぽいけどスタンドアローンモードにしたらプレビューできた。
  • FLASHのチュートリアルでよくあるアナログではなくデジタルの時計。

PC版のFlash制作時にはダイナミックテキストにインスタンス名を割り振ることができますが、Flash Liteではそれを行うことができません。そのため、時計が表示されるダイナミックテキストには「dateTxt」、日付が表示されるダイナミックテキストには「timeTxt」という変数を指定していきます。

  • 「変数を指定」と「インスタンス名をつける」の具体的な大きな違いがよく分かりませんが読み進めます。

　今回のサンプルのスクリプトは、ステージ外の左上に配置してある空のムービークリップの1フレーム目にすべて記述しています。

  • これがenterFrameが使えないことの最大のポイントっぽい。
  • ユーザーが意識しない空のムービークリップてのがよく使われてそうな予感。

現在、空のムービークリップ内で処理を行っているため、1つ上の階層の変数に時計の表示テキストを代入していくのですが、今回は絶対パスで表記していきます。

　　_root.timeTxt = Hours add ":" add Minutes add ":" add Seconds;

これで最初にステージに配置したテキストの変数と同期し、ダイナミックテキストに時間が表示されます。

  • えーと、パスがドットシンタックスになってるんだけどいいんだっけか。まざるなー。*1
  • 文字連結は「add」の利用。これは覚えてます。
  • 曜日表示のための配列的工夫。

wd0 = " [SUN]"//日
wd1 = " [MON]"//月
wd2 = " [TUE]"//火

　上記のように「wd」+「数値」という変数名をつけ、曜日ごとに表示させるテキストを設定しておき、日付表示の変数「dateTxt」に代入する時に「eval("wd" add weekday)」という感じで記述していきます。

  • eval()関数がそもそもどんな関数か分かんないから調べてみた。

eval 関数

　eval(expression: Object) : Objecteval(expression: String) : Object

変数、プロパティ、オブジェクト、ムービークリップに名前でアクセスします。expression が変数またはプロパティである場合は、変数またはプロパティの値が返されます。expression がオブジェクトまたはムービークリップである場合は、オブジェクトまたはムービークリップへの参照が返されます。expression に指定したエレメントが見つからない場合は、undefined が返されます。

http://livedocs.adobe.com/flashlite/2_jp/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts_wEcute&file=00000155.html
  • この用途用ですね。
  • そして3ページ目はやはりアナログ時計化。動きがあるからね。
  • 1ページ目のダイナミックテキストへの変数名の与え方が分かんなかったんだけど、Flaファイル開いてよく見たら普通にプロパティとしてオプションのところに「リンク」や「ターゲット」に並んで「変数」欄がありそこで指定してました。納得−。

*1:変数を指定する時はドットシンタックスでもOKでした。

第5回：Flash Liteのまとめと今後

FlashLite

第5回←教材はこれ！

  • 講座の最終回。まとめの回。
  • FlashLite1.1の1フレーム目に書き込む記述が以下。初期化みたいなもの？

fscommand2("FullScreen", true);
fscommand2("SetQuality", "high");
_focusrect = false;

  • 1行目がコンテンツ表示領域を全体に。
  • 2行目が画質クオリティ設定。「high」「medium」「low」の三段階。
  • 3行目がボタンフォーカスのありなし。無くてもボタンオーバーが設定してあれば大丈夫。
  • 外部アクセスについて以下の記述が。

Flash Liteコンテンツで外部通信を行う際には、キーやボタンのイベントを取得した時のみ外部通信が可能という制限があります。これは、ユーザーが知らない間にパケット受信（課金）をさせないようにしているためです。

  • なるほどそういう訳か。
  • FlashLiteではムービー書き出し時に圧縮処理をしないため最初から容量を抑えるノウハウが必要。以下7点。
    1. 複雑なベクターは避ける。パスが多い時は「修正→シェイプ→最適化」でパスの数を調整。
    2. 変数名・フレーム名を短いものにする。
    3. 簡単な図形はシンボル化したパーツで使いまわす。
    4. 読み込む前に画像ファイルの容量を落としておく。
    5. 画像のアルファチャンネルは避ける。FLASHでマスク化した方が容量を落とせる場合もある。
    6. 無駄なフレームやキーフレームを削除する。
    7. 共通する処理などはcall()関数で呼び出すなどしてスクリプトの記述量を減らす。
  • Flash Lite2.0では書き出し時に圧縮が使える。
  • 2.0、3.0はこれからどうなるかまだまだ流動的かな。

第2回：Flash Lite 1.1の基本的なスクリプト制御

FlashLite

第2回←教材はこれ！

  • FL1.1はFLASH4ベース。if文や文字連結で若干の違いが。
  • ちなみにWikipediaで調べた対応関係は以下。
Flash Lite 1.0
FLASH4ベース
Flash Lite 2.0
FLASH7ベース←FLASH MX？
Flash Lite 3.0
FLASH8ベース
  • とりあえずPC版との違い一つ目は、タイムライン制御にはtellTarget()関数を利用してパス指定。
  • いきなりめんどくさそう。
  • しかもドットシンタックスではなくスラッシュシンタックスだと。パスの指定時には””も必要。

tellTarget("_root/mc") {
stop();　//Flash Lite 1.1ではtellTarget()関数を使用する
}

  • stop()の時にも必ず必要なのかな？

・tellTarget("/")とtellTarget("_root")は同じ意味
・tellTarget("../")とtellTarget("_parent")は同じ意味
・レベルを指定する場合はtellTarget("_level0")などと記述

　変数を指定するには、ドットシンタックスを使用するか、ドット（.）とコロン（:）とを組み合わせたスラッシュシンタックスを使用します。

　ルートにある「abc」という変数を絶対パスで指定します。

_root.abc
/:abc

　1つ上の階層にある別のムービークリップのabcという変数に相対パスで指定します。

_parent.mc1.car
../mc1/:car

　入れ子になっているムービークリップのabcという変数を絶対パスで指定します。

_root.mc1.mc2.car
/mc1/mc2/:car

  • めんどい。これ1.1の話だけど2.0でもこうなのかなー。
  • 2つめの違いは文字連結について。
  • 文字連結「+」の代わりに「add」とか、文字列の比較に「==」の代わりに「eq」だとか。
  • これは大丈夫。わかりやすい。
  • 2ページ目、FL1.1でできないこと。
enterFrameが使えない
フレームをループさせてスクリプトを実行
functionが使えない
フレームラベルを利用したcall()関数を利用
配列Arrayが使えない
eval()関数にて仮想的に処理
  • 「えっー！」て感じでいろいろできない。
  • ボタンイベントは以下の感じ
press
ボタンにフォーカスがありユーザーが決定キーを押した時
release
ボタンにフォーカスがありユーザーが決定キーをはなした時
rollOver
ボタンがフォーカスを受け取った時
rollOut
ボタンがフォーカスを失った時

ボタンに数字キーを対応させる場合には、「,」で区切って複数のイベントを指定できます。ボタンに数字キー[0]を対応させるには下記の通りです。

on(press, keyPress "0") {
//[ボタン処理]
}

  • なるほど、このあたりは分かりやすいよ。
  • 3ページ目。ケータイならではの機能としてリンク先には電話番号もサポート。

getURL("http://www.hogehoge.com/"); //Webサイトへリンク
getURL("mail@hogehoge.com"); //メールアドレスにリンク
getURL("tellto:09012345678"); //電話番号へリンク

  • ただしgetURL()が処理できる条件はボタンアクションのonハンドラのみ。
  • fscommand2()関数を利用すると端末の情報を取得できる。
  • 日付の取得

fscommand2("GetDateYear"); //年
fscommand2("GetDateMonth"); //月
fscommand2("GetDateDay"); //日

  • 曜日の取得

fscommand2("GetDateWeekday"); //曜日

  • 時間の取得

fscommand2("GetTimeHours"); //時
fscommand2("GetTimeMinutes"); //分
fscommand2("GetTimeSeconds"); //秒

  • 電波状況やバッテリー残量などの取得

fscommand2("GetSignalLevel"); //電波状況
fscommand2("GetBatteryLevel"); //バッテリー残量
fscommand2("GetPowerSource"); //電源状況

fscommand2("StartVibrate", [オンの時間], [オフの時間], [繰り返し回数]);
fscommand2("StopVibrate");

　

  • テキスト入力の初期入力モード

fscommand2("SetInputTextType", [ダイナミックテキストの名前（変数の名前）], [入力モード]);

  • その他にMath()関数のサポートがないので小数点以下切り捨てはint()を使う。
  • 乱数はrandom()関数を使う。

rNo = random(5); //0,1,2,3,4のいずれかの数値が代入されます
rNo = random(5) + 5; //5,6,7,8,9のいずれかの数値が代入されます