[flexcoders] Re: 2nd transition not working

[bill.fogarty17]

<[EMAIL PROTECTED]> wrote:
> I would simply create a new component as a subclass of DividedBox 
with
> the dragging functionality disabled. You could also maybe write your
> own component fairly easily by looking at the DividedBox source to 
get
> some ideas for the sizing/layout.


As I'm not great at AS3, I decided to remove my hdivided box 
altogether! 
Instead, I used a hbox with 2 panels & a divider image between the 2 
panels.
I just created 2 states then, giving the panels different sizes and 
the transition between the states worked fine. It surely was the drag 
functionality on the hdividedbox that was causing my problem..here is 
my code if anyone is interested...thanks to all for your help



<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";>
<mx:Script>
<![CDATA[
import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;

public var indexValue:int = 0;

private function changeState() : void {
        if(indexValue == 0){
                currentState='Register';
                indexValue = 1;
        }
        else if(indexValue == 1){
                currentState='Start';
                indexValue = 0;
        }
}
]]>
</mx:Script>
<!-- Define one view state, in addition to the base state.-->
<mx:states>
        <mx:State name="Start">
                <mx:SetProperty target="{canvas1}" name="width" 
value="50%"/>
                <mx:SetProperty target="{canvas2}" name="width" 
value="50%"/>
        </mx:State>
        <mx:State name="Register">
                <mx:SetProperty target="{canvas1}" name="width" 
value="20%"/>
                <mx:SetProperty target="{canvas2}" name="width" 
value="80%"/>
        </mx:State>
</mx:states>

<mx:transitions>
<!-- Define a transition for changing from any state to any state.-->
        <mx:Transition id="TransitionA" fromState="*" toState="*">
        <!-- Define a Parallel effect as the top-level effect.-->
                <mx:Parallel id="t1" targets="{[canvas1,canvas2]}">
                        <!-- Define a Move and Resize effect.-->
                        <mx:Move duration="500"/>
                        <mx:Resize duration="500"/>
                </mx:Parallel>
        </mx:Transition>
</mx:transitions>

<!-- Define a Panel container that defines the login form.-->
<mx:HBox width="100%" height="100%" x="0" y="0">
        <mx:HBox id="canvas1" label="Canvas 1" width="50%" 
height="100%" backgroundColor="#FFFFCC">
                <mx:Label text="Add components here" 
fontWeight="bold"/>
        </mx:HBox>
        <mx:Image source="assets/src/images/arrow_sample.png" 
click="changeState();">
                
        </mx:Image>
        <mx:HBox id="canvas2" label="Canvas 2" width="50%" 
height="100%" backgroundColor="#99CCFF">
                <mx:Label text="Add components here" 
fontWeight="bold"/>
        </mx:HBox>
</mx:HBox>
</mx:Application>