Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

㉜知育アプリを作ろう! Kwikで作るデジタル絵本

5,589 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
  • Be the first to comment

㉜知育アプリを作ろう! Kwikで作るデジタル絵本

  1. 1. Kwik勉強会 ㉜知育アプリを作ろう!   Kwikで作るデジタル絵本
  2. 2. 自分の書いたイラストで
 デジタル絵本が作りたい! でも、なんだか大変そう・・・
  3. 3. ここがたいへん! •  アプリの作り方がわからない!どうやってつく ればいいの? •  開発環境にお金がかかりそう! •  そもそも、プログラムわからない>< ↓ でも、Photoshopくらいは使える! (だって、デザイナーだし・・・)
  4. 4. なんとかなるよ! •  Photoshopだけで、デジタル絵本が作れる! •  プログラムできなくても使える!(できたらさら に夢が広がる) •  しかも、対応環境が多い! •  無料で始められる! •  MacでもWindowsでも開発できる!(Macのほ うが有利)
  5. 5. kwik •  KWIK2 – http://www.kwiksher.com/
  6. 6. Kwikについて •  プログラム不要!デザイナーさんでも安心! •  無料で商用利用可能(機能制限あり) •  デジタル絵本に特化 •  Photoshop用プラグイン •  Coronaのエンジンを利用 •  物理エンジン搭載(Coronaだし!) •  効果音やBGMの再生も可能(Coronaだし!) •  iOSやAndroidに対応したアプリが作れる! (Coronaだし!)
  7. 7. デメリット •  PhotoshopCS5以上が必要>< •  端末固有の機能やUIが使えないので、本格 的なアプリ作成とはちょっと違う •  日本語ローカライズされていない。 •  レイヤーの命名規則など若干めんどくさい •  無料だと機能制限あり(6ページまでしか作れ ない)
  8. 8. こまったときは? •  こまったときは、ホームページを見よう! –  Learn  Kwik  2   •  http://www.kwiksher.com/learn-kwik2/ –  Tutorials •  http://www.kwiksher.com/tutorials-kwik/
  9. 9. インストールしてみよう! kwikを使ってみよう ※Macの場合を解説します。Windowsは自分でがんばってください・・・。
  10. 10. Photoshop① •  KwikはPhotoshopのプラグ インなので、Photoshopが必 要! •  バージョンは、CS5以降が 必要(エレメンツは不可) •  体験版があるので持ってな い人はダウンロードしてみよ う! •  AdobeIDの作成(無料)が必 要なので、持ってない人は 登録しよう! h(ps://crea/ve.adobe.com/products/photoshop  
  11. 11. Photoshop② •  KwikはPhotoshopのプラ グインなので、 ExtensionManagerも必 要! •  PhotoshopCCを使ってい る人は、一緒にダウン ロードしよう! h(ps://crea/ve.adobe.com/products/extension-­‐ manager  
  12. 12. CoronaSDK① •  Coronaのホームペー ジからダウンロード •  無料会員登録が必要 なので、登録しよう! http://www.coronalabs.com/
  13. 13. CoronaSDK② •  Macの場合は、Downloadを押 すとdmgファイルがダウン ロード出来る!
  14. 14. CoronaSDK③ •  dmgをダブルクリックすると、 規約が表示されるので納 得したらAgreeをおそう! •  オレンジ色のフォルダを、 青いフォルダにドラッグしよ う!
  15. 15. Kwik① •  kwiksherのホームページ を開こう! •  FREE TRIALを押してみよ う! •  名前とメールアドレスを入 力すると、ダウンロード ページにいける! •  インストーラーをダウン ロードしよう! http://www.kwiksher.com/
  16. 16. Kwik② •  zipを展開するとzxpが出て くるのでダブルクリック! •  ExtensionManagerが起動 するので、プラグインをイ ンストールしよう!
  17. 17. Kwik③ •  Photoshopを起動しよう! •  メニューのウィンドウ→エ クステンションにKwik2が 増えてる! •  Kwik2を選ぶとスプラッ シュが表示される! •  まずは、FlashのSetupを おそう!
  18. 18. Kwik④ •  ブラウザに設定マネー ジャが表示されるので、グ ローバルセキュリティー設 定を右の図を参考にして 設定しよう! •  編集→追加する→フォル ダーの参照を選ぼう! •  これをやらないと、コード とかが保存されない時が あるから注意!
  19. 19. Kwik⑤ •  Kwikのスプラッシュを閉じ て、左下の設定アイコンを おそう! •  右の図を参考に、Corona のパスを設定しよう!
  20. 20. インストールまとめ •  Photoshop – CS5以降をインストールする – ExtensionManagerもインストールする •  Corona – インストールする •  Kiwik – インストールした後、flashとCoronaを設定する
  21. 21. デジタルブックをつくろう! kwikを使ってみよう ※Macの場合を解説します。Windowsは自分でがんばってください・・・。
  22. 22. プロジェクトを作ろう!① •  いちばん左のボタンを押 して、New Projectを作ろ う! •  Nameにプロジェクト名を 入れよう!(英語でスペー スとか変なの使わない) •  New iPad、横を選ぼう
  23. 23. プロジェクトを作ろう!② •  新しいファイルが開かれ る!(Page1.psd) •  プロジェクトは、書類 →kwik→プロジェクト名の フォルダに保存される! •  作業を中断したいときは、 psdを保存してPhotoshop を閉じよう!
  24. 24. 再開するには…? •  まんなかのボタンを押して、 プロジェクトを読み込も う! •  プロジェクトのフォルダの 中に、.kwkという拡張子の ファイルがあるからそれを 選ぼう!
  25. 25. パネルの説明 •  プロジェクトを作成するとパ ネルにいろんな機能が表示 される! •  一番上の段は、タブになっ ている!青い点が選択中の しるし! •  真ん中がプロジェクトで、 PUBLISHを押すと書き出し ができる! •  一番下のアイコンはオプショ ンになってる!青がONで灰 色がOFF
  26. 26. ページを作ろう kwikを使ってみよう ※Macの場合を解説します。Windowsは自分でがんばってください・・・。
  27. 27. 背景を作ろう① •  一番下のレイヤーが背景 レイヤーになります。 •  ページめくりの当たり判定 は、背景レイヤーにつきま す。 •  レイヤー名は、半角英語 で、スペースや日本語は 禁止。数字は使えるけど、 数字から始まる名前は禁 止。記号とかも使えませ ん。
  28. 28. 背景を作ろう② •  とりあえず、レイヤー名を BGにして、背景を書いて みましょう!
  29. 29. タイトルを作ろう •  タイトルロゴを作りましょ う! •  レイヤーを新規作成して、 TITLEという名前にします。 •  テキストでタイトルを作り ましょう。
  30. 30. なまえをかこう •  おなじように名前のレイ ヤーを作りましょう! •  NAMEというレイヤー名に します。 •  テキストで自分の名前を 入れます。
  31. 31. 次のページを作ろう •  TOOLSETの一番左のを選 ぼう! •  Add new pageのアイコンを 押してページを作ろう! •  ダイアログにはページのファ イル名をいれよう!今回は Page2にしよう! •  チェックボックスをつけてお くと今のページの状態がコ ピーされるのでつけておこ う!
  32. 32. ページの情報 •  左側の書類みたいのを押 すと、プロジェクトの中の ページ一覧がでる! •  ページをクリックするとそ のページのPDFを編集で きます。
  33. 33. いらないのをけそう •  とりあえず、TITLEとNAME はいらないのでレイヤー ごと削除しよう!
  34. 34. キャラを追加しよう① •  素材を開いて、コピーしよ う!
  35. 35. キャラを追加しよう② •  レイヤーの名前は、 Animal1にしよう!
  36. 36. レイヤーの名前 •  レイヤー名は、半角英語で、スペースや日本 語は禁止。数字は使えるけど、数字から始ま る名前は禁止。記号とかも使えません。 •  ページの中に、同じ名前のレイヤーがあって はいけません。 •  レイヤーの名前は、最終的にプログラムの変 数名になります。
  37. 37. シミュレーターで動かそう kwikを使ってみよう ※Macの場合を解説します。Windowsは自分でがんばってください・・・。
  38. 38. Publishしよう •  真ん中のPUBLISHをおそ う! •  一番下の真ん中のやつが 青くなってることを確認し よう!(青くなってないと、 画像が書き出しされない ><) •  ダイアログが出たら成 功!
  39. 39. 失敗したら・・・ •  レイヤーの名前が日本語 だったりすると失敗する! •  Closeをおしてやりなおそ う!
  40. 40. 時間短縮! •  ちなみに、下のほうのま んなかのやつをOFFにす ると、画像の書き出しをし なくなるので、はやく PUBLISHできる! •  なので、場所だけ直した いとかの時は、OFFにしよ う!(逆に、うまくいかな かったらONでやりなおそ う!)
  41. 41. Coronaを起動しよう •  PUBLISHがうまくいくと、 CoronaSDKが起動する! •  左から二番目の再生ボタ ンをおそう! •  ファイル選択画面になる ので、プロジェクトの保存 先のbuildフォルダの、 main.luaをえらぼう! •  下の方の端末はiPadにし よう!
  42. 42. できた! •  うまくいけば、シミュレー ターが起動する!!! •  フリックの動きで、次の ページに移動する! •  やった完成!
  43. 43. ほかにも・・・ kwikを使ってみよう ※機能だけなんとなくしょうかいします
  44. 44. アニメーション! •  開始と終了の位置を指定 したアニメーションなどが できます!
  45. 45. おとがでたりする! •  ボタンを設定したり、音を 鳴らせます!
  46. 46. 物理エンジン! •  ボタンを設定したり、音を 鳴らせます!
  47. 47. ほかにも •  ほかにもいろいろできる みたい! •  チュートリアルで挑戦して みよう! Tutorials http://www.kwiksher.com/tutorials-kwik/
  48. 48. まとめ •  Kwikたのしい!かんたんに絵本が作れる!   •  カッコイイのが出来たら、実機転送してみよ う!Coronaの書籍とかを参考にやってみよ う!   •  極めるといろんなことができるから挑戦しよ う!プログラムとかもかけるみたい!  
  49. 49. とのさまラボ! •  勉強会に参加した人どうしのコミニュティがほしい! 勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました! •  毎週木曜日は、もくもく勉強会も 開催しています! ぜひ「いいね!」をお願いします! h(ps://www.facebook.com/TonosamaLabo  
  50. 50. 「もくもく」勉強会 •  毎週木曜日に、「もくもく」勉強会やってます! •  場所は新宿!facebookページからお申し込みください! h(ps://www.facebook.com/TonosamaLabo  
  51. 51. おわり(?) 主催(共同開催): 株式会社 gooya
 http://www.gooya.co.jp/ メドレー株式会社
 http://www.medley.co.jp/ 講師:西田 寛輔 (Tonosamart)
 http://www.facebook.com/tonosamart
  52. 52. 緊急告知 キンキュウコクチ
  53. 53. 今年の夏休みは何してますか?
  54. 54. 絵本作るしかないでしょ!
  55. 55. 第1回!トレモ郎の カジュアルゲーム& デジタル絵本コンテスト 2013年7月1日∼8月31日 締め切りまでに、アプリの提出が必要です。 募集期間(予定)
  56. 56. アプリの所有権を有しているチーム及び個人 ※応募書類および問い合わせなどの対応が日本語で行えること 応募資格(予定) スマートフォンで動作するカジュアルゲームまたはデジタル絵本で 2013年6月1日時点で未発表のもの 過去に作成したアプリの改造、続編、過去に発表した絵本のデジタル版などの応募は可能です。 応募条件(予定)
  57. 57. まずはエントリーしよう!
  58. 58. コンテストの詳細などをお伝えします! http://cts.sc/to まずはエントリーをお願いします! ※スポンサー企業募集しています!お問い合わせ下さい!

×