CODEWITHSUNDEEP
actionscript-3apache-flexactionscripteffects
ketan
ketan

Reputation: 19341

Resize effect widthto in percentage

I have two container inside one main container.
One container have 20% width and other container have 80% width.
Now i want to hide 20% container on button click so i use.

<s:Resize id="resizeHide" widthTo="0" target="{fstContainer}"/>

Now, on same button click i want to resize that container by 20% then what will be the solution.

I tried following but didn't work for me.

<s:Resize id="resizeShow"  widthTo="20" target="{fstContainer}"/>

I cannot set fixed width. And resize effect will only take width in pixel.

Upvotes: 0

Views: 111

Answers (1)

akmozo
akmozo

Reputation: 9839

To resize your container to 20% of your stage width, you can simply do like this :

Your Resize effect : 

<s:Resize id="resizeShow" target="{fstContainer}"/>

And then for your button : 

<s:Button id="btn_resize" label="Resize" click="resizeShow.widthTo = stage.stageWidth / 5; resizeShow.play();"/>

EDIT :

A 2nd manner, is to use the data binding, like this : 

<s:Resize id="resizeShow" widthTo="{_20_percent}" target="{fstContainer}"/>

Declare the bindable var : 

[Bindable] protected var _20_percent:Number;

And then, you can set its value when the creation of your app is completed, or when it's added to the stage, ... : 

protected function on_addedToStage(event:Event):void
{
    _20_percent = stage.stageWidth / 5;
}

protected function on_creationComplete(event:FlexEvent):void
{
    // here of course, as you know, the stage is not yet accessible
    _20_percent = FlexGlobals.topLevelApplication.width / 5;
}

And of course, here you need to use only one event handler to set the value.

A 3rd manner, is to create your Resize effect dynamically when the user click the resize button : 

protected function btn_resize_onClick(event:MouseEvent):void
{
    var resizeShow1:Resize = new Resize();
        resizeShow1.target = fstContainer;
        resizeShow1.widthTo = stage.stageWidth / 5;
        resizeShow1.play();
}

And it's to you to decide which manner you prefer ;)

Hope that can help.

Upvotes: 1

Related Questions