• Like
とあるFlashの自動生成
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

とあるFlashの自動生成

  • 2,863 views
Published

下記のブログに補足記事がありますのでそちらもご覧下さい。 …

下記のブログに補足記事がありますのでそちらもご覧下さい。
http://d.hatena.ne.jp/Akineko/

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,863
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 秋猫
  • 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
  • 4. 発表に至った経緯 前回の大阪勉強会で失敗したからです…orz わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 5. 伝えたいこと • FlashでのGUIアプリ作成の快適さ – ActionScriptについてではなく、あくまでFlashに ついてです。 – Flash≒ActionScriptだけどFlash=ActionScript ではありません>< わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 6. 注意事項 • 今回の発表はActionScript 2.0についての内 容となっております。 – 現在主流となってきている3.0とは異なる部分が ありますのでご注意下さい。 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 7. 一時期流行りの 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
  • 18. 繰り返し • for each..in文(foreachじゃないよ!) 1. for each ( var 変数 in オブジェクト) { 2. // オブジェクトの各プロパティの値を 3. // 使用する処理 4. } わんくま同盟 大阪勉強会 #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
  • 24. FlashのUI説明 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 25. 僕の作業環境1 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 26. 僕の作業環境2 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 27. 作業環境について • ツールの配置は基本的に自由に変更する事が可能 – また配置を保存することも可能なので作業内容ご とに使い分ける事も出来ます。 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 28. ステージ • 白い部分 – swfファイルとして書き出した際の表示領域 – 背景色は変更可 • 灰色の部分 – 表示領域外 – オブジェクトの     配置は可能 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 29. プロパティ画面 • 未選択時はファイル自体の設定 – ActionScriptのバージョン – Flash Playerのバージョン – フレームレート – ステージのサイズ – ステージの色 その他、選択しているものごとの情 報が表示されます。 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 30. 描画ツール • Illustratorなどのベクター系画像編集ツールと ほぼ同等のツールがあります • これらのツールを使いイラストを描くのと同様の 操作でアプリのGUIを作成する事ができます。 • 描画されたものには 線 と 塗り の2種類が あり、線から塗りに変換することが可能ですが、 塗りから線への変換は不可です。 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 31. カラー • 「線」や「塗り」の色の変更が可能です。 • 「種類」よりグラデーションに 変更することも出来ます。 • 「色見本」にて作成した色を 保存しておく事も出来ます。 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 32. 整列 • オブジェクトの配置を調整する機能 – 1つまたは複数のオブジェクトを選択し、 位置揃え・等間隔に配置・サイズ揃え などを行うことが可能です。 – ステージを基準にすると ステージ内の中央に配置など いった事が出来ます。 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 33. 情報 • オブジェクトの情報表示・調整画面 – 縦・横のサイズや画面上の位置を数値にて 直接調整することが可能です。 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 34. 変形 • オブジェクトを変形させる事が可能 – 縦横のサイズを%にて調整 – 回転・傾きの調整 – 3Dオブジェクト用の機能有 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 35. シンボル化 • 描画ツールにて作成したものをシンボルに変換する際に 表示される画面 • 主な設定項目 – 名前 – 基準点 – タイプ • ムービクリップ • ボタン • グラフィック – クラス名 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 36. シンボルとは • シンボルとは – プログラミングのクラスに相当するもの – クラス名を付けることによりActionScriptで動的に生成すること が可能 – 同じアニメーションや見た目の複製を作成することが可能 – シンボルがステージ上に配置されたものをインスタンスと呼ぶ – インスタンスを使用すればファイル容量が軽減される わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 37. ライブラリ • 作成したシンボルの一覧画面 – ドラッグ&ドラップでステージ上にインスタンスの 生成が可能 – シンボルの情報の編集が可能 • 名前 • クラス名 – ダブルクリックで シンボル自体の編集へ わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 38. インスタンスのプロパティ • インスタンスごとの詳細な情報の表示・調整 画面 – インスタンス名 • 名前を付けることによりActionScriptにて制 御が可能 – 変形と同等の情報表示及び調整 – カラー効果 • 明度・着色・詳細・アルファ – ブレンド • 乗算・オーバーレイ・反転・etc... わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 39. タイムライン • レイヤーとフレームの編集画面 – レイヤーの追加・重ね順変更・ガイド化・マスク化   etc... – フレームの追加・位置調整・アニメーション化   etc... わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 40. レイヤー・フレーム • レイヤー – 画像編集ツールとほぼ同様と見ていただければOK • フレーム – Flashのアニメーションはフレーム単位で行われます。 – ActionScriptの実行結果もフレーム単位なのでfor文などのル ープ処理の結果は全ての処理が完了した後の結果のみが反 映されます。 – フレームの進むスピードは変更可 • 携帯だと12fps・Webは24fpsが一般的 • たまに30fpsも わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 41. フレームのプロパティ • 選択したフレームの編集が可能 – 名前 • ActionScriptによりこの名前を 指定して移動する事などが可能 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 42. アクション画面 • ActionScriptを記述する画面 – バージョンの選択 – 簡易リファレンス – シンタックスハイライト – インスタンスパス挿入 – 一括コメント化・解除 – 対象フレームへのピン わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 43. 出力・コンパイルエラー • 出力 – trace関数(print)などの出力表示画面 • コンパイルエラー – コンパイル時に発生したエラーの出力画面 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 44. FlashによるGUIアプリ作成 • 基本的な流れ 1. 描画ツールにてGUIパーツ作成 • ASによる作成も可能 2. シンボル化 3. インスタンス配置 • ASによる配置も可能 4.ActionScriptにてアニメーション制御や データ処理 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 45. というわけで とあるFlashの自動生成の作り方 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 46. とあるFlashの自動生成に必要なパーツ 各テキスト 色のブロック 文字の背景 説明文 入力フォーム わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 47. 仕組み • 主な処理はこんな感じ – 色のブロックに「とある触手の自動生成」の「自」 以外の文字・ルビ・「自」の背景の形のマスクをか けて表示する – そのマスクをかけた表示の上に「自」の文字を白 色で配置する – 入力フィールドに入力された文字を読み取って反 映する わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 48. 色のブロック作成 • 作成手順 – 描画ツールの矩形ツールを使用し四角を描画 – グラデーションツールを使用しグラデーションを設 定 – シンボル化しインスタンス名に colorBlock と命名 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 49. わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 50. タイトル・ルビ作成 • 作成手順 – 描画ツールよりテキスト入力を選択しタイトル文字 (とある触手の自動生成)を入力 – 修正→分解の機能にて1文字ずつに分解 – サイズ・位置を調整する – 同様にルビ用の領域を作成しルビを入力 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 51. わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 52. タイトル・ルビの設定 • 変化しないテキストはプロパティにて静止テキストへ – 静止テキストとは • 文字通り変更不可のテキスト • 変化させるテキストはダイナミックテキストへ設定しイン スタンス名をつける – ダイナミックテキストとは • インスタンス名をつけActionScriptによる制御が可能 わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 53. マスクとなるパーツをまとめる • 作成手順 – 「自」の背景となる四角を作成 – 右下の絵のように「自」の部分に配置する – マスクとなる「自」以外の部分を選択しシンボル化 – インスタンス名をつける わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 54. 入力フィールドの作成 • 作成手順 – テキストツールにて説明文字をそれぞれ入力 – 説明文字を静止テキストに設定 – 同様にテキストツールにて入力フィールドを作成 – テキスト入力に設定し、インスタンス名をつける わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 55. テキストのその他の設定 • その他にもこのような設定が可能です – 選択可能かどうか – HTMLとして扱うかどうか – 枠線の表示 – 文字の埋め込み(フォント) – 最大文字数 – etc... わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 56. パーツ完成! わんくま同盟 大阪勉強会 #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
  • 61. 1.  function changeRubyText() { 2.   // ルビ表示部は分割していないのでそのまま代入 3.   toaruText.ruby.text = rubyInput.text; 4.  } わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 62. コンパイルして完成 ね?簡単でしょ? わんくま同盟 大阪勉強会 #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
  • 68. 最後に Flashを使ってみたいなと思って頂けましたでしょうか? わんくま同盟 大阪勉強会 #36 VS2010 CLT
  • 69. ご清聴ありがとうございましたm(_ _)m わんくま同盟 大阪勉強会 #36 VS2010 CLT