Move Effect Question

[ripvtech]

I am using a move effect on a canvas and what I to happen is when a user clicks on a button on that canvas it will move/slide the canvas off to the side.

While this is happening I have my 2nd canvas slide Up from the bottom.

My problem is that when the 1st canvas slides to the side it pops back to it's original location.

How do you get a object to move using the move effect and stay and the location it was moved to?

I'm going nuts. I can't post any source code as I'm remote and do not have access to the source files at this time.

Thanks in advance,
JD

[Tink]

without any code its impossible to see were u are going wrong. I would suggest you make an example file and post that.

[CDHBookingEdge]

I think I got where you're going on this and might be able to give you a lead or two JD.
Now let's start from the assumption that this:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Panel percentHeight="100" percentWidth="100">
<mx:DividedBox direction="horizontal" width="100%" height="100%">
<mx:Canvas id="canvas1" width="100">
</mx:Canvas>
<mx:Canvas id="canvas2">
</mx:Canvas>
</mx:DividedBox>
<mx:Button label="show Left" click="canvas1.width = 0;"/>
<mx:Button label="show Right" click="canvas2.width=0; canvas1.percentWidth=100;"/>
</mx:Panel>
</mx:Application>

seems to work. Try it in the Flex Online Compiler (http://try.flex.org/index.cfm) if you're still offsite.

Now playing around with things and looking around a bit. I decided to try this

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Panel percentHeight="100" percentWidth="100">
<mx:DividedBox direction="horizontal" horizontalGap="1" width="100%" height="100%">
<mx:Canvas id="canvas1" percentWidth="100">
<mx:Label text="Hi I'm a label in Canvas 1" />
</mx:Canvas>
<mx:Canvas id="canvas2">
<mx:Label text="Hi I'm a label in Canvas 2" />
</mx:Canvas>
</mx:DividedBox>
<mx:Button label="show Left" click="canvas2.width = 0; canvas1.percentWidth=100;"/>
<mx:Button label="show Right" click="canvas1.width=0; canvas2.percentWidth=100;"/>
</mx:Panel>
</mx:Application>


And that seems to "kinda" work. So maybe DividedBox will work for you, or at least help you out. It's a hyper example I'll admit. But maybe if you try that and then add your moveEffect into it and see how it goes and such that might give you a lead. I understand how it is when you don't have your tools around and such but the Flex Online Compiler (http://try.flex.org/index.cfm) might help some.


Take care,
Christopher

[ripvtech]

Here is a quick and dirty view of what I am doing



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" layout="absolute">
<mx:Script>
<![CDATA[
import flash.display.DisplayObject;
import mx.events.EffectEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;
import mx.effects.Effect;
import mx.effects.Move;
import flash.events.MouseEvent;


public function changeView(event:MouseEvent, newView:Object):void {
event.target.parent.x = 125;
newView.visible = true;

}
]]>
</mx:Script>

<mx:Canvas id="cnvsStart" name="Start" horizontalCenter="0" moveEffect="{moveCanvas}">
<mx:Button id="btnBrowse" label="Browse Files" width="121" click="changeView(event, cnvsSearch)" horizontalCenter="0" top="42"/>
<mx:Button y="72" label="Create New File" width="121" horizontalCenter="0" click="changeView(event, 'NewFile')"/>
<mx:Button y="102" label="Archive Old Files" width="121" horizontalCenter="0" click="changeView(event, 'Archive')"/>
<mx:Button y="132" label="Administration" width="121" horizontalCenter="0" click="changeView(event, 'Admin')"/>
</mx:Canvas>

<mx:Canvas id="cnvsSearch" name="Search" visible="false" horizontalCenter="0" showEffect="{fadeIn}" hideEffect="{fadeOut}">
<mx:Panel width="696" height="400" layout="absolute" title="Browse Files" headerHeight="25" horizontalCenter="0" horizontalAlign="center" id="pnlSearch" resize="true" top="25">
<mx:Label text="File Number" x="10" y="0" id="label1"/>
<mx:Label text="Address" x="333" y="0" id="label3"/>
<mx:Label text="Borrower Name" x="138" y="0" id="label2"/>
<mx:TextInput x="10" y="14" id="txtFileNum" width="100"/>
<mx:TextInput x="138" y="14" id="txtName"/>
<mx:TextInput x="333" y="14" id="txtAddress"/>

<mx:DataGrid id="dgClientList" x="10" y="44" width="656" height="306">
<mx:columns>
<mx:DataGridColumn headerText="File Number" width="100"/>
<mx:DataGridColumn headerText="Client" width="300"/>
<mx:DataGridColumn headerText="Property Address"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<!--
<mx:Panel visible="false" width="696" height="142" layout="absolute" horizontalCenter="0" resize="true" headerHeight="20" top="425" id="pnlExpandedInfo" title="Expanded Info" showEffect="{pnlWipeDown}" >
<mx:Label text="Client" fontWeight="bold" y="0" textAlign="center" width="121" horizontalCenter="-120"/>
<mx:Text id="txtClient" text="" horizontalCenter="-120" top="26" textAlign="center"/>
<mx:Label text="date" fontWeight="bold" textAlign="center" width="121" horizontalCenter="-120" top="52"/>
<mx:Text id="date" text="" resize="true" textAlign="center" width="121" horizontalCenter="-120" top="72"/>
<mx:Label text="agent" fontWeight="bold" y="0" textAlign="center" width="121" horizontalCenter="90"/>
<mx:Text text="" textAlign="center" horizontalCenter="90" top="26"/>
<mx:Label text="Lender" fontWeight="bold" textAlign="center" width="121" horizontalCenter="90" top="52"/>
<mx:Text text="" textAlign="center" width="121" horizontalCenter="90" top="72"/>
<mx:Button x="533" y="36" label="View Complete File" />
</mx:Panel>
-->
</mx:Canvas>

<mx:WipeUp id="fadeIn" duration="4000"/>
<mx:WipeDown id="pnlWipeDown" duration="3000"/>
<mx:Fade id="fadeOut" duration="300"/>
<mx:Move id="moveCanvas" duration="3000"/>
</mx:Application>




It doesn't work too well in the online compiler. So try it on your machine.
What I want is the menu that moves to the left to stay to the left

[CDHBookingEdge]

Hey JD did you get my e-mail about the sliding drawer? If so did that help any? I'll take a look at your code and see what comes up. ;-)

[CDHBookingEdge]

I think I might have an idea or two..I'm playing around with it. ;-)

[CDHBookingEdge]

I think I got it pretty much fixed but it derives us to another question to fully fix it, I feel. Here's the code then I'll give an explanation of what I tried.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:custom="components.*" layout="absolute"
applicationComplete="init();" >
<mx:Script>
<![CDATA[
import flash.display.DisplayObject;
import mx.events.EffectEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;
import mx.effects.Effect;
import mx.effects.Move;
import flash.events.MouseEvent;


public function changeView(event:MouseEvent, newView:Object):void
{
// event.target.parent.x = 125;
moveCanvas.xTo = 25
moveCanvas.end();
moveCanvas.play();
newView.visible = true;

}
private function init() : void
{
moveCanvas.xTo = 400;
moveCanvas.end();
moveCanvas.play();
}
]]>
</mx:Script>

<mx:Canvas id="cnvsStart" name="Start" >
<mx:Button id="btnBrowse" label="Browse Files" width="121" click="changeView(event, cnvsSearch)" horizontalCenter="0" top="42"/>
<mx:Button y="72" label="Create New File" width="121" horizontalCenter="0" click="changeView(event, 'NewFile')"/>
<mx:Button y="102" label="Archive Old Files" width="121" horizontalCenter="0" click="changeView(event, 'Archive')"/>
<mx:Button y="132" label="Administration" width="121" horizontalCenter="0" click="changeView(event, 'Admin')"/>
</mx:Canvas>

<mx:Canvas id="cnvsSearch" name="Search" visible="false" horizontalCenter="0" showEffect="{fadeIn}" hideEffect="{fadeOut}">
<mx:Panel width="696" height="400" layout="absolute" title="Browse Files" headerHeight="25" horizontalCenter="0" horizontalAlign="center" id="pnlSearch" resize="true" top="25">
<mx:Label text="File Number" x="10" y="0" id="label1"/>
<mx:Label text="Address" x="333" y="0" id="label3"/>
<mx:Label text="Borrower Name" x="138" y="0" id="label2"/>
<mx:TextInput x="10" y="14" id="txtFileNum" width="100"/>
<mx:TextInput x="138" y="14" id="txtName"/>
<mx:TextInput x="333" y="14" id="txtAddress"/>

<mx:DataGrid id="dgClientList" x="10" y="44" width="656" height="306">
<mx:columns>
<mx:DataGridColumn headerText="File Number" width="100"/>
<mx:DataGridColumn headerText="Client" width="300"/>
<mx:DataGridColumn headerText="Property Address"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<!--
<mx:Panel visible="false" width="696" height="142" layout="absolute" horizontalCenter="0" resize="true" headerHeight="20" top="425" id="pnlExpandedInfo" title="Expanded Info" showEffect="{pnlWipeDown}" >
<mx:Label text="Client" fontWeight="bold" y="0" textAlign="center" width="121" horizontalCenter="-120"/>
<mx:Text id="txtClient" text="" horizontalCenter="-120" top="26" textAlign="center"/>
<mx:Label text="date" fontWeight="bold" textAlign="center" width="121" horizontalCenter="-120" top="52"/>
<mx:Text id="date" text="" resize="true" textAlign="center" width="121" horizontalCenter="-120" top="72"/>
<mx:Label text="agent" fontWeight="bold" y="0" textAlign="center" width="121" horizontalCenter="90"/>
<mx:Text text="" textAlign="center" horizontalCenter="90" top="26"/>
<mx:Label text="Lender" fontWeight="bold" textAlign="center" width="121" horizontalCenter="90" top="52"/>
<mx:Text text="" textAlign="center" width="121" horizontalCenter="90" top="72"/>
<mx:Button x="533" y="36" label="View Complete File" />
</mx:Panel>
-->
</mx:Canvas>

<mx:WipeUp id="fadeIn" duration="4000"/>
<mx:WipeDown id="pnlWipeDown" duration="3000"/>
<mx:Fade id="fadeOut" duration="300"/>
<mx:Move id="moveCanvas" duration="3000" target="{cnvsStart}" />
</mx:Application>


ok first off I gave the mx:Move a target: target="{cnvsStart}"
Then I addded an init() function. There's where there's a bit of a question still left. I'm not sure how to get it centered without using what you used with the horizontalCenter="0". But I just chose 400 and that's that I set the xTo equal to. xTo is the "Destination position's x coordinate.", according to the Docs for the Move Effect (http://livedocs.macromedia.com/flex/2/langref/mx/effects/Move.html) Then on the code you had to move the menu, I set the xTo to be 25.

See what you think and see if that gets you closer, farther, or the same LOL.

Christopher

[CDHBookingEdge]

JD, did that help any?

[ripvtech]

Hey,
Sorry I haven't posted back. Some other issues came up and I haven't gotten the time to post back.

The code works. And I figured out a way to use the "horizontalCenter" property.

Here is the new code:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" xmlns:ui="sho.*" xmlns:custom="components.*" layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
import mx.events.MoveEvent;
import flash.display.DisplayObject;
import mx.events.EffectEvent;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
import mx.effects.Effect;
import mx.effects.Move;
import flash.events.MouseEvent;
import mx.core.Container;
import mx.core.EdgeMetrics;
import mx.containers.Canvas;
import mx.core.UIComponent;

[Bindable]
public var _center:Number = 0;

public var _moveX:int;
public var _newCanvas:Object;
public var _hideCanvas:Object;

public function changeView(event:MouseEvent, newView:Object, effect:Object = null):void {

if(_newCanvas && _newCanvas != newView) {
_newCanvas.visible = false;
}
_newCanvas = newView;
var xPos:Number = cnvsStart.x - (_newCanvas.width/2) - (cnvsStart.width/2) - 20.5;
_moveX = xPos;
if (effect != null) {
effect.end();
effect.xTo = _moveX;
effect.play();
}
trace (_moveX)
newView.visible = true;
}

private function moveEnd(eventObj:EffectEvent):void {
var centerNum:Number = (_newCanvas.width/2) + (cnvsStart.width/2) + 20.5;
_center = (centerNum - (centerNum*2));
trace (_center);
}
]]>
</mx:Script>

