Reports レポート

ニフティクリエイティブデザイン部の部員が参加した、「セミナー」や「展示会」のレポートです。

アイコン画像

担当- 西野 香織

日付- 2012年05月09日

Edgeでつくってみよう css3アニメーション

こんにちは、はじめまして。
ニフティでHTML/CSSコーディングをしているにしのです。たまにイラストをかいたり、ディレクションもします。
好きなcssプロパティはbox-sizingです。

今回のレポートでは、AdobeのCSS3オーサリングツールであるEdgeの簡単な使い方について書こうと思います。

■CSS3アニメーションとは

Edgeをつかう前に、CSS3アニメーションについて簡単に説明します。

WEBのアニメーションというと、FLASHか、JSでポジションをずらしながら
アニメーションを表示するという方法が今までのスタンダードでした。

ですが、HTML5の登場で、アニメーションがFLASHでもJSでもなく、CSSで制御できるようになりました。
JSよりもアニメーションの処理が早く、スマートフォン対応でFLASHが使えない場合などにも活躍します。

しかし、FLASHのようなGUIツールがほとんどなく、少しの調整にもひとつひとつ数値を打ちかえてつくっていくのが通例でした。


■Edgeについて

そんな折、AdobeよりCSS3アニメーションをGUIでつくれる「Edge」のプレビュー版が公開されました。
FLASHに似たGUI画面で、簡単にCSSアニメーションを試すことができます。

いままでCSS3で「右に180px移動しつつ40°傾いて、上に80px移動して2秒後に透明度が0…」など
脳内プレビューをフル活用しながら書いていたCSSアニメーションですが、
Edgeを使えば、CSSが書けなくても、GUIのツールで感覚的にアニメーションさせることができます。

ではさっそく使ってみましょう。

今回は、特集記事にもあるふきだしッターの初期案でアニメーションをつくってみたいとおもいます。

完成サンプル

今回、アニメーションに焦点をあてたいので、ツイートをとってくる部分は省略しています。


■■目次■■

インストール

起動

事前準備

オブジェクトを配置する

クリッピングする

アニメーションさせる

スケールの変更

透明度の変更

ポジションの変更

完成!

さいごに




■インストール

http://labs.adobe.com/technologies/edge/

Download nowからzipファイルを落とします。

ここからDL

AdobeアカウントがないとDLできません。
ちなみにEdgeはWindows Vista,Windows 7が対象となります。


■起動

解凍されたファイルを実行して、インストール完了です。
「Eg」と書かれたアイコンをクリックしましょう。

初回起動時は「Edgeの試用期間は残り何日です…」というような
アラートがでると思いますが、特に問題はないのでOKを押してください。

※おそらくですが、試用期間をすぎるとまたバージョンアップした
 Edgeプレビュー版が出るので、今のところは残日数はあまり
 気にしなくてよいと思います。


■事前準備

今回は、自分も制作に携わったふきだしッター
初期案バージョンを作ってみようと思います。

初期案段階はもう少し漫画要素が強く、
まんがのコマの上に、ふきだしがアニメーションで現れるものを
考えていました。

さて、アニメーションをEdgeでつくってみましょう。

この作例で使う画像は、下記にzipでまとめてあります。適宜DLください。

サンプルファイル


■オブジェクトを配置する

Create new をクリックして新規ファイルをつくります。
Create newをクリック



デフォルトで550×400のステージが置かれるので、
今回の背景画像のサイズにあわせて585×800にステージの大きさを変更します。



リサイズしたら、ベースとなる背景画像を置きます。
Phosothopなどと同じように、画像をステージD&Dで配置できます。

ステージの縁のほうに画像をもっていくと、ステージとオブジェクトが
ちょうど重なる場所で赤いラインが表示されます。
ステージとオブジェクトがちょうど重なる場所で赤いライン



背景画像はアニメーションさせないので、誤って動かさないようロックをかけます。
ロック



Elementsに、ステージ内に配置されたオブジェクトがツリー構造で表示されています。
bgというオブジェクトの左側にある●にカーソルを合わせると、●が鍵のマークに変わるので
それをクリックしてオブジェクトをロックします。
ロックされたオブジェクト(bg)は、マウスでつかんでも動かなくなっているはずです。



この要領で、ふきだしも配置していきます。
ふきだしはアニメーションさせるので、オブジェクトをロックしないようにしてください。



この段階では、すべてのふきだしがコマの外にはみだしていて問題ないです。
ふきだしをすべて置いた図




■クリッピングする

続いて、コマの中に収まってほしいふきだしをクリッピングします。



画面左上に並んでいるツールで、選択ツール(Selection Tool)の2つ隣、
点線で囲まれたツール(Clipping Tool)を選択してください。
クリッピングツール選択



Clipping Tool選択後bln3というオブジェクトをクリックすると、bln3オブジェクトが緑のボックスに囲まれ、選択状態になります。
このボックスが、このオブジェクトの表示範囲になります。
クリッピング



緑のボックスの左下を選択し、小さくすると表示範囲が縮まります。
うまくコマに収まるよう調節してください。
表示範囲の調整



ほか、bln6,bln7,bln8も同様に表示範囲を調整します。
(ついでにほかのオブジェクトも位置の調整をしました)
表示範囲の調整



プレビュー版のためか(?)Edgeはたびたび落ちることがあるので、
こまめな保存を心がけてください。




■アニメーションさせる

