WEBデザイナーズNEXT

Webデザイナー

FlashCanvasを使ってリッチなビジュアルを作成する

カテゴリー:HTML
Pocket

FlashCanvas

FlashがiOS(iPhone)で使用できなくなってから、Flashの存在はどんどん小さくなってきました。
アプリ作成などでAIRを使用したりする事はあるのですが、Web製作でFLASHアプリケーションを開く事はほとんどなくなったんですよね。

しかし、HTML5から追加されたエレメントである「canvas」というものと「Flash」を組み合わせて面白いものが作れるんです。
今回は「FlashCanvas」を使ったコンテンツについてまとめてみました。

スポンサードリンク

FlashCanvasとは?

あんまり詳しい事はわからないので、私が知っている限りで紹介しますね。

Flashはパブリッシュすると「swf」という拡張子のファイルが出来上がります。
スクリプトは「アクションスクリプト(ActionScript)」というものを記述して、動きのあるコンテンツを作りますよね。

しかし、CanvasではFlashでアニメーションを作り、Javascriptで動かすって感じでしょうか。
詳しい人が見たら「そうじゃない!」とか突っ込まれるかもしれませんが、間違ってはいないんじゃないかなと思います。

FlashCanvasで何ができるの?

jQueryなどが流行る前は、アニメーションや動きのあるトップビジュアルを作るときはFlashで作成してましたよね?
単純にそれと同じ事です。

違いとしては、swfを使用せず、「html + css + js + img」という形になるという事かなと思います。

スライダーやカルーセル、その他動きのあるトップビジュアルを自由に作成する事ができます。

FlashCanvasを使ったDEMO(サンプル)

簡単なアニメーションを使って作ってみました。ボタンの設置なども行い、リンクも設定してみました。
時間をかければかなり複雑な事もできます。

いかがでしょうか?iPhoneやAndroid端末でも問題なく表示されるはずです。
もし、きちんと表示ができていない端末があったら、大変お手数ではございますがツイッターで一報いただけると幸いです。よろしくお願いいたします!

WEBデザイナーズNEXT公式ツイッター

FlashCanvasを使うメリット

  • swfファイルを使用しないので、iPhoneなどの端末でも見れる
  • 自由にアニメーションやスライダー、カルーセルなどの仕組みが作れる
  • 当然レスポンシブにも対応できる
  • swfのようにコンパイルする訳ではないので、画像の差し替えなどは元ファイルを触らなくてもできる
  • Flashを経験している人は、比較的短時間でコンテンツを作成できる

iOS(iPhoneなど)で使えるのは嬉しいですよね。jQueryのカスタマイズは面倒だし、ライセンス問題もあるし、自由度がかなり低いイメージでしたが、FlashCanvasを使えばかなり自由に作成できます。

FlashCanvasを使うデメリット

  • 自由度が高いがゆえにjQueryを使うよりは若干時間がかかる
  • canvasという仕組みがHTML5からのものなので、古いブラウザ(IE8以前)に対応していない
  • 特にスマホの場合、どの端末、どのブラウザで使用できないのかがチェックし切れていない(HTML5以降の端末なら大丈夫なはず)

こんな所でしょうか。

数年前までは「IE8以降も対応!」という情け容赦ない指示を受けましたが、最近はめっきり言われなくなりました。
Canvasを標準的に使えるようになると面白いんですけどね~。

FlashCanvasは実践で使用できるのか?

HTML5以前のものも対応しなければいけない状況であれば使用するのにためらいます。
もちろん条件分岐などで対応すればいいのですが、正直面倒です…。

ただ、XPもほぼ消滅し、HTML5が標準になってきた今、そろそろ使ってもいいんじゃないかなぁ…って思っています。
JavaScriptはアクションスクリプトよりも不得意ですが、元々Flash大好き人間だったので、使用できるようになればすごく幅が広がるなぁ…と思っています。

ちなみにまだ実践で使用した事はありません…。何かあったら嫌なので。

「仕事として既に使ってるよ!」というご意見や、「今回アップされているDEMOが見れないんだけど…」なんていう方がいたら、ツイッターにてご一報頂けると非常にうれしいです!よろしくお願いいたします!

WEBデザイナーズNEXT公式ツイッター

追記:2016年10月14日

現在はFlashからAnimateになりましたね。使用しているソフトは「Adobe Animate CC」です。
Animate CCを使用してゲームコンテンツを作っているので、下の記事も読んでみてくださいね。

スポンサードリンク

Pocket

カテゴリー:HTML
WEBデザイナーズNEXT TOP