2013年7月13日土曜日

『WebクリエイターのためのCreateJSスタイルブック』 出版記念特別セミナー 感想と覚書

昨日『WebクリエイターのためのCreateJSスタイルブック』 出版記念特別セミナーを拝聴。
講師は野中文雄氏。

氏のセミナーは毎回わかりやすく内容も豊富で感動させられる。

今回はネットに繋がらないトラブルにも関わらず、ローカルファイルで対応し、きっちり時間通りに終了。しかもネット復旧後、抜けた部分も再説明。
著書の宣伝はあくまでさりげない。

本は発売日に買いました
(セミナーでの割引販売がちょっと悔しい)

野中文雄氏、そしてセミナーを開催・手配いただいた方々に感謝。



講義の内容は今回の著書(WebクリエイターのためのCreateJSスタイルブック)のp40~70、p
100~114付近を要約したもの+解説。

以下気をつけるべきところのみ覚書。

・Shapeへの色設定
            var randomNumber=Math.floor(Math.random()*0xFFFFFF) ;
にてランダムにカラー数値を取得後
            var randomColor=createjs.Graphics.getRGB(randomNumber);
でstringに置き換える。以前は文字列置き換えで結構困ったことがあったような気がする。

・stage.update();
画面の描画。必ず入れる(忘れること多し)。
Flashはフレームレート毎に再描画してくれるが、createJSは(というよりcanvasが)行わない。負荷がかかりすぎるそうだ。

・Tween

var myTween=new Tween(target) ;
myTween.to({ x:100 …該当プロパティと値をこのオブジェクトに設定 }
  , 実行ミリ秒
 , イージング }
で動作。
myTween.to(…)を連続して記載すると、その順番通りに実行してくれる。
FlashのTween + addEventListenerで終了を判定しつつ動かしていた私には楽に感じられる(Tweener使ってる方にはあまり差がないかも)。


・マウスイベント
addEventListenerを設定するオブジェクトが少々Flashと異なる。
ドラッグなどのときは要注意。
設定する対象は以下の通り。
click           : DisplayObject
mousedown : DisplayObject
mousemove : MouseEvent
mouseup      : MouseEvent

以前Flash案件でDisplayObject+startDragでドラッグを行なったら、早いマウス動作にオブジェクトがついて来れず外れてしまうことがあった。
そのときはstageにMouseMoveイベントを追加し、オブジェクトにマウス座標を追っかけさせて対応したように思う。

DisplayObjectにイベント追加するのではなく、別物にイベントを付与し、マウス座標に追随させる、と考えればわかりやすい。



・おさらい整理したときに生じた疑問点

セミナーのスクリプトではなく、書籍記載のスクリプトの
eventObject.targetについて少し混乱。

        myShape.addEventListener("mousedown" , startDrag);

        function startDrag(eventObject){//マウスダウンイベント
           var instance=eventObject.target;//マウスダウンイベントのターゲット
            eventObject.addEventListener("mousemove", drag);
        }

        function drag(eventObject){//マウスムーブイベント
            var instance=eventObject.target;//マウスムーブイベントのターゲット
            instance.x=eventObject.stageX;
            instance.y=eventObject.stageY;
            stage.update();
        }
上記のふたつのeventObjectはそれぞれ違うものにも関わらず、
targetは同じものを指している。
mousemoveには直接DisplayObjectは関わっていないようにも思えるのだが、なぜtargetが参照できるのか?
時間があるときに再検証してみる。
今回はここまで。















2012年7月30日月曜日

createElementでinputを生成した場合のvalue設定


function makeRange(data){
var myInput=document.createElement("input");
myInput.type="range";
myInput.name="modProgress"
myInput.min="0";
myInput.max="100";
myInput.step="5";

//myInput.value=data;
//myInput["value"]=data;
//myInput.setAttribute( "value" , data );
return myInput;
}

上記の3つ

//myInput.value=data;
//myInput["value"]=data;
//myInput.setAttribute( "value" , data );
のうち、生きたのは最下行の
myInput.setAttribute( "value" , data );
のみ。propertyでのセットは効かず、methodでの設定が必要らしい。
詳細は後日調査。

2012年7月29日日曜日

f-siteセミナー(2012.7.28) メモ