点線で囲まれたツール(Clipping Tool)から選択ツール(Selection Tool)に切り替えます。
画面左上、矢印のツールをクリックしてください。
選択ツール



タイトルである「mockup」と書かれたふきだし(bln1)をクリックします。
ではアニメーションをつけていきましょう。



画面左側「Scale」の文字の頭についている◇をクリックしてください。
アニメーションの始点にキーフレームを打つ



すると、画面下、TimelineにScale(x),Scale(y)という項目が増えます。
Scale(x),Scale(y)という項目が増える




■スケールの変更

bln1は、サイズが0の状態からだんだん大きくなって、
ポンと飛び出すようなアニメーションにしたいとおもいます。
実際には、Scaleのサイズを0~1に変更することで、画像を大きくしていきます。



Timelineにあるつまみを、0:01までひっぱります。
つまみを移動させたあと、Timeline内、bln1のScale(x),Scale(y)それぞれの文字の
右側にある◇をクリックします。そうすると、0:01にも、0:00と同様に2つ◆がつきます。
アニメーションの終点にキーフレームを打つ



この◆(キーフレーム)を起点として、アニメーションをつくります。



ここでは、Scaleのサイズを0~100に変更することで、だんだん画像を大きくしていきます。
つまり、0:00でサイズ0、0:01でサイズ100になります。



0:00(開始)時点では、bln1はサイズ0なので、Timelineのつまみを0:00に戻してください。
Timelineのつまみを0:00に戻す



選択ツール(Selection Tool)でbln1を選択済であることを確認し、
画面左Scaleの値を0に変更します。



初期状態では縦横の比率を保ってサイズを変形するので、X,Yの値ともに0になりますが、
0の数値を入力したと同時に、サイズが0になったためオブジェクトが消えます。



Timelineにある再生ボタンをクリックすると、ややゆっくりとふきだしが拡大します。
再生ボタン
Timelineのつまみが0:01へと動き、ステージの状態も1秒後の状態になるため、
bln1が表示されているはずです。 アニメーションの表示時間がややゆっくりなので、 キーフレームの位置をずらして、時間を調整してください。 (0:00.500あたりがよいかと思います)


■透明度の変更

ただ拡大縮小するだけだと、アニメーションがややもったりする感じがあるので
スケールの変更にあわせて、透明度も変更してみます。



bln1を選択して、つまみを0:00にあわせ、画面左、Opacity(透明度)の◇をクリックして、タイムラインに◆を打ちます。
スケールのアニメーションが終わる位置にも、同様にOpacityの◆を打ちましょう。
Opacity(透明度)のキーフレームを打つ



Timelineのつまみを0:00に戻し、Opacityを0にします。
数値を直接入力してもよいですが、スライダーを左にずらしても透明度が調節できます。
透明度を下げる



0:00のOpacityを0にして、再生ボタンを押してみましょう。
これで、フェードインしながらふきだしが現れます。



ここまでのサンプルファイル




■ポジションの変更

今度はbln2に、下から上にフェードインしながら現れるようなアニメーションをあてます。



矢印ツールでbln2を選択し、画面左からLocationの◇をクリックして、Timelineの0:00.500の位置に◆を打ちます。
Locationの変更



Translate(x),Translate(y)という項目が追加されます。
Translate(x),Translate(y)という項目が追加される



Timelineのつまみを0:01にずらし、そこにも同様に、Locationの◇をクリックして◆を打ちます。
今回は下から上に動かしたいので、つまみを0:00.500に戻し、bln2のオブジェクトを
適当な位置まで下げます。
このとき、Shiftを押しながら下げると、垂直に下げることができます。
再生してみると、下から上にオブジェクトが移動します。
bln2もbln1と同様に、Opacityを変更しましょう。
Opacityの変更方法は3-2を参考にしてください。



ここまでのサンプルファイル




■完成!

ここまでで、一通りアニメーションのつけ方がわかったと思います。
ほかにも画面左にはRotate(回転)、Skew(ゆがみ)などの変形プロパティがあるので、
触ってみて変形の方法を見てみてください。
これで完成です!



完成ファイル




■さいごに

CSSを一行も描かなくても、CSSアニメーションが完成しました!
書き出されるファイルはCSSでなくJSですが、
JSでオブジェクトひとつひとつに直書きでCSSをあてています。

以上がEdgeの基本的な使い方となります。
今回の内容は私個人が調べた限りとなるので、もっと効果的・適切な方法が
あるかもしれませんが、ご容赦ください。よろしければ私のTwitterアカウントまでメンションをください。

今回の方法だと、ステージの中でしかアニメーションができませんが、
例えば、サイトのナビゲーションにちょっとしたアニメーションをつけたいときなど、
すでにあるHTMLをEdgeに取り込むこともできます。
しかし、オブジェクトの操作に制限がかかったり(十分に検証していませんが、clippingができませんでした)
思ったようなアニメーションをしなかったりと
業務で使うにはまだまだ発展途上な部分がありそうです。

まだ実用するには足りない点も多いですが、プレビュー版は触ってみる価値があると思っています。
CSSに関する知識がなくても、Edgeを通じて、CSSアニメーションでどんな動きができるのかが一通りわかるようになるはずです。
JSとFLASHとCSS、どちらでつくるのが効率的か迷ったときのモック作成や、
FLASHを触ったことがある人がCSS3アニメーションにチャレンジしてみるには
なかなか良いツールだと思います。

これを機に、いろいろとEdgeで遊んでみようと思います。
ではまた!