More Related Content
Similar to とあるFlashの自動生成 (20)
More from Akineko Shimizu (8)
とあるFlashの自動生成
- 2. 自己紹介
• 名前 秋猫
• お仕事 携帯向けFlash作り
– プログラマに転職したいなー(チラッ
• Twitter @akineko
• Blog http://d.hatena.ne.jp/Akineko/
• 趣味 ゲーム・お絵かき・運動・勉強
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 3. プログラミングについて
• 勉強中
– Java・C++・Python・Haskell・Perl・ActionScript・
Mercurial
• 勉強したいな
– Scala・Clojure・C#・Ruby・Lisp・JavaScript・Git・
Linux・サーバー
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 5. 伝えたいこと
• FlashでのGUIアプリ作成の快適さ
– ActionScriptについてではなく、あくまでFlashに
ついてです。
– Flash≒ActionScriptだけどFlash=ActionScript
ではありません><
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 8. 変数宣言
• 基本形 var 変数名:型名;
• 定数 const 変数名:型名 = 値;
– var a; や var a:*; のように未定義とすることも可
能
– 未定義の場合は代入が行われる毎に動的に型
付される
– 定数は宣言と同時に初期化しないとエラー
※ ActionScript 2.0では宣言なしに変数を使うことは可ですが、
ActionScript 3.0ではエラーとなります
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 9. 変数宣言
型指定なしだと別の型を代入可
1. var a;
2. a = 1;
3. a = 'a';
型指定ありだとエラー
1. var a:int;
2. a = 1;
3. a = 'a'; // 型が違うのでエラー
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 10. 基本的な型
• 整数 var i:int;
• 小数 var num:Number;
• 文字列 var str:String;
• 配列 var arr:Array;
• 真偽値 var bool:Boolean;
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 11. 初期化
• 整数 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);
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 12. 四則演算
• 和 num = 1 + 1;
• 差 num = 1 - 1;
• 積 num = 1 * 1;
• 商 num = 1 / 1;
– 整数化 int(10 / 3) ←コンストラクタ
• 余り num = 10 % 3;
• インクリメント num ++;
• デクリメント num --;
• 文字結合 str = 'hoge' + 'fuga';
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 13. 条件分岐
• if 文
1. if ( 条件式1 ) {
2. // 条件式1が真の場合の処理
3. } else if ( 条件式2 ) {
4. // 条件式2が真の場合の処理
5. } else {
6. // どちらも偽の場合の処理
7. }
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 14. 条件分岐
• switch文
1. switch ( 式1 ) {
2. case 式2:
3. // 式1と式2が一致する場合の処理
4. break;
5. default:
6. // いずれにも当てはまらない場合の処理
7. }
※ 式には関数も使用可で式1と式2が一致すればOK
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 15. 繰り返し
• while文
1. while ( 条件式 ) {
2. // 条件式が真の間実行される処理
3. // continueやbreakも使用可
4. }
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 16. 繰り返し
• for文
1. for ( 初期値; 条件式; 更新処理) {
2. // 条件式が真の間実行される処理
3. // continueやbreakも使用可
4. }
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 17. 繰り返し
• for..in文
1. for ( var 変数:配列の型 in 配列) {
2. // 配列の各要素を使用する処理
3. }
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 19. 関数
• function ステートメント
1. function 関数名( 引数名:型 ):戻り型 {
2. // 関数の処理
3. return 戻り値;
4. }
5. 関数名(引数); // 関数呼び出し
※ 引数の型や戻り値の型を未定義とした場合、
型を気にせず渡したり返したり出来ます
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 20. 関数
• 関数式(別名:関数リテラル・匿名関数)
1. var 変数名:Function = function ( 引数名:型 ) {
2. // 関数で行う処理
3. }
4. 変数名(引数); // 変数に割り当てられた関数の呼び出し
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 21. 関数
• 関数のネスト
1. function 関数 ( 引数:型 ):戻り型 {
2. function 関数1 ( 引数:型 ):戻り型 {
3. return // 関数1の処理
4. }
5. function 関数2 ( 引数:型 ):戻り型 {
6. return // 関数2の処理
7. }
8. return 関数1() + 関数2();
9. }
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 22. 以下略
• 関数
– 引数にデフォルト値を設定可
– 可変引数も使用可
– 関数クロージャ
• クラス・インターフェイス
– 他言語、特にJavaに近い感じ
• クラスの継承は1つ・インターフェイスは複数実装可
• もちろんActionScript特有の機能もあります
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 23. 以下略
• パッケージ
– Javaっぽい感じ
• 名前空間
– C++っぽい感じ
– パッケージの中にも定義可
– さらにクラスの中にも定義可
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 28. ステージ
• 白い部分
– swfファイルとして書き出した際の表示領域
– 背景色は変更可
• 灰色の部分
– 表示領域外
– オブジェクトの
配置は可能
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 29. プロパティ画面
• 未選択時はファイル自体の設定
– ActionScriptのバージョン
– Flash Playerのバージョン
– フレームレート
– ステージのサイズ
– ステージの色
その他、選択しているものごとの情
報が表示されます。
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 32. 整列
• オブジェクトの配置を調整する機能
– 1つまたは複数のオブジェクトを選択し、
位置揃え・等間隔に配置・サイズ揃え
などを行うことが可能です。
– ステージを基準にすると
ステージ内の中央に配置など
いった事が出来ます。
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 36. シンボルとは
• シンボルとは
– プログラミングのクラスに相当するもの
– クラス名を付けることによりActionScriptで動的に生成すること
が可能
– 同じアニメーションや見た目の複製を作成することが可能
– シンボルがステージ上に配置されたものをインスタンスと呼ぶ
– インスタンスを使用すればファイル容量が軽減される
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 37. ライブラリ
• 作成したシンボルの一覧画面
– ドラッグ&ドラップでステージ上にインスタンスの
生成が可能
– シンボルの情報の編集が可能
• 名前
• クラス名
– ダブルクリックで
シンボル自体の編集へ
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 38. インスタンスのプロパティ
• インスタンスごとの詳細な情報の表示・調整
画面
– インスタンス名
• 名前を付けることによりActionScriptにて制
御が可能
– 変形と同等の情報表示及び調整
– カラー効果
• 明度・着色・詳細・アルファ
– ブレンド
• 乗算・オーバーレイ・反転・etc...
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 40. レイヤー・フレーム
• レイヤー
– 画像編集ツールとほぼ同様と見ていただければOK
• フレーム
– Flashのアニメーションはフレーム単位で行われます。
– ActionScriptの実行結果もフレーム単位なのでfor文などのル
ープ処理の結果は全ての処理が完了した後の結果のみが反
映されます。
– フレームの進むスピードは変更可
• 携帯だと12fps・Webは24fpsが一般的
• たまに30fpsも
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 43. 出力・コンパイルエラー
• 出力
– trace関数(print)などの出力表示画面
• コンパイルエラー
– コンパイル時に発生したエラーの出力画面
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 44. FlashによるGUIアプリ作成
• 基本的な流れ
1. 描画ツールにてGUIパーツ作成
•
ASによる作成も可能
2. シンボル化
3. インスタンス配置
•
ASによる配置も可能
4.ActionScriptにてアニメーション制御や
データ処理
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 47. 仕組み
• 主な処理はこんな感じ
– 色のブロックに「とある触手の自動生成」の「自」
以外の文字・ルビ・「自」の背景の形のマスクをか
けて表示する
– そのマスクをかけた表示の上に「自」の文字を白
色で配置する
– 入力フィールドに入力された文字を読み取って反
映する
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 48. 色のブロック作成
• 作成手順
– 描画ツールの矩形ツールを使用し四角を描画
– グラデーションツールを使用しグラデーションを設
定
– シンボル化しインスタンス名に colorBlock と命名
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 50. タイトル・ルビ作成
• 作成手順
– 描画ツールよりテキスト入力を選択しタイトル文字
(とある触手の自動生成)を入力
– 修正→分解の機能にて1文字ずつに分解
– サイズ・位置を調整する
– 同様にルビ用の領域を作成しルビを入力
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 53. マスクとなるパーツをまとめる
• 作成手順
– 「自」の背景となる四角を作成
– 右下の絵のように「自」の部分に配置する
– マスクとなる「自」以外の部分を選択しシンボル化
– インスタンス名をつける
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 54. 入力フィールドの作成
• 作成手順
– テキストツールにて説明文字をそれぞれ入力
– 説明文字を静止テキストに設定
– 同様にテキストツールにて入力フィールドを作成
– テキスト入力に設定し、インスタンス名をつける
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 57. 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も全てここに記述されています
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 58. 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. }
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 59. changeHeadText関数
1. function changeHeadText() {
2. // 入力フィールドの値を代入
3. var inputText:String = topInput.text;
4. // 1文字ずつ抽出して割り当て
5. toaruText.topFirstWord.text = inputText.charAt(0);
6. toaruText.topSecondWord.text = inputText.charAt(1);
7. }
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 60. changeBottomText関数
1. function changeBottomText() {
2. // 入力フィールドの値を代入
3. var inputText:String = bottomInput.text;
4. // 1文字ずつ抽出して割り当て
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. }
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 63. おまけ
• インスタンス:MovieClipのイベントなど
– MovieClip.onEnterFrame
• 1フレームすすむ毎に実行
– MovieClip.onPress
• マウスが押された時
– MovieClip.onRollOver
• マウスが重なった時
上記のイベント = 関数 でイベント発生時の処理を割り当てる事が出来ます
– MovieClip.hitTest(オブジェクト)
• 指定オブジェクトと衝突したかどうか(boolean)
これもゲーム作成とかいろいろ便利!
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 64. おまけ
• ActionScript 3.0ならさらに便利
– MovieClip.addEventListener(イベント, アクション)で追加
• 各種イベント
– Event.ENTER_FRAMEなど
– MouseEvent.DOUBLE_CLICKなど
– KeyboardEvent.RIGHTなど
• アクション(関数)の追加が複数可能
– AS2.0だとイベント= function () { 複数の関数呼び出し }
• AS2.0だと分割したテキストや困難だった縦書きも3.0なら
簡単でいろいろと便利です!
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 65. おまけ
アイコンに注目
Flashで作成したアプリは簡単にAIRアプリにする事も可能
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 66. まとめ
• アプリケーションのGUIデザインが描画ツールで直感的
に作成できる!
• さらにそれらをASで制御できる!
– 動的に生成したり動かしたり!
• 描画ツールと同等のことをASにて実現することも可能な
のでASで動的に作成するこも出来ます!
– 線や矩形ツールにはじまりフィルタや乗算まで!
わんくま同盟 大阪勉強会 #36 VS2010 CLT
- 67. 勉強してみたいあなたへ
• 公式マニュアル
– 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
わんくま同盟 大阪勉強会 #36 VS2010 CLT