<mx:Canvas id="cnvsStart" name="Start" moveEffect="{moveCanvas}" horizontalCenter="{_center}">
<mx:Button id="btnBrowse" label="Browse Files" width="121" click="changeView(event, cnvsSearch, moveCanvas)" horizontalCenter="0" top="42"/>
<mx:Button y="72" label="Create New File" width="121" horizontalCenter="0" click="changeView(event, 'NewFile')"/>
<mx:Button y="102" label="Archive Old Files" width="121" horizontalCenter="0" click="changeView(event, 'Archive')"/>
<mx:Button y="132" label="Administration" width="121" horizontalCenter="0" click="changeView(event, 'Admin')"/>
</mx:Canvas>

<mx:Canvas id="cnvsSearch" name="Search" visible="false" horizontalCenter="0" showEffect="{fadeIn}" hideEffect="{fadeOut}">
<mx:Panel width="696" height="400" layout="absolute" title="Browse Files" headerHeight="25" horizontalCenter="0" horizontalAlign="center" id="pnlSearch" resize="true" top="25">
<mx:Label text="File Number" x="10" y="0" id="label1"/>
<mx:Label text="Address" x="333" y="0" id="label3"/>
<mx:Label text="Borrower Name" x="138" y="0" id="label2"/>
<mx:TextInput x="10" y="14" id="txtFileNum" width="100"/>
<mx:TextInput x="138" y="14" id="txtName"/>
<mx:TextInput x="333" y="14" id="txtAddress"/>

