【番外編】LINEアニメスタンプをAnimateを使って作る

クラゲふにゃ！AnimateでLINEアニメスタンプが作れるって本当ふにゃ！？

フフフフ…その通りだよ。 なんせアプリケーション名が「Animate」ってくらいだからね。

前のコマを半透明に表示させて確認しながら描けたり、 アニメ作りに特化した機能がそろってるよ。

ふにゃもアニメスタンプを作って販売してみたいふにゃ〜！ Animateを使った作り方を教えて欲しいにょ♪

やる気まんまんなのはいいけど作る前に ちゃんとアニメスタンプの仕様をよく確認するんだよ。 ふにゃクンはおっちょこちょいだから…

----------------------------------------------------------------------------------------

やってみよう！

歩くカメールクンだよ。 1秒4コマのアニメをループさせているよ。

1.アニメを描く準備

LINEアニメスタンプの仕様に沿ってステージサイズをW320xH270、フレームレート20fpsに設定しよう。

【選択ツール】でタイムラインの20フレーム目を選択した状態で【挿入/タイムライン/フレーム】を選択しよう。 するとタイムラインが20フレーム目まで追加されるよ。 20fps（1秒あたり20フレーム）だからこれが1秒分のタイムラインになるよ。

今回は4コマのアニメだから20フレームを4等分するよ。 6,11,16フレーム目を選択し、それぞれ【修正/タイムライン/キーフレームに変換】しよう。 【キーフレーム】に変換されたフレームには○がついているよ。

この4等分したそれぞれのフレームがアニメの1コマになるよ。 ここでは「コマ」というよ。

2.下書きを描こう

まずは下書きから描いていこう。 ツールバーから【ペンツール】を選択しよう。 下書きだから色は水色のような淡い色、線幅は1ptに設定すると描きやすいよ。

2コマ目のフレームを選択し、【オニオンスキン】ボタンをオンにして【オニオンスキンマーカー】を表示させよう。 すると1コマ目に描いたイラストが半透明で表示されるよ。それを元に2コマ目を描こう。

これを繰り返して3,4コマ目も描いていこう。

4コマ目まで描けたらアニメさせて動きを確認するよ。 【制御/再生】を選択するとアニメが再生されて動きが確認できるよ。 【ループ再生】にチェックを入れればループするようになるよ。

3.アニメを描こう

いよいよ清書だよ。 タイムラインの下書きレイヤーの上に新規のレイヤーを作成しよう。 下書きレイヤーと同じように20フレームにキーフレームを作って4つのコマにするよ。 下書きレイヤーはいじってしまわないようにロックしておこう。

【ペンツール】【ブラシツール】などを使って描いていこう。 Animateの詳しいペイント機能はココでは割愛するよ。

4.アニメを連番のpngファイルとして書き出そう

【ファイル/書き出し/ムービーの書き出し】を選択。 下書きレイヤーは非表示にしないと一緒に書き出されてしまうから注意してね。

ファイル形式は【pngシーケンス】を選択。

範囲は【ムービーサイズ】を選択して書き出しボタンをクリックしよう。

連番のpngファイルが書き出されるよ。

このままではLINEアニメスタンプの形式になっていないから 『アニメ画像に変換する君』 ics.media

というツールを使うよ。 ここではツールについてざっくり説明するけど 詳細はサイトで確認してもらえると助かるよ。

5.APNGファイルを書き出そう

『アニメ画像に変換する君』をDLして起動するとこんな画面が表示されるよ。

Animateで書き出した連番のpngファイルを読み込み、 設定はfps20,ループ回数4でアニメ画像を保存するをクリックして書き出そう。 書き出されたAPNGの見た目はpngと同じだよ。

FireFoxブラウザ（今のところこれ以外は再生できないよ）でAPNGを再生させるとアニメするよ。

LINEのシミュレーターでも動くよ。

----------------------------------------------------------------------------------------

パラパラまんがを描く感じで作れるふにゃね〜！ イイ感じふにゃ〜！！

さあ残り23コのアニメもがんばっておくれよ…フフフフ…

！！

仕様はちゃんと読んでくれたよね？ 1スタンプ24コのアニメが必要なんだよ…フフフフ…

フ…ファイトふにゃ〜〜〜〜〜〜…！

第1弾「ふにゃもらけ」 / 第2弾「ふにゃもらけと仲間たち」

3.基本のトゥイーンアニメ（移動アニメ）

