まとめの限定公開に「リンク限定」が追加されました。URLを伝えてまとめを共有しよう!

Adobe MAX 2015 - The Future is Now : HTML5 Advertising Flash Professional CC

Adobe MAX 2015のセッション「The Future is Now : HTML5 Advertising Flash Professional CC」をまとめました。HTML5バナー広告制作における世界標準「iab」を題材に紹介されています。
インターネット FLASH createjs iab JavaScript HTML5
1297view 0コメント
このまとめをお気に入りにして応援しよう!
池田 泰延(勉強会用) @clockmaker_bot
次は「The Future is Now : HTML5 AdvertisingFlash Professional CC」を受講します。 #maxjp pic.twitter.com/uyBLHfJD4g
 拡大
池田 泰延(勉強会用) @clockmaker_bot
登壇者はAOLのシニアディレクター、Cory Hudsonさんです。#maxjp
池田 泰延(勉強会用) @clockmaker_bot
Coryさんの経歴。AOLや広告iabのワークグループにも参加, CreateJSに関わっている。「HTML5 Advertising」の書籍の著者。#maxjp
池田 泰延(勉強会用) @clockmaker_bot
HTML5は広告業界の新しいスペックでバズワード。しかし、現在もFlash Proを使ってHTML5を作る。#maxjp pic.twitter.com/EQxwN7mMNO
 拡大
池田 泰延(勉強会用) @clockmaker_bot
HTML5 Canvasは良い選択である、パフォーマンスが高いからだ。 #maxjp
池田 泰延(勉強会用) @clockmaker_bot
Flash Pro CCとCreateJSをゴリ押し。 Flash Proの学習コストも低し柔軟なワークフローがある。CreateJSはドキュメントも充実しているし、拡張性もある。#maxjp pic.twitter.com/ylvhkjl8QP
 拡大
池田 泰延(勉強会用) @clockmaker_bot
iabのバナー広告の業界標準 ・200kbの容量は従来の「40KB」に相当する ・CPUの使用率は20-30%未満に抑える ・CDNを使う ・サーバーリクエストは15まで (クリエイティブは8まで) #maxjp pic.twitter.com/AQmPOeSYma
 拡大
池田 泰延(勉強会用) @clockmaker_bot
SWFをHTML5に変換する方法について「Swiffy」と「Flash Pro CC」を比較。#maxjp pic.twitter.com/I7XUCrHNDa
 拡大
池田 泰延(勉強会用) @clockmaker_bot
HTML5 Banner Ads with CreateJSのWhitepaperが公開された。 createjs.com/html5ads/ #maxjp
池田 泰延(勉強会用) @clockmaker_bot
Flash Pro CCの次期機能の「Publish Text as Outline」を使うといいだろう。 #maxjp
池田 泰延(勉強会用) @clockmaker_bot
HTML5広告の制作ではテキストの扱いには注意が必要。再生環境によってダイナミックテキストの表示に違いがでるからだ。#maxjp pic.twitter.com/qXYCO3ubqM
 拡大
池田 泰延(勉強会用) @clockmaker_bot
RETINA/HiDPIの広告表示。ステージを2倍のサイズで作る。canvasは二倍のサイズで配置。実機でしっかりチェックすること。#maxjp pic.twitter.com/Nl2E2DQtnd
 拡大
池田 泰延(勉強会用) @clockmaker_bot
HTML5広告における画像の扱い。スプライトシートにしよう、ImageOptimやiamgeAlphaを使って最適化しよう、不要な画像は含めない、Flash Pro CCの機能を使うのもアリ #maxjp pic.twitter.com/wjbKbrkdQ8
 拡大
池田 泰延(勉強会用) @clockmaker_bot
フィルターとカラー効果の使用について。シャドウやフィルター効果が使える。 #maxjp pic.twitter.com/CHlTCAbBTY
 拡大
池田 泰延(勉強会用) @clockmaker_bot
アニメーション制御。GreenSockのTweenMaxがオススメ(海外はTweenMaxの人気が高い)。広告基準の15秒で再生を止めるという仕様を満たすことができたり、パフォーマンスのチェック、時間同期ができる。 #maxjp pic.twitter.com/6Dndx4FgeQ
 拡大
池田 泰延(勉強会用) @clockmaker_bot
CreateJSやHTML5 Canvasが再生できない環境(IE8等)向けのフォールバックを指定しましょう。静止画の表示でOKです。 if(!window.CanvasRenderingContext2D){ // フォールバック } #maxjp
池田 泰延(勉強会用) @clockmaker_bot
広告再生のSleep/Wakeを作ろう。 (ページ内の負荷を抑えるために) #maxjp pic.twitter.com/8zIBuHjkwa
 拡大
池田 泰延(勉強会用) @clockmaker_bot
デバッグは可能な限り実機で。console.log()は消そう。#maxjp
池田 泰延(勉強会用) @clockmaker_bot
DevToolで容量、CPU使用率、ロード時間の計測、ボトルネックの特定、GPU使用率、ブラウザ再描画領域の測定、FPSの計測を実施しよう。#maxjp
池田 泰延(勉強会用) @clockmaker_bot
Flashチームのブログに、HTML5 Canvasコンテンツの最適化手法が紹介されている。 blogs.adobe.com/flashpro/behin… #maxjp
ログインして広告を非表示にする
ログインして広告を非表示にする