Animateについて大まかな説明をしました。今回は操作画面について説明します。左上から時計回りに説明します。ツールパネルツールパネルについて説明します。左から、1)選択ツール(V)2)変形ツール(Q)3)切り抜きツール(C)4)長方形ツール(M)5)角丸長方形ツール(R)6)楕円形ツール(O)7)テキストツール(T)8)背景色指定9)ボーダー色指定1)〜9)長方形や楕円などの図形を作成したり出来ます。(V)などはショートカットキーです。ショートカットキーLOVEなので有り難いです!便利なのでじゃんじゃん使っていきたいところですね。10)新しいエレメントのレイアウトの初期設定ここから色々と設定出来ます。プロパティパネルプロパティパネルの説明をします。1)ステージ幅・高さステージで幅や高さを指定します。widthとheightをリンクづけることも出来ます。右側をクリックしてカラーパネルを表示させた画像です。最小幅と最大幅を設定することも出来ます。他の箇所もですがカーソルをあてるとソースが表示されます。最大幅100%の場合はstyle="width:100%;"です。なんだか、テンション上がりますね!画像を可変にする場合は%で作成します。【pxと%の切り替え方法】すぐ右にあるつまみ上→px下→%4)オーバーフローはみ出た分をどうするか。表示した時に自動で再生させるかどうかをチェックで選択。onmouseなど任意のタイミングで動かしたい場合は外します。Animateで作成したアニメーションに割り当てられるClass名を指定出来ます。End-->7)下位ステージレガシーブラウザ(IE8以下)で表示させる代替画像を設定出来ます。レガシーブラウザ対策として、代替画像以外の方法もあります。Frame」これは、ユーザー側がダウンロードして使用している必要があります。Frame使用ユーザーの割合が多くても少なくても代替画像はまだまだ必須ですね。下位ステージをクリック。9)プリローダープリローダーも設定出来ます。好きな画像からでも選択画像からでも選べます。リンクURLやサイズなど色々変更出来ます。(※)についてclickイベントなど設定出来ます。次の次あたりのサンプルまたは勉強会で説明したいと思います。図形を作成したりテキストを入力するとそれ用のプロパティパネルへと項目が変わります。シャドウやフィルターなどがあります!!セピア、色相循環、彩度ですっ!もうphotoshopにしか見えなくなってきましたね。photoshopと違って出力はソースなので、出来る範囲が限られており、ゆがみや表現手法などcssで再現出来ない効果はできません。効果以外に、図形やテキストに任意のclass名を付けたりカーソルマークを選べたりアクションを付けることも出来ます。ステージステージについて説明します。ここに画像をD&Dしたりテキストを記述したりします。エレメントパネルステージに色々と画像やテキストを置くと下の画像のようになります。DOMの構造が表示されています。エレメントパネル内はD&Dで順番を入れ替えることが出来ます。(ライブラリパネルは×)なんだかレイヤーっぽですね。ライブラリーパネル画像を読み込むとライブラリーパネルに表示されます。順番が上の方ほど手前に表示されます。下のシンボル・フォントも同じように表示されます。タイムラインパネルタイムラインには、ステージ内の画像やテキストなどが表示されます。1)自動キーフレームモード自動キーフレームをクリックします。1.図形をスタート地点に移動させます。2.つまみを横スライドさせます。3.動かしたい位置へ移動させます。再生すると、左下にある図形が1秒経つと右上へと瞬間移動のように移動します。2)自動トランジションモード段階的な遷移のあるキーフレームが挿入されます。使用する時は自動キーフレームモードと一緒にONにします。左下から右上へ、滑らかな移動になります。3)ピンの切り替えタイムライン上の編集が記録されます。余計な動きをする場合はそのつど切っておいた方が作成しやすいです。(余計な動き=画像の位置を調整するなど再生時の動きとは関係ない変化)4)イージング上の項目を選択するだけで直線的な移動に動きをつけることが出来ます。5)トリガーを挿入クリックすると、スニペットとソースが表示されます。下の画像は右のスニペットを上から順にクリックした状態です。JSが書けなくてもイベントを付けることが出来ます!Webフォントの使い方を説明していなかったり、サンプルが一切なかったりとツッコミどころのある記事ですが、最後まで読んで頂きありがとうございます。「HTMMOREjsCafe12回目に参加してきました。jsCafe12回目に参加してきました。今回はNodeMOREMovableType.netでアロマのサイトをリニューアルしました。前回の更新から結構経ってしまいました。meまり絵1986年生まれ。Web制作会社を経て、2015年からフリーランスで働いています。Webデザイナー/マークアップエンジニア好きなものは、トラベラーズノート・着物・バレエ。