とあるFlashの自動生成

自己紹介

• 名前　秋猫
• お仕事　携帯向けFlash作り
– プログラマに転職したいなー（ﾁﾗｯ
• Twitter @akineko
• Blog http://d.hatena.ne.jp/Akineko/
• 趣味ゲーム・お絵かき・運動・勉強

わんくま同盟大阪勉強会 #36 VS2010 CLT

プログラミングについて

• 勉強中
– Java・C++・Python・Haskell・Perl・ActionScript・
Mercurial
• 勉強したいな
– Scala・Clojure・C#・Ruby・Lisp・JavaScript・Git・
Linux・サーバー


発表に至った経緯

前回の大阪勉強会で失敗したからです…orz


伝えたいこと

• FlashでのGUIアプリ作成の快適さ
– ActionScriptについてではなく、あくまでFlashに
ついてです。
– Flash≒ActionScriptだけどFlash＝ActionScript
ではありません＞＜


注意事項

• 今回の発表はActionScript 2.0についての内
容となっております。
– 現在主流となってきている3.0とは異なる部分が
ありますのでご注意下さい。


一時期流行りの

ActionScript基礎文法最速マスター


変数宣言

• 基本形 var 変数名:型名;
• 定数 const 変数名:型名 = 値;
– var a; や var a:*; のように未定義とすることも可
能
– 未定義の場合は代入が行われる毎に動的に型
付される
– 定数は宣言と同時に初期化しないとエラー

　※ ActionScript 2.0では宣言なしに変数を使うことは可ですが、
　　　ActionScript 3.0ではエラーとなります


変数宣言

型指定なしだと別の型を代入可
1. 　var a;
2. 　a = 1;
3. 　a = 'a';

型指定ありだとエラー
1. 　var a:int;
2. 　a = 1;
3. 　a = 'a'; // 型が違うのでエラー


基本的な型

• 整数 var i:int;
• 小数 var num:Number;
• 文字列 var str:String;
• 配列 var arr:Array;
• 真偽値 var bool:Boolean;


初期化

• 整数 var i:int = 1;
– var i:int = new int(1);
• 上記のようにコンストラクタを明示的に呼ぶことも可
• (以下小数・文字列も同様なので省略)
• 小数 var num:Number = 1.234;
• 文字列 var str:String = 'hoge';
• 配列 var arr:Array = [1, 2, 3];
– var arr:Array = new Array(1, 2, 3);


四則演算

• 和 num = 1 + 1;
• 差 num = 1 - 1;
• 積 num = 1 * 1;
• 商 num = 1 / 1;
– 整数化 int(10 / 3) ←コンストラクタ
• 余り num = 10 % 3;
• インクリメント num ++;
• デクリメント num --;
• 文字結合 str = 'hoge' + 'fuga';


条件分岐

• if 文
1. if ( 条件式1 ) {
2. // 条件式1が真の場合の処理
3. } else if ( 条件式2 ) {
4. // 条件式2が真の場合の処理
5. } else {
6. // どちらも偽の場合の処理
7. }


条件分岐

• switch文
1. switch ( 式1 ) {
2. case 式2:
3. // 式1と式2が一致する場合の処理
4. break;
5. default:
6. // いずれにも当てはまらない場合の処理
7. }
※ 式には関数も使用可で式1と式2が一致すればOK


繰り返し

• while文

1. while ( 条件式 ) {
2. // 条件式が真の間実行される処理
3. // continueやbreakも使用可
4. }


繰り返し

• for文
1. for ( 初期値; 条件式; 更新処理) {
2. // 条件式が真の間実行される処理
3. // continueやbreakも使用可
4. }


繰り返し

• for..in文
1. for ( var 変数:配列の型 in 配列) {
2. // 配列の各要素を使用する処理
3. }


繰り返し

• for each..in文（foreachじゃないよ！）
1. for each ( var 変数 in オブジェクト) {
2. // オブジェクトの各プロパティの値を
3. // 使用する処理
4. }


関数

