CODEWITHSUNDEEP
actionscript-3apache-flexflex3mxml
Jack Zach Tibbles
Jack Zach Tibbles

Reputation: 800

What is the best way to create a slide effect on a canvas?

I need to create a slide left and slide right effect. This will be used on a panel when it is added to stage.

Also, the canvas I want to use the effect on has its height determined by the "top" and "bottom" properties, I heard this may cause issues when applying such an effect.

Upvotes: 0

Views: 891

Answers (2)

Herr Grumps
Herr Grumps

Reputation: 2054

You might want to check out something called TweenMax: http://www.greensock.com/tweenmax/ It greatly simplifies animation of many things, and it has lots of options which you would expect such as ease in/out, onTween events/callback, on complete callback etc.

I am not 100% sure what you wan to do exactly, but in theory you will want to start your canvas off the screen, and then do something like this:

TweenMax.to(theCanvas, 1.0, {x:0});

This line of code will tell TweenMax (via the static function "to") to start a tween (animation). The target of the animation is theCanvas, the duration of the animation is 1.0 seconds, and the property being animated is x. In this case .x is animated from where ever it current is "to" 0. If you wrote:

TweenMax.to(theCanvas, 1.0, {x:100});

Then the canvas would animate from where is currently is to .x = 100. Note that if you specify a string for the 'value'

TweenMax.to(theCanvas, 1.0, {x:"100"});

this is treated as a delta - so the canvas will not end at x = 100, instead it will end at x = originalX + 100.

As far as the height of the canvas is concerned, it should be ok to constrain the height with top and bottom style settings, but I am not 100% sure of this... you will want to explicitly define the width of the canvas however, as you will need to explicitly(absolutely) define the x position.

EDIT

Here is an example, I think it covers the basics. Note that the slider canvas has its height defined with top and bottom, and there are no issues.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
    width="500" height="500"
    xmlns:mx="http://www.adobe.com/2006/mxml"
>
<mx:Script>
    <![CDATA[
        import com.greensock.TweenMax;

        private function slideIn():void
        {
            TweenMax.to(theSlider, 1.0, {x:50});
        }

        private function slideOut():void
        {
            TweenMax.to(theSlider, 1.0, {x:300});
        }

    ]]>
</mx:Script>

<mx:Button label="Slide In" click="{slideIn()}"/>
<mx:Button x="80" label="Slide Out" click="{slideOut()}"/>


<mx:Canvas id="theWindow" 
    width="300" height="300"
    verticalCenter="0" horizontalCenter="0"
    borderColor="red" borderThickness="1" borderStyle="solid"
    verticalScrollPolicy="off" horizontalScrollPolicy="off"
>

    <mx:Canvas id="theSlider" 
        width="200"
        x="-200"
        top="10" bottom="10"
        backgroundColor="green" backgroundAlpha="1.0"
        verticalScrollPolicy="off" horizontalScrollPolicy="off"
    />

</mx:Canvas>

</mx:Canvas>

Upvotes: 1

shaunhusain
shaunhusain

Reputation: 19748

Here's something you can start with that I made a while back, this is the Flex3 version moving it over to 4 I've changed the base class to Group and been able to make some further optimization with regard to the initial creation of the components on the "sliding canvas". View source is enabled in the right click menu on the export: http://www.shaunhusain.com/ImageSlider/ (don't be confused by the name it allows you to add whatever UIComponent to it I just started out with images). I'm not immediately aware of any issues with defining it's size via top and bottom properties but it might require tweaking, if you run into issues post those as questions.

Upvotes: 0

Related Questions