AS3 Tween on mouse event

Question

Someone in another forum posted some code samples
demonstrating their use of tweens in AS3, which I had been having a
lot of trouble figuring out. The way it worked originally was a
little different -- I've tinkered a bit by putting the tween
functions in a separate Tweener class and made it so it accepts
whatever display object is passed to it. I confess I wasn't
completely sure of what I was doing, but it basically works.
The only problem is that I would like the circle and
textfield to tween only when clicked on. I don't know how to do
this. I figure it boils down to writing
_circle.addEventListener(MouseEvent.MOUSE_DOWN,....) and
_text.addEventListener(MouseEvent.MOUSE_DOWN, tweenerIt) in such a
way that they are the triggers, but it's beyond me.
It must be very simple, but I don't get it. Could someone
please explain? Just so you will have an idea of what I'm talking
about I've set it up so that the tweens occur as soon as the circle
and textfield are created.
package
import mx.effects.*;
import flash.display.*;
import flash.events.*;
import mx.effects.easing.*;
import flash.text.TextField;
import com.Tweener;
public class TweenTest extends Sprite {
private var _circle:Sprite;
private var _text:TextField;
function TweenTest() {
stage.frameRate = 31;
init();
private function init():void {
_circle = makeCircle();
_text = makeTextField();
var myTween:Tweener = new Tweener(_text, 40, 300, 150, 100,
4000);
var myTween2:Tweener = new Tweener(_circle, 0, 60, 300, 200,
8000);
// don't know what to put here...
//_circle.addEventListener(MouseEvent.MOUSE_DOWN,
tweenerIt);
//_text.addEventListener(MouseEvent.MOUSE_DOWN, tweenerIt);
private function tweenerIt():void {
// don't know what to put here...
private function makeCircle():Sprite {
var s:Sprite = new Sprite();
s.graphics.beginFill(0x660000);
s.graphics.drawCircle(20, 20, 20);
addChild(s);
return s;
private function makeTextField():TextField {
var t:TextField = new TextField();
t = new TextField();
t.text = "Hello";
t.x = 20;
t.y = 60;
addChild(t);
return t;
package com
import mx.effects.*;
import flash.display.*;
import flash.events.*;
import mx.effects.easing.*;
public class Tweener extends Sprite {
private var _target:DisplayObject;
private var _target_dest_x:Number;
private var _target_dest_y:Number;
private var _target_start_x:Number;
private var _target_start_y:Number;
private var _duration:Number;
public function Tweener(target:DisplayObject,
target_start_x:Number, target_start_y:Number, target_dest_x:Number,
target_dest_y:Number, duration:Number) {
_target = target;
_target_dest_x = target_dest_x;
_target_dest_y = target_dest_y;
_target_start_x = target_start_x;
_target_start_y = target_start_y;
_duration = duration;
tweenMe();
private function updateTween(vals:Array):void {
_target.x = vals[0];
_target.y = vals[1];
private function endTween(vals:Array):void {
trace ("ending coordinates: " + vals);
private function tweenMe(/*e:Event*/):void {
var myTween:Tween = new Tween(_target, [_target_start_x,
_target_start_y], [_target_dest_x, _target_dest_y], _duration, 31);
myTween.easingFunction = Elastic.easeOut;
myTween.setTweenHandlers(updateTween, endTween);
Fingers

Answer 1

You can do show/hide movieclip on mouseover. get your box
position and assign to the popup (tooltip movieclip).
see this...
not tested. but it should work.
import flash.events.MouseEvent;
function showClip(evt:MouseEvent) {
tooltips.x = evt.target.x + evt.target.width;;
tooltips.y = evt.target.y - evt.target.height;
tooltips.visible = true
function hideClip(evt:MouseEvent) {
tooltips.visible = false;
box.addEventListener(MouseEvent.MOUSE_OVER, showClip);
box.addEventListener(MouseEvent.MOUSE_OUT, hideClip);
I assume you'll create two movieclips named: box and tooltips