◆demo1-1「AIR新機能」
ブレークポイント
ステップインアウト
変数管理
トレース

レンダリングモード
AUTO:非推奨
CPU:従来のもの
GPU:
ダイレクト:stage3Dを使う場合はこれ
GPUとダイレクトはコンテンツにより使い分ける

共有ランタイム:従来のもの。プレイヤーとSWFが別
キャプティブランタイム:PLAYERとSWFが一緒になっている

◆demo1-2
スプライトシート:アニメの各コマを1枚画像に出力し、プログラムで表示エリアを移動させ、アニメーション化を実施できる。
Fla内の操作はライブラリの中で選んで右クリック→スプライトシート生成、と簡単。
データ形式JSONだと、座標をオブジェクト化したものの配列を出力してくれるので、これをプログラム側で読みこめばよい。
データ形式EASEL.JSだとプログラムも含め出力してくれる?

easel.js内のメソッド stage.update()は画面描画なので、必ず実施すること。

パブリッシュ形式の新機能
Deflate :これまでのもの。FlashPlayer6以降と互換性。
LZMA:Player11以降。ベクター形式だけのものだと、ファイルサイズが23%程度減少するらしい。

PNGシーケンス書き出しがライブラリのシンボル毎に可能に。
ガイドと使った場合、これも一緒に出力されてしまうので、非表示にすること。

◆demo2「createJS」
Toolkit for CreateJSは機能拡張。

表示リスト追加
exportRoot=new Bitmap("images/pen.png");
stage=new Stage(canvas);
stage.addChild(exportRoot);
stage.update(); //このメソッド重要。これがないと描画されない。

プリロード
var file="image/pen.png";
var loader=new PreloadJS(false);
  //XMLHttpRequestを使うかどうかブール(論理)値で引数に渡すそうだが、
//とりあえずfalse決め打ちで
loader.onFileLoad=fileLoaded;
loader.load(file);

function fileLoaded(event){
  setInstance();
}
function setInstance(){
 exportRoot.oPress=clicked;
 exportRoot.onMouseUp=mouseRelased;
}

function  clicked(event){
 exportRoot.rotation+=15;//回転
 stage.update();

//参考 基準点を変更することができる(いつものように画像半分差し引きの考慮が不要となる)

//exportRoot.regX=exportRoot.image.width/2;
//exportRoot.regY=exportRoot.image.height/2;
//これはロードが完了してから実施すること



 var mouseX=event.stageX;
 var mouseY=event.stageY;
 var localMouse=exportRoot.globalToLocal(mouseX , mouseY);//Pointが返る
 var globalMouse=exportRoot.localToGlobal(localMouse.x , localMouse.y);
 exportRoot.x+=mouseX-globalmouse.x;
 exportRoot.y+=mouseY-globalmouse.y;
 ・・・
}
//イベント削除
function  mouseRelased(event){
 this.onMouseMove=this.onMouseUp=null;
//ここはイベントオブジェクトではなくthis。メソッドが設定されたのはexportRootだから。
}

◆demo3「ANE」
無理。

◆質疑
createJSで出力したものをドリームウィーバーで加工するときのコード補完は?
→無し。
うん。残念。



2012年7月5日木曜日

javascript 定数(const)について

他社サンプルをみると、どうもvarで宣言し変数名のみ大文字に。試したら使えるみたいなのに、なぜvarに?
調べたところ、ie、operaが対応していないらしい。
見た目大文字にしとけばわかるんだけど、メモリ使用量とかの問題は対して変わらんのか?

2012年6月2日土曜日

フリーソフト 「tiled」について

スプライトシートから画像をセレクトしタイル状に並べると、その画像が何番目に該当するかを配列にしいて出力してくれるソフト。
便利だが、用途は迷路ゲームなどの経路マップを作る程度しか思いつかない。




以下にて詳しく解説してくれている。

上記右下の絵柄が並んでいる画像(スプライトシート)から、絵柄をセレクトし、画面中央にプチプチと配置していく。
手順としては
1.画像を読み込む
2.サイズ(一つの絵柄のサイズと横いくつ縦いくつで並んでいるかを指定)
3.配置しcsv出力

