27..グラフィックツール応用【自由変形ツール】

f:id:AdobeAnimateFunya:20160302165304p:plain
自由変形ツールを使ったテクニックを紹介するよ。

f:id:funyamora:20190713155423p:plain 背景画像に使えるようなパースのついた建物を描くテクニックだよ。


f:id:AdobeAnimateFunya:20160302165254p:plain
こういうイラストって難しそうにゃ〜…。 ニガテなのにゃ!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ…。ふにゃクンでもきっとできるよ。

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

1.

f:id:funyamora:20190713171000p:plain ステージにビルの壁面を描こう。
出来上がったら[修正/オブジェクトを結合/結合]で1つの描画オブジェクトにしておく
残念ながらシンボルは歪曲・エンベローブ変形はできないんだ。

2.

f:id:funyamora:20190713171113p:plain 壁面をコピーして、コピーした壁面の色を変えよう。

作例の壁面は、「シェイプ」が「線」で囲まれている。
これをバケツツールで1つづつクリックして塗り直す作業はとっても面倒だね。
線で区切られていても「シェイプ」が隣同士が連なっていればドラッグで塗り替えられるんだ。
f:id:funyamora:20190713171242g:plain

3.

f:id:funyamora:20190713172314p:plain 変形させるオブジェクトはあらかじめバックアップをとっておくといいよ。
(著者なごみはシンボル化してから[修正/分解]して変形させているよ)
描画オブジェクトは一旦変形させてもダブルクリックして中に入ったり、
オブジェクトをコピーしたりすると戻せなくなるんだ。

4.

f:id:funyamora:20190713175206p:plain

f:id:funyamora:20190713180350p:plain

f:id:funyamora:20190713174419g:plain

5.

f:id:funyamora:20190713180751p:plain もう片方の壁面も変形させて完成。

6.

文字も分解して描画オブジェクト化すれば同じように変形できるよ。 f:id:funyamora:20190713180826g:plain

f:id:AdobeAnimateFunya:20160302165304p:plain
自由変形ツールを使った床も紹介しておくね。

f:id:funyamora:20190713182708p:plain ピカピカの大理石の床だよ。

f:id:funyamora:20190713183829p:plain

f:id:funyamora:20190713183836p:plain まず格子模様のパーツを作る。ちゃんとバックアップをとるのを忘れないようにね。

f:id:funyamora:20190713183832p:plain サイズを調整しつつ敷き詰める。この状態もバックアップをとっておこう。

f:id:funyamora:20190713185602p:plain ビル壁面の変形と同じようにパースをつけよう。

f:id:funyamora:20190713184349g:plain

f:id:funyamora:20190713190011p:plain タイルを変形させただけだと艶がなくて大理石の感じがしないから 影のグラデーション、光のグラデーションを乗せるよ。 これだけでぐんと大理石に見える。

26.グラフィックツール【線を塗りに変換】

f:id:AdobeAnimateFunya:20160302165304p:plain
ふにゃクン、線ツールで描いた線を塗りにしたいと思ったこと、 あるかい?
f:id:AdobeAnimateFunya:20160302165254p:plain
あるあるふにゃ〜〜〜っ! 線ツールで描いた線ってまっすぐだから、 もうちょっと強弱をつけたいにゃ〜って!
f:id:AdobeAnimateFunya:20160302165304p:plain
[線を塗りに変換]すればできるよ。 ただし、塗りから線には戻すことができないし、修正しにくくなるよ。

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

線を塗りに変換にしてみよう。

f:id:funyamora:20190616172311p:plain

線を選択した状態で[修正/シェイプ/線を塗りに変換]する。 線が塗りに変換されるよ。 見た目は似てるけどプロパティのカラーチップが線から塗りに変化してるよ。

f:id:funyamora:20190616172618p:plain 選択状態を解除して、縁を選択ツールで動かしてみよう。

こんな時に使える。

f:id:funyamora:20190616175158p:plain このイラストのアウトラインは全て線ツールで描いた後【線を塗りに変換】して
強弱をつけているよ。

f:id:funyamora:20190616174433p:plain このイラストの枝や幹は[線を塗りに変換]を使って描かれているよ。

youtu.be 参考にしてみてね。

25.グラフィックツール【グラデーション】

f:id:AdobeAnimateFunya:20160302165304p:plain
今日はグラデーション塗りについて教えるよ。 ふにゃクンはグラデーションは好きそうだね。
f:id:AdobeAnimateFunya:20160302165254p:plain
正解ふにゃ〜♪グラデーションを使うとぐんと見栄えがよくなる気がするにゃ〜!
f:id:AdobeAnimateFunya:20160302165304p:plain
グラデーションは線と塗り、どちらにも使えるよ。 グラデーションの形状は線状と放射状の2種類あるよ。 [カラー]パネルにある[カラーの種類]のプルダウンメニューから選択してごらん。

