SOBARCO用に作ったブログパーツでは、小さな吹き出し部分にマウスを持ってくると大きくなってコメントが見れるようにしてみました。
まず吹き出しをActionScriptで作る方法は、
にきっちり書いてあったので、そちらを参考にさせていただきました。
これを改良して、マウスが来ると大きくなるような修正をしてみました。
マウス動作の部分を中心に抜粋した感じですが以下のような感じです。
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import caurina.transitions.Tweener;
public dynamic class Fukidashi extends Sprite {
public var max_width:uint;
private var max_height:uint;
private var min_width:uint;
private var min_height:uint;
private var start_x:uint;
private var start_y:uint;
private var end_x:uint;
private var end_y:uint;
private var set_pos:Boolean = false;
private var zoom_on:Boolean = false;
public function Fukidashi(fillColor:Number = 0xEDE5D7, max_w:uint = 70, max_h:uint = 35, min_w:uint = 18, min_h:uint = 9) {
max_width = max_w;
max_height = max_h;
min_width = min_w;
min_height = min_h;
var canvas:Sprite = new Sprite();
var fukidashi:Sprite = createFukidashi(canvas, fillColor);
//回転の中心が左下になるように移動する
addChild(fukidashi);
max_width = fukidashi.width;
max_height = fukidashi.height;
buttonMode = true;
set_minisize();
addEventListener(MouseEvent.ROLL_OVER, overHandler);
}
private function set_minisize() : void {
width = min_width;
height = min_height;
}
public function set_position(sx:uint, sy:uint, ex:uint, ey:uint) : void {
start_x = sx;
start_y = sy;
end_x = ex;
end_y = ey;
set_pos = true;
}
public function overHandler(event:Event):void {
if (set_pos) {
zoom_on = true;
Tweener.addTween(this, {x:end_x,y:end_y,width:max_width,height:max_height,time:0.1,transition:"easeOutBack",onComplete:tweenEnd} );
} else {
width = max_width;
height = max_height;
}
}
public function outHandler(event:Event):void {
if (set_pos) {
zoom_on = false;
Tweener.addTween(this, {x:start_x,y:start_y,width:min_width,height:min_height,time:0.2,transition:"easeOutBack",onComplete:tweenEnd} );
} else {
width = min_width;
height = min_height;
}
}
public function tweenEnd() :void {
if (zoom_on) {
removeEventListener(MouseEvent.ROLL_OVER, overHandler);
addEventListener(MouseEvent.ROLL_OUT, outHandler);
} else {
removeEventListener(MouseEvent.ROLL_OUT, outHandler);
addEventListener(MouseEvent.ROLL_OVER, overHandler);
}
}
//フィールドを囲む吹き出しを作る
private function createFukidashi(canvas:Sprite, fillColor:Number) :Sprite {
var fldW:uint = max_width;
var fldH:uint = max_height;
//吹き出しを描く;
var w:uint = Math.ceil(fldW * 1.1);
var h:uint = Math.ceil(fldH * 1.4);
canvas.graphics.lineStyle(1, fillColor);
canvas.graphics.beginFill(fillColor);
canvas.graphics.drawRoundRect(0, 0, w, h,10,10);
canvas.graphics.endFill();
canvas.graphics.beginFill(fillColor);
canvas.graphics.moveTo(w * 0.15, h * 1.3);
canvas.graphics.lineTo(w * 0.35, h);
canvas.graphics.lineTo(w * 0.25, h * 0.5);
canvas.graphics.endFill();
return canvas;
}
}
}
本来ならば、フキダシにメッセージを入れたり、フキダシに輪郭線があったりするのですが、そこまでいれるとあまりにも本の内容そのままなので、そこは抜粋しているので気になるときは本を見てみてください。
あと、なぜか作ったブログパーツではマウスがフキダシの左側にあるとイベントをうまく拾ってくれなかったり、ROLL_OVERのイベントが連続で発生したりとかちょっとおかしな感じになっているのですが、よくわからなかったのでそのままにしてみました。
