How to use Tween for MovieClips in a Flex 4.5 application?

Question

I'm new to Flex and am trying to port a pure Flash/AS3 card game to Flex 4.5.

It works mostly well, but I'm missing few puzzle parts there:

I've created a custom component based on UIComponent representing a deck of cards (which are an array of Sprites or MovieClips):

In the original pure Flash/AS3 game I was using Tween for the 3 cards at the table - to show the game user, who has put which card (by sliding them towards playing table middle):

import fl.transitions.*;
import fl.transitions.easing.*;

public class Deck extends UIComponent {
    private var _card:Array = new Array(3);
    private var _tween:Array = new Array(3);
            ....

    override protected function createChildren():void {
        _tween[YOU] = new Tween(_card[0], 'y', Regular.easeOut, _card[0].y + 40, _card[0].y, .5, true);
        _tween[LEFT] = new Tween(_card[1], 'x', Regular.easeOut, _card[1].x - 40, _card[1].x, .5, true);
        _tween[RIGHT] = new Tween(_card[2], 'x', Regular.easeOut, _card[2].x + 40, _card[2].x, .5, true);
             ....

However Flash Builder 4.5 doesn't seem to know fl.transitions.* packages at all?

Does anybody please have an advice on how to use Tween here?

Like I've written the rest (my custom Flex component, moving card-Sprites around, etc.) works well. Only the Tween lines had to be commented.

Thank you! Alex

Answer 1

My first knee-jerk reaction has been to add flash.swc (delivered by Flash CS Pro) to the Flex build path and then:

import fl.transitions.*;
import fl.transitions.easing.*;

can be used again.

But in the long-term I will probably write my own function to move the playing cards and run it on Event.ENTER_FRAME. Because I don't want to include Tweener or Tweenlite libraries for mere card sliding.

        _tween[0] = _card[0].y;
        _tween[1] = _card[1].x;
        _tween[2] = _card[2].x;
                ....
        _card[0].y = _tween[0] + 20;
        addEventListener(Event.ENTER_FRAME, slideCardYou);

        _card[1].x = _tween[1] - 20;
        addEventListener(Event.ENTER_FRAME, slideCardLeft);

        _card[2].x = _tween[2] + 20;
        addEventListener(Event.ENTER_FRAME, slideCardRight);
                ....

    private function slideCardYou(event:Event):void {
        if (_card[0].y-- < _tween[0]) 
            removeEventListener(Event.ENTER_FRAME, slideCardYou);
    }

    private function slideCardLeft(event:Event):void {
        if (_card[1].x++ > _tween[1]) 
            removeEventListener(Event.ENTER_FRAME, slideCardLeft);
    }

    private function slideCardRight(event:Event):void {
        if (_card[2].x-- < _tween[2]) 
            removeEventListener(Event.ENTER_FRAME, slideCardRight);
    }

Also I've looked at mx.effects.Tween and spark.effects.Animate but they seem to be more appropriate for UIComponents and not Sprites as in my case.