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

» 2014年05月14日 18時00分 公開
[岡本紳吾，hatte.Inc]
前のページへ 1|2|3 　　　　　　

【ステップ8】HTML5のaudioを使いアニメーションに「音」を付ける

　Edge Animateは以前は音を鳴らすことができなかった（パブリッシュ後にJavaScriptを編集して鳴らすことはできた）が、現在は画面上で音の追加ができるようになっている。音が鳴らせるということは、コンテンツをよりリッチに見せられるということだ。

【ステップ9】flaファイルをHTML5書き出し機能でWebアニメーションに変換

　「Flashは終わった」「いやいや、まだ終わっていない」という議論がまだあちこちで聞こえてくる。Flashが使われなくなってきているとはいえ、古いサイトの改修案件やソーシャルゲーム、さまざまなサービスのモックアップ作成などでFlashは活用されている。

　FlashはHTML5書き出し機能が搭載されている。「CreateJS」という技術を使ったもので、CC以前は拡張機能で実現されていた機能だ。コードは「ActionScript 3」ではなくJavaScriptを用いるのだが、拡張機能のときは煩雑だったスクリプト記述がちょっとシンプルに改修されている。

　もちろん、面倒なスクリプトを記述しなくても、タイムラインのアニメーションはそのまま書き出ししてくれる。Flashの持つ便利なアニメーション作成の環境を利用して、マルチデバイスに対応したアニメーションを作成してみよう。

【ステップ10】Flash LiteコンテンツをHTML5アニメーションに変換

　少々古い記事になるが、Flash CS6でのさまざまなパブリッシュ形式を解説している記事も紹介しておきたい。というのも、Flash CCとCS6は別物と言っていいほど違いがあるツールとなっていて、特に日本のソーシャルゲームでよく使われているFlash LiteはFlash CS6でしか扱えないのだ。

　ActionScript 2.0で開発されたコンテンツのメンテナンスを行う際も、Flash CS6が必要となるので、CCだけではなくCS6もチェックしておくといいだろう。Creative Cloudならどちらもインストールできる。

次回は、絵心が無い人でもフラットデザインな素材を作る

　今回はWebアニメーションツールにフォーカスして紹介した。最近ではWebサイトの中に小さな動きを加えるマイクロインタラクションというものも注目され始めている。技術の変化が激しい世界なので、過去作成したモノのメンテナンスを行う際、古い技術を知っているかどうかでも対応が大きく変わってくるだろう。

　さて、Webサイトがあらかた作れるようになり、Webアニメーションも作れるようになったら、はやりの「フラットデザイン」も取り込んでWeb制作に生かせるようになろう。まずはフラットデザインがどんなものか理解して、絵心が無い人でもフラットデザインな素材が作れる「Adobe Fireworks」の使い方を例に、アイコンやボタンなどに使える素材の作り方を紹介するのでお楽しみに。

　もちろん「Adobe Pinch In」では、すぐにFireworksの記事が読めるので、そちらも参照してほしい。

岡本 紳吾（おかもと しんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto


前のページへ 1|2|3 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

＠IT

@ITについて

RSSについて

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

メールマガジン登録

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