16.ビットマップ画像の読み込み・編集など

f:id:AdobeAnimateFunya:20160302165254p:plain
AnimateCCって写真やイラストの画像も読み込めるふにゃ?
f:id:AdobeAnimateFunya:20160302165304p:plain
そうだよ。 AnimateCCで読み込める形式はpng,jpg,gif,bmp,などだよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
じゃあ写真を読み込んでみるにゃね。

(デジカメで撮った3648px  × 2432pxの画像を読み込もうとする ふにゃもらけ)

f:id:AdobeAnimateFunya:20160302165304p:plain
おっと、その画像は大きすぎるよ。 500px×400pxの画面サイズに対して、近いサイズの画像を使った方がいいよ。 ファイルサイズが無駄に大きくなるからね。
f:id:AdobeAnimateFunya:20160302165254p:plain
え、そうふにゃ?じゃあ450x300に縮小するにゃ。

f:id:funyamora:20190310161935p:plain [ファイル/読み込み/ステージに読み込み]で画像を読み込むとステージに画像が配置された。

f:id:AdobeAnimateFunya:20160302165304p:plain
このままで背景に使ったりできるんだけど、今回はこれを加工してみよう。 ステージに配置された画像を選択して[修正/分解]してごらん。

f:id:funyamora:20190310162717p:plain f:id:funyamora:20190310162731p:plain

f:id:AdobeAnimateFunya:20160302165254p:plain
ビットマップ画像が塗りを選択しているみたいになったふにゃ〜〜〜! (参照:2.お絵描き機能の特徴 - 初心者のためのAdobe Animateブログ)
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ…。 塗りみたいに消しゴムツールや鉛筆ツールで描いたりできるようになったよ。 鉛筆ツールで馬の輪郭をなぞって、切り取ってみようか。

f:id:funyamora:20190310165225p:plain

f:id:AdobeAnimateFunya:20160302184715p:plain
これで余計な部分を切り取れたふにゃ! 無駄がなくなってスッキリにゃ♪
f:id:AdobeAnimateFunya:20160302165304p:plain
ふにゃクン、ボクが冒頭に言ったことを覚えているかい? 切り抜いたとしてもデータが軽くなるわけじゃないよ。 ライブラリを見てごらん。

f:id:funyamora:20190310170254p:plain

f:id:AdobeAnimateFunya:20160307165023j:plain
はっ! つまりビットマップ画像もシンボルみたいにライブラリに収納されてて、 これが元になっているだけなのにゃねっ…。
f:id:AdobeAnimateFunya:20160302165304p:plain
そうなんだ。たくさんムービーに使ってもライブラリの1画像分のファイルサイズだし、 画像に余計な部分が多かったり過度に大きかったりすると無駄だよ。 そしてインスタンスと同じようにライブラリからドラッグ&ドロップすれば再利用できる。

f:id:funyamora:20190310170727p:plain

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

f:id:AdobeAnimateFunya:20160302165254p:plain
読み込んだビットマップ画像は塗りみたいに扱えて便利だけど、 描いたイラストみたいに色を変えたりできればいいのににゃ〜。
f:id:AdobeAnimateFunya:20160302165304p:plain
できるよ。 【ビットマップのトレース】機能を使えばビットマップ画像がベクターデータになるんだ。 やってみよう。

f:id:funyamora:20190310173734p:plain ステージに分解していないビットマップ画像を配置して選択状態で [修正/ビットマップ/ビットマップのトレース…]を選択しよう。 f:id:funyamora:20190310174112p:plain とりあえずそのままの設定でOKしてみよう。 f:id:funyamora:20190310174327p:plain ビットマップの画像を元にしたベクターデータのイラストに変換されたよ。 なおライブラリには元の画像はそのまま残っているので使えるよ。

f:id:AdobeAnimateFunya:20160302165304p:plain
変換の設定数値を変えると細かさや雰囲気が変わるから色々いじって試してみてね。

[ポイントの数:]と[トレースの精度:]は変換する絵の精密さに影響するよ。
精度の高い絵は写真に近い細かい仕上がりになるけどデータが重くなるから気をつけてね。

