Post on 30-Jan-2018
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
『パラパラ漫画アプリメーカー』を作る。
1
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
今回はパラパラ漫画を描いて、再⽣できるアプリを作ってみます。
下記のブロックはAndroidのみ現在対応してますが、このブロックを使わなくても、iOSのユーザーの⽅でも同じものが作れます。データブロックの⾚い⽮印のブロックが昇順⻘い⽮印のブロックが降順のブロックです。それぞれ、上がボタンを押すと、順番に切り替わります。下はタイマーで設定したタイミングで⾃動的に切り替わります。
【昇順ブロック 001⇒002⇒003】
【降順ブロック 003⇒002⇒001】
画像データはフォルダ名/ファイル名でつけます。 再⽣するときは、フォルダ名/ で設定します。
これでフォルダの中にあるファイルが名前の昇順/降順で再⽣されます。では作ってみましょう! 2
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
1-1.タイトルページのブロックを並べます。
1列⽬:画像表⽰ (タイトル画像⽤)2列⽬:ラベル (タイトル⽂字⽤)3列⽬:タイマー+ページ移動(⾃動的にページを移動)
1-2.ブロックに画像や⽂字を⼊れます。
3
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
1-3.レイアウトします。
HDMI / QHD / WVGAそれぞれにセッティングします。
画像表⽰ブロック
ラベルブロック
1-4.保存します。
アプリのタイトル名を
カテゴリは練習
公開設定を“みせない”に
保存ボタンで保存します。4
みせない ▼
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
5
①アプリアイコンをタップ
②SETTINGをタップ(iOS端末は⾃動的に画⾯が出ます。)
③ブラウザで登録した同じメールアドレス・パスワードを⼊⼒して
ボタンを押す
ログインしました という文字が出たら成功です。
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
1-5.アプリ側で再⽣します。
③アプリアイコンをタップ
タイトルがきれいに並んで⾃動的に次のページ(真っ⽩)に移動すれば成功です。
6
②⾃分のアプリをタップ
①SEARCHをタップ
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
2-1.パラパラ漫画を描く1ページ⽬のページを作ります。
あたらしくページを作成します。ブロックをつなぐ にもどり、 をおしてページを作ります。
7
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
1列⽬:ボタン+ペン+スクリーン+ペン選択 (ペンで⽂字を描けるようにするボタン)
2列⽬:ボタン+ページ移動 (描いたものをすべて消去するボタン)
3列⽬:ボタン+キャプチャ+スクリーン+画像保存(ペンで描いた画像を保存)
4列⽬:ボタン+ページ移動 (2枚⽬を描く画⾯に移動するボタン)
2-2.パラパラ漫画を描く1ページ⽬のブロックを並べます。
8
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
2-3.パラパラ漫画を描く1ページ⽬のブロックを設定します。
のちほど設定
保存名は、para/001
paraという名前のフォルダに001という画像を⼊れる形にしておきます。
iOS版のかたは、001で保存してください。
2-3.レイアウトします。
絵が描ける様真ん中はあける
消す ボタン
ペン ボタン
保存 ボタン
保存 ボタン
HDMI / QHD / WVGAそれぞれにセッティングします。
9
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
2-4.保存します。
OKボタンを押して、保存画⾯を出し、そのまま下の保存ボタンを押して上書き保存します。
2-5.アプリ側で再⽣してみます。 アプリの戻るボタンで⼀覧に戻り、もう⼀度⾃分のアプリを選択。Updateボタンを押してから、Playボタンを押します。これでアプリの情報が更新されて再⽣されます。画⾯が切り替わり、ペンで絵が描けて、保存が出来る。消すボタンで、絵を消すことが出来ればOKです。
10
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
3-1.2枚⽬のパラパラ漫画を描くページを作る。
2枚⽬・3枚⽬のパラパラ漫画を描くページは、2ページ⽬の1枚⽬のパラパラ漫画を描くページをコピーします。ブロックをつなぐタブに切り替えて、“ページをつくる/すてる”ボタンを押します。
ページの追加画⾯で、ページ名(パラパラ2)を⼊⼒、“コピーを作成する”のチェックボックスにチェックを⼊れて、コピーしたいページ(ページ2パラパラ1)をプルダウンから選択します。追加ボタンでページ作成をします。
ブロック列・設定・レイアウトすべてがコピー元のページ(ページ2 パラパラ1)と同じページが出来ました。
保存ボタンだけ、ボタンの中の⽂字表⽰を変えましょう。
11
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
3-2.保存ボタンの⽂字と保存名を書き換える。
para/001 を para/002 に書き換えます。iOS版のかたは、001を002に書き換えです。
保存 を 2枚⽬保存 に書き換えます。
3-3.2ページ⽬(パラパラ1)と3ページ(パラパラ2)をつなぐまず2ページ⽬に戻ります。 ページ名横の三⾓⽮印ボタンで1つ前のページ戻ります。
ページ移動ボタンを3に変更します。OKボタンでデータを保存します。
4ページ⽬となる3枚⽬のパラパラ漫画を描くページも同様にコピーして作りましょう。
12
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
4-1.3枚⽬のパラパラ漫画を描くページをコピーで作成
3ページ⽬の、“パラパラ2”を作ったのと同様にページをコピーして、パラパラ3と名をつけて、コピーにチェックを⼊れて、3ページ⽬をコピーします。
4-2.ブロック設定を書き直す。
para/003
3枚⽬保存
パラパラ再⽣
13いよいよ、描いた3枚の画像をパラパラ再⽣するページを作ります!
(iOSの⽅は、003に)
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
5-1.(Androidの⽅)パラパラ再⽣ページを作る。
※iOSの⽅は17ページの6-1に⾶んでください。
5-2.4ページに戻り、ページ移動ボタンをつなぐ
14
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
5-3.ブロックを並べる
5ページ⽬に戻って、図のように並べます。
para/に設定することで001⇒002⇒003と順次表⽰する。
5-4.設定を⼊⼒します。
15
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
5-5.ブロックを並べる
レイアウトします。 HD/QHD/WVGAすべてに⾏います。
5-6.保存して再⽣してみましょう。
OKボタンで、保存ボタンをそのまま押し、上書きします。AndroidのアプリJointAppsPlayerで最後の確認です。Updateボタンを押してから、Playしてみましょう。 P.27へGO! 16
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
17
6-1.(iPhone/iPadの⽅)パラパラ再⽣ページを作る。
1列⽬:1枚⽬を描くで描いた絵を表⽰
2列⽬:1秒後に次のページに移動
3列⽬: ボタンを押してスタートページに戻ります。
iOSの⽅は昇降順ブロックではなく、ページ移動をタイマーで⾏うことでパラパラを実現します。
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
18
6-2.(iPhone/iPadの⽅)ブロックを並べる
iOSの⽅は昇降順ブロックではなく、ページ移動をタイマーで⾏うことでパラパラを実現します。
001
1ページ
ボタン名:タイトル画面へ離した時の画像:オレンジ押した時の画像:オレンジ
待ち時間:1再生回数:1回のみ
※あとで設定します。
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
19
6-3.(iPhone/iPadの⽅)レイアウトする
を押して、iOSのタブに切り替え、iPad/iPhone
それぞれの限界枠にあわせてボタンを配置します。
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
6-4.2枚⽬の再⽣ページをつくる
2枚⽬の再⽣ページは、5ページ⽬の1枚⽬の再⽣をコピーします。ブロックをつくる/つなぐタブに切り替えて、“ページをつくる/すてる”ボタンを押します。
ページの追加画⾯で、ページ名(再⽣2)を⼊⼒、“コピーを作成する”のチェックボックスにチェックを⼊れて、コピーしたいページ(ページ5 再⽣)をプルダウンから選択します。追加ボタンでページ作成をします。
20
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
21
6-5.(iPhone/iPadの⽅)再⽣2の設定
002
※あとで設定します。
に切り替えて、データを002に変えます
レイアウトはそのままにしておきます。
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
6-6.3枚⽬の再⽣ページをつくる
3枚⽬の再⽣ページは、6ページ⽬の2枚⽬の再⽣をコピーします。ブロックをつくる/つなぐタブに切り替えて、“ページをつくる/すてる”ボタンを押します。
ページの追加画⾯で、ページ名(再⽣3)を⼊⼒、“コピーを作成する”のチェックボックスにチェックを⼊れて、コピーしたいページ(ページ6 再⽣2)をプルダウンから選択します。追加ボタンでページ作成をします。
22
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
23
6-7.(iPhone/iPadの⽅)再⽣3の設定
003
※あとで設定します。
に切り替えて、データを003に変えます
レイアウトはそのままにしておきます。
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
24
6-8.(iPhone/iPadの⽅)再⽣ページをつなぐ
遷移先:6
遷移先:7
遷移先:5
再⽣から 再⽣2へつなぎます。
再⽣2から 再⽣3へつなぎます。
再⽣3から 再⽣へつなぎます。これで5・6・7ページを1秒ごとにループします。
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
25
6-9.保存します。
そのまま上書き保存
Copyright c 2015 Digital Hollywood Co. Ltd All Rights Reserved
7.再⽣してみる。(画⾯はAndroidですが、iPhoneも同じ⼿順です)
Updateボタンを押してから、Playボタンで再⽣します。
1. ペンで書く2.保存する3.次へボタンで次へ
これを3回⾏います。最後にパラパラ再⽣ボタンを押すと…。
3コマのパラパラ漫画が再⽣されれば⼤成功です!
枚数を増やしてもう少し⻑いパラパラを作る事も出来ますし、4コマ漫画とかもできますね!
⾊々試してみてください。
See You! 26