view attributes with event handlers

[smithnyiu]

I am trying to change the view attributes of a window when I move (animate) it with a button click. I want the window to move, then I would like to change the view attributes. The resource is a swf file.

Here is a sample:

<button text="Move Right" width="86" height="20"
onclick="
map.animate('x',-380,1000,true);
map.animate('width',380,500,true);
jepp.close();" />

[antun]

I'm afraid I don't understand what you're asking. What is not working in your code?

-Antun

[smithnyiu]

Antun,

Part of my post was cut off. I want to be able to change the resource attributes. i.e. after I click on the button, and the window animates to it's new position and resizes itself, I want to tell the .swf file to change it's position in the window. In other words, move x +180.

[antun]

OK, I think I see. You're asking is how do you have something happen after the animation of the window, right?

-Antun

[smithnyiu]

Right!

[antun]

What you're going to have to use in your case is a delegate. If you just wanted a bunch of animations to happen sequentially, you could use an <animatorgroup>, but here you want to have one object do some stuff, and have another object wait for it to finish before it does its thing.

As you've probably discovered if you say:


foo.animate(...);
bar.animate(...);


... foo and bar will begin their animations almost exactly at the same time. To get the first one to wait for the second, you have to set up a delegate when the first one is called, that checks for the property of foo that gets animated, and calls a method when it changes. That method then checks the value of the property against its final value:


<canvas debug="true">
<window width="175" height="250">
<button x="10" y="10">Move and change
<method event="onclick">
parent.animate( "x", 100, 1000 );
parent.animate( "width", 250, 1000 );
parent.targetHeight = 300;
parent.animate( "height", parent.targetHeight, 1000 );
parent.heightDel = new LzDelegate( parent, "checkHeight",
parent, "onheight" );
</method>
</button>

<view name="redBox" bgcolor="red" width="10" height="10" />

<method name="checkHeight">
<![CDATA[
if ( this.height >= this.targetHeight ) {
this.moveRedBox();
}
]]>
</method>

<method name="moveRedBox">
this.heightDel.unregisterAll();
this.redBox.setX( 180 );
this.redBox.setY( 100 );
</method>
</window>
</canvas>


It sounds a lot more complicated than it really is.

-Antun

[smithnyiu]

Antun,

This is on the right track. How can I do it so the button is not nested in the window and can control two windows?
I tried to put the button code outside the window tags and it did not control the window. Any ideas?

Thanks,

Tom

[antun]

I tried to put the button code outside the window tags and it did not control the window. Any ideas?

That's because of the addressing. The button sets the delegate in its parent (the window), and sets up the delegate to listen for the onx event from its parent (again the window). If you moved it outside of the window, you would have to give the window a name (or an id - which is global), and then you could point to the window using its name, for example:


canvas.mywindow


-Antun