[色数:]は何色でトレースするかではなくて色の会長幅のことだよ。
数字が小さいほどたくさん色を使ってトレースするよ。

f:id:AdobeAnimateFunya:20160302184715p:plain
アニメの背景もこれを使って写真からできちゃうからすごく便利にゃね!

15.シンボルの入れ替え、複製

f:id:AdobeAnimateFunya:20160302165254p:plain
くまちゃんの歩くアニメをネコちゃんに作り変えることはできないかにゃあ? くまちゃんシンボルを編集すればいいにょだけど… 出来ればくまちゃんを残しておきたいにゃよね。あとで使いたくなるかもしれにゃいし。
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ…。先のことを考えてアニメを作れるようになったね。リッパだよ。 配置したシンボルは別のシンボルと入れ替えることができるんだ。
f:id:AdobeAnimateFunya:20160302165254p:plain
じゃあネコちゃんが足踏みしているアニメを含むシンボルを作って入れ替えればいいにゃね!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ…ご名答。さっそくやってみよう。

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

1.

f:id:funyamora:20190303164222g:plain
くまちゃんが歩くトゥイーンアニメ
このアニメに使われているくまちゃんシンボルをネコちゃんに入れ替えるよ。

2.

f:id:funyamora:20190303164423g:plain
新規シンボルを作成
新規シンボル「歩くネコちゃん」を作成したよ。

3.

f:id:funyamora:20190303164551p:plain ムービーシーンの1フレーム目のキーフレームに配置した「歩くくまちゃん」シンボルを選択するか、もしくは[修正/シンボル/シンボルの入れ替え]を選択するとプロパティ画面に入れ替えボタンが表示される。

f:id:funyamora:20190303164931p:plain ライブラリの中にあるシンボルが表示されるので置き換えたいシンボルを選択しよう。

f:id:funyamora:20190303165610p:plain 終点のキーフレームに配置したシンボルも同じ要領で置きかえよう。

4.

f:id:funyamora:20190303165129g:plain ネコちゃんのアニメになったよ。 f:id:funyamora:20190303165718p:plain ライブラリにはくまちゃんが残っているよ。

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

f:id:AdobeAnimateFunya:20160302165304p:plain
シンボルは複製することもできるんだよ。
1.

http://animate.hatenadiary.jp/entry/2019/03/05/112925で使ったバンザイくまちゃんシンボルを複製してネコちゃんシンボルにするよ。

2.ライブラリからシンボルをコピーする

f:id:funyamora:20190303171704p:plain
ライブラリのくまちゃんシンボルを選択した状態でパネル右上のボタンをクリックしよう。 f:id:funyamora:20190303171726p:plain
複製を選択すると f:id:funyamora:20190303171039p:plain
「くまちゃんコピー」が作られたよ。

3.コピーしたシンボルを編集する

f:id:funyamora:20190303172737p:plain
f:id:funyamora:20190303173125g:plain
「くまちゃんコピー」を編集してネコちゃんにしよう。

4.

f:id:funyamora:20190303174403g:plain コピーしたシンボルを元に作ったので、画像の座標位置がズレず、シンボルの入れ替えがしやすいよ。

14.シンボルを同じ位置で編集

(アニメを作っているふにゃもらけ。)

f:id:AdobeAnimateFunya:20160302165254p:plain
むむーん…
f:id:AdobeAnimateFunya:20160302165304p:plain
お困りの様子だね。
f:id:AdobeAnimateFunya:20160302165254p:plain
くまちゃんとネコちゃんが手をつないでバンザイするアニメを作っているのにゃ。 だけどシンボル編集画面で絵を描いてステージに配置すると、 うまく手をつなげなくて難しいふにゃ〜。

f:id:funyamora:20190303141216p:plain
シンボル編集画面でネコのイラストを描いてそれをステージに配置する。手の位置がズレたり絵を合わせるのが難しい

f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ…実はずっと隠していたけど ステージに配置したインスタンスから直接シンボルを編集できるんだ。

