Planning and Production企画制作部 商品開発ブログ

Flashを使わずに動的なホームページを作りたい

Adobe Flash Playerサポート終了から半年、現在ではほとんどのブラウザで、Flashを使ったサイトが見れない状況だと思います。

かんたんな動きのあるページは通常cssやJavascriptを使いますが、Flashを使わずにFlashを使ったような動的なホームページを作りたい、となったときにどんな方法があるかを調べてみたところ、現時点ではHTML5のcanvasで作るのが一般的なようです。

HTML5のcanvasを作るにはいくつか方法がありますが、Adobeから、Flashの代わりとなる「Animate CC」というソフトがHTML5のcanvas書き出しに対応しているようです。(Unityという選択肢もありますが…今回は割愛します)

Flashを作る感覚で、AnimateCCからHTML5のcanvasで、動的なホームページが作れそうです。

試しにチュートリアルの素材でかんたんなものを作ってみました。

Flashの制作のようにタイムラインにアクションを設定し、HTML5に書き出してみます。

HTML5のcanvasのコードができました。こんな感じで、いろいろと応用できそうです。

鉛筆をクリックすると線を引くアニメーションのテストページ