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);
ブレークポイント
ステップインアウト
変数管理
トレース
レンダリングモード
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で出力したものをドリームウィーバーで加工するときのコード補完は?
→無し。
うん。残念。
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が対応していないらしい。
見た目大文字にしとけばわかるんだけど、メモリ使用量とかの問題は対して変わらんのか?
調べたところ、ie、operaが対応していないらしい。
見た目大文字にしとけばわかるんだけど、メモリ使用量とかの問題は対して変わらんのか?
2012年6月2日土曜日
フリーソフト 「tiled」について
スプライトシートから画像をセレクトしタイル状に並べると、その画像が何番目に該当するかを配列にしいて出力してくれるソフト。
便利だが、用途は迷路ゲームなどの経路マップを作る程度しか思いつかない。
上記右下の絵柄が並んでいる画像(スプライトシート)から、絵柄をセレクトし、画面中央にプチプチと配置していく。
手順としては
結果以下のようなxmlが出力される(該当のみ抜粋)。
※1 cssスプライト:
数個の画像を1枚のファイルにまとめ、部分だけ表示させボタンエフェクトやアニメに用いる 技法。以下で解説してくれている。
http://www.designwalker.com/2008/02/css-sprite.html
便利だが、用途は迷路ゲームなどの経路マップを作る程度しか思いつかない。
以下にて詳しく解説してくれている。
上記右下の絵柄が並んでいる画像(スプライトシート)から、絵柄をセレクトし、画面中央にプチプチと配置していく。
手順としては
1.画像を読み込む
2.サイズ(一つの絵柄のサイズと横いくつ縦いくつで並んでいるかを指定)
3.配置しcsv出力
<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
◆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
2012年4月18日水曜日
canvasのマトリックス(setTransform)について
oreireyのHTML5Canvas内 P43 CH2EX10.html
・マトリクス
|a , b , c , d , tx , ty |
setTransform(1 , 0 , 0 , 1 , 0 , 0)
(最終行[ 0 , 0 , 1]は内部的の補完されていると思われる)
このあたりはフラッシュ同様
| 1 , 0 | | x |
| 0 , 1 | | y |
| a , c | | x |
| b , d | | y |
のa , b , c , dの要素は拡大・縮小・回転・傾斜を調整可能。
座標の移動を行うためtx , tyを追加する
| a , c , tx | | x |
| b , d , ty | | y |
| 0 , 0 , 1 | | 1 |
・setTransformをセットしてから描く
・単独でrotateやtranslateを用いる場合も同様(上記の部分機能だからあたりまえか)
・単独で用いる場合は単位行列(だっけ?[ 1 , 0 , 0 , 1 , 0 , 0 ])をセットし初期化する
・Flashと違い左上原点考慮ではなく、描画中心点を移動させてから描画する印象
(moveToしてから描画するのに近い?)
もうちょっと読んでから整理してみる
2012.5.14追記
・マトリクス
|a , b , c , d , tx , ty |
setTransform(1 , 0 , 0 , 1 , 0 , 0)
(最終行[ 0 , 0 , 1]は内部的の補完されていると思われる)
このあたりはフラッシュ同様
| 1 , 0 | | x |
| 0 , 1 | | y |
| a , c | | x |
| b , d | | y |
のa , b , c , dの要素は拡大・縮小・回転・傾斜を調整可能。
座標の移動を行うためtx , tyを追加する
| a , c , tx | | x |
| b , d , ty | | y |
| 0 , 0 , 1 | | 1 |
・setTransformをセットしてから描く
・単独でrotateやtranslateを用いる場合も同様(上記の部分機能だからあたりまえか)
・単独で用いる場合は単位行列(だっけ?[ 1 , 0 , 0 , 1 , 0 , 0 ])をセットし初期化する
・Flashと違い左上原点考慮ではなく、描画中心点を移動させてから描画する印象
(moveToしてから描画するのに近い?)
もうちょっと読んでから整理してみる
2012.5.14追記
2012年3月30日金曜日
マイケル・サンデル究極の選択「格差拡大あなたはどこまで許せるか? 」
途中面白かったので覚書。
この番組は不思議なことに、日本人学生の発言が英語のときは字幕を表示し、外国人学生の発言が英語(全員だと思う)のときは日本語に吹き替えている。
日本人に日本語吹き替えが合わないという点を間引いても、違和感があった。いっそ全て字幕でもよかったのではないだろうか。
さて本題。
この番組中盤のテーマ、成功は「運」かそれとも「努力」か、の議論が面白かった。
突破口を開いてくれたのはケイという日本人学生。個人的には、英語を使わず日本語で発言していたこの学生の意見が最もよかったと思う。
ケイの意見を要約すると
・消費税より所得累進性を高めるべきだと思う
・多く稼いでいる人はインフラ等より多くの社会基盤を使っている
・稼いだ財産も社会によって守られている
・普通の人より「社会そのもの」を利用しているといってもよい
・社会を利用して得た財産は税で徴収し、社会に還元すべき
ここから成功に「運」はどの程度必要なのか?という議論に発展。
上海の女学生は「運」のほうが圧倒的に必要と言い切る。
「自分と同じだけの努力をしても、チャンスに恵まれなければ結果は出ないと思う」
(他学生から一流大学へ入学したことの指摘されたことに対して)
古田氏(元ヤクルト捕手)「一流選手は自分が成功した理由に『運が良かった』ということが多い。逆にそう言えるようになって初めて一流と言えるのかもしれない。もちろん運だけで成功したわけではないが、そういう謙虚な気持ちが大事なのではないか」
ここでサンデル教授がウォーレン・バフェット氏を例として挙げる。
彼は投資家としての能力が現代社会において高く評価されている(だからこそ巨額の富を得た)。
もし私達が日本の武家時代に生まれていたとしたらどうか?多分成功していないであろう。どのような社会に生まれるかは運である。成功は必ずしも自分の努力だけではない。
我々は今の自分は自分の努力の結果だと思いがちだ。それゆえその成果は全て自分が受け取るべきだと考えてしまう。
社会基盤を使って成功したにも関わらず、自分の力だけで成し遂げたと考えるのは、いささか傲慢または思い上がりとも言えるのではないか?
収入の多い人は少ない人を助ける義務があるのではないか?
という議論まで発展した。いい議論だったと思う、と教授はまとめた。
この番組は不思議なことに、日本人学生の発言が英語のときは字幕を表示し、外国人学生の発言が英語(全員だと思う)のときは日本語に吹き替えている。
日本人に日本語吹き替えが合わないという点を間引いても、違和感があった。いっそ全て字幕でもよかったのではないだろうか。
さて本題。
この番組中盤のテーマ、成功は「運」かそれとも「努力」か、の議論が面白かった。
突破口を開いてくれたのはケイという日本人学生。個人的には、英語を使わず日本語で発言していたこの学生の意見が最もよかったと思う。
ケイの意見を要約すると
・消費税より所得累進性を高めるべきだと思う
・多く稼いでいる人はインフラ等より多くの社会基盤を使っている
・稼いだ財産も社会によって守られている
・普通の人より「社会そのもの」を利用しているといってもよい
・社会を利用して得た財産は税で徴収し、社会に還元すべき
ここから成功に「運」はどの程度必要なのか?という議論に発展。
上海の女学生は「運」のほうが圧倒的に必要と言い切る。
「自分と同じだけの努力をしても、チャンスに恵まれなければ結果は出ないと思う」
(他学生から一流大学へ入学したことの指摘されたことに対して)
古田氏(元ヤクルト捕手)「一流選手は自分が成功した理由に『運が良かった』ということが多い。逆にそう言えるようになって初めて一流と言えるのかもしれない。もちろん運だけで成功したわけではないが、そういう謙虚な気持ちが大事なのではないか」
ここでサンデル教授がウォーレン・バフェット氏を例として挙げる。
彼は投資家としての能力が現代社会において高く評価されている(だからこそ巨額の富を得た)。
もし私達が日本の武家時代に生まれていたとしたらどうか?多分成功していないであろう。どのような社会に生まれるかは運である。成功は必ずしも自分の努力だけではない。
我々は今の自分は自分の努力の結果だと思いがちだ。それゆえその成果は全て自分が受け取るべきだと考えてしまう。
社会基盤を使って成功したにも関わらず、自分の力だけで成し遂げたと考えるのは、いささか傲慢または思い上がりとも言えるのではないか?
収入の多い人は少ない人を助ける義務があるのではないか?
という議論まで発展した。いい議論だったと思う、と教授はまとめた。
2012年3月16日金曜日
セミナー「ActionScript 3.0 パフォーマンスチューニング 」のサンプル007_capture_phaseについて
2012.2.15のセミナーで使用されたサンプルをダウンロードさせていただいた。
掲載いただけるとはありがたいことである。
掲載いただけるとはありがたいことである。
その中のひとつ007_capture_phaseについての覚書。
このサンプルはcaptureについて説明するためのものであるが、
子にイベントを設定せず、親だけでコントロールしている、ということも特徴だ。
これまでの私の製作方法は
1.ボタン専用のクラスを作り、
2.その中でエフェクトなどのメソッド作成し
3.そのクラスにマウスイベントを付与していた
4.さらに個別にマウスイベントの起動・解除メソッドを設定親またはメインのスクリプトでマウスイベントの起動・解除を設定していた
一方今回の方法を使うと
・ボタンは単純なグラフィックで構成される要素だけにし、
・エフェクトはメソッドで作成、そこに操作対象(ここではボタンmc)を渡す
という手法が使える(クラスメソッドにしてもよいと思うが、クラスメソッドとかクラス変数はインスタンスと違ってnewでクリアされず残ってしまうので、わざわざ初期化メソッドを作らなければならないので面倒かも)
また、驚いたことにaddEventListenerの第3引数:captureをtrueにすると
そのaddEventListenerを設定したオブジェクト自身はターゲットにならず
イベント配信を行わない。
試しにサンプルのflaファイルにGroup(mc)のボタン群の背景に壁紙を敷いてみたが、
クリックしても反応はない。
ちなみに、サンプルファイルのxChange内に以下のスクリプトを記載したところ
ちなみに、サンプルファイルのxChange内に以下のスクリプトを記載したところ
trace(eventObject.target.name , eventObject.currentTarget.name);
のスクリプトを記載したところ
//target : my0_mc ~my3_mc currentTarget : instance1(親) の結果となった
target :まさにクリックされた対象
currentTarget : イベントを設定した対象
と覚えておく
2012年3月11日日曜日
2012年3月3日土曜日
休眠口座が話題になりましたね。
一体だれが言い出したんだろう?と思っていたら。
提案したのは大前研一氏でした。以下に詳細が書かれています。
〔大前研一「ニュースの視点」〕
KON403「本四連絡道路と休眠口座~真剣に「活用する」ことを考える」
http://www.lt-empower.com/koblog/viewpoint/1795.php
気になる点が。
現在、日本では10年利用しない口座(休眠口座)のお金の中には
「一旦銀行の利益として計上」されているものがあります。
顧客のお金を奪うなと言いながら、自分たちの利益としているのですから、
開いた口がふさがらないとはこのことです。
負債として計上しつづけた方が銀行としては有利かと。利益計上すること無く資金運用できますし。にも関わらず利益にするってことは、長期間負債に計上し続けることに会計上の問題があるのでは?と想像してました。
このあたり詳しい人いたら教えて欲しい。この件に限って言えば銀行の主張の方がわかりやすく感じますね。当然預金者のお金だと思います。
提案したのは大前研一氏でした。以下に詳細が書かれています。
〔大前研一「ニュースの視点」〕
KON403「本四連絡道路と休眠口座~真剣に「活用する」ことを考える」
http://www.lt-empower.com/koblog/viewpoint/1795.php
気になる点が。
--------------------------------------------------------------------------------------------------------
銀行が「顧客のお金だから」と反発しているそうですが、
銀行こそ最も出る幕がない立場にいます。
現在、日本では10年利用しない口座(休眠口座)のお金の中には
「一旦銀行の利益として計上」されているものがあります。
顧客のお金を奪うなと言いながら、自分たちの利益としているのですから、
開いた口がふさがらないとはこのことです。
--------------------------------------------------------------------------------------------------------
負債として計上しつづけた方が銀行としては有利かと。利益計上すること無く資金運用できますし。にも関わらず利益にするってことは、長期間負債に計上し続けることに会計上の問題があるのでは?と想像してました。
このあたり詳しい人いたら教えて欲しい。この件に限って言えば銀行の主張の方がわかりやすく感じますね。当然預金者のお金だと思います。
2012年3月2日金曜日
Javascript 第5版進捗
17章4 p438 Tooltip
2012.03.03 このスクリプトは実行できない。
最初のTooltip.X_OFFSET=25 でエラーとなる
→クラス生成が無いため、宣言されてませんエラーと推測。function Tooltip(){}を追記する
→timer内 function(){self.show(text , x , y);} ,のshowがエラーに
これについての記載がサンプルプログラムには無い。jQueryから持ってくるのか?
またself(thisが格納されている)はfunctionのため、隠すようなもんでもなさそう。本来targetが入るのでは?
2012.03.03 このスクリプトは実行できない。
最初のTooltip.X_OFFSET=25 でエラーとなる
→クラス生成が無いため、宣言されてませんエラーと推測。function Tooltip(){}を追記する
→timer内 function(){self.show(text , x , y);} ,のshowがエラーに
これについての記載がサンプルプログラムには無い。jQueryから持ってくるのか?
またself(thisが格納されている)はfunctionのため、隠すようなもんでもなさそう。本来targetが入るのでは?
ESET Smart Security V5.0 ダウンロード版の使い方
セキュリティソフト ESET Smart Securityは更新より新規購入したほうが安いのだが、手続きが少々わかりづらいのでメモしておく。
1.期限切れ警告からキヤノンのサイトにアクセスする。
2.希望の購入セットをクリックする(1年用やら3年やら3PC×1年やら)
3.キヤノンからVECTOR(もう一個あるが今回はVECTORをチョイス)のサイトに飛ぶ
4.コンビニ払いで購入
5.支払済みメールが来るまで1時間程度かかる
6.シリアル番号が届く(VECTORの場合、ライセンスと表現されているから注意)
7.キヤノンの下記サイトにアクセスし、ユーザ名・パスワードを取得する
「ESET Smart Security V5 新規登録」
http://canon-its.jp/cgi-bin/esetreg.cgi?urlflg=1&serial_no=&mode=000500&provide=CITS&version=5.0.93.16
(V5の場合。これ以降の版数の場合は調査のこと)
9.nod-reg@canon-its.jpから登録先メールアドレスにユーザ名・パスワードが届く
10.バージョンアップしている場合は新バージョンを上書きインストールする
11.右下アイコン右クリックでアクティベーションを選択し、ユーザ名・パスワードを入力する
12.ESETを起動し、ウィルス定義データのアップデートを実施する
13.ようやく右下アイコンのビックリマークや危険(赤)表示が消える
1.期限切れ警告からキヤノンのサイトにアクセスする。
2.希望の購入セットをクリックする(1年用やら3年やら3PC×1年やら)
3.キヤノンからVECTOR(もう一個あるが今回はVECTORをチョイス)のサイトに飛ぶ
4.コンビニ払いで購入
5.支払済みメールが来るまで1時間程度かかる
6.シリアル番号が届く(VECTORの場合、ライセンスと表現されているから注意)
7.キヤノンの下記サイトにアクセスし、ユーザ名・パスワードを取得する
「ESET Smart Security V5 新規登録」
http://canon-its.jp/cgi-bin/esetreg.cgi?urlflg=1&serial_no=&mode=000500&provide=CITS&version=5.0.93.16
(V5の場合。これ以降の版数の場合は調査のこと)
9.nod-reg@canon-its.jpから登録先メールアドレスにユーザ名・パスワードが届く
10.バージョンアップしている場合は新バージョンを上書きインストールする
11.右下アイコン右クリックでアクティベーションを選択し、ユーザ名・パスワードを入力する
12.ESETを起動し、ウィルス定義データのアップデートを実施する
13.ようやく右下アイコンのビックリマークや危険(赤)表示が消える
2012年2月25日土曜日
セミナー「ActionScript 3.0 パフォーマンスチューニング 」覚書
「ActionScript 3.0 パフォーマンスチューニング - 速い、軽い、 うまいスクリプティングを目指す」
書籍も近日購入予定。
講師:野中文雄氏
http://www.jagra.or.jp/schoolblog/2012/01/actionscript-30-1.html
非常に良いセミナーであった。上手い人に教わるとこんなにわかりやすいものかと感動。
忘れないうちに覚書き。
◆Mathクラスについて
「Math.floor()よりint()を用いる 」
またbitmapDataに粒子等を描く場合や、ビットマップ自体を配置するとき小数点以下ピクセルだと画像がにじので、整数化に使ってた。
非常に良いセミナーであった。上手い人に教わるとこんなにわかりやすいものかと感動。
忘れないうちに覚書き。
◆Mathクラスについて
「Math.floor()よりint()を用いる 」
またbitmapDataに粒子等を描く場合や、ビットマップ自体を配置するとき小数点以下ピクセルだと画像がにじので、整数化に使ってた。
「Math.max() , Math.min() , Math.abs()は3項演算子で置き換える」
maxNum=Math.max(a , b) → maxNum=(a>b) ? a: b;
minNum=Math.min(a , b) → minNum=(a<b) ? a : b ;
absNum=Math.abs(a ) → absNum=(a<0)? -a : a ;
で代用する。
『ただしMathの名誉のために言えば』(野中氏の言葉そのまま)
Math.max()やMath.min()などは複数の数が引数にできるので、たくさんの数のうち最も大きいのを調べていときは、Math.max()を用いたほうが速い。
maxNum=Math.max(a , b , c , d , …) ;
◆距離計算
「PointクラスメソッドのPoint.distanceを用いるより三平方の定理を用いる」
Point.distance(begin , end)→
var dx=endX-biginX ;
var dy=endY-biginY ;
var distance=Math.sqrt(dx*dx + dy+dy);
一方、3次元の場合に用いるvector3D.distance()も同様
var dx=endX-biginX ;
var dy=endY-biginY ;
var dz=endZ-biginZ ;
var distance=Math.sqrt(dx*dx + dy*dy+dz*dz);
最後は立方根ではなく平方根を用いることに注意(なぜ?ってのはいまだ理解できてない…)。
◆イベントリスナー
「複数のENTER_FRAMEはひとつにまとめる」
enterframeイベントで動作を記載したmcを複数生成している場合は
ルートのタイムラインなどでまとめて記載する
mc内
addEventListener(Event.EnterFrame , myEnterFrame );
function myEnterFrame (event:Event):void{
y+=0.5;
}
→
mc
root.addListeners(myEnterFrame);
function myEnterFrame(event:Event):void{
y+=0.5;
}
rootタイムライン
//各mcのメソッド(元enterFrame)格納用のVectorを作成する
var listeners:Vector.<Function>=new Vector.<Function>();
//mcから以下のメソッドを呼び出してそれぞれの更新メソッドを格納する
function addListeners(listener:Function):void{
listeners.push(listener);
}
//唯一のenterFrameリスナーを設定する
addEventListener(Event.EnterFrame , myEnterFrame);
//EnterFrameを以下で一括動作する
function myEnterFrame(event:Event):void{
for(var i:int=0 ; i<listeners.length ; i++){
var myFunction:Function=listeners[ i ] ;
myFunction(event) ;
//ここで引数にeventを設定することにより、mc内のメソッドを書き換えなくてよくなる
//私見:mc内をfunction myEnterFrame(event:Event=null)としておいてもよいかと。
}
}
◆マウスイベント
「ActionScript3 から無くなったreleaseOutsideはバブリングで判定することにより対応」
入れ子になったmcで
function Test() {
stage.addEventListener(MouseEvent.MOUSE_OUT , stageOut);
addEventListener(MouseEvent.MOUSE_OUT , myOut);
addEventListener(MouseEvent.CLICK , onClick);
}
function onClick(event:MouseEvent):void {
//stage.addEventListener(MouseEvent.MOUSE_OUT , stageOut);
//親ははずさないので親のリスナーだけ生きる
removeChild.addEventListener(MouseEvent.MOUSE_OUT , myOut);
}
といった感じ?実際に後でやってみる。
◆オブジェクトの使い回し
「matrixはnewで都度作らず初期化して再利用」
var matrix:Matrix=new Matrix()で都度生成し、画像などを回転するよりも、
matrix.identity()で初期化してあらたなパラメータを与えて使った方が速い。
「配列も初期化して再利用」
var array=new Array() ;
…処理後
array=new Array()ではなく
array.length=0; で初期化することができる
◆ポリフォーリズム
「見た目は一緒だけど動作が違う」
3つの画像にて説明
Clip1はx回転、Clip2はy回転、Clip3は拡大縮小の繰り返し
switch(mc) {
case clip1:
clip1.rotationX += angle;
break;
case clip2:
clip2.rotationY += angle;
break;
case clip3:
clip3.scaleX = Math.cos(angle++)*1;
clip3.scaleY = Math.cos(angle++)*1;
break;
}
ではなく子の中にそれぞれ以下の記述をし、
//clip1
private function update():void {
rotationX += angle;
}
//clip2
private function update():void {
rotationY += angle;
}
//clip3
private function update():void {
scaleX = Math.cos(angle++)*1;
scaleY = Math.cos(angle++)*1;
}
親では
function xMove():void{
}
function xMove():void{
for(var i:int=0 ; i<mcs ; i++){
var mc:MovieClip=mcs[ i ];
mc.xMove();
}
}
で済ませることができる。
このxMoveという同一のメソッド名を用いることがミソ。
同一名称で各々の動作が違う=ポリフォーリズム(多態性)だそうだ。
◆インターフェース
上記例ではそれぞれのmcがxMoveと名前のメソッドを持っていることが前提になる。
もし大規模開発で他社がmcを作ったり自分が作っても間違えてxmoveとしたりしたらエラーとなってしまう。そこでインターフェースを用いる。
//インターフェースは以下の様に記載する
package {
public interface IClip {
//必須のメソッドの引数とその型、
//返しがある場合はその型を記載する
function xMove(angle:Number):void
function xStop():void
}
}
//インターフェースは以下のように利用する
public class Test extends Sprite implements IClip{
function Test() {
…
「インターフェースは型としても使える」
以下の例の場合
function xMove():void{
for(var i:int=0 ; i<mcs ; i++){
var sp:Sprite=sprites[ i ];
sp.xMove(); →spriteはxMoveメソッドを持っていないのでエラーになる
}
}
そこで
function xMove():void{
for(var i:int=0 ; i<mcs ; i++){
var sp:IClip=sprites[ i ]; //なんとinterfaceは型指定としても使える!
sp.xMove();
}
}
今までクラスを配列化してたり、やる必要もない(しかも不安定?な)継承をしていたのは何だったのか!
◆メモリの開放
「基本はFlashのガベージコレクションにまかせる」
なるべく削除
removeChild
removeEventListener
MovieClip.stop()
=null
を用いて参照を解き、ガベージコレクションを待つ。
が強制的に使えるものとして
System.gc();
System.disposeXML();
System.totalMemory();
var bmd:BitmapData = new BitmapData();
bmd.dispose();
などがある。
Player11以降はガベージコレクションのしきい値(頻繁にやったり、ここではやらんといてとお願いしたり)できるらしい。
これらは次期Flashを入手してからトライしよう。
書籍も近日購入予定。
登録:
投稿 (Atom)