f:id:funyamora:20190524223307p:plain

f:id:AdobeAnimateFunya:20160302165254p:plain
やってみるふにゃ〜!

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

グラデーションツール
グラデーション塗りにしてみよう。

youtu.be

グラデーションマーカーをクリックすると現れるパレットから、
もしくはスライダーからでも変更できるよ。グラデーションスライダーの下をクリックすると マーカーを増やすこともできるよ。(最大15色まで)

[塗りの変形ツール]でグラデーションを変形させてみよう

f:id:funyamora:20190530213427p:plain [塗りの変形ツール]は[自由毛変形ツール]を長押しするとでてくるよ。

f:id:funyamora:20190530211310g:plain

f:id:funyamora:20190530221111p:plain

ステージ上のグラデーションの塗りをクリックすると、動画のように枠やハンドルが表示され
ドラッグするとグラデーションの角度や位置や幅を変えられると。
△や中心の○をダブルクリックすると塗りの変形をリセットできるよ。

オーバーフローとは?

f:id:funyamora:20190531204537p:plain グラデーションの範囲外の表示設定だよ。

f:id:funyamora:20190531205416g:plain 「拡張」は端の色がそのまま延長される。
「反映」は並びを反転して表示される。
「繰り返し」はその名の通りグラデーションが繰り返される。

24.グラフィックツール【スポイト】

f:id:AdobeAnimateFunya:20160302165304p:plain
ふにゃクンはスポイトツールをちゃんと使えているかい?
f:id:AdobeAnimateFunya:20160302165254p:plain
え!使いたい色を拾ってきたり、ばんばん使ってるふにゃよ!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ…じゃあスポイトには2つタイプがあることに気づいていたかい?

1.ツールボックスのスポイト
クリックした先の設定(色・塗り・フォントの種類など)を抽出する。

2.カラーチップをクリックすると出てくるスポイト
画面内の全ての場所から色を抽出する。

f:id:AdobeAnimateFunya:20160302165304p:plain
2.のスポイトはAnimateのステージ以外からも抽出できるんだよ。 例えば、ブラウザに表示したサイトの背景画像の色とかね。

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

スポイトツール
1.ツールボックスのスポイトツール

f:id:funyamora:20190521224144p:plain クリックしたところの設定(色、塗りの種類、線幅・線の種類、フォントの種類など)を抽出できるよ。
スポイトのカーソルの形によってどこを抽出しようとしているかが確認できるよ。
クリックした部分がインスタンスやグループの場合は何も抽出できない。

2.カラーチップをクリックすると出てくるスポイト

f:id:funyamora:20190521231552p:plain 画面上の全ての色を拾えるよ。

f:id:funyamora:20190521230546p:plain 色を拾うのをキャンセルしたい場合はパレットのチップかグレーの部分をクリック 。

23.グラフィックツール応用【塗り分け】

f:id:AdobeAnimateFunya:20160302165304p:plain
選択ツールやシェイプについては詳しく勉強したね。 今回はそれを使った応用テクニックを教えちゃうよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
そういうのを待ってたふにゃよ〜!! どんな技なのにゃ!?

youtu.be

シェイプの線は塗りの上に描画されて、塗りを分割するよね。


f:id:funyamora:20190420222832g:plain 22.選択ツールダブルクリックで同じ色、太さ、線種の線のシェイプをすべて選択できるよね。

f:id:AdobeAnimateFunya:20160302165304p:plain
この2つを使ってシェイプを塗り分けるテクニックを教えちゃうよ。

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

シェイプの選択を応用した塗り

f:id:funyamora:20190422220221p:plain

youtu.be

f:id:AdobeAnimateFunya:20160302165304p:plain
イラスト上に輪郭線など他に線のシェイプがある場合、 塗り分け線はそれと違う色・線幅にしないと 選択するときにダブルクリックで一括で選択できなくなるよ。
f:id:AdobeAnimateFunya:20160302184715p:plain
それは注意にゃね〜。 この技を使えば影を簡単につけられそうにゃね!

22.グラフィックツール【矢印・なげなわツール】

f:id:AdobeAnimateFunya:20160302165304p:plain
今日は矢印・なげなわツールについて解説するよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
うーん…それはもうカンペキに使えてると思うけど…
f:id:AdobeAnimateFunya:20160302165304p:plain
たかが選択ツール、されど選択ツールだよ。

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