いよいよAnimateを使ってアニメーションにゃね！！ Animateって絵を自動で動かしてくれるって聞いたふにゃよ！ すごいふにゃ〜！ふにゃでもカンタンに作れそうな気がするにゃ♪

フフフフ…Animateの自動で絵をアニメさせてくれる機能 [トゥイーン]を使えばカンタンにできるよ。

さっそく[トゥイーン]を使って描いた絵をアニメさせるふにゃ〜！

そのためには絵をシンボルに変換して、フレームを増やして、 [キーフレーム]を挿入して、[トゥイーン]を作成して、 配置したシンボルの位置や大きさなどを変形させるよ。

にゃにゃ！？！？！？！？

[トゥイーン]させるためには色々設定しないといけないんだ。 ふにゃクンにはちょっと複雑かもしれないから 下のやり方に倣ってやってみるといいよ。

----------------------------------------------------------------------------------------

やってみよう！

ステージに描いたイラストが右から左へ移動するアニメを作るよ

1.ステージに絵を配置しよう

2.シンボルに変換しよう

①【選択ツール】で描いたイラストを選択

②[修正/シンボルに変換]を選択

でてきたダイアログに名前をつけて、タイプを[ムービークリップ]にして、 基準点は真ん中を設定してOKをクリックしよう。

真ん中に○が現れればシンボル化されてるよ。

3.タイムラインにフレームを挿入

①タイムラインの30フレーム目をクリックして選択した状態にする。 ②[挿入/タイムライン/フレーム]を選択しよう。 （[右クリック/フレームから挿入]でもできるよ。） 30フレームまでコマが増えたよ。

これだけじゃまだアニメはしないけど トゥイーンアニメーションの下準備が完了だよ。

4.キーフレームを挿入しよう

①30フレーム目をクリックし選択する。 ②[挿入/キーフレームの挿入]を選択 30フレーム目にキーフレームが出来る。

5.イラストを移動させよう

[選択ツール]で30フレーム目のイラストを左へ移動させる。

6.トゥイーンを設定しよう

タイムラインの1~29フレーム上の適当な場所をクリックして選択し [挿入/クラシックトゥイーン]（または右クリック/クラシックトゥイーン）を選択する フレームの色が紫色に変わって矢印が現れたら[トゥイーン]が設定できた状態だよ。 タイムラインの1フレーム目を選択して[制御/再生]を選択するとアニメーションが確認できるよ。 30フレーム目を移動しても、ちゃんとその間のアニメーションも移動するよ。 1フレーム目をステージの外に出してみたり、イラストの位置を変えて動かしてみよう。

7.タイムラインを調節してみよう

イラストの位置を変えるとトゥイーンアニメの速度も変わるよ。 イメージより早かったり遅かったりする時はタイムラインの長さを調節しよう。 トゥイーン部分の1フレームを選択した状態で[フレームを削除]を選択する すると1フレーム減るよ。 たくさんまとめて変更したい場合は ①クリックして1フレームを選択する。 ②Shift+クリックで変更したい範囲を選択する。 [フレームを削除]を選択する。 10フレーム削除できたよ。 フレームを追加したい場合は[フレームを追加]を選ぼう。

----------------------------------------------------------------------------------------

やったふにゃ〜！うごいたふにゃよ〜！！

フフフフ…トゥイーンを使って移動させるのは基本だからね。 はじめて動かせた感想はどうだい？

ちゃんと動いてうれしいふにゃ！！ 移動だけじゃなくてもっといろいろな動きを つけたくなってきたふにゃ〜！！

フフフフ…その調子だよ。ふにゃクン。

2.お絵描き機能の特徴

AnimateはPhotoshopとは違うふにゃ？

フフフフ… 今描いた絵の塗りを【選択ツール】でクリックしてごらんよ。

にゃにゃあ！？ 選択した後うっかりそのままドラッグしちゃったら… 塗りつぶした面がずれちゃったふにゃよ！？

Animateは「ベクターデータ」という形式なんだ。 【ブラシツール】で描いた線はペイントソフトのドットのデータに見えるけど実はパスのデータなんだよ。 だから虫めがねツールで拡大してみても劣化しないよ。

あー！本当ふにゃ〜なめらかなままにゃ！Photoshopならギザギザするふにゃよね。

フフフフ…ペイントソフトのようでドローソフトのようなフシギなお絵描き機能なんだよ。 じゃあAnimateの特徴的なお絵描き機能に触れてみよう。

