AS3, Mouse Over even when something is above movieclip - actionscript-3

Let's say there is a TOP movieclip
and another BOTTOM movieclip
How would I trigger a mouse event when the mouse is over BOTTOM even if TOP is overlaying it?

Assuming you don't want any mouse events for the top one, set mouseEnabled to false for the top clip.
topClip.mouseEnabled= false;

Probably this can also be the solution if you don't want your topClip mouse disabled OR if you want to receive your mouse event on both movie clips.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function onMouseOver(evt:MouseEvent):void
{
if(evt.currentTarget==bottomClip)
{
Alert.show(bottomClip+" CLICKED");
}
if(evt.currentTarget==topClip)
{
Alert.show(topClip+" CLICKED");
}
}
]]>
</mx:Script>
<mx:Canvas id="can" width="600" height="400" horizontalCenter="0" verticalCenter="0" borderStyle="solid" borderColor="red" >
<mx:Canvas id="bottomClip" click="onMouseOver(event)">
<mx:Canvas id="actualBottomClip" width="400" height="300" x="100" y="50" backgroundColor="red" />
<mx:Canvas id="topClip" click="onMouseOver(event)">
<mx:Canvas id="actualTopClip" width="200" height="75" x="50" y="100" backgroundColor="green" />
</mx:Canvas>
</mx:Canvas>
</mx:Canvas>
</mx:Application>

Related

Adobe AIR, External swf file when loaded from swf does not render properly

I was trying to create an Adobe AIR application that loads an external swf file. However when the swf file is loaded from it does not render properly.
My Main.mxml file:
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0"
creationComplete="Created()">
<fx:Script><![CDATA[
private var moduleLoader:Loader;
private function Created():void {
moduleLoader = new Loader();
var urlre: URLRequest = new URLRequest("Shell1.swf"); //http://localhost:8080/aps/
moduleLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
moduleLoader.load(urlre);
}
private function loaded(event:Event):void {
uic.addChild(moduleLoader);
}
]]></fx:Script>
<mx:UIComponent id="uic" width="100%" height="100%" ></mx:UIComponent>
</mx:Application>
My Shell1.mxml file:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" height="100%" creationComplete="Created(event)"
backgroundColor="0xf5deb3">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private function Created(event:Event):void {
}
]]>
</fx:Script>
<fx:Declarations>
<mx:RemoteObject id="RO" destination="AdministrationHandler"
fault="Alert.show(event.fault.faultString), 'Error'">
</mx:RemoteObject>
</fx:Declarations>
<s:Group id="Group" width="100%" height="100%">
<s:Label id="Introduction"
text="This is a demo application to show that the flex based application works. Click on the button below get generate a random number"
styleName="FilterLabel"/>
<s:VGroup id="VertGroup" paddingLeft="10" paddingRight="10" paddingTop="10" width="100%" height="100%">
<s:Label backgroundColor="green" width="1000" id="firstNumberLabel" text="Enter First Number"
styleName="FilterLabel"/>
<s:TextInput id="firstNumber" width="20%"/>
</s:VGroup>
</s:Group>
</s:Application>
When Shell1.swf is loaded directly in adobe air (by mentioning it application-descriptor.xml), it looks like:
But when I load it by using Main.mxml it looks like this:
So why is that the Components are not properly rendered when Shell1.swf is loaded from Main.swf ?

how to call mxml application from action script