f:id:funyamora:20190303142945p:plain ステージに配置されたインスタンスをダブルクリックするとシンボル編集画面に入れる。 ([編集/同じ位置で編集]からでも同じ。) シンボルの中に入るとインスタンス以外が白っぽくなる。

f:id:AdobeAnimateFunya:20160302182108p:plain
えー!そんな便利機能があるなら早く教えて欲しかったふにゃよー!
f:id:AdobeAnimateFunya:20160302165304p:plain
まあ落ち着いてよ。AnimateCC初心者はシンボルとインスタンスの関係をしっかりと 理解してからじゃないと混乱するんだ。うっかり者のふにゃクンのことだから、 シンボルを編集しているのに、1つのインスタンスだけを編集している気分になっちゃうんじゃないかな?
f:id:AdobeAnimateFunya:20160302165254p:plain
たしかに…!
f:id:AdobeAnimateFunya:20160302165304p:plain
それにインスタンス、グループ、オブジェクト描画は全部ダブルクリックで編集画面に入れるから 間違えやすいんだ。同じ位置で編集は慣れてきたらやってみるといいよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
はいにゃ! じゃあさっそく同じ位置で編集してみるふにゃ〜!

f:id:funyamora:20190303144926p:plain

f:id:AdobeAnimateFunya:20160302165254p:plain
くまちゃんとネコちゃんの手がつなげたふにゃ! シーン1をクリックしてタイムラインに戻るふにゃね。

f:id:funyamora:20190303145555g:plain

f:id:AdobeAnimateFunya:20160302184715p:plain
ちゃんと手を繋いでバンザイできたふにゃ〜!

13.インスタンス(グラフィック)の再生モード

f:id:AdobeAnimateFunya:20160302165254p:plain
くまちゃんが歩いてきて、一旦止まってからまた歩き出すアニメーションを作りたいふにゃよ〜。 途中で動きを止めるにはどうすればいいのかにゃ??
f:id:AdobeAnimateFunya:20160302165304p:plain
そういう時はインスタンスの種類をグラフィックにするといいよ。 マスターシンボルの中に複数フレームが含まれている場合、 再生させたい1フレームを指定して表示することができるんだ。
f:id:AdobeAnimateFunya:20160302165254p:plain
それは便利にゃね!

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

1.

f:id:funyamora:20190302160953p:plain インスタンスの種類を「グラフィック」にした20フレームのくまちゃんがアニメするトゥイーンアニメを作る。

2.

f:id:funyamora:20190302162027p:plain 40フレーム目にキーフレームを追加する。

f:id:funyamora:20190302162038g:plain こんな風に、止まって足踏み状態になる。

f:id:funyamora:20190302162857p:plain さらに50フレーム目にキーフレームを追加し、くまちゃんインスタンスを移動させてトゥイーンを作成する。。 f:id:funyamora:20190302163440g:plain 歩く→足踏み→歩くというアニメができる。

3.インスタンスを止めろ!

f:id:funyamora:20190302164359p:plain 20フレーム目のキーフレームを選択し、ステージに配置したインスタンスを選択する。 プロパティにループという項目が表示されるのでそれのオプション:単一フレーム再生にする。 「開始フレーム」に表示したいシンボルの中のフレーム数を入力する。(この場合は3) このときフレームピッカーを使用するとシンボルの中身を確認しながらフレームが選べるので便利だよ。

・グラフィックのループの種類
ループ:1フレーム目から再生される
一回再生:シンボル内の1フレーム目〜最後まで1回だけ再生され、最後のフレームで止まる。
単一フレーム:シンボル内の指定した1フレームのみ表示する。

f:id:funyamora:20190302165047g:plain 歩く→止まる→歩くというアニメが完成したよ。

12.シンボルの中でアニメさせる

