連載
» 2014年05月14日 18時00分 UPDATE

Webサイト作成手順を勉強するまとめ(3):HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選 (1/3)

新社会人のWeb制作者/デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回はWebアニメーション制作に役立つEdge AnimateやFlash の使い方について。エレメント、シンボル、モーションパスの使い方から、パブリッシュ方法、レスポンシブ対応、音の付け方、Flashからの変換まで、さまざまなテクニックを紹介します。

[岡本紳吾,hatte.Inc]

 前々回の「初心者でもPhotoshopの基本的な使い方が分かる入門記事9選」、前回の「HTML・CSS・WordPress初心者のためのDreamweaverの基本的な使い方が分かる記事10選」でWebサイトを作れるようになったら、Webサイトにさまざまな動きを加えたくなるだろう。

 Webアニメーションは、ここ数年で大きく様変わりしてきた。またアニメーションではないが、さまざまな動きを持ったWebサイトもたくさん作られるようになってきている。

 Webアニメーションを制作するツールも多数存在する。例えば、アドビ システムズが提供しているWebアニメーションのツールは、「Adobe Edge Animate」(以下、Edge Animate)と「Adobe Flash Professional」(以下、Flash)がある。

 Flashについては、基本的にFlash PlayerがWebブラウザーのプラグインとして搭載されていないと、Flashで制作したアイニメーションを動かせないので、スマートフォン対応が難しいが、HTML5書き出し機能などでFlashのアニメーションをマルチデバイス向けに作ることができるようになっている。

 これらのツールの使い方をマスターしておけば、突然のWebアニメーション制作案件にも困らなくて済むはずだ。今回は、Webアニメーションの作り方についてEdge AnimateとFlashを例に、提供元であるアドビ システムズが使い方を無料で解説している「Adobe Pinch In」の記事を一部引用しながら、現場で使える具体的な制作手順とテクニックをまとめて紹介していこう。

【ステップ0】初めに2種類のワークフローを把握しておこう

 Edge AnimateはJavaScriptベースのアニメーションを手軽に作成できるツールだ。AfterEffectsっぽいタイムラインを操作して、エレメント(要素)を動かしたり変形したりできるようになっている。JavaScriptベースなので、生成したアニメーションをテキストエディターで調整することもできる。

 まずはEdge Animateでどんなことができるのかを見てみよう。

 Edge Animateは、はじめからアニメーションを作っていく方法と、既存のHTMLを加工する方法の2種類のワークフローが存在する。特に後者は既存サイトの改修などで効率的にアニメーションを導入できるようになっている。

【ステップ1】アニメーションツールの基本「エレメント」を使う

 アニメーションツールの基本はまず、エレメント(要素)の配置や位置調整、大きさの調整をマスターすることだ。エレメントの階層構造にも注目できるようになっておこう。

【ステップ2】「キーフレーム」を使いアニメーションを動かす

 配置をマスターしたらまず動かしてみよう。キーフレームを利用したアニメーションはEdge Animate以外のアニメーションツールでも採用されている方法なので、ここでマスターしておけば、他のツールでもすぐに理解できるようになる。

 Edge Animateでは自動的にアニメーションを設定してくれる機能が付いているのだが、場合によってはアニメーションが設定されると困る場合がある。画面外に出した要素を他の場所から画面内に入れたいといったときなどだ。

 この切り替えを理解しておくことと、Edge Animate独自の「ピン」ツールを利用したアニメーションの設定をマスターしておけば、迅速にアニメーションを作っていくことができるようになる。

adobe_matome3_03.jpg ピンツールを使ってアニメーションを作成する手順(Edge Animate入門第3回 エレメントのアニメーション(Adobe Pinch In)より引用)

【ステップ3】アニメーションをHTML内に表示する

 アニメーションを動かせるようになったらいよいよパブリッシュだ。Flashの場合は書き出ししたswfファイルを貼り付ける作業だったが、Edge Animateの場合はJavaScriptなので、スクリプトを読み込ませて、再生したい場所でそのスクリプトを実行させる必要がある。既存のサイトに貼り付けるには、書き出されたhtmlのソースをコピーペーストすればOKだ。

adobe_matome3_04.jpg コンテンツをパブリッシュする(Edge Animate入門第4回 既存のHTML内に表示する(Adobe Pinch In)より引用)
       1|2|3 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。