• function ステートメント
1. function 関数名( 引数名:型 ):戻り型 {
2. // 関数の処理
3. return 戻り値;
4. }
5. 関数名(引数); // 関数呼び出し
　 ※ 引数の型や戻り値の型を未定義とした場合、
　　　型を気にせず渡したり返したり出来ます


関数

• 関数式（別名：関数リテラル・匿名関数）
1. var 変数名:Function = function ( 引数名:型 ) {
2. // 関数で行う処理
3. }
4. 変数名(引数); // 変数に割り当てられた関数の呼び出し


関数

• 関数のネスト
1. function 関数 ( 引数:型 ):戻り型 {
2. function 関数1 ( 引数:型 ):戻り型 {
3. return // 関数1の処理
4. }
5. function 関数2 ( 引数:型 ):戻り型 {
6. return // 関数2の処理
7. }
8. return 関数1() + 関数2();
9. }


以下略

• 関数
– 引数にデフォルト値を設定可
– 可変引数も使用可
– 関数クロージャ
• クラス・インターフェイス
– 他言語、特にJavaに近い感じ
• クラスの継承は１つ・インターフェイスは複数実装可
• もちろんActionScript特有の機能もあります


以下略

• パッケージ
– Javaっぽい感じ
• 名前空間
– C++っぽい感じ
– パッケージの中にも定義可
– さらにクラスの中にも定義可


FlashのUI説明


僕の作業環境1


僕の作業環境2


作業環境について

• ツールの配置は基本的に自由に変更する事が可能

– また配置を保存することも可能なので作業内容ご
とに使い分ける事も出来ます。


ステージ

• 白い部分
– swfファイルとして書き出した際の表示領域
– 背景色は変更可
• 灰色の部分
– 表示領域外
– オブジェクトの
　　　　配置は可能


プロパティ画面

• 未選択時はファイル自体の設定
– ActionScriptのバージョン
– Flash Playerのバージョン
– フレームレート
– ステージのサイズ
– ステージの色

その他、選択しているものごとの情
報が表示されます。


描画ツール

• Illustratorなどのベクター系画像編集ツールと
ほぼ同等のツールがあります

• これらのツールを使いイラストを描くのと同様の
操作でアプリのGUIを作成する事ができます。

• 描画されたものには線と塗りの２種類が
あり、線から塗りに変換することが可能ですが、
塗りから線への変換は不可です。


カラー

• 「線」や「塗り」の色の変更が可能です。

• 「種類」よりグラデーションに
変更することも出来ます。

• 「色見本」にて作成した色を
保存しておく事も出来ます。


整列

• オブジェクトの配置を調整する機能
– １つまたは複数のオブジェクトを選択し、
位置揃え・等間隔に配置・サイズ揃え
などを行うことが可能です。
– ステージを基準にすると
ステージ内の中央に配置など
いった事が出来ます。


情報

• オブジェクトの情報表示・調整画面
– 縦・横のサイズや画面上の位置を数値にて
直接調整することが可能です。


変形

• オブジェクトを変形させる事が可能
– 縦横のサイズを％にて調整
– 回転・傾きの調整
– 3Dオブジェクト用の機能有


シンボル化

• 描画ツールにて作成したものをシンボルに変換する際に
表示される画面

• 主な設定項目
– 名前
– 基準点
– タイプ
• ムービクリップ
• ボタン
• グラフィック
– クラス名


シンボルとは

• シンボルとは
– プログラミングのクラスに相当するもの
– クラス名を付けることによりActionScriptで動的に生成すること
が可能
– 同じアニメーションや見た目の複製を作成することが可能
– シンボルがステージ上に配置されたものをインスタンスと呼ぶ
– インスタンスを使用すればファイル容量が軽減される


ライブラリ

• 作成したシンボルの一覧画面
– ドラッグ＆ドラップでステージ上にインスタンスの
生成が可能
– シンボルの情報の編集が可能
• 名前
• クラス名
– ダブルクリックで
シンボル自体の編集へ


インスタンスのプロパティ