結果以下のようなxmlが出力される(該当のみ抜粋)。
<data encoding="csv">
32,31,31,31,1,31,31,31,31,32,
1,1,1,1,1,1,1,1,1,1,
32,1,26,1,26,1,26,1,1,32,
32,26,1,1,26,1,1,26,1,32,
32,1,1,1,26,26,1,26,1,32,
32,1,1,26,1,1,1,26,1,32,
32,1,1,1,1,1,1,26,1,32,
1,1,26,1,26,1,26,1,1,1,
32,1,1,1,1,1,1,1,1,32,
32,31,31,31,1,31,31,31,31,32
</data>

これをjavascript向けに2次元配列に加工。
var tileMap=
[
[32,31,31,31,1,31,31,31,31,32],
[1,1,1,1,1,1,1,1,1,1],
[32,1,26,1,26,1,26,1,1,32],
[32,26,1,1,26,1,1,26,1,32],
[32,1,1,1,26,26,1,26,1,32],
[32,1,1,26,1,1,1,26,1,32],
[32,1,1,1,1,1,1,26,1,32],
[1,1,26,1,26,1,26,1,1,1],
[32,1,1,1,1,1,1,1,1,32],
[32,31,31,31,1,31,31,31,31,32]
];

ただし、tiledで生成されるデータは「0」ではなく「1」始まり。
ループするときは-1を加算する必要があるため、オフセットを設ける
var mapIndexOffset=-1

後は回して描画。
for(var r=0 ; r<mapRows ; r++){
for(var c=0 ; c<mapCols ; c++){
var tiled=tileMap[r][c]+mapIndexOffset;
//元が1行に8つだから
var sourceX=(tiled%8)*32;
var sourceY=Math.floor(tiled/8)*32;//1行8つで割っていくつ目が行
context.drawImage(tileSheet , sourceX , sourceY , 32, 32 , c*32 , r*32 , 32 , 32);
}
}
上述した通り用途が今のところ思い浮かばないため、セカンドマシンにインストールしたのみ。
今後cssスプライト(※1)を使うことも増えるように思う。
が、アニメーションの場合はFlashCS6あたりからHTMLへ出力したほうが早そうだし、そもそもアニメの場合は素直に配置したスプライトシートを作るだろうからtiledは必要ないだろう。
今後使うことがあったら追記する。




※1 cssスプライト:
数個の画像を1枚のファイルにまとめ、部分だけ表示させボタンエフェクトやアニメに用いる 技法。以下で解説してくれている。
http://www.designwalker.com/2008/02/css-sprite.html







2012年5月25日金曜日

f-siteセミナー(2012.5.19) メモ

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













2012年4月30日月曜日

特保のコーラ(キリン メッツ コーラ)


特保のコーラが発売されました。
特保となった理由は食物繊維が入っていることでしょう。
5.4グラムとサプリ並みの量が含まれています。
食物繊維は女性で2グラム、男性で4グラム程度不足していると言われているので、それを十分補うことができます。

食物繊維には不溶性と水溶性の2種類があり、食べるバランスは「不溶性:2 水溶性:1」がいいと言われています。ところが野菜などは不溶性の方が多く含まれているため、どうしても水溶性が不足しがちです。

このコーラに入っている食物繊維「難消化性デキストリン」は水溶性ですので、食物繊維の摂取バランスを整えてくれます。

宣伝では「脂肪の吸収を抑える」とありますが、便秘予防効果の方が期待できるとおもいます(お腹が緩くなりやすい人は要注意です)。

さて肝心の味ですが…まぁ普通のコーラです。
他社のコーラでも食物繊維サプリを混ぜれば、この「特保」コーラと同等の効果が期待できます
(そこまでしてコーラ飲まなくてもいいんですが…)。


広告には矢吹ジョーが使われています。
隣のテーブルでは、金竜飛が紅茶を飲んでいて、ダイエットを演出するためのこだわりが感じられます。
とはいえ、ここは力石徹を使うべきでしょう。
「お嬢さん。そのお気持ちだけありがたく飲ませていただきます」
どぼどぼどぼ。
おっと、こぼしちゃうからダメか?

キリンビバレッジ | CM情報 キリン メッツ コーラ「矢吹ジョー」篇
http://www.beverage.co.jp/product/cm/mets/joe.html