vol1.ではEdge 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をリンクづけることも出来ます。
2)背景色
左側は単一の背景色
右側はグラデーションを指定
右側をクリックしてカラーパネルを表示させた画像です。
3)最小幅/最大幅
最小幅と最大幅を設定することも出来ます。
他の箇所もですがカーソルをあてるとソースが表示されます。
最大幅100%の場合はstyle="width:100%;"です。
なんだか、テンション上がりますね！
画像を可変にする場合は%で作成します。
【pxと%の切り替え方法】
すぐ右にあるつまみ
上→px
下→%
4)オーバーフロー
はみ出た分をどうするか。
（overflow:hidden;）など
5)自動再生
表示した時に自動で再生させるかどうかをチェックで選択。
onmouseなど任意のタイミングで動かしたい場合は外します。
6)コンポジションクラス
Edge Animateで作成したアニメーションに割り当てられるClass名を指定出来ます。
【EDGE-ichigoとした場合】
1.5からはじめるIT勉強会
7)下位ステージ
レガシーブラウザ（IE8以下）で表示させる代替画像を設定出来ます。
レガシーブラウザ対策として、代替画像以外の方法もあります。
「Google Chrome Frame」
これは、ユーザー側がダウンロードして使用している必要があります。
また、有効にするには ファイル＞パブリッシュ設定 で設定します。
Google Chrome Frame使用ユーザーの割合が多くても少なくても代替画像はまだまだ必須ですね。
8)ポスター
下位ステージをクリック。
9)プリローダー
プリローダーも設定出来ます。
好きな画像からでも選択画像からでも選べます。
リンクURLやサイズなど色々変更出来ます。
(※)について
clickイベントなど設定出来ます。
次の次あたりのサンプルまたは勉強会で説明したいと思います。
上の説明はステージに対するプロパティでしたが、
図形を作成したりテキストを入力するとそれ用のプロパティパネルへと項目が変わります。
シャドウやフィルターなどがあります！！
セピア、色相循環、彩度ですっ！
もうphotoshopにしか見えなくなってきましたね。←イヤイヤ違います。
photoshopと違って出力はソースなので、出来る範囲が限られており、
ゆがみや表現手法などcssで再現出来ない効果はできません。
また、効果以外に、図形やテキストに任意のclass名を付けたりカーソルマークを選べたりアクションを付けることも出来ます。
ステージ
ステージについて説明します。
描画領域です。
ここに画像をD&Dしたりテキストを記述したりします。
エレメントパネル
ステージに色々と画像やテキストを置くと下の画像のようになります。
DOMの構造が表示されています。
エレメントパネル内はD&Dで順番を入れ替えることが出来ます。
（ライブラリパネルは×）
なんだかレイヤーっぽですね。
ライブラリーパネル
画像を読み込むとライブラリーパネルに表示されます。
順番が上の方ほど手前に表示されます。
下のシンボル・フォントも同じように表示されます。
タイムラインパネル
タイムラインには、ステージ内の画像やテキストなどが表示されます。
1)自動キーフレームモード
自動キーフレームをクリックします。
1.図形をスタート地点に移動させます。
2.つまみを横スライドさせます。
3.動かしたい位置へ移動させます。
再生すると、左下にある図形が1秒経つと右上へと瞬間移動のように移動します。
2)自動トランジションモード
段階的な遷移のあるキーフレームが挿入されます。
使用する時は自動キーフレームモードと一緒にONにします。
自動キーレフームの例では瞬間移動のような動きでしたが、作成時に自動トランジションモードをONにするだけで、
左下から右上へ、滑らかな移動になります。
3)ピンの切り替え
タイムライン上の編集が記録されます。
余計な動きをする場合はそのつど切っておいた方が作成しやすいです。
（余計な動き=画像の位置を調整するなど再生時の動きとは関係ない変化）
4)イージング
上の項目を選択するだけで直線的な移動に動きをつけることが出来ます。
5)トリガーを挿入
クリックすると、スニペットとソースが表示されます。
下の画像は右のスニペットを上から順にクリックした状態です。
JSが書けなくてもイベントを付けることが出来ます！
Webフォントの使い方を説明していなかったり、サンプルが一切なかったりと
ツッコミどころのある記事ですが、最後まで読んで頂きありがとうございます。
まだまだ続く予定です★