Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

簡単なアニメを作ってみようシリーズ【Adobe Animate.cc】

f:id:sgwshu:20180307125036j:plain

こんにちは。課題でAnimate.cc使わないといけなかったので簡単に使い方まとめてみました。Flashはオワコンなんですが簡単なアニメとかを作る時に使えるかもしれないです。

Animate.ccとは

基本的にはflashを視覚的に作れるソフトウェアで現在のウェブニーズに合わせてhtml5 Canvasに書き出せたりするみたいです。今回は学校でFlashを使って勉強したのでそれを基準に解説していきます。

 

最初に

プロパティはよく使うので

上部からウインドウ > プロパティより表示させておいてください。

それとタイムラインは物体を動かす際に必要なので同じく表示させてください。

 

描写モードオンと描写モードオフの違い

四角形や丸を作る時に描写モードオンとオフがプロパティ内に表示されます。

オフ:四角形ツールや円ツールで書いたものが合体して1つのオブジェクトになります

オン:四角形ツールや円ツールで書いたものにパスが発生してお互いに干渉しあいません(バラバラに動かせる)

ちなみにイラレやフォトショと違うところが

オブジェクトの端の方に選択ツール(黒矢印)を持っていくと

f:id:sgwshu:20180307113830j:plain

矢印が↑こんな感じのマークを示すのでオブジェクトの端を掴んで動かすと

f:id:sgwshu:20180307113941p:plain

円だった物体をこんな感じに変形したりできるので面白いと思います(笑)

 

物体を移動させる

では簡単に物体を横に動かします。

基本的にフレームを入れてからアニメーション化するって感じですね。

タイムライン上で右クリックをしてフレームを挿入してください。

f:id:sgwshu:20180307123334p:plain

フレームを挿入:エンドポイントを設定できます。例えば3秒の位置でフレームを挿入すると3秒間のアニメを作ることができます。これをクリックすると透明の四角ができます。

 

次に始まりと終わりの間のタイムライン上で右クリックをしてモーションツイーン、シェイプツイーンのどちらかを選びます。

物体を動かしたい時はモーション。大きさを変えたい時はシェイプを選んでください。

f:id:sgwshu:20180307122823j:plain

↓とりあえずシンボルにしろってことなのでOKを選んでください。

f:id:sgwshu:20180307122410p:plain

タイムラインが青くなったら成功です。タイムラインの赤いバーを動きを終えたい時間にセットします。

f:id:sgwshu:20180307123516j:plain

オブジェクトを動かしたい位置に移動すると青い線が出てきます。

そして再生を押すとオブジェクトが動きます。

完成物

こんな感じ(笑)

f:id:sgwshu:20180307122007g:plain

てなわけで今日は簡単に物体を動かす方法をまとめてみました。

ちなみに単純なgifデータにする場合はファイル>エクスポート>Gifで保存を選択してこのどれかを選択すると保存されます。

f:id:sgwshu:20180307122456p:plain

長くなってきたのでまた続きは次回。

SeeeeeYaaaaaaa!!!!!