狠狠撸

自己紹介

? 名前　秋猫
? お仕事　携帯向け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にてアニメーション制御や
データ処理


というわけで

とある贵濒补蝉丑の自动生成の作り方


とある贵濒补蝉丑の自动生成に必要なパーツ

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

説明文

入力フォーム


仕組み

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


色のブロック作成

? 作成手順
– 描画ツールの矩形ツールを使用し四角を描画
– グラデーションツールを使用しグラデーションを設
定
– シンボル化しインスタンス名に 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


狠狠撸

とある贵濒补蝉丑の自动生成

More Related Content

とある贵濒补蝉丑の自动生成