beta
Click here to ask Question Now
Its free No registration required. Flash, Flex, Flash
Media Server, ActionScript,Adobe Air. Most questions receive a response in an hour.
Answered
3/10/2010 5:47:43 PM
Title: developing code into Custom component -need urgently
I need to make a reusable custom component from the existing code here. So that I can use this code to make this effect to work in any direction. In the code it has user specified height and works from downside.
I need to make this component customizable, So it can be used to have the effect from top, bottom, left or right.
I appreciate your help.
1)main Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:sh="com.*">
<sh:Shade id="i1" height="15" headerHeight="14"
thisHeight="215"
alwaysOnTop="false"
y="{this.height - 14}"/>
</mx:WindowedApplication>
2)Custom Comp: MyComp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
height="300"
creationComplete="init()"
verticalScrollPolicy="off"
verticalGap="0"
>
<mx:Script>
<![CDATA[
import mx.core.Container;
import mx.core.Application;
import mx.controls.Alert;
import mx.effects.easing.*;
import mx.binding.utils.BindingUtils;
/**
* Need host to adjust this object to Top
*/
public var alwaysOnTop:Boolean = false;
/**
* User can custom the height of this component
*/
public var thisHeight:int = 0;
/**
* User can custom the header height of this component
*/
[Bindable] public var headerHeight:int = 14;
/**
* The bindable value of this height
*/
[Bindable] public var tHeight:int = 0;
/**
* The bindable value of parent height
*/
[Bindable] public var pHeight:int = 0;
/**
* Initialize method
*/
private function init():void
{
if (this.thisHeight > 0 ) this.height = this.thisHeight;
BindingUtils.bindProperty(this, "tHeight",this,"height" );
BindingUtils.bindProperty(this, "pHeight",this.parent,"height" );
}
/**
* Toggle button
*/
private function toggleBtn(e:MouseEvent):void
{
if (this.alwaysOnTop)
{
var container:Container = Application.application as Container;
container.setChildIndex(this.parent, container.numChildren - 1 );
}
if ( vs.selectedIndex == 0 )
panelOut.play();
else
panelIn.play();
}
]]>
</mx:Script>
<mx:Move
id="panelOut"
target="{this}"
yTo="{ pHeight - this.tHeight }"
effectEnd="vs.selectedIndex = 1"
duration="600"
easingFunction="Back.easeOut"/>
<mx:Move
id="panelIn"
target="{this}"
yTo="{ this.pHeight - headerHeight }"
effectEnd="vs.selectedIndex = 0"
duration="600"
easingFunction="Back.easeIn"/>
<mx:VBox horizontalAlign="center" width="100%">
<mx:ViewStack id="vs" width="100%">
<mx:VBox horizontalAlign="center" >
<mx:Label text="VBox 1"/>
<mx:Image source="" click="toggleBtn(event)"/>
</mx:VBox>
<mx:VBox horizontalAlign="center">
<mx:Label text="2nd VBox"/>
<mx:Image source="" click="toggleBtn(event)"/>
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
<mx:VBox id="drawer" height="100%" width="100%" backgroundColor="#000000">
</mx:VBox>
</mx:VBox>
to make this effect work from any direction you need to write the move effect for all directions
<mx:Move id="panelOut"
<mx:Move id="panelIn"
these both functions create effect from bottom, to create from all sides copy these three times and adjust settings for left, up and right.
declare properties to set name of effect to use.Set the property while using component in its tag to use that effect. Before playing effect you will check the property and then play the effect in your toggleBtn() function.
if(effect=="down" )
//effectup.play();
else if(effect=="up")
////effectup.play();
something like the above example
<mx:Move id="panelOut"
<mx:Move id="panelIn"
these both functions create effect from bottom, to create from all sides copy these three times and adjust settings for left, up and right.
declare properties to set name of effect to use.Set the property while using component in its tag to use that effect. Before playing effect you will check the property and then play the effect in your toggleBtn() function.
if(effect=="down" )
//effectup.play();
else if(effect=="up")
////effectup.play();
something like the above example
My requirement is I have to create a Direction propery which takes LEFT,RIGHT,BOTTOM AND TOP properties.
using Direction propert when i am using that custom component in my application I should be able to specify direction="left" like that and it should have the feature in the code above , but from left.
can u tell me how to do that
using Direction propert when i am using that custom component in my application I should be able to specify direction="left" like that and it should have the feature in the code above , but from left.
can u tell me how to do that
Accepted Answer
First of all declare a property to setDirection of effect in MYComponent.mxml by declaring a public variable. "bottom is the default style"
public var effectDirection:String="bottom";
this effect can be set from component tag by declaring effectDirection, I have set "left"
now you need to create effects for all directions, i have created for left only. Effect might not be as desired by you so update the settings accourding to your requirement.
I have updated you move effects to panelOutBottom, and pannelInBottom and added two more move effects for panelOutLeft and pannelInLeft. Similarly you have to create for right and top effects.
finally implement the effect by checking the variable which user set in the tag.
Below code checks the effect being set using if statement. I added check for left and bottom . you need to add for right and top similarly. Left effect is functional. You can test it by seeting the variable in component tag by settin property effectDirection="left" or bottom.
Update below function in your mycomponent.mxml
public var effectDirection:String="bottom";
this effect can be set from component tag by declaring effectDirection, I have set "left"
<local:MyComponent id="i1" height="15" headerHeight="14"
thisHeight="215"
alwaysOnTop="false"
y="{this.height - 14}" effectDirection="left"/>
now you need to create effects for all directions, i have created for left only. Effect might not be as desired by you so update the settings accourding to your requirement.
I have updated you move effects to panelOutBottom, and pannelInBottom and added two more move effects for panelOutLeft and pannelInLeft. Similarly you have to create for right and top effects.
<mx:Move
id="panelOutBottom"
target="{this}"
yTo="{ pHeight - this.tHeight }"
effectEnd="vs.selectedIndex = 1"
duration="600"
easingFunction="Back.easeOut"/>
<mx:Move
id="panelInBottom"
target="{this}"
yTo="{ this.pHeight - headerHeight }"
effectEnd="vs.selectedIndex = 0"
duration="600"
easingFunction="Back.easeIn"/>
<mx:Move
id="panelOutLeft"
target="{this}"
xTo="{ pHeight - this.tHeight }"
effectEnd="vs.selectedIndex = 1"
duration="600"
easingFunction="Back.easeOut"/>
<mx:Move
id="panelInLeft"
target="{this}"
xTo="{ this.pHeight - headerHeight }"
effectEnd="vs.selectedIndex = 0"
duration="600"
easingFunction="Back.easeIn"/>
finally implement the effect by checking the variable which user set in the tag.
Below code checks the effect being set using if statement. I added check for left and bottom . you need to add for right and top similarly. Left effect is functional. You can test it by seeting the variable in component tag by settin property effectDirection="left" or bottom.
Update below function in your mycomponent.mxml
private function toggleBtn(e:MouseEvent):void
{
if (this.alwaysOnTop)
{
var container:Container = Application.application as Container;
container.setChildIndex(this.parent, container.numChildren - 1 );
}
if ( vs.selectedIndex == 0 ){
if(effectDirection=="bottom"){
panelOutBottom.play();
}else if(effectDirection=="left"){
panelOutLeft.play();
}
}
else{
if(effectDirection=="bottom"){
panelInBottom.play();
}else if(effectDirection=="left"){
panelInLeft.play();
}
}
}
Hi,
It is working but not as we think.I need this custom component to be laid in a way such that its base should be on the directioin we specify. but its not happening when we are using this code. can you suggest me on this
It is working but not as we think.I need this custom component to be laid in a way such that its base should be on the directioin we specify. but its not happening when we are using this code. can you suggest me on this
Ren, the code I gave you is required to make the code function in such way that when you specify a direction some distinct code should function. I this case when you specify the "left" or "bottom" specified code for them works. SO far this code functions fine.
I assume the further problem is that you are no able to achieve the desired effect. I think in "left" case you want the container to move from extreme left but in current code its from center (I didn't modify the effect, just added functionality). You can always change the effect using xTo properties.
In case of left you may require to set xTo="0" in panelOutLeft and xTo="50" in panelInLeft.This will make the container move 50 pixel towards right on click and on again click back to left extreme position that 0 px.
I assume the further problem is that you are no able to achieve the desired effect. I think in "left" case you want the container to move from extreme left but in current code its from center (I didn't modify the effect, just added functionality). You can always change the effect using xTo properties.
In case of left you may require to set xTo="0" in panelOutLeft and xTo="50" in panelInLeft.This will make the container move 50 pixel towards right on click and on again click back to left extreme position that 0 px.
Post your Reply