0 Replies Latest reply on Nov 21, 2006 2:10 AM by Fingers_9

    AS3 Tween on mouse event

    Fingers_9
      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