• インスタンスごとの詳細な情報の表示・調整
画面
– インスタンス名
• 名前を付けることによりActionScriptにて制
御が可能
– 変形と同等の情報表示及び調整
– カラー効果
• 明度・着色・詳細・アルファ
– ブレンド
• 乗算・オーバーレイ・反転・etc．．．


タイムライン
• レイヤーとフレームの編集画面
– レイヤーの追加・重ね順変更・ガイド化・マスク化
　 etc...
– フレームの追加・位置調整・アニメーション化
　 etc...


レイヤー・フレーム

• レイヤー
– 画像編集ツールとほぼ同様と見ていただければOK
• フレーム
– Flashのアニメーションはフレーム単位で行われます。
– ActionScriptの実行結果もフレーム単位なのでfor文などのル
ープ処理の結果は全ての処理が完了した後の結果のみが反
映されます。
– フレームの進むスピードは変更可
• 携帯だと12fps・Webは24fpsが一般的
• たまに30fpsも


フレームのプロパティ

• 選択したフレームの編集が可能

– 名前

• ActionScriptによりこの名前を
指定して移動する事などが可能


アクション画面

• ActionScriptを記述する画面
– バージョンの選択
– 簡易リファレンス
– シンタックスハイライト
– インスタンスパス挿入
– 一括コメント化・解除
– 対象フレームへのピン


出力・コンパイルエラー

• 出力
– trace関数(print)などの出力表示画面
• コンパイルエラー
– コンパイル時に発生したエラーの出力画面


FlashによるGUIアプリ作成

• 基本的な流れ
1. 描画ツールにてGUIパーツ作成
•
ASによる作成も可能
2. シンボル化
3. インスタンス配置
•
ASによる配置も可能
4.ActionScriptにてアニメーション制御や
データ処理


というわけで

とあるFlashの自動生成の作り方


とあるFlashの自動生成に必要なパーツ

各テキスト
色のブロック
文字の背景

説明文

入力フォーム


仕組み

• 主な処理はこんな感じ
– 色のブロックに「とある触手の自動生成」の「自」
以外の文字・ルビ・「自」の背景の形のマスクをか
けて表示する
– そのマスクをかけた表示の上に「自」の文字を白
色で配置する
– 入力フィールドに入力された文字を読み取って反
映する


色のブロック作成

• 作成手順
– 描画ツールの矩形ツールを使用し四角を描画
– グラデーションツールを使用しグラデーションを設
定
– シンボル化しインスタンス名に colorBlock と命名


タイトル・ルビ作成
• 作成手順
– 描画ツールよりテキスト入力を選択しタイトル文字
(とある触手の自動生成)を入力
– 修正→分解の機能にて１文字ずつに分解
– サイズ・位置を調整する
– 同様にルビ用の領域を作成しルビを入力


タイトル・ルビの設定

• 変化しないテキストはプロパティにて静止テキストへ
– 静止テキストとは
• 文字通り変更不可のテキスト
• 変化させるテキストはダイナミックテキストへ設定しイン
スタンス名をつける
– ダイナミックテキストとは
• インスタンス名をつけActionScriptによる制御が可能


マスクとなるパーツをまとめる

• 作成手順
– 「自」の背景となる四角を作成
– 右下の絵のように「自」の部分に配置する
– マスクとなる「自」以外の部分を選択しシンボル化
– インスタンス名をつける


入力フィールドの作成

• 作成手順
– テキストツールにて説明文字をそれぞれ入力
– 説明文字を静止テキストに設定
– 同様にテキストツールにて入力フィールドを作成
– テキスト入力に設定し、インスタンス名をつける


テキストのその他の設定

• その他にもこのような設定が可能です
– 選択可能かどうか
– HTMLとして扱うかどうか
– 枠線の表示
– 文字の埋め込み(フォント)
– 最大文字数
– etc...


パーツ完成！


ActionScriptの記述

1. 　// title用オブジェクト
2. 　var toaruText:MovieClip;
3. 　var colorBlock:MovieClip;
4. 　ここに記述
5. 　// 入力フィールド
6. 　var topInput:TextField;
7. 　var bottomInput:TextField;
8. 　var rubyInput:TextField;
9. 　
10. 　// 初期化関数の呼び出し
11. 　init();
※以降のASも全てここに記述されています


