Your SlideShare is downloading. ×
0
Html5 20101105
Html5 20101105
Html5 20101105
Html5 20101105
Html5 20101105
Html5 20101105
Html5 20101105
Html5 20101105
Html5 20101105
Html5 20101105
Html5 20101105
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 20101105

1,302

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,302
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Smokescreenを使ってみました 2010/11/05
  • 2. 自己紹介 名前:岡崎 祥明(オカザキ ヨシアキ) 会社:(有)九州デザイン 仕事:Webデザイナー Twitter:@tw_oka
  • 3. Smokescreen概要 Smokescreenは、Flashを分解してHTML5+JavaScriptで再構築するライブラリ。具体的にはフ ラッシュのswfファイルを読み込み、中にあるスクリプトデータをJavaScriptに変換、画像データ と音声データも抽出し、HTML5として再構成してウェブページ内にSVGとしてロードするという 荒技にもほどがあるつくりです。現在はまだダウンロードできるものは出ていないが、間もなく の登場予定…6月くらいからずっと登場予定…。 ◎Smokescreenとは Javascript で構成されているためFlashプラグインのない端末でもFlashファイルが読みこめるこ と。つまりiPhoneやiPadなどでもアプリを入れずにFlashの内容を表示できるのが最大の魅力。 ◎Smokescreenの魅力
  • 4. Smokescreen概要 http://smokescreen.us/demo/ ◎サンプル
  • 5. Smokescreen概要 <script type="text/javascript" src="js/smokescreen.js"></script> <script> function urlParam(name, _default) { name = name.replace(/[[]/,"[").replace(/[]]/,"]") var regexS = "[?&]" + name + "=([^&#]*)" var regex = new RegExp(regexS) var results = regex.exec(window.location.href) if (results == null) { return _default } else { return results[1] } } function embed(container, withSmokescreen) { var size = urlParam('size', 1) var url = 'swf/photo.swf' var width = 930 * size var height = 330 * size var params = {} if (withSmokescreen) { var name = 'msad' var element = document.getElementById(container) new Smokescreen(url, element, width, height, name, params) } else { swfobject.embedSWF(url, container, width, height, '9.0.0', null, params) } } </script> ◎Smokescreenの使いかた すみません、ここは何の処理をしているのか、解読でき ませんでした…。でも、無いと動きません。 “var url”にswffファイルのパス。 ”var width”と”var height”にサイズを設定。 そして、この関数に書き出したい部分のid名を 渡して読んであげると動く。 Smokescreenを読み込む
  • 6. Smokescreen概要 変換できるのは限定的な機能。特にActionScriptは上手く動いてくれない。 ◎Smokescreenの弱点 Flashを使用する目的は単に動きを見せることではなく 「扱う情報を魅力的に見せてその情報へユーザーを誘導すること」を目的に使っている気がする。 そう考えると各ムービークリップに埋めているリンク機能がうまく動いてくれないのはかなり痛い!!
  • 7. Smokescreenに代わるもの 今すぐ、無料で使えるというわけではないのですが、以下の記事のものが“Flash→HTML5” の本命になるような気がします。 ◎Smokescreenに代わるもの 1. やっぱり本命ADOBE http://www.adobe.com/jp/joc/max/articles/sneakpeeks/ http://www.publickey1.jp/blog/10/adobe_max_2010html5jquerywebedge.html 2. 成功したそうです。 http://cloque.jp/information/20101025/
  • 8. Smokescreenに代わるもの Flashを変換するんじゃなくて、最初から変換しなくて済むように作っちゃえ! ◎Smokescreenを使わずに済むように 1. イラレのデータをSVGに。アニメーションも化! http://www.moongift.jp/2010/10/201010210000/ 2. 個人的にお気に入り。 http://extjs.co.jp/products/animator/
  • 9. 今日明日にでもFlash→HTML5が必要な場合(リンク機能も含めて) SmokescreenはFlashをSVGに変換してくれるわけだから、変換されたSVGに細工をしてしまえ ば機能を補完していけるのではないか? ◎Smokescreenを強引に使ってみる SVGにアクセスするためにJquery SVGを使用してみる。 http://keith-wood.name/svgRef.html こいつで、リンクを張ったムービークリップにアクセスして、リンクを張り付けてしまえばOK!? サンプル:http://minimal-hitech.com/sample/smokescreen/sample.html ※とにかく重いのでご覧になる際は、ご注意ください。
  • 10. 今日明日にでもFlash→HTML5が必要な場合(リンク機能も含めて) ◎サンプルソース説明 <script type="text/javascript" src="js/smokescreen.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.svg.js"></script> <script type="text/javascript"> function newSvg() { var wrapper = $('#fljs').svg({onLoad: embed('fljs', true)}); }; function idCheck() { var svg = $("#fljs").svg('get'); for (i=0; i<6; i++) { var mcName = "mc" + i; if ($('#' + mcName)) { $($('#' + mcName).bind('click', svgClicked)); } } } function svgClicked() { var win = window.open(); win.location.href="http://www.google.co.jp/webhp?rls=ig"; } 以下、前に紹介したSmokescreenを呼び出す処理が続きます。 “SmokeScreen以外に”jquery”と”jquery.svg.js”を読み込む “.svg()”にSmokescreenを呼ぶ関数を渡す。 “Add Link”ボタンを押すと書き出されたSVG内のボタン部分に リンクを貼る処理。 ボタンを押された処理。
  • 11. 今日明日にでもFlash→HTML5が必要な場合(リンク機能も含めて) ◎注意事項というか問題点 • とにかく、処理が重い! • アニメーション中、書き出されたムービークリップのidはSmokescreenによってどんどん書き換えられるため 静止させた状態じゃないとうまくいない。 ちなみに、Action scriptが動かないためStopがかけられない。アニメーションの後に静止させて…と思っても このやり方では無理かと。 • 本当はloadされた時点でイベントをくっつけてあげたかったけど。Smokescreenの書き出し終了時を判定する材料がよく わからない。 まあ、ただの僕の技量の無さによる部分 が大きいだけかもしれません… もっとSVGの理解を深めて、上手いこと扱えればFlashを書き出しものを生かせるかもしれないし、HTML5におけるアニメー ションを楽しめるような気がします。もっと、よく勉強して出直します! ご清聴ありがとうございました。

×