2012.5.19 セミナー
◆demo1 「Flashユーザーが取り組むHTML5」
・セマンテック マークアップ：文書構造と見栄えの分離
・チッチコンテンツ
・ビデオタグ
・SVG
ベクターグラフィックスが可能に。イラスト限定になるだろうが、拡大縮小が自在
SVGタグにて頂点情報記入での描画
・透明度：opacity
・色相 ： hsla(色相、彩度、明度 、透明度）指定にて可能
・要素の回転：transform やrotate(degree)で可能
・CSSトランジション（CSSによるアニメーション）
・canvas ： htmlタグ＋javascriptによる描画
・テキストエフェクト ： chrome限定
ブラウザにより性能が大きく異なる chromeはローカルで動かないこと多し
・IE10は他ブラウザとほぼ同等レベルとなる見込み
IE9は一部のみサポート（WEBGLは当面見込みなし）
XPはIE8までしか上げられず、XP自体のサポートは2014/4/8まで。
したがってこのあたりまでは対応する必要がある。
IE8 IE6/7/8のシェアは32.1% 。考慮の必要あり。
FLASHは描画APIが計算時ロックできること、actionScriptはコンパイルして実行するのに対し、javascriptはインタプリタであることから、Flashのほうが実行速度が速い。
現時点でのFLASHの描画速度はHTML5の3倍程度となっている。
・クライアントへの見積もりについて
Flash案件に対しHTML5+Javascriptによる制作の場合、見積は1.5～2倍程度となることが多いらしい。フレームワークがあまりないこと、ノウハウが蓄積されていないこと、そして最終段階でのFlashでの再作成の可能性が高いことなどが要因。またiPadやiPhone・タブレットなどへの対象デバイスが多いことから見積額が高くなるのは当然とも言える。
◆demo2「制作事例から考えるテクノロジーの選択基準」
普通のPC向けウェブサイト：どちらでもいい
facebook：いいねボタンはhtml5しか使えないため、html5での制作がよい
HTML5で制作しても検索エンジン対策としての差は設けない（GOOGLE)
結論（私見）：HTML5にて制作すべき
情報：Html5shiv ： createElement("header")などを用い、html5のタグを取り扱っていないブラウザでも、マークアップが可能となる。
☆ns 追記
これはよい。これまでcssのクラス設定すら生きなかったので、とりあえず記入しても大丈夫になったのは嬉しい（もちろんcanvas等の機能が使えるようになるわけではない）。
以下の記事が参考となる
http://www.skyward-design.net/blog/archives/000134.html
◆demo3「新登場CreateJSとは？」
タイムライン上のインスタンス類をhtml5+javascriptを用いて実現するために必要なjavascriptライブラリや画像を出力する。
Toolkit for CreateJSを用いてパブリッシュすると以下のフォルダが生成される
images : 画像類
cliff.png など
libs : CreateJSライブラリ
easeljs-0.4.2.min.js、
movieclip-0.4.1.min.js 、
preloadjs-0.1.0.min.js
soundjs-0.2.0.min.js
tweenjs-0.2.0.min.js
など
sounds : サウンド
pop.mp3 など
上記内容は元となるFlashの内容により異なる。
これら出力されたパーツをもとにCreateJSライブラリなどを用いてスクリプティングをし、HTML5コンテンツを仕上げる。
ペンギンだけをタイムラインにおいてテストを実施してみる。
出力すると
[ images ]
PenBitmap.png
[ libs ]
easeljs-0.4.2.min.js
preloadjs-0.1.0.min.js
[ sounds ]
sample.html
sample.js
が出力されている。若干わかりづらいので
タイムラインに何も置かずにパブリッシュする。すると、最小限のファイルが生成される。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>sample</title>
<script type="text/javascript" src="libs/easeljs-0.4.2.min.js"></script>
<script type"text/javascript" src="samaple.js"></script>
<script>
function init(){
canvas=document.getElementById("canvas");
stage=new Stage(canvas) ;
//上記で取得したcanvasを放り込むとeasel側でセッティングしてくれるらしい 。以降Flashのstageと同様addChildなどのコマンドを
//表示リストのように用いることができる
//exportRoot=new lib.sample() ; //easel.jsに内包されているらしい "sample"は元のFlashのファイル名
exportRoot=new Bitmap("images/PenBitmap.png");
exportRoot.x=canvas.width/2;
exportRoot.y=canvas.height/2;
//中心点の設定を行う これはちょっと便利かも
exportRoot.regX=exportRoot.image.width/2;
exportRoot.regY=exportRoot.image.height/2;
stage.addChild(exportRoot);
//canvasが持っていないenterframeのセッティングを行う
stage.update();
//Tickerオブジェクト tick()という関数が毎フレーム呼出される
Ticker.setFPS(24);//内部的にはsetIntervalですかね
Ticker.addListener(stage);
//レジュメでは外部に書いているけど、ここでは内包させておこう。
function tick(ev){
exportRoot.x-=5;
if(exportRoot.x<0){
exportRoot.x+=canvas.width;
}
stage.update();
}
}
</script>
</head>
<body onload="init()" style="background-color: #d4d4d4">
<canvas id="canvas" width="240" height="180" style="background-color: #ffffff"></canvas>
</body>
</html>
上記にて読み込まれた画像が水平にスクロールする。なお上記スクリプトでは画像読込完了イベントを無視しているので、実際はPreloadJSを用いて外部画像ファイルの読込を待つ必要がある（通常はnew Image() + image.addEventListener("load" , loaded , false)にて完了を待つ。上記では、easelJS内包（とおもわれる）のBitmapクラスを用いているので自力でイベント取得できない）
マウスドラッグ等については若干注意が必要
my_mc.onPress=pressHandler;
function
pressHandler (ev){
//evがマウス座標を知っている
my_mc.y+=10;
ev.onmouseMove=dragHandler;
ev.onmouseUp=releaseHandler;
}
function dragHandler(ev){
my_mc.x=ev.stageX;
my_mc.y=ev.stageY;
}
function releaseHandler(ev){
this.onMouseMove=this.onMouseUp=null;
}
詳細は以下を参照
http://www.fumiononaka.com/Sample/F-site/FF120519.html
