2009年6月アーカイブ

Litebox2をareaタグから動作させようとする際、正しく設置しているのにFIrefoxやSafariでうまく行かない。ブラックアウトはするものの肝心の画像が出てこない。
解決方法:
rel="lithgbox"の部分をrelでなくlangで動作するようにlightbox.jsを書き換えると動作するようになります。
webサイト構築メモ - Lightbox2でareaタグにrel属性を使うとxhtml validにならない

モーショントゥイーンでも可能ですが、マウスカーソルに追従させる時などはActionScriptで処理を施します。理論的には、

//easingの値は0~1
MCの座標 += (目標の座標 - MCの座標) * easing;

で表現できます。 以下のスクリプトでhoge_mcがマウスカーソルを後追いします。

addEventListener(Event.ENTER_FRAME,hand);
function hand(event:Event):void {
	hoge_mc.x += (mouseX - hoge_mc.x) * 0.1;
	hoge_mc.y += (mouseY - hoge_mc.y) * 0.1;
}

イージングは座標だけでなく大きさやalphaなどお手軽に応用が利くのでとっても便利。

ラジアンとは、コンピュータが角度を計算する時に得意な単位。なるほど便利そうだが実体が見えない。。慣れてなんぼと思われる。
1radians≒57.2958
360°の円≒6.2832radians=2πradians
πはActionScriptでMath.PI

//度とラジアン⇔角度の公式
radians = degrees * Math.PI / 180;
degrees = radians * 180 / Math.PI;

//∠30°のsinを求めたい
Math.sin(30 * Math.PI / 180);

Math.sinなど三角関数のメソッドにはラジアン値を与える。

CSSで中央配置まとめ。

■左右中央
中央寄せしたいブロック要素にmargin:0 auto;を適用。
でよいはずなのですがIE6ではバグで中央にならないのでCSSハック。text-align:centerを適用したdivで囲みます。中央寄せしたブロック内のテキストも中央揃えになるので、text-align:leftで元通り。
IE6のシェアがそこそこあるうちはこれが正解のようです。
<div class="hakku">
	<div class="mannnaka"> hogehoge </div>
</div>
div.hakku{
	text-align:center;
}

div.mannnaka{
	margin:0 auto;
	text-align:left;
}


■上下中央
position:absoluteでも実現可能ですが、heightが指定されていることが前提だったりするので、ここではheightに依存しない方法。
通常ではvertical-alignは適用されないブロック要素を、テーブル要素もしくはインライン要素とすることにより適用させます。IE6,IE7用にCSSハックが必要です。
<div class="kakomi">
	<div> hogahoga </div>
</div>
div.kakomi div{
display:table-cell;
width:100px;
margin-bottom:1px;
vertical-align:middle;
}

* html div.kakomi div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.kakomi div{/* IE 7 */
display:inline;
zoom:1;
}

こちらで詳しく解説されています。
CSS で簡単に上下中央揃えを実現する | ヨモツネット

サイズ指定、かつブロックされないように。ブラウザのポップアップは何かと嫌われ者ですが、先方がそれでもとおっしゃるならしょうがない。
navigateToURL()だとIEでブロックされるのでExternalInterfaceを使ってJavaScriptでやるといい感じです。しかし「Safariだと開かないんだけど」とかいうことになったら処理を分岐させるしかないです。
こちらを参考にさせていただきました。
Safariのポップアップウインドウを開かない件です。

下の例は変数brouserAgentにユーザー情報を格納して、その中のブラウザ名を検出して分岐させています。SafariならnavigateToURLで、それ以外ならExternalInterface.callで。

import flash.external.*; 
var browserAgent = ExternalInterface.call ("function getBrowser(){return navigator.userAgent;}");
btn_mc.addEventListener(MouseEvent.CLICK,popup);
function popup(event:MouseEvent) {
	var url:String=new String();
	url="http://endlessblank.com/";
	if (browserAgent != null && browserAgent.indexOf ("Safari") >= 0) {
		var req:URLRequest=new URLRequest(url);
		navigateToURL(req,"_blank");
	} else {
		ExternalInterface.call("window.open", url, "_blank","scrollbars=yes,width=300,height=240");
	}
}

Safariではブラウザ側でポップアップさせない設定になっていると、ウインドウサイズ指定ありでポップアップさせることはできないっぽいです。一旦サイズ指定なし(navigateToURL)で別ウインドウで開き、開いた側のページにてJavaScriptでサイズを変えるというゴリ押しならば可能です。
Safariもサイズ指定できるようです。
SafariでもFlashからサイズ指定の新規ウィンドウをポップアップさせる - jp.ikekou.blog.Main

巷ではActionScript2.0と3.0が混在していたり、wmodeの設定、ブラウザのバージョン、OSによってポップアップの挙動が違うというケースがあり、今のところ「間違いない」方法はなさそうです。そもそもそもポップアップブロックを突破するというのはユーザビリテ(ry
こちらはFlex環境にて解説されていますが、いろいろな条件下で検証されています。サンプルページがとっても素敵。
Flexからポップアップウィンドウを出す - c9日記

水面にぽたっと水滴が落ちた時の波紋をFLASHで表現したいなと調べていると、 DisplacementMapFilterなるものにたどり着きました。いわゆる「置き換えフィルタ」です。
FLASHではこれをフレーム毎に適用することで、インスタンスをぐにょーんと変形させたりできます。(ホームページで採用しました。大きいので劇的に重いです。)概要は、フィルタ側のRGBの値(0~255)によって、適用された部分Aから移動した部分Bのピクセルが部分Aに採用されるというものです。Photoshopのコピースタンプツールの感覚に近いような。移動距離は128を0として127以下ならマイナス、129以上ならプラスとなります。
下のFLASHは緑の値をDisplacementMapFilterとした例です。2種類のうちどちらかをクリックして画像にマウスオーバーしてみると、感覚的にわかるかもしれません。

記事にプログラムやソースコードを載せる際に見やすくなるであろうSyntaxHighlighter 1.5.1を導入しました。
Javascriptを使用しているので、オフにしている人には効果なしです。。
デフォルトではActionScript未対応ですが、プラグインという形でこちらで公開されています。ありがたい。SyntaxHighlighter.cssに.func追記で本領発揮。
dp.SyntaxHighlighterでActionScript 2.0/3.0のコードをハイライトする


↓こんな感じです。(バージョン2.0.320に変更しました)

btn.addEventListener(MouseEvent.CLICK,onclick);
function onclick(e:MouseEvent):void{
	var url:URLRequest=new URLRequest("http://endlessblank.com/");
	navigateToURL(url,"_blank");
}

問題点(1.5.1)
Windows版Safari4で機能しないようです。
何やらMTだとIEでコードが繰り返して表示されてしまう模様。ソースを見ると繰り返されていないのでJavascriptが原因だとは思うのだけれど。。ブラウザの繰り返し部分をどこかにコピペするとさらに繰り返されているという怪奇現象が起こります。MTでソースコードを綺麗に表示 - JUN-Hacks Blogによると、最新バージョンの2.0なら繰り返される現象は回避できるようです。このブログではとりあえずdivで囲ってhight指定、overflow:hiddenで応急処置しています。
追記 : ある日突然FirefoxとSafariあたりでJavaScriptがうまく動かなくなったので、これを機会に最新版2.0.320を導入しました。カスタマイズし易くなり、AS3.0にも対応していてよい感じ。

  • RSS

カテゴリ