Your SlideShare is downloading. ×
0
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
とあるFlashの自動生成
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

とあるFlashの自動生成

2,950

Published on

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

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,950
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
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

×