init関数
1. 　function init() {
2. 　 /* 複数のオブジェクトを保持したインスタンスにマスクを
3. 　かけても正常に表示させる為の設定 */
4. 　 toaruText.cacheAsBitmap = true;
5. 　 colorBlock.cacheAsBitmap = true;
6. 　 // マスクの設定
7. 　 colorBlock.setMask(toaruText);
8. 　 // 入力フィールドに変更があった時の処理を割り当て
9. 　 topInput.onChanged = changeHeadText;
10. 　 bottomInput.onChanged = changeBottomText;
11. 　 rubyInput.onChanged = changeRubyText;
12. 　}


changeHeadText関数

1. 　function changeHeadText() {
2. 　 // 入力フィールドの値を代入
3. 　 var inputText:String = topInput.text;
4. 　 // １文字ずつ抽出して割り当て
5. 　 toaruText.topFirstWord.text = inputText.charAt(0);
6. 　 toaruText.topSecondWord.text = inputText.charAt(1);
7. 　}


changeBottomText関数

1. 　function changeBottomText() {
2. 　 // 入力フィールドの値を代入
3. 　 var inputText:String = bottomInput.text;
4. 　 // １文字ずつ抽出して割り当て
5. 　 bottomFirstWord.text = inputText.charAt(0);
6. 　 toaruText.bottomSecondWord.text = inputText.charAt(1);
7. 　 toaruText.bottomThirdWord.text = inputText.charAt(2);
8. 　 toaruText.bottomForthWord.text = inputText.charAt(3);
9. 　}


1. 　function changeRubyText() {
2. 　 // ルビ表示部は分割していないのでそのまま代入
3. 　 toaruText.ruby.text = rubyInput.text;
4. 　}


コンパイルして完成

ね？簡単でしょ？


おまけ

• インスタンス：MovieClipのイベントなど
– MovieClip.onEnterFrame
• 1フレームすすむ毎に実行
– MovieClip.onPress
• マウスが押された時
– MovieClip.onRollOver
• マウスが重なった時
上記のイベント = 関数でイベント発生時の処理を割り当てる事が出来ます
– MovieClip.hitTest(オブジェクト)
• 指定オブジェクトと衝突したかどうか(boolean)
これもゲーム作成とかいろいろ便利！


おまけ

• ActionScript 3.0ならさらに便利
– MovieClip.addEventListener(イベント, アクション)で追加
• 各種イベント
– Event.ENTER_FRAMEなど
– MouseEvent.DOUBLE_CLICKなど
– KeyboardEvent.RIGHTなど
• アクション(関数)の追加が複数可能
– AS2.0だとイベント= function () { 複数の関数呼び出し }
• AS2.0だと分割したテキストや困難だった縦書きも3.0なら
簡単でいろいろと便利です！


おまけ

アイコンに注目

Flashで作成したアプリは簡単にAIRアプリにする事も可能


まとめ

• アプリケーションのGUIデザインが描画ツールで直感的
に作成できる！

• さらにそれらをASで制御できる！
– 動的に生成したり動かしたり！

• 描画ツールと同等のことをASにて実現することも可能な
のでASで動的に作成するこも出来ます！
– 線や矩形ツールにはじまりフィルタや乗算まで！


勉強してみたいあなたへ

• 公式マニュアル
– http://help.adobe.com/ja_JP/ActionScript/3.0_ProgrammingAS3/
• オススメ入門書
– http://bit.ly/9kSxvu
• リファレンス
– http://bit.ly/a7gUit
• エラー集
– http://bit.ly/918c7I
• オライリー
– http://bit.ly/ayXDJa


最後に

Flashを使ってみたいなと思って頂けましたでしょうか？


ご清聴ありがとうございましたm(_ _)m


とあるFlashの自動生成

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to とあるFlashの自動生成

Similar to とあるFlashの自動生成 (20)

More from Akineko Shimizu

More from Akineko Shimizu (8)

Recently uploaded

Recently uploaded (7)

とあるFlashの自動生成