I've one main.mxml which has login button which looks like below -
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#C4D4EF" layout="absolute">
<mx:HTTPService id="serverCall" method="POST"
url="http://localhost:8080/LDAPService/reg"
result="on_Result(event)" fault="on_Fault(event)"
/>
<mx:Script>
<![CDATA[
private function on_Result(event:ResultEvent):void {
// How to write here
}
]]>
</mx:Script>
<mx:Panel x="414" y="145" width="355" height="200" layout="absolute"
<mx:Button x="142" y="115" label="Login" id="callToServer"
click="send_data(event)"/>
</mx:Panel>
</mx:Application>
Now I want to call second.mxml file which looks like below -
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*" creationComplete="iFrame.visible=true"
viewSourceURL="srcview/index.html">
<mx:HBox width="100%" height="100%">
<mx:Panel title="/ Company Home" width="200" height="100%" >
</mx:Panel>
<mx:Panel width="100%" height="100%" title="Ticket Details" paddingTop="1" >
<IFrame id="iFrame" source="some service call url" width="100%" height="100%" />
<mx:ControlBar>
<mx:CheckBox id="cbVisible" label="IFrame Visible" selected="true"
click="iFrame.visible=cbVisible.selected"/>
</mx:ControlBar>
</mx:Panel>
</mx:HBox>
</mx:Application>
How can I call second.mxml from main.mxml? Please advice, Thanks for your help!
OK this example is in flex 4! it uses spark instead of mx
This shows the basics of states.
You can read more here: http://www.artima.com/articles/flex_4_states.html
This article shows the difference between flex3 and flex4 states
This is only a start. Hope this helps you.
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Script ><![CDATA[
import mx.rpc.events.ResultEvent;
<![CDATA[
private function on_Result( event:ResultEvent ):void
{
currentState = "result";
}
]]>
]]>
</fx:Script >
<fx:Declarations >
<s:HTTPService id="serverCall"
url="http://localhost:8080/LDAPService/reg"
useProxy="false"
method="POST"
result="on_Result(event)" >
</s:HTTPService >
</fx:Declarations >
<s:states >
<s:State name="init" />
<s:State name="result" />
</s:states >
<s:Panel x="414"
y="145"
width="355"
height="200" >
<s:Button x="142"
y="115"
label="Login"
id="callToServer"
includeIn="init"
click="serverCall.send()" />
</s:Panel >
<s:Panel title="/ Company Home"
width="200"
height="100%"
includeIn="result" >
</s:Panel >
<s:Panel width="100%"
height="100%"
includeIn="result"
title="Ticket Details" >
.... your stuff
</s:Panel >
</s:Application >

How to access the swfcontrols from one mxml to other mxml

Hai i have SwfControl in page1.mxml,i need to hide and show that control...In page1 i hide that control and page 2 i need to show that control how to do?
Note page1.mxml is main page
page1.mxml
<?xml version="1.0" encoding="utf-8"?>
<local:WindowsControl xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:local="*"
height="100%" width="100%"
backgroundColor="#FFFFFF"
backgroundAlpha="0">
<mx:HBox x="11" y="167" horizontalGap="0">
</mx:HBox>
<mx:SWFLoader id="loader" source="loading.swf" visible="false"/>
</local:WindowsControl>
i need to hide the SWFloader in page1.mxml and show the SWFloader in page2.mxml
page2
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="init()" width="164" height="150" cornerRadius="3">
<mx:Script>
<![CDATA[
import flash.media.Microphone;
import flash.media.Video;
public function init():void
{
loader.visible=true;
}
]]>
</mx:Script>
<mx:VBox height="100%" width="100%" horizontalAlign="center" backgroundColor="#000000" >
<VideoContainer id="vids" opaqueBackground="true" width="160" height="120" />
</mx:VBox>
</mx:Canvas>
The right way to do this is by dispatching events to parent container of page1 and page2.
The parent container will relay the message/action to the target page. Your event will contain info of what is supposed to happen.

AS3 ViewStack content clipping

