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で作るデジタル絵本” 勉強会②

2,585 views

Published on

https://www.facebook.com/TonosamaLabo

  • Be the first to comment

㉝“知育アプリを作ろう! Kwikで作るデジタル絵本” 勉強会②

  1. 1. Kwik勉強会 ㉝知育アプリを作ろう!   Kwikで作るデジタル絵本その2
  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/ – 日本語チュートリアル •  http://mobilemedia.daynight.jp/kwik
  9. 9. デジタルブックをつくろう! kwikを使ってみよう ※Macの場合を解説します。Windowsは自分でがんばってください・・・。
  10. 10. プロジェクトを作ろう!① •  いちばん左のボタンを押 して、New Projectを作ろ う! •  Nameにプロジェクト名を 入れよう!(英語でスペー スとか変なの使わない) •  New iPad、横を選ぼう
  11. 11. プロジェクトを作ろう!② •  新しいファイルが開かれ る!(Page1.psd) •  プロジェクトは、書類 →kwik→プロジェクト名の フォルダに保存される! •  作業を中断したいときは、 psdを保存してPhotoshop を閉じよう!
  12. 12. 再開するには…? •  まんなかのボタンを押して、 プロジェクトを読み込も う! •  プロジェクトのフォルダの 中に、.kwkという拡張子の ファイルがあるからそれを 選ぼう!
  13. 13. パネルの説明 •  プロジェクトを作成するとパ ネルにいろんな機能が表示 される! •  一番上の段は、タブになっ ている!青い点が選択中の しるし! •  真ん中がプロジェクトで、 PUBLISHを押すと書き出し ができる! •  一番下のアイコンはオプショ ンになってる!青がONで灰 色がOFF
  14. 14. ページを作ろう kwikを使ってみよう ※Macの場合を解説します。Windowsは自分でがんばってください・・・。
  15. 15. 背景を作ろう① •  一番下のレイヤーが背景 レイヤーになります。 •  ページめくりの当たり判定 は、背景レイヤーにつきま す。 •  レイヤー名は、半角英語 で、スペースや日本語は 禁止。数字は使えるけど、 数字から始まる名前は禁 止。記号とかも使えませ ん。
  16. 16. 背景を作ろう② •  とりあえず、レイヤー名を BGにして、背景を書いて みましょう!
  17. 17. タイトルを作ろう •  タイトルロゴを作りましょ う! •  レイヤーを新規作成して、 TITLEという名前にします。 •  テキストでタイトルを作り ましょう。
  18. 18. なまえをかこう •  おなじように名前のレイ ヤーを作りましょう! •  NAMEというレイヤー名に します。 •  テキストで自分の名前を 入れます。
  19. 19. 次のページを作ろう •  TOOLSETの一番左のを選 ぼう! •  Add new pageのアイコンを 押してページを作ろう! •  ダイアログにはページのファ イル名をいれよう!今回は Page2にしよう! •  チェックボックスをつけてお くと今のページの状態がコ ピーされるのでつけておこ う!
  20. 20. ページの情報 •  左側の書類みたいのを押 すと、プロジェクトの中の ページ一覧がでる! •  ページをクリックするとそ のページのPDFを編集で きます。
  21. 21. いらないのをけそう •  とりあえず、TITLEとNAME はいらないのでレイヤー ごと削除しよう!
  22. 22. キャラを追加しよう① •  素材を開いて、コピーしよ う!
  23. 23. キャラを追加しよう② •  レイヤーの名前は、 Animal1にしよう!
  24. 24. レイヤーの名前 •  レイヤー名は、半角英語で、スペースや日本 語は禁止。数字は使えるけど、数字から始ま る名前は禁止。記号とかも使えません。 •  ページの中に、同じ名前のレイヤーがあって はいけません。 •  レイヤーの名前は、最終的にプログラムの変 数名になります。
  25. 25. シミュレーターで動かそう kwikを使ってみよう ※Macの場合を解説します。Windowsは自分でがんばってください・・・。
  26. 26. Publishしよう •  真ん中のPUBLISHをおそ う! •  一番下の真ん中のやつが 青くなってることを確認し よう!(青くなってないと、 画像が書き出しされない ><) •  ダイアログが出たら成 功!
  27. 27. 失敗したら・・・ •  レイヤーの名前が日本語 だったりすると失敗する! •  Closeをおしてやりなおそ う!
  28. 28. 時間短縮! •  ちなみに、下のほうのま んなかのやつをOFFにす ると、画像の書き出しをし なくなるので、はやく PUBLISHできる! •  なので、場所だけ直した いとかの時は、OFFにしよ う!(逆に、うまくいかな かったらONでやりなおそ う!)
  29. 29. Coronaを起動しよう •  PUBLISHがうまくいくと、 CoronaSDKが起動する! •  左から二番目の再生ボタ ンをおそう! •  ファイル選択画面になる ので、プロジェクトの保存 先のbuildフォルダの、 main.luaをえらぼう! •  下の方の端末はiPadにし よう!
  30. 30. できた! •  うまくいけば、シミュレー ターが起動する!!! •  フリックの動きで、次の ページに移動する! •  やった完成!
  31. 31. 動きをつけてみよう kwikを使ってみよう
  32. 32. キャラを追加しよう •  Animal1をコピーして Animal5までつくろう
  33. 33. 回転させよう! •  Animal1のレイヤーを選択 した状態で、Rotation Widgetをおそう! •  ウィンドウが出てくるので Createをおそう!
  34. 34. ドキドキさせよう! •  Animal2のレイヤーを選択 した状態で、Pulse Widget をおそう! •  ウィンドウが出てくるので foreverをえらんだ後に、 Createをおそう!
  35. 35. バウンスさせよう! •  Animal3のレイヤーを選択 した状態で、Pulse Widget をおそう! •  ウィンドウが出てくるので foreverをえらんだ後に、 Createをおそう!
  36. 36. パチパチさせよう! •  Animal4のレイヤーを選択 した状態で、Blink Widget をおそう! •  ウィンドウが出てくるので foreverをえらんだ後に、 Createをおそう!
  37. 37. シェィクさせよう! •  Animal5のレイヤーを選択 した状態で、Shake Widget をおそう! •  ウィンドウが出てくるので foreverをえらんだ後に、 Createをおそう!
  38. 38. まちがえたら・・・? •  コンポーネントを選択して ダブルクリックすると再編 集できる!(名前は変えら れないので注意><) •  いらなくなったら、ゴミ箱を 押したら消せる!
  39. 39. うごかしてみよう •  いろいろ動く! •  ウィンドウの値を変えてみ よう!
  40. 40. 動きに反応させよう kwikを使ってみよう
  41. 41. いどうできるようにしよう •  Animal1のレイヤーを選択 した状態で、Drag Object をおそう! •  ウィンドウが出てくるので Createをおそう!
  42. 42. ボタンにしてみよう •  Animal5のレイヤーを選択 した状態で、Add Buttonを おそう! •  ウィンドウが出てくるので CommonのReload Pageを 選んで、Createをおそう!
  43. 43. うごかしてみよう •  左上のを自由に動かせ る! •  右下のを押すとリセットす る!
  44. 44. ほかにも・・・ kwikを使ってみよう ※機能だけなんとなくしょうかいします
  45. 45. アニメーション! •  開始と終了の位置を指定 したアニメーションなどが できます!
  46. 46. おとがでたりする! •  ボタンを設定したり、音を 鳴らせます!
  47. 47. 物理エンジン! •  ボタンを設定したり、音を 鳴らせます!
  48. 48. ほかにも •  ほかにもいろいろできる みたい! •  チュートリアルで挑戦して みよう! 日本語チュートリアル http://mobilemedia.daynight.jp/kwik
  49. 49. まとめ •  Kwikたのしい!かんたんに絵本が作れる!   •  カッコイイのが出来たら、実機転送してみよ う!Coronaの書籍とかを参考にやってみよ う!   •  極めるといろんなことができるから挑戦しよ う!プログラムとかもかけるみたい!  
  50. 50. とのさまラボ! •  勉強会に参加した人どうしのコミニュティがほしい! 勉強会の開催日時の告知がほしい! という意見をみなさまからいただいたので、 コミニュティを作成しました! •  毎週木曜日は、もくもく勉強会も 開催しています! ぜひ「いいね!」をお願いします! h,ps://www.facebook.com/TonosamaLabo  
  51. 51. 「もくもく」勉強会 •  毎週木曜日に、「もくもく」勉強会やってます! •  場所は新宿!facebookページからお申し込みください! h,ps://www.facebook.com/TonosamaLabo  
  52. 52. おわり 主催(共同開催): 株式会社 gooya
 http://www.gooya.co.jp/ メドレー株式会社
 http://www.medley.co.jp/ 講師:西田 寛輔 (Tonosamart)
 http://www.facebook.com/tonosamart

×