20.【グラフィックツール】描画オブジェクト
「描画オブジェクト」については今までさんざん登場してきてたよね。
描画オブジェクトモードをオンにするとシェイプを重ねることができるにゃよね。
2.お絵描き機能の特徴 - 初心者のためのAdobe Animateブログ
で習ったにゃ！
今日はもう少し詳しく紹介していくよ。
----------------------------------------------------------------------------------------
描画オブジェクト
[オブジェクトの描画]をオンにして描画ツールで描いてみよう
[オブジェクトの描画]をオン
描いてみよう。
それぞれのシェイプがひとまとまりになっているので重なった部分の描画は消えない。
[修正/重ね順]でオブジェクトの重ね順を変えることもできるよ。
描画オブジェクトを選択して設定を変更する
[選択ツール]で描画オブジェクトを選択した状態で
プロパティから色や線幅など設定を変更することができるよ。
シェイプと同じように消しゴムツールが使える
ひとかたまりになっているけど中身はシェイプと一緒だよ。
消しゴムツールもバケツツールも同じように使えるよ。
描画オブジェクトの中に入ってみよう
[選択ツール]で描画オブジェクトをダブルクリックすると中に入れるよ。
中身を選択ツールで選択するとシェイプであることがわかるよ。
この状態ならペイントツール(オブジェクトの描画モードはオフで)を使って
描き足すことができるよ。
シェイプに分解する
描画オブジェクトを選択して[修正/分解]すると描画オブジェクトが分解されて中のシェイプになるよ。
描画オブジェクトの結合
描画オブジェクトを選択状態で[修正/描画オブジェクトの結合]を選択する
結合
↓
複数の描画オブジェクトを選択した状態から[修正/描画オブジェクトの結合/結合]で
選択したオブジェクトが一つの描画オブジェクトに変換される。
中身のシェイプは重なりがなくなっているよ。
結合を応用すれば色面の分割もカンタン。
色面の描画オブジェクトに線の描画オブジェクトを結合すると
↓
色面が分割されてバケツツールで塗り分けができるようになるよ。
色面とは異なる色の線で結合して分割すれば、描画オブジェクトの中に入って、
分割した線をダブルクリックで一気に選択、消すことができるよ。
キャラクターの影を塗り分けたり、色々使えそうでしょ？
交差
↓
選択した全てのオブジェクトが重なり合う部分のみが残るよ。
型抜き
↓
上のオブジェクトで下のオブジェクトから抜き取るよ。
穴を開けるのにも使える。
切り取り
↓
一番上のオブジェクトで下のオブジェクトを切り抜くよ。
シェイプを描画オブジェクトに変換
↓
シェイプを選択して[結合]を使えば描画オブジェクトに変換できるよ。
描画オブジェクトを分解してもまた戻すことができる。
[結合][分解]は頻繁に使うからプロパティにショートカットボタンが付いているよ。
19.【グラフィックツール】消しゴム
今日は[消しゴムツール]について紹介するよ。
ブラシツールとほとんど同じで、オプションで消去したい箇所を設定したり、
筆圧をつけたりできるよ。
はいにゃっ！
----------------------------------------------------------------------------------------
消しゴムツールのオプション
[ブラシツール]と同じようにモード、筆圧、傾きが設定できるよ。
1.消しゴムモード
・消す（標準）
・塗りを消す
・線を消す
・選択された塗りを消す
・内側を消す
2.蛇口ボタンをオンにしてクリックで消す
3.ブラシと同期設定
設定をオンにすると[消しゴムツール]のブラシサイズを変更した時に
[ブラシツール]のサイズも変更される。
4.アクティブレイヤーで消去
「アクティブレイヤーで消去」をオンにしていると選択しているレイヤーにのみ[消しゴムツール]が有効になる。
その他の消去法
[消しゴムツール]をダブルクリックするとロックされていないレイヤーに配置された全てのオブジェクトを消去するよ。
「アクティブレイヤーで消去」をオンにしていても全て消去するから気をつけてね。
消したくないレイヤーはロックすれば消去されないよ。
18.【グラフィックツール】塗り
今日は[ブラシツール][バケツツール]や「塗り」について紹介するよ。
[ブラシツール][バケツツール]
[ブラシツール]はいろんなオプションがあるにゃね〜！
AnimateCC 独特のオプションなんだ。
ブラシなどを使ったシェイプで
イラストを描く時には役に立つから覚えておくといいよ。
----------------------------------------------------------------------------------------
ブラシツールのオプション
ブラシツールを選択すると表示されるボタンを選択するとプルダウンメニューででてくるよ。
※このオプションはステージに描かれたシェイプが全て[オブジェクトの描画ボタン]がオフで描かれたものだけに有効だよ。
・標準
既存の線も塗りも塗りつぶすよ。
・塗りをペイント
線は塗りつぶさずに塗りのみを塗りつぶすよ。
・背面をペイント
何も描かれていない部分のみ塗りつぶすよ。
・選択範囲をペイント
あらかじめ選択ツールで選択した部分のみを塗りつぶすよ。
・内側をペイント
最初にブラシを下ろした部分内を塗りつぶすよ。
・筆圧ボタン
筆圧対応のペンタブレットを使っていればオンにした時に線の太さが変わるよ。
バケツ・ブラシツールでできること
・線で囲まれた部分を塗りつぶす
・塗りで囲まれた部分を塗りつぶす、色を変更する
・隙間があっても塗りつぶす
オプションが「隙間を閉じない」だときっちり閉じた部分にしか
バケツツールで塗りつぶすことが出来ない。
「大きい隙間を閉じる」にすると少しの隙間は無視して塗りつぶすことができる。
この設定にすると細かい塗り残しが出来てしまうので注意が必要だよ。
・選択した部分の色を変更する
選択された塗りの部分の色を変更する。線は残る。
・選択した部分をカラーパネルなどで色を変更する
塗りも線も選択した部分の色をカラーパネルから変更できる。
・グラデーションで塗る
・ブラシでグラデーションを塗る
グラデーションの幅は塗った幅に合わせて塗られる。
17.【グラフィックツール】線に関するツール
Animate CC はイラストを描くのも便利なんだよ。
ボクたちの出演しているスマホゲーム「ふしぎな生き物ふにゃもらけ 」も
全て Animate CC で作画されているんだよ。
（全部Animate CC で描いてます。）
illustrator じゃないのにゃね〜。
2.お絵描き機能の特徴 - 初心者のためのAdobe Animateブログで説明したように
Animate CC の描画は「線」と「塗り」の2種類の概念があるんだよ。
そしてこれらを「シェイプ」と言うんだ。
鉛筆ツールで描くと「線」で、ブラシツールで描くと「塗り」ふにゃね！
フフフ…よく覚えていたね。
今回は「線」に関するツール[線][鉛筆][ペイントブラシ][インクボトル]を解説するよ。
----------------------------------------------------------------------------------------
線の特徴
この2つのシェイプは線と塗り、どちらだと思うかい？
2つの線ふにゃね。
フフフ…。
一見すると線に見えるけど実は「線」と「塗り」なんだ。
レイヤーをアウトライン表示にしてみるとこうなるよ。
上は[鉛筆ツール]、下は[ブラシツール]で描いたんだ。
見た目は同じだけど「線」は軸で、「塗り」は輪郭線で定義されているのがわかるね。
選択ツールでシェイプを触ると違いがわかる。
シェイプの線は交わったところで分割ができ、新しいポイントが出来るので
選択ツールで移動することができる。
線を交わらせたくない時は線ツールを選択した状態で「オブジェクトの描画」ボタンをオンにして描画する。
鉛筆ツールの設定
鉛筆ツールを選択するとオプション設定が選べる。
(上)ストレート…フリーハンドで描いた線を直線や円弧に調整してくれる。
(中)スムーズ …フリーハンドの線を少し補正してくれる。
(下)インク …ほぼフリーハンドのままの線で描かれる。
「スムーズ」はプロパティのスムージングで補正のかかり具合を調整できる。
インクボトルツール
塗りの面をクリックすると縁に線を作る。
塗りの際（輪郭）をクリックするとシェイプの点と点の間だけに線を作る。
線をクリックすると設定を変更できる。
線の設定プロパティ
1.線のサイズ
スライダーでも数字でも太さを変更できる。
2.スタイル
デフォルトで点線・破線・ラフな線などが用意されている。
3.線のスタイルを編集
選択したスタイルをカスタマイズできる。
4.線幅
入り抜きペンのように線の幅が変わっていく線になる。
5.ペイントブラシツール
ほぼ線のスタイルと同じ。
ブラシライブラリのパネルから選択して使おう。
illustratorみたいにチョークのような質感のものや矢印もある。
16.ビットマップ画像の読み込み・編集など
AnimateCCって写真やイラストの画像も読み込めるふにゃ？
じゃあ写真を読み込んでみるにゃね。
(デジカメで撮った3648px × 2432pxの画像を読み込もうとする ふにゃもらけ)
おっと、その画像は大きすぎるよ。
500px×400pxの画面サイズに対して、近いサイズの画像を使った方がいいよ。
ファイルサイズが無駄に大きくなるからね。
え、そうふにゃ？じゃあ450x300に縮小するにゃ。
[ファイル/読み込み/ステージに読み込み]で画像を読み込むとステージに画像が配置された。
このままで背景に使ったりできるんだけど、今回はこれを加工してみよう。
ステージに配置された画像を選択して[修正/分解]してごらん。
ビットマップ画像が塗りを選択しているみたいになったふにゃ〜〜〜！
(参照:2.お絵描き機能の特徴 - 初心者のためのAdobe Animateブログ)
フフフ…。
塗りみたいに消しゴムツールや鉛筆ツールで描いたりできるようになったよ。
鉛筆ツールで馬の輪郭をなぞって、切り取ってみようか。
これで余計な部分を切り取れたふにゃ！
無駄がなくなってスッキリにゃ♪
ふにゃクン、ボクが冒頭に言ったことを覚えているかい？
切り抜いたとしてもデータが軽くなるわけじゃないよ。
ライブラリを見てごらん。
はっ！
つまりビットマップ画像もシンボルみたいにライブラリに収納されてて、
これが元になっているだけなのにゃねっ…。
そうなんだ。たくさんムービーに使ってもライブラリの1画像分のファイルサイズだし、
画像に余計な部分が多かったり過度に大きかったりすると無駄だよ。
そしてインスタンスと同じようにライブラリからドラッグ&ドロップすれば再利用できる。
----------------------------------------------------------------------------------------
読み込んだビットマップ画像は塗りみたいに扱えて便利だけど、
描いたイラストみたいに色を変えたりできればいいのににゃ〜。
できるよ。
【ビットマップのトレース】機能を使えばビットマップ画像がベクターデータになるんだ。
やってみよう。
ステージに分解していないビットマップ画像を配置して選択状態で
[修正/ビットマップ/ビットマップのトレース…]を選択しよう。
とりあえずそのままの設定でOKしてみよう。
ビットマップの画像を元にしたベクターデータのイラストに変換されたよ。
なおライブラリには元の画像はそのまま残っているので使えるよ。
変換の設定数値を変えると細かさや雰囲気が変わるから色々いじって試してみてね。
[ポイントの数:]と[トレースの精度:]は変換する絵の精密さに影響するよ。
精度の高い絵は写真に近い細かい仕上がりになるけどデータが重くなるから気をつけてね。
[色数:]は何色でトレースするかではなくて色の会長幅のことだよ。
数字が小さいほどたくさん色を使ってトレースするよ。
アニメの背景もこれを使って写真からできちゃうからすごく便利にゃね！
15.シンボルの入れ替え、複製
くまちゃんの歩くアニメをネコちゃんに作り変えることはできないかにゃあ？
くまちゃんシンボルを編集すればいいにょだけど…
出来ればくまちゃんを残しておきたいにゃよね。あとで使いたくなるかもしれにゃいし。
フフフ…。先のことを考えてアニメを作れるようになったね。リッパだよ。
配置したシンボルは別のシンボルと入れ替えることができるんだ。
じゃあネコちゃんが足踏みしているアニメを含むシンボルを作って入れ替えればいいにゃね！
フフフ…ご名答。さっそくやってみよう。
----------------------------------------------------------------------------------------
1.
2.
3.
ムービーシーンの1フレーム目のキーフレームに配置した「歩くくまちゃん」シンボルを選択するか、もしくは[修正/シンボル/シンボルの入れ替え]を選択するとプロパティ画面に入れ替えボタンが表示される。
ライブラリの中にあるシンボルが表示されるので置き換えたいシンボルを選択しよう。
終点のキーフレームに配置したシンボルも同じ要領で置きかえよう。
4.
ネコちゃんのアニメになったよ。
ライブラリにはくまちゃんが残っているよ。
----------------------------------------------------------------------------------------
シンボルは複製することもできるんだよ。
1.
http://animate.hatenadiary.jp/entry/2019/03/05/112925で使ったバンザイくまちゃんシンボルを複製してネコちゃんシンボルにするよ。
2.ライブラリからシンボルをコピーする
ライブラリのくまちゃんシンボルを選択した状態でパネル右上のボタンをクリックしよう。
複製を選択すると
「くまちゃんコピー」が作られたよ。
3.コピーしたシンボルを編集する
「くまちゃんコピー」を編集してネコちゃんにしよう。
4.
コピーしたシンボルを元に作ったので、画像の座標位置がズレず、シンボルの入れ替えがしやすいよ。
14.シンボルを同じ位置で編集
（アニメを作っているふにゃもらけ。）
むむーん…
お困りの様子だね。
くまちゃんとネコちゃんが手をつないでバンザイするアニメを作っているのにゃ。
だけどシンボル編集画面で絵を描いてステージに配置すると、
うまく手をつなげなくて難しいふにゃ〜。
フフフ…実はずっと隠していたけど
ステージに配置したインスタンスから直接シンボルを編集できるんだ。
ステージに配置されたインスタンスをダブルクリックするとシンボル編集画面に入れる。
（[編集/同じ位置で編集]からでも同じ。）
シンボルの中に入るとインスタンス以外が白っぽくなる。
えー！そんな便利機能があるなら早く教えて欲しかったふにゃよー！
たしかに…！
それにインスタンス、グループ、オブジェクト描画は全部ダブルクリックで編集画面に入れるから
間違えやすいんだ。同じ位置で編集は慣れてきたらやってみるといいよ。
はいにゃ！
じゃあさっそく同じ位置で編集してみるふにゃ〜！
くまちゃんとネコちゃんの手がつなげたふにゃ！
シーン１をクリックしてタイムラインに戻るふにゃね。
ちゃんと手を繋いでバンザイできたふにゃ〜！