I have the next code (Flash Builder 4.5)
This main appliction file, for testing me viewstack component.
TabPanelTest
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent):void
{
tp.AddPanel("111", new Button());
tp.AddPanel("444", new TestPanel());
tp.AddPanel("2222222", new Button());
tp.AddPanel("3333333333", new Button());
}
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
tp.RemoveAllPanels();
}
]]>
</fx:Script>
<ns1:TabPanel id="tp" x="25" y="27" width="321" height="199">
</ns1:TabPanel>
<s:Button x="439" y="25" label="Кнопка1" click="button1_clickHandler(event)"/>
</s:Application>
This is TabPanel, that have public methods AddPanel and RemoveAllPanels.
TabPanel
protected function creationCompleteHandler(event:FlexEvent):void
{
//buttons1.dataProvider=new ArrayCollection();
}
public function AddPanel(name:String, element:IVisualElement):void{
var panel:NavigatorContent=new NavigatorContent();
panel.label=name;
panel.addElement(element);
panels.addElement(panel);
}
public function RemoveAllPanels():void{
//panels.swapElements(swapElementsAt(0,2);
panels.removeAllElements();
/*var but:Button;
but=new Button();
but.label=name;
buttons.addElement(but); */
}
]]>
</fx:Script>
<mx:ViewStack id="panels" x="0" y="31" width="100%" height="100%" borderColor="#000000"
borderStyle="solid" borderVisible="true" clipContent="true" includeInLayout="true">
</mx:ViewStack>
<s:ButtonBar id="buttons1" x="0" y="0" width="100%" dataProvider="{panels}"
justificationStyle="pushOutOnly"/>
</s:Group>
This is testing panel, that have size more than viewstack, and it must clipping.
TestPanel
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
<fx:Script>
<![CDATA[
import spark.components.NavigatorContent;
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
NavigatorContent(this.parent.parent.parent).label="bebe";
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Button x="163" y="35" width="315" height="209" label="Кнопка"
click="button1_clickHandler(event)"/>
</s:Group>
When i click to "444" in buuton bar my content don't clipping. What's problem?
Problem is in this line with TestPanel custom component: -
<s:Button x="163" y="35" width="315" height="209" label="Кнопка"
click="button1_clickHandler(event)"/>
If you are adding any component to parent container: -
child component will consider x and y position with respect to parent.
If you want to fit your child component you should use x=0 and y=0
as well as width = 100% and height = 100%
Try this and see out put: -
<s:Button x="163" y="35" width="100%" height="100%" label="Кнопка"
click="button1_clickHandler(event)"/>
Again Try this and see out put: -
<s:Button x="0" y="0" width="100%" height="100%" label="Кнопка"
click="button1_clickHandler(event)"/>
You will come to know how component behavior.
Hope this may solve your problem.....

get id inactionscript/flex

How to get all child ids of myCanvas1.Also for a specific mxml tag say <mx:Move /> how to get its id from action script
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable("__NoChangeEvent__")]
[Embed(source="fruits.jpg")]
private var fruitImageClass:Class;
public function clickhandler(event:Event):void
{
//How to get all childs of myCanvas1
}
]]>
</mx:Script>
<mx:Canvas backgroundColor="#A9C0E7" borderStyle="solid" height="300" id="myCanvas1" width="300">
<mx:Move id="fruitAnimation1" target="{fruitImage}" xTo="100" yTo="10" />
<mx:Move id="fruitAnimation2" target="{fruitImage2}" xTo="100" yTo="10" />
</mx:Canvas>
<mx:Canvas backgroundColor="#A9C0E7" borderStyle="solid" height="800" id="myCanvas" width="800">
<mx:Image height="50" id="fruitImage" source="{fruitImageClass}" width="50" x="250" y="10" />
<mx:Image height="50" id="fruitImage2" source="{fruitImageClass}" width="50" x="250" y="10" />
</mx:Canvas>
<mx:Button click="clickhandler(event)" label="Generate" x="100" y="316" />
</mx:Application>
The problem of your code is children of myCanvas1 are not visual components and this declaration has no sense. You shouldn't put your animations, effects and transitions into visual container. That's all what I can say about your question :)
Have you looked at any of the getChild.. methods?
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/HierarchicalCollectionView.html#getChildren%28%29
Does this help?