« 2006年03月 | Main | 2006年07月 »

2006年04月16日

YouTube APIとFLASHの連携 : VideoJam

◆VideoJam (※動画再生できなくなりました)
http://casualplay.net/labs/videojam/

※ 詳細はコメント欄にて。

何かと話題のYouTubeですが、公開されているYouTube APIを使って遊んでみました。ショボイQooqle Videoだと思ってください。上のリンクから見れます。検索は英数字のみです。

制作にあたり2回ほど壁にぶち当たりました。1回目の壁は「YouTubeがなんだか消えてるよー」っていうことがありまして、まったく手付かずの状態に。無事復活は果たしましたが、またいつ消えるかわからないので、完成度を上げるより早めに出しとこう、という結論に至りました。

2回目の壁は、ここで議論されていますが、「外部ドメインから読み込んだ画像(今回は動画)はBitmapData.drawできない」という謎の仕様をすっかり忘れていて、ローカルで無茶してたことがすべてWEB上では不可能という事態に。

こんなPCに優しくなさそうなことをやろうとしていました。

このままお蔵入りにするのももったいないので、PCに刺激が欲しい人のためにローカル再生用のファイルをご用意しました。できるかぎりハイスペックなマシン推奨です。

◆ VideoJam Local
http://casualplay.net/labs/videojam.zip

色々と試したのですが、どうやらFlash Player 8.5(ベータ版)ではブラウザが落ちます。なので、Player8.5 を入れてる方は、Player8.0.xxでご覧ください。

【追記】 一応説明を加えておきますと、ローカルで再生するためにはFlashPlayerのグローバルセキュリティ設定を変更する必要があります。以下のアドレスにアクセスして、「これらのファイルとフォルダを常に信頼する」の欄に、ファイルを保存したフォルダを追加します。

http://www.macromedia.com/support/documentation/jp/flashplayer/help/settings_manager04a.html

とても面倒で嫌になります。

2006年04月05日

Mouse.hide()の落とし穴

もう修正済みですが、前回のエントリーで一定時間マウスが同じ位置に止まっていたらMouse.hide()でカーソルを隠す処理を当初していたのですが、気づいた方もいたかと思いますけど、これがswf領域外でもカーソルが消えてしまうというミステリー。というか単純に知らなかっただけなんですが。カーソルを動かすと現れ、止まるとまた消えてしまう・・・。

同一ページ内に限れば回避策もあるのですが、カーソルが隠れた状態で新しいタブとか開かれたらもうどうしようもないので、setIntervalやonEnterFrameとMouse.hide()の併用は極力避けた方が無難な感じです。

カーソルを消したい方は下の矩形を押してから外に出てみましょう。別のページに移動すれば戻ります。

2006年04月03日

ゆがみエフェクト - DisplacementMapFilter

またDisplacementMapFilterを使って、Photoshopのゆがみ(ワープ)フィルタ。モナリザを使ったモノはありがちですけど、他にいいネタも無かったので。

フォトショっぽくクリックで変化させてもよかったですが、あまり変化量を上げすぎると画像が荒くなるので、微妙な変化の方が使えるんだと思います。

import flash.display.*;
import flash.filters.*;
import flash.geom.*;

var imgList:String = "image"; // リンケージ画像id

var w:Number = 240;
var h:Number = 360;
var scalex:Number = 0;
var scaley:Number = 0;
var d:Number = 0;

var scalemx:Number = 80; // xscale変化量
var scalemy:Number = 80; // yscale変化量
var r:Number = 60; // フィルタ適用範囲の直径
var speed:Number = 8; // 変化の移動速度

// -- 適用イメージ & マスク作成

var bmp:BitmapData = BitmapData.loadBitmap(imgList);
var copybmp:BitmapData = bmp.clone();

var mc:MovieClip = this.createEmptyMovieClip("img_mc", 2);
var mask:MovieClip = this.createEmptyMovieClip("mask_mc", 3);
var maskbmp:BitmapData = new BitmapData(w, h, false, 0);
mask.attachBitmap(maskbmp, 0);

var mgx:Number = (bmp.width-w)/2;
var mgy:Number = (bmp.height-h)/2;
mc._x -= mgx;
mc._y -= mgy;
mc.attachBitmap(bmp, 0);
mc.setMask(mask);

// -- 置き換えマップ用イメージ作成

var dpmap:BitmapData = new BitmapData(w, w, true, 0);
var dmc:MovieClip = this.createEmptyMovieClip("img_mc", 1);
var mrx:Matrix = new Matrix(1, 0, 0, 1, w/2, w/2);

dmc.beginGradientFill("radial", [0xFFFFFF, 0x808080], [100, 100], [0, r/2], mrx);
dmc.moveTo(0, 0);
dmc.lineTo(w, 0);
dmc.lineTo(w, w);
dmc.lineTo(0, w);
dmc.lineTo(0, 0);
dmc.endFill();

dpmap.draw(dmc);
dmc.removeMovieClip();

// -- フィルタ適用

function onEnterFrame ():Void {
    d += Math.PI/180*speed;
    scalex = Math.cos(d)*scalemx;
    scaley = Math.sin(d)*scalemy;
    var pos:Point = new Point(_xmouse-w/2+mgx, _ymouse-w/2+mgy);
    var dmf:DisplacementMapFilter = 
        new DisplacementMapFilter(dpmap, pos, 1, 1, scalex, scaley, "ignore");
    bmp.applyFilter(copybmp, bmp.rectangle, null, dmf);
}