----------------------------------------------------------------------------------------

やってみよう！

1.塗りの面を動かす

【選択ツール】を選ぶ 塗りの面をクリックすると選択状態になるよ。 そのまま別の塗りの上にドラッグしてみよう。 ステージ上の何もないところをクリックすると選択状態が解除されるよ。 再び同じ塗りの面を選択して移動すると… かぶさった部分がなくなってしまうんだ。

2.色を変更する

1.でやったように【選択ツール】を使って塗りの面をクリックして選択状態にしよう。

カラーチップから別の色を選ぶと色が変わるよ。

3.【鉛筆ツール】を使って絵を描く

線幅が自由に変えられる【鉛筆ツール】で輪郭を描いてから色を塗っていく 方法で絵を描いてみよう。

①【鉛筆ツール】で線を描く 【プロパティ】で線のサイズを3にして描いてみよう。

②【バケツツール】で塗りつぶす クリックすると【鉛筆ツール】で描いた線に囲まれた範囲内を塗りつぶせるよ。 ③【ブラシツール】で顔のパーツを描く 目・くち・耳を描こう。 もう少し輪郭線を太くしたいね。

【鉛筆ツール】で描いた「線」なら太さを変えられるんだ。

④線の太さを変更する 選択ツールを選んで 【鉛筆ツール】で描いた線をクリックする。 一部分だけ選択されるよ。

選択状態の線をさらにダブルクリックするんだ。 こうするとつながった線全てを選択することが出来るよ。

【プロパティ】の項目から【線】の数字を5にすると太くなるよ。

4.【矩形ツール】で図形を描く

イラストとかは描かないけどボタンやバナーみたいなかっちりした図形を描きたい人も多いよね。 そういう人向けに図形の描き方をここでざっくりと教えるね。

【矩形ツール】を選択して 【プロパティ】の【オブジェクトの描画モードをオン】というボタンをオンにしてステージに四角形を描いてみよう。

【選択ツール】を選んで四角形をクリックしてみてよ。 【描画モード】がオンになっているシェイプを描画オブジェクトというよ。 選択するとバウンディングボックスで選択範囲が表示される。 オフになっているとクリックした部分が網がかかった状態に選択されるよ。

【楕円ツール】を使って四角形の上に丸を描いて 【選択ツール】でその丸を移動させてごらん。 描画モードがオンになっていると下に描いた四角が消えていないね。

オンにすると編集しやすい図形が描けるから描きたい絵に応じてオン/オフを使い分けてね。 【ブラシ】や【鉛筆】にも適用できるよ。 描画モードについて詳しくは 20.グラフィックツール【描画オブジェクト】 - 初心者のためのAdobe Animateブログを見てね。

----------------------------------------------------------------------------------------

まずはざっくりとAnimateを使った絵の描き方をやってみたけど ふにゃクンはついてこれているかい？

にゃ…にゃんとかっ！ PhotoshopとIllustratorを混ぜたような独特な操作感は 慣れるまでにちょっと時間がかかりそうにゃね〜

フフフフ…そうだね。 使っていくうちにきっと慣れると思うから今はがんばってよ。

AdobeAnimateFunya 2016-04-25 15:03 読者になる

広告を非表示にする

1.Animateでとりあえず何か描いてみる！

ところで…ふにゃくんはパソコンは使ったことあるのかい？

も、もちろんふにゃよっ！！！ お絵描きソフトだって使ったことあるふにゃよ！

そうなのかい？それは意外だったよ…フフフフ ではまずはAnimateを立ち上げて描いてみよう。

はいにゃ〜♪ こんな画面がでてきたふにゃ！

スタートページを起動できたようだね。 まずはそこの中央にある【新規作成】の 【ActionScript3.0】をクリックしてごらん。

お絵描きができそうなスペースとパレットやツールが表れたふにゃ！！

フフフフ…そのスペースは「ステージ」というよ。 これからAnimateを勉強していくと画面各部分の名称がでてくるよ。 使いながら覚えていけばいいから、まずは下の図にあるものを覚えるといいよ。

① タイムライン アニメの動きを制御するところ ②ツール 絵を描いたりするためのツールがまとめられています ③ステージ ここに絵を描いたりインスタンスを配置します ④プロパティ（プロパティインスペクタ） 選んだツールの細かい機能や設定を変更できるところ ⑤ライブラリ シンボルと呼ばれるアニメやイラストが入った場所

