memo.393

微妙にはまったのでメモ。
canvasにロードしたimgをdrawImage()する際に、imgの縦横サイズがおおきいとiPhoneでは表示されないという現状に遭遇。
具体的には、2600×1400のpngがだめだった。
がしかし、同サイズのjpgファイルなら問題なく表示される。
ファイルサイズは、jpgの方がおおきいくらいだから関係なさそう。
320×480のpngにしたら表示された。

残念なIE様にCSS3っぽく対応してくれるライブラリPIE.htc。
PIE.htcとjQueryを共存した場合に、PIE.htcが利かないときがあった。
原因は読み込みの順番に関係がありそうだった。

これだとだめで、

<script type='text/javascript' src='commons/scripts/jquery.js'></script>
<!--PIE.htcを使ってるCSS-->
<link href="commons/styles/main.css" rel="stylesheet" type="text/css" media="all">

（jQueryのプラグインは機能すれどCSS3っぽい効果はきえる）

これならよかった、が・・・・

<!--PIE.htcを使ってるCSS-->
<link href="commons/styles/main.css" rel="stylesheet" type="text/css" media="all">
<script type='text/javascript' src='commons/scripts/jquery.js'></script>

CSS3は機能したけど、こんどはjQueryのプラグイン（jquery.maximage）が機能せず。。
むむむ

言語体系的にJavascriptを勉強するためのメモ。

ITpro：DOMから始めるJavaScriptモダン・スクリプティング
・DOMの構造を基礎からおさらい。
→第6回のaddEventListener()使ったイベント定義で、AS3的に書けそう。
→Objectを利用したクラスの考え方

IT戦記：Prototype.js を使った JavaScript OOP 講座 #01
・クラスの考え方をもう少し掘り下げた説明
→prototype.jsを使わない段階での例が参考になる。

HouseTect, JavaScript Blog：jQueryのクラス定義はトリッキーでかっこいいよ
・jQueryでのクラス定義方法の解説
→ひとつ前でprototype.jsの仕組みを把握した上で読むと比較しやすい

JavaScript Index メソッド、プロパティ、関数・リファレンス
・JavascriptのAPI一覧

JSで画像をブラウザサイズにフィットさせるときの注意。
imgタグのコンテナとなるブロック要素を、position:fixedとしておかないとSafariで横幅がフィットしないみたい。(iPhoneも）
もしくはhtml要素にoverflow:hiddenでもよいみたい。

※position:fixedとするとiPhone、iPadでいろいろ不都合でるみたい。
overflow:hiddenの方が安全かな。

世の中に記事がなさそうだったのでメモ。
考えればすぐわかりそうだけど、ちょっと迷った。

MovieClipの色変更したいときは、変更したい色情報を持ったColorTransformインスタンスを生成、
DisplayObject.transform.colorTransformに突っ込んであげればよい。

//オレンジ色を四角を生成
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xFFCC00);
mc.graphics.drawRect(0,0,100,100);
addChild(mc);

//白くする
var ct:ColorTransform =  new ColorTransform(1,1,1,1,255,255,255,0);
mc.transform.colorTransform = ct;

ColorTransformのコンストラクタに与える引数の各項目に関しては、”FlashIDEでのカラー効果→「スタイル：詳細」”のパラメータと一致する。
(どの項目がどれにあたるかはリファレンス参照）

ところがColorTransformでは「スタイル：着色」にある「濃淡」の項目がまかなえない。（と思う）
では濃淡項目はAS的になんになるのか？

たぶんColorクラスのbreigtnessプロパティと思う。
なのでColorクラスを使う。
Colorクラスは、ColorTransformクラスを継承したクラスなので、同じように設定可能。
以下のようにすればOK。

import fl.motion.Color;

//オレンジ色を四角を生成
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xFFCC00);
mc.graphics.drawRect(0,0,100,100);
addChild(mc);

//濃度50%で白くする
var col:Color =  new Color(1,1,1,1,255,255,255,0);
col.brightness = 0.5;
mc.transform.colorTransform = col;