『パラパラ漫画アプリメーカー』を作る。 · PDF...

Copyright ｃ 2015 Digital Hollywood Co. Ltd All Rights Reserved

『パラパラ漫画アプリメーカー』を作る。

1


今回はパラパラ漫画を描いて、再⽣できるアプリを作ってみます。

下記のブロックはAndroidのみ現在対応してますが、このブロックを使わなくても、iOSのユーザーの⽅でも同じものが作れます。データブロックの⾚い⽮印のブロックが昇順⻘い⽮印のブロックが降順のブロックです。それぞれ、上がボタンを押すと、順番に切り替わります。下はタイマーで設定したタイミングで⾃動的に切り替わります。

【昇順ブロック 001⇒002⇒003】

【降順ブロック 003⇒002⇒001】

画像データはフォルダ名/ファイル名でつけます。再⽣するときは、フォルダ名/ で設定します。

これでフォルダの中にあるファイルが名前の昇順/降順で再⽣されます。では作ってみましょう！ 2


1-1.タイトルページのブロックを並べます。

１列⽬：画像表⽰（タイトル画像⽤）２列⽬：ラベル（タイトル⽂字⽤）３列⽬：タイマー＋ページ移動（⾃動的にページを移動）

1-2.ブロックに画像や⽂字を⼊れます。

3


1-3.レイアウトします。

HDMI / QHD / WVGAそれぞれにセッティングします。

画像表⽰ブロック

ラベルブロック

1-4.保存します。

アプリのタイトル名を

カテゴリは練習

公開設定を“みせない”に

保存ボタンで保存します。4

みせない ▼


5

①アプリアイコンをタップ

②SETTINGをタップ（iOS端末は⾃動的に画⾯が出ます。）

③ブラウザで登録した同じメールアドレス・パスワードを⼊⼒して

ボタンを押す

ログインしましたという文字が出たら成功です。


1-5.アプリ側で再⽣します。

③アプリアイコンをタップ

タイトルがきれいに並んで⾃動的に次のページ（真っ⽩）に移動すれば成功です。

6

②⾃分のアプリをタップ

①SEARCHをタップ


2-1.パラパラ漫画を描く1ページ⽬のページを作ります。

あたらしくページを作成します。ブロックをつなぐにもどり、をおしてページを作ります。

7


１列⽬：ボタン＋ペン＋スクリーン＋ペン選択（ペンで⽂字を描けるようにするボタン）

２列⽬：ボタン＋ページ移動（描いたものをすべて消去するボタン）

３列⽬：ボタン＋キャプチャ＋スクリーン＋画像保存（ペンで描いた画像を保存）

４列⽬：ボタン＋ページ移動（2枚⽬を描く画⾯に移動するボタン）

2-2.パラパラ漫画を描く1ページ⽬のブロックを並べます。

8


2-3.パラパラ漫画を描く1ページ⽬のブロックを設定します。

のちほど設定

保存名は、para/001

paraという名前のフォルダに001という画像を⼊れる形にしておきます。

iOS版のかたは、001で保存してください。

2-３.レイアウトします。

絵が描ける様真ん中はあける

消すボタン

ペンボタン

保存ボタン

保存ボタン

HDMI / QHD / WVGAそれぞれにセッティングします。

9



OKボタンを押して、保存画⾯を出し、そのまま下の保存ボタンを押して上書き保存します。

2-５.アプリ側で再⽣してみます。アプリの戻るボタンで⼀覧に戻り、もう⼀度⾃分のアプリを選択。Updateボタンを押してから、Playボタンを押します。これでアプリの情報が更新されて再⽣されます。画⾯が切り替わり、ペンで絵が描けて、保存が出来る。消すボタンで、絵を消すことが出来ればOKです。

10


３-１.２枚⽬のパラパラ漫画を描くページを作る。

２枚⽬・３枚⽬のパラパラ漫画を描くページは、２ページ⽬の１枚⽬のパラパラ漫画を描くページをコピーします。ブロックをつなぐタブに切り替えて、“ページをつくる/すてる”ボタンを押します。

ページの追加画⾯で、ページ名（パラパラ２）を⼊⼒、“コピーを作成する”のチェックボックスにチェックを⼊れて、コピーしたいページ（ページ２パラパラ１）をプルダウンから選択します。追加ボタンでページ作成をします。

ブロック列・設定・レイアウトすべてがコピー元のページ（ページ２パラパラ１）と同じページが出来ました。

保存ボタンだけ、ボタンの中の⽂字表⽰を変えましょう。

11


３-２.保存ボタンの⽂字と保存名を書き換える。

para/001 を para/002 に書き換えます。iOS版のかたは、001を002に書き換えです。

保存を２枚⽬保存に書き換えます。

３-３.２ページ⽬（パラパラ１）と３ページ（パラパラ２）をつなぐまず２ページ⽬に戻ります。ページ名横の三⾓⽮印ボタンで１つ前のページ戻ります。