あ、もし上の画面と違う配置になっていたら右上を見てもらえるかい。 プルダウンから【アニメーター】を選んでほしいんだ。 これはアニメーションを作るときに適した画面配置なんだ。 ここではずっと【アニメーター】でやっていくよ。

まずはブラシツールでうさぎの絵を描くふにゃ〜！ わー！Photoshopみたいにゃーっ！これならふにゃも得意にゃ！！

フフフフ…そう見えて、実は…

ん？

あ、描けたら【ファイル/保存】を忘れずにね。 Animateは落ちることが多いからこまめな保存が大事だよ。

---------------------------------------------------------------------------------------- やってみよう！ 絵を描くのに使うツールの名称だよ。使いながら覚えていこう。   １.【ブラシツール】を選択してステージに好きな絵を描いてみよう。カラーチップをクリックするとカラーパレットが表示されるから好きな色を選んでごらん。   ２.まちがえたら【消しゴム】で消せるよ。 ３.【バケツツール】を選択すれば線や別の色で囲まれた範囲の中をクリックすると塗りつぶせるよ。すでに塗った色もこれで変えることが出来るよ。

うさぎが描けたふにゃ〜！ 結構なじみやすいふにゃよ！ AnimateってPhotoshopに似てるにゃあ♪

それはどうかな…？フフフフ…

次回に続く！

はじめに。

登場人物紹介

ふにゃもらけ 遠い星 ふにゃもらプラネットからやってきたふしぎな生き物。 コンビニでバイトをするかたわら、ゲームに役者として出演している。

クラゲふにゃ 同じく ふにゃもらプラネットからやってきた自称セレブ。 何を考えているか謎めいている。

----------------------------------------------------------------------------------------

わーい、レベルアップしたのにゃ〜！

フフフ… ふにゃクン、何をしているんだい？

あ、クラゲふにゃ！ ふにゃ達のゲームで遊んでたのにゃ。
最近 Photoshopで絵を描いたりしてるけど、 こういうゲームの絵もPhotoshopで描くのかにゃあ？？

フフフ… 気になるのかい？
そんな好奇心旺盛なふにゃクンに朗報だよ。 キミに、ボクたちのゲームのアニメを作ってもらうことになったよ。

え〜〜〜!! ふにゃはゲームに出演するのが仕事で、技術的な事はスタッフさんがやってくれるんじゃ…

実は開発予算が不足しているんだ。 アニメを作るスタッフをやとう余裕がなくてね…

で、でも…ふにゃはアニメなんて作ったことないから…

ボクたちのゲームを楽しみにしている人がたくさんいるんだよ。 キミはそんな人達の期待を裏切る気かい？

ハッ…！ たしかに… 楽しみにしてくれている人がいるなら… どこまでできるかわからないけど、ガンバってみるふにゃ！

フフフ… その意気だよ。

それに、ゲームで使うアニメをどうやって作るかって ちょっと興味があるふにゃ。

ボクたちのゲームで使うアニメは、Adobe Animateというツールで作っているんだ。

あどび あにめいと…？ AdobeってPhotoshopを作っている会社と同じふにゃね。

そうだよ。 そのAdobeだよ。
かつてはFlashという名前で呼ばれていたツールなんだけどね。
昔は、swfっていうFlash独自のファイル形式でアニメのデータを書き出すことが主だったんだけど、 最近はいろいろなファイル形式でデータを書き出すことができるようになったから、 ツールの名前もAnimateに変わったんだ。

あ、Flashは聞いたことあるのにゃ！ 最近はあんまり使われないって話を聞いた事があるけど…

実は意外と使われていたりするんだよ。 HTML5でも書き出しができたり、UnityやCocos2d-xで利用できる[GAF](https://gafmedia.com/)っていう形式で書き出しもできるし、 Adobe AIRならスマホのネイティブアプリそのものも作れちゃうからね。 まだまだ可能性を秘めたツールなんだよ。フフフ…

えいちてぃーえむえるふぁいぶ？ ゆにてぃー？ うう…なんか難しそうふにゃ。

あくまでキミにやってもらうのは、絵を描く部分だからね。 細かい技術的な部分はボクがサポートしてあげるから安心してよ。

で、でもアニメを作るツールって複雑そうだけど、ふにゃに使えるかにゃあ？

使い方はボクがしっかりと手ほどきをしてあげるから安心してよ。 さあ、それじゃあ早速だけど始めようか。フフフ…

次の記事へ

animate.hatenadiary.jp