f:id:AdobeAnimateFunya:20160302165254p:plain
クラゲふにゃ〜。 「アニメーションの基本は全部教えた」って言ってたけど、前に作った くまちゃんの歩かせ方がわからないふにゃよ〜。
f:id:AdobeAnimateFunya:20160302165304p:plain
シンボルの中に歩く「くまちゃん」のアニメを作ればいいんじゃないかな。
f:id:AdobeAnimateFunya:20160307165023j:plain
シンボルの中にアニメが作れちゃうふにゃ!?
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ…。実はシンボルの中にアニメが作れるんだよ。 だから足踏みした「くまちゃん」のシンボルをトゥイーンで横に移動させる。 これだけで歩くアニメが完成だよ。
f:id:AdobeAnimateFunya:20160302184715p:plain
さっそくやってみるふにゃ〜〜!

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

1.

f:id:funyamora:20190228195811g:plain
12くまちゃん横移動
トゥイーンを使ってくまちゃんが横に移動するアニメを作る。 参照:3.基本のトゥイーンアニメ(移動アニメ) - 初心者のためのAdobe Animateブログ

2.

f:id:funyamora:20190228200159p:plain
12くまちゃんシンボル編集
くまちゃんのシンボルを選択して[右クリック/シンボルの編集]で編集画面に入ろう。

3.

f:id:funyamora:20190228201350p:plain
12キーフレーム挿入
キーフレームを挿入してその場で歩いてるパラパラアニメを作ろう。

f:id:funyamora:20190228201308g:plain
12くまちゃんてくてく
フレームの長さを調整してアニメができたよ。
f:id:funyamora:20190228203541g:plain
12ライブラリでもアニメを確認
ライブラリのくまちゃんシンボルを選択して右上の再生ボタンを押してもアニメを確認することができるよ。

4.

f:id:funyamora:20190228202304g:plain
12くまちゃん歩く
[編集/ドキュメントの編集]でムービー編集画面に戻り、[制御/プレビュー]で再生してみよう。

・著者なごみはゲーム用に使っている都合上、基本的にインスタンスの種類はムービークリップで作っているよ。 これだと[制御/再生]しても1フレーム目の画像しか表示されないから注意してね。
[制御/再生]で確認するにはグラフィックにするとうまくいくよ。

5.

アニメを作る順番は色々あるよ。
f:id:funyamora:20190228205114p:plain 最初に新規シンボルを作って、そのシンボル内のタイムラインに足踏みするアニメを作る。 f:id:funyamora:20190228205331p:plain ステージにそのシンボルをドラッグして配置する。

f:id:funyamora:20190228205613p:plain それにトゥイーンアニメをつけてあげれば同じように作れるよ。

【応用】 f:id:funyamora:20190228210357g:plain モーションガイドに沿ってトゥイーンさせたりして色々なアニメを作ってみよう。

参照:5.基本のトゥイーンアニメ(モーションガイドに沿って動かす) - 初心者のためのAdobe Animateブログ

11.シンボルとインスタンス

f:id:AdobeAnimateFunya:20160302165304p:plain
さて…Animateの基本的なアニメーションの機能は教えたよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
ふにゃっ!
f:id:AdobeAnimateFunya:20160322163601p:plain
でも、Animateを使いこなすためにはシンボルについて 詳しく理解する必要があるんだ。
f:id:AdobeAnimateFunya:20160307165023j:plain
ごくり…!
f:id:AdobeAnimateFunya:20160302165304p:plain
シンボルとインスタンスの違いはわかるかい?
f:id:AdobeAnimateFunya:20160302182108p:plain
えっと… シンボルはライブラリに入ってるもので、 インスタンスはライブラリからステージに配置されたものふにゃっ!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…正解だよ。

シンボル
ライブラリに入ってるイラストやアニメを管理するもの

インスタンス
ライブラリからステージ上に配置されたもの。シンボルの分身。 常にマスターシンボルの内容を反映する。

f:id:AdobeAnimateFunya:20160302165304p:plain
元となったシンボルの中身を変えれば配置したインスタンスもそれと同じものになるよ。 それを利用してステージにたくさん配置したお花の色をカンタンに変えてみよう。

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

1.

ステージ上にお花のイラストを描こう。
それを選択して右ボタンクリック/シンボルに変換(もしくは修正/シンボルに変換)を選ぶとダイアログが表示される。