ページ移動ボタンを３に変更します。OKボタンでデータを保存します。

４ページ⽬となる３枚⽬のパラパラ漫画を描くページも同様にコピーして作りましょう。

12


４-１.３枚⽬のパラパラ漫画を描くページをコピーで作成

３ページ⽬の、“パラパラ２”を作ったのと同様にページをコピーして、パラパラ3と名をつけて、コピーにチェックを⼊れて、３ページ⽬をコピーします。

４-２.ブロック設定を書き直す。

para/003

３枚⽬保存

パラパラ再⽣

13いよいよ、描いた３枚の画像をパラパラ再⽣するページを作ります！

（iOSの⽅は、003に）


5-１.（Androidの⽅）パラパラ再⽣ページを作る。

※iOSの⽅は17ページの6-1に⾶んでください。

5-２.４ページに戻り、ページ移動ボタンをつなぐ

14


5-３.ブロックを並べる

５ページ⽬に戻って、図のように並べます。

para/に設定することで００１⇒００２⇒００３と順次表⽰する。

5-４.設定を⼊⼒します。

15


5-5.ブロックを並べる

レイアウトします。 HD/QHD/WVGAすべてに⾏います。

5-6.保存して再⽣してみましょう。

OKボタンで、保存ボタンをそのまま押し、上書きします。AndroidのアプリJointAppsPlayerで最後の確認です。Updateボタンを押してから、Playしてみましょう。 P.27へGO! 16


17

6-1.（iPhone/iPadの⽅）パラパラ再⽣ページを作る。

１列⽬：１枚⽬を描くで描いた絵を表⽰

２列⽬：１秒後に次のページに移動

３列⽬：ボタンを押してスタートページに戻ります。

iOSの⽅は昇降順ブロックではなく、ページ移動をタイマーで⾏うことでパラパラを実現します。


18

6-2.（iPhone/iPadの⽅）ブロックを並べる

iOSの⽅は昇降順ブロックではなく、ページ移動をタイマーで⾏うことでパラパラを実現します。

001

1ページ

ボタン名：タイトル画面へ離した時の画像：オレンジ押した時の画像：オレンジ

待ち時間：１再生回数：１回のみ

※あとで設定します。


19

6-3.（iPhone/iPadの⽅）レイアウトする

を押して、iOSのタブに切り替え、iPad/iPhone

それぞれの限界枠にあわせてボタンを配置します。


6-4.２枚⽬の再⽣ページをつくる

２枚⽬の再⽣ページは、5ページ⽬の１枚⽬の再⽣をコピーします。ブロックをつくる/つなぐタブに切り替えて、“ページをつくる/すてる”ボタンを押します。

ページの追加画⾯で、ページ名（再⽣２）を⼊⼒、“コピーを作成する”のチェックボックスにチェックを⼊れて、コピーしたいページ（ページ5 再⽣）をプルダウンから選択します。追加ボタンでページ作成をします。

20


21

6-5.（iPhone/iPadの⽅）再⽣２の設定

002


に切り替えて、データを002に変えます

レイアウトはそのままにしておきます。


6-6.3枚⽬の再⽣ページをつくる

３枚⽬の再⽣ページは、6ページ⽬の２枚⽬の再⽣をコピーします。ブロックをつくる/つなぐタブに切り替えて、“ページをつくる/すてる”ボタンを押します。

ページの追加画⾯で、ページ名（再⽣３）を⼊⼒、“コピーを作成する”のチェックボックスにチェックを⼊れて、コピーしたいページ（ページ６再⽣２）をプルダウンから選択します。追加ボタンでページ作成をします。

22


23

6-7.（iPhone/iPadの⽅）再⽣3の設定

003


に切り替えて、データを003に変えます

レイアウトはそのままにしておきます。


24

6-8.（iPhone/iPadの⽅）再⽣ページをつなぐ

遷移先：6

遷移先：7

遷移先：5

再⽣から再⽣２へつなぎます。

再⽣2から再⽣3へつなぎます。

再⽣3から再⽣へつなぎます。これで5・6・7ページを1秒ごとにループします。


25


そのまま上書き保存


7.再⽣してみる。（画⾯はAndroidですが、iPhoneも同じ⼿順です）

Updateボタンを押してから、Playボタンで再⽣します。

１. ペンで書く２．保存する３．次へボタンで次へ

これを３回⾏います。最後にパラパラ再⽣ボタンを押すと…。

３コマのパラパラ漫画が再⽣されれば⼤成功です！

枚数を増やしてもう少し⻑いパラパラを作る事も出来ますし、４コマ漫画とかもできますね！

⾊々試してみてください。

See You! 26

『パラパラ漫画アプリメーカー』を作る。 · PDF...

Documents

Transcript of 『パラパラ漫画アプリメーカー』を作る。 · PDF...