f:id:funyamora:20190508224152p:plain

選択

f:id:funyamora:20190420220904g:plain 基本中の基本。クリックして選択。
ちなみにほかのツールを使っているときもcommandキーを押せば
一時的に選択ツールになるよ。

ドラッグして選択

f:id:funyamora:20190420221336g:plain なにもないところからドラッグして選択ができるよ。
描画オブジェクトやシンボルは一部でもその範囲に入れば選択される。

+shiftで複数を選択

f:id:funyamora:20190420221725g:plain shiftを押しながら選択すると、任意に選べるよ。
解除したい場合はもう一度shift+クリックしよう。

シェイプを選択

f:id:funyamora:20190420220523g:plain シェイプの塗りをダブルクリックすると、その周りの線も選択されるよ。

f:id:funyamora:20190420222832g:plain シェイプの線をダブルクリックすると、その線と一続きになっている
同じ色、太さ、線種の線がすべて選択できるんだ。

なげなわツールで選択

f:id:funyamora:20190508222037p:plain なげなわツールボタンを長押しするとモードが選べるよ。

f:id:funyamora:20190508221503p:plain ・なげなわツール
なげなわツールはシェイプに使うことが多いよ。
シェイプをフリーハンドで好きな形に選択できるんだ。

f:id:funyamora:20190508221506p:plain ・多角形ツール
クリックした点で結んだ多角形で選択するよ。ダブルクリックで選択を決定できる。

f:id:funyamora:20190508223123p:plain ・自動選択ツール
分解したビットマップグラフィックから同一または類似の色を選択するよ。

選択したものをコピー

f:id:funyamora:20190420225157p:plain
選択したものは[編集]からコピー、コピー&ペースト、ペーストができる。
削除はdeleteキーだよ。

f:id:funyamora:20190420224720g:plain コピーしたいものを選択してoption+ドラッグしてもコピーできるよ。

移動

選択したものはカーソルキーで1ピクセルづつ移動できるよ。
カーソルキー+shiftキーだと10ピクセルづつ移動するよ。

シェイプの線端・交点を移動させる

f:id:funyamora:20190420230321g:plain
ツールバーにある[オブジェクト吸着ボタン]をオンにするとスナップするからおすすめだよ。

ポイントのない辺の部分を変形させる

f:id:funyamora:20190420225331g:plain

角を作る

f:id:funyamora:20190420225304g:plain

21.グラフィックツール【図形ツール】

f:id:AdobeAnimateFunya:20160302165304p:plain
今日は図形ツールについて解説するよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
図形ツールなら使ってるふにゃよ〜!円や四角を描いてるふにゃ!!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…きっとふにゃクンが知らない驚きの機能が、まだまだあるんだよ。 それじゃ紹介してくよ。

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

図形ツール

f:id:funyamora:20190422203740p:plain

[楕円ツール]と[矩形ツール]の基本

f:id:funyamora:20190420205951p:plain 楕円・矩形ツール、どちらもドラッグして描くよ。
普通にドラッグすると書き始めた点から描画され、
ドラッグ+optionキーだと始点が中心となり描画されるよ。
さらに+shiftキーで正円・正方形が描けるよ。

[楕円ツール]オプション

f:id:funyamora:20190422204510p:plain 数値を変更すればドーナツみたいな真ん中に穴の空いた円形や扇型も簡単に描けるよ。

[矩形ツール]オプション

f:id:funyamora:20190420212428p:plain [矩形ツール]を選択してプロパティ画面の[矩形オプション]の数値を変えると角が丸の四角形が描ける。

f:id:funyamora:20190420213233g:plain ドラッグした状態のままキーボードの上下矢印キーを押すと丸みの調整ができちゃうよ。

f:id:funyamora:20190420213013p:plain option+クリックするとダイアログが表示され、入力した数字の四角形が作れる。

[プリミティブ楕円ツール][プリミティブ矩形ツール]

f:id:funyamora:20190422212216p:plain [矩形ツール]・[楕円ツール]をそれぞれ長押しすると現れる。

f:id:funyamora:20190420212621p:plain [プリミティブツール]は図形を描画した後でも形を調整できるよ。
描かれた図形は描画モードのような状態で描画される。
ダブルクリックで中に入ると普通の描画オブジェクトになって形が変更できなくなるから注意してね。

[多角形ツール]の基本

f:id:funyamora:20190422211144p:plain 星形・多角形を選ぶには。[プロパティ/ツールの設定/オプション]の[スタイル:]からどちらか選べる。

f:id:funyamora:20190420214644p:plain 辺の数・星のポイント数を調整して形を作ろう。