f:id:funyamora:20190227185326p:plain
11シンボルに変換2
今回は基準点は真ん中、種類はムービークリップを選択しよう。

・シンボルの種類について
アクションスクリプトを使うもの(ゲームなど)に使用する場合はムービークリップ、 アニメーションを作る場合はグラフィック。 執筆者のなごみが使わないボタンについてはここでは割愛するよ

タイプは後からでも変更できるよ。変更したいインスタンスを選択してプロパティから変更しよう。

2.ステージにインスタンスをたくさんコピーする。

f:id:funyamora:20190227184413p:plain
11お花ステージにたくさん

3.シンボルを編集して色を変えよう。

[編集/シンボルの編集]、もしくはライブラリのお花のシンボルをダブルクリックしても編集画面に入れるよf:id:funyamora:20190227185527p:plain バケツツールで花を黄色にしよう。

f:id:funyamora:20190227185705p:plain
11花黄色
[編集/ドキュメントの編集]かステージの左上にあるステージボタンをクリックしてムービー編集画面に戻ろう。
f:id:funyamora:20190227190119p:plain
11ステージボタン

f:id:funyamora:20190227190352p:plain
11黄色い花になったよ
シンボルを編集するとステージにコピーしたインスタンスも全て変更されるよ。

4.インスタンスの色を変えても他のインスタンスには影響はない。

今度はインスタンスを1つ選択して[プロパティ/カラー効果]で着色してみよう。

f:id:funyamora:20190227200214p:plain
11インスタンスにカラー効果しても他は変わらない
選択したシンボル以外の色は変わらないよ。
シンボルの編集:全てのインスタンスに影響する
インスタンスの編集:編集したインスタンスのみに影響する

10.応用アニメ【パスに沿った回転と加速減速】

f:id:AdobeAnimateFunya:20160302165254p:plain
う〜ん… にゃんだか不自然な動きふにゃ〜

www.youtube.com トロッコに乗ったふにゃもらけが山を走っていくアニメーション。

f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ… 傾斜のある山に対してトロッコは傾きが変わらずに動いて確かに違和感があるね。 こういう時は「パスに沿って回転」にチェックを入れるといいよ

youtu.be

f:id:AdobeAnimateFunya:20160302184715p:plain
わ〜! トロッコのインスタンスが移動に合わせて傾くようになったふにゃ〜〜!
f:id:AdobeAnimateFunya:20160302165304p:plain
さらに「イージング」機能を使えば減速や加速も表現できるよ。

減速 youtu.be

加速 youtu.be

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

やってみよう!

パスに沿った回転と加速減速

1.準備

何かイラストを描いてモーションに沿ったアニメを作ろう。
5.基本のトゥイーンアニメ(モーションガイドに沿って動かす) で使ったファイルを使うといいよ

2.

f:id:AdobeAnimateFunya:20170624161528p:plain トゥイーンの最初のキーフレームを選ぶ。 f:id:AdobeAnimateFunya:20170624161601p:plain プロパティが「トゥイーン」になる。「パスに沿って回転」にチェックを入れよう。

3.再生してみよう

youtu.be インスタンスがモーションガイドに沿って角度が変化するアニメになったよ。

いい感じにアニメしない場合はキーフレームの角度を変えてみよう。 f:id:AdobeAnimateFunya:20170624163024p:plain ガイドラインに対してインスタンスは垂直だと上手く見えるよ。

4.「イージング」を使って加速を表現してみよう

f:id:AdobeAnimateFunya:20170624164211p:plain トゥイーンプロパティにある「イージング」の数値を「-100」にする。

f:id:AdobeAnimateFunya:20170624164205p:plain 最初はゆっくりと動き出し徐々に加速するアニメになるよ。

5.「イージング」を使って減速を表現してみよう

f:id:AdobeAnimateFunya:20170624164227p:plain トゥイーンプロパティにある「イージング」の数値を「100」にする。

f:id:AdobeAnimateFunya:20170624164217p:plain 早いスピードで動き出して徐々に減速するアニメになるよ。

イージングの数値を変えると速さが変わるからイメージ通りになるように調整しよう。