<mx:DataGrid id="dgClientList" x="10" y="44" width="656" height="306">
<mx:columns>
<mx:DataGridColumn headerText="File Number" width="100"/>
<mx:DataGridColumn headerText="Client" width="300"/>
<mx:DataGridColumn headerText="Property Address"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>

<mx:Panel visible="false" width="696" height="142" layout="absolute" horizontalCenter="0" resize="true" headerHeight="20" top="425" id="pnlExpandedInfo" title="Expanded Info" showEffect="{pnlWipeDown}" >
<mx:Label text="Client" fontWeight="bold" y="0" textAlign="center" width="121" horizontalCenter="-120"/>
<mx:Text id="txtClient" text="" horizontalCenter="-120" top="26" textAlign="center"/>
<mx:Label text="date" fontWeight="bold" textAlign="center" width="121" horizontalCenter="-120" top="52"/>
<mx:Text id="date" text="" resize="true" textAlign="center" width="121" horizontalCenter="-120" top="72"/>
<mx:Label text="agent" fontWeight="bold" y="0" textAlign="center" width="121" horizontalCenter="90"/>
<mx:Text text="" textAlign="center" horizontalCenter="90" top="26"/>
<mx:Label text="Lender" fontWeight="bold" textAlign="center" width="121" horizontalCenter="90" top="52"/>
<mx:Text text="" textAlign="center" width="121" horizontalCenter="90" top="72"/>
<mx:Button x="533" y="36" label="View Complete File" />
</mx:Panel>

</mx:Canvas>

<mx:WipeUp id="fadeIn" duration="4000"/>
<mx:WipeDown id="pnlWipeDown" duration="3000"/>
<mx:Fade id="fadeOut" duration="300"/>
<mx:Move id="moveCanvas" duration="3000" target="{cnvsStart}" effectEnd="moveEnd(event);"/>


</mx:Application>



Thank you for all the help!!!!!

[CDHBookingEdge]

Cool! Glad it works! Now at least I know my "theory" is correct and I can use similar in my programs. ;-)

Later,
Christopher