I have three buttons with sound effects in a mobile adobe air device (PlayBook in this case - supports up to 4 points of multitouch).
<fx:Declarations>
<mx:SoundEffect id="Sound1" source="#Embed(source='assets/Sound1.mp3')" />
<mx:SoundEffect id="Sound2" source="#Embed(source='assets/Sound2.mp3')" />
<mx:SoundEffect id="Sound3" source="#Embed(source='assets/Sound3.mp3')" />
</fx:Declarations>
<s:Button interactionMode="touch" x="14" y="60" width="295" height="145" label="Button1" mouseDownEffect="{Sound1}"/>
<s:Button interactionMode="touch" x="362" y="60" width="295" height="145" label="Button2" mouseDownEffect="{Sound2}"/>
<s:Button interactionMode="touch" x="713" y="60" width="295" height="145" label="Button3" mouseDownEffect="{Sound3}"/>
All the buttons work but how do I let the user press all three at once? Is there another way to do this?
Thanks,
Flex components don't support multi-touch.
Ran on creationComplete:
protected function init():void
{
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
}
Then used an image for a button since buttons work but only one button shows animation for some reason:
<s:Image id="ui_btnLowTom" source="{imageOut.source}"
x="14" y="60" width="295" height="145" touchBegin="ui_btnLowTom.source = imageOver.source; LowTomPlay(event)"
touchEnd="ui_btnLowTom.source = imageOut.source" />
And the actual handler:
protected function LowTomPlay(event:TouchEvent):void
{
lowTomSndChannel=lowTomSnd.play();
}
So yes - flex does support multi-touch....
Related
I have an Accordion component in Flex that has two children,
at the load of my page, I want to give the textvalue of a textfield in the first children to a textfield in the second children by using actionscript, but its faild
nb : when I click the secode children and I return to pass the textvalue from the first children, the action succeed!
<mx:HBox width="100%" height="310" horizontalAlign="center">
<mx:Accordion id="accordion1" width="100%" height="310" historyManagementEnabled="true">
<!-- child 1--><mx:VBox id="theme_resultat" width="95%" height="95%"
label="Résultat" horizontalAlign="center"
verticalAlign="middle">
<s:HGroup left="0" right="0" bottom="0" width="98%"
horizontalAlign="right">
<s:TextInput id="doc"/>
<mx:Button id="btnAdd" label="Add"
click="add_text(event)"
icon="#Embed('assets/images/add.png')"
paddingLeft="3" paddingRight="3"/>
</s:HGroup>
</mx:VBox>
<!-- child 2--><mx:VBox id="theme_detail" width="95%" height="95%" label="Détail"
verticalAlign="middle">
<mx:VBox width="100%" height="150" horizontalAlign="center">
<s:HGroup>
<mx:FormItem label="Titre:" paddingLeft="5">
<mx:TextInput id="doc_titre"/>
</mx:FormItem>
</s:HGroup>
</mx:VBox>
</mx:VBox>
</mx:Accordion>
</mx:HBox>
protected function add_text(event:MouseEvent):void
{
accordion1.selectedIndex=1;
doc_titre.text = doc.text;
}
}
when I click add I move to the second child, but the (mx:TextInput id="doc_titre") dont have the value of (s:TextInput id="doc"/)
for the second time I return to the child 1 and I click add, then I move to the second child and I find the value of (s:TextInput id="doc") in (mx:TextInput id="doc_titre")
What happens exactly? I think your problem may be caused by the fact that the components on the second children are not created until that view is opened, There are many solution for this, you could write some code in the creation complete oof the second view that will load the correct value, you can use databinding to bind the text inputs to the same string or you can try setting creationPolicy to all.
My answer is based on my above assumption so if I am wrong please give more details.
Check this http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7cb8.html#WS2db454920e96a9e51e63e3d11c0bf69084-7ae5 and try setting the creationPolicy to all then let us know if the problem is solved
Use createDefferedContent() instead:
for (var i:int = 0; i < accordion.numChildren; i++)
{
(accordion.getElementAt(i) as NavigatorContent).createDeferredContent();
}
This method creates the children and their components in the background. Don't use creationPolicy as I did since this causes memory-related issues.
I'm trying to learn Flash builder 4.5, and now I'm stuck with this question.
I got this code:
<fx:Script>
<![CDATA[
public function showList():void
{
tier2.x=(this.x+this.width);
tier2.y=(this.y+this.height);
tier2.visible=true;
}
]]>
</fx:Script>
// on mouseover I'm calling function showList()
<mx:LinkButton x="10" y="20" width="143"
label="Class 1" id="t_id1"
mouseOver="showList()"
color="#FFFFFF" fontFamily="Arial" fontSize="16" fontWeight="bold"/>
<s:List id="tier2" visible="false" width="111" borderColor="#FEFEFE"
borderVisible="true" color="#FAF3F3" contentBackgroundAlpha="0.5"
contentBackgroundColor="#5D5E5E">
</s:List>
In function showList() I'm trying to move the list to the linkbutton on mouseover.
How can I get the linkbutton's x and y position?
i have a spark list that displays a list of images that represent products. i am trying to implement a drag and drop functionality that allows the user to drag the products he wants to buy from the list to canvas area where he can see the products he choose before buying them. i am using the code below but i cannot figure out what is wrong with it , it seems that i am unable to use the list item as a draginitiator, can any one help please:
private function onMouseDown( event : MouseEvent ) : void
{
var list:List = List(event.currentTarget);
var dragInitiator:Image = Image (list.selectedItem);
var source : DragSource = new DragSource();
source.addData(dragInitiator, "img");
DragManager.doDrag(dragInitiator, source, event);
}
protected function canvas1_dragEnterHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(Canvas(event.currentTarget));
}
protected function canvas1_dragDropHandler(event:DragEvent):void
{
Image(event.dragInitiator).x =
Canvas(event.currentTarget).mouseX;
Image(event.dragInitiator).y =
Canvas(event.currentTarget).mouseY; }
<fx:Model id="categoriesModel" source="Data/Categories.xml"/>
<s:ArrayList id="CategoriesCollection" source="{categoriesModel.Category}"/>
<fx:Model id="productsModel" source="Data/Products.xml"/>
<s:ArrayList id="ProductsCollection" source="{productsModel.Product}" />
</fx:Declarations>
<s:VGroup gap="5" horizontalAlign="center">
<s:HGroup gap="5">
<Components:PROExpressLogo/>
<s:List id="categoryList" scroller="{null}" visible="true"
itemRenderer="Renderers.categoryItemRenderer" width="700" borderAlpha="0"
change="categoryList_changeHandler(event)">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:List>
</s:HGroup>
<s:List id="productList" scroller="{null}" contentBackgroundAlpha="0.4" contentBackgroundColor="0xabcdef"
itemRenderer="Renderers.productItemRenderer" width="880" borderAlpha="0" visible="true" horizontalCenter="0"
dragEnabled="false" mouseDown="onMouseDown(event)"
>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:List>
<s:HGroup gap="20">
<s:Group>
<s:Image id="planImage" width="500" height="300" horizontalCenter="0"
toolTip="Drag your items on your Plan and drop them were you plan to install them"
/>
<mx:Canvas width="500" height="300" backgroundAlpha="0.1"
backgroundColor="#abcdef" borderColor="#abcdef" borderStyle="inset"
contentBackgroundColor="#abcdef" cornerRadius="10"
dragDrop="canvas1_dragDropHandler(event)"
dragEnter="canvas1_dragEnterHandler(event)" dropShadowVisible="true"
horizontalCenter="0"/>
</s:Group>
<s:List id="cart" width="200" height="300"/>
</s:HGroup>
I 'm thinking you need add drag initiator should be the item renderer that you are dragging rather than the entire List control.
Not list.selectedItem that simple object that is not like UIComponent or VisualElement you have to point some ui component like group.
I have setup a Scroller container around an HGroup of labels. The Scroller is setup to only display a single label at a time. What I am trying to do is determine which label is in view of the Scroller when a button is clicked. I have scoured the reference material on Scrollers and HGroups, but cannot formulate a programmatic strategy to determine what element of the group is in view.
Scroller Code for reference:
<local:Scroller id="imageViewer" includeIn="startState" left="411" right="411" top="241"
bottom="356" depth="2">
<s:HGroup id="imageGroup" gap="0" width="100%" height="100%">
<s:Label id="vin1337" width="201" height="104" color="white" fontSize="30"
text="Vehicle ID:1337" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin2567" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:2567" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin9456" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:9456" textAlign="center" verticalAlign="middle"/>
</s:HGroup>
</local:Scroller>
Eventually these Labels will be images, but using labels for proof of concept currently.
Any help would be greatly appreciated, and thank you for reading.
EDIT:
So after implementing an approach with lastIndexInView, I keep getting "TypeError: Error #1009: Cannot access a property or method of a null object reference." on the line "vehicleID.text = Label(lObj).text;". Below is the code involved:
Function:
protected function idSelect_clickHandler(event:MouseEvent):void
{
var hLay:HorizontalLayout = imageGroup.layout as HorizontalLayout;
var lIndex:int = hLay.lastIndexInView;
var lObj:Object = imageGroup.getElementAt(lIndex);
vehicleID.text = Label(lObj).text;
currentState="selectedState";
}
Components:
<local:SnapScroller id="imageViewer" includeIn="startState" left="411" right="411" top="241"
bottom="356" depth="2">
<s:HGroup id="imageGroup" gap="0" width="100%" height="100%">
<s:Label id="vin1337" width="201" height="104" color="white" fontSize="30"
text="Vehicle ID:1337" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin2567" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:2567" textAlign="center" verticalAlign="middle"/>
<s:Label id="vin9456" width="199" height="104" color="white" fontSize="30"
text="Vehicle ID:9456" textAlign="center" verticalAlign="middle"/>
</s:HGroup>
</local:SnapScroller>
<s:Button id="idSelect" includeIn="startState" x="367" y="608" width="290" height="67"
label="Select" click="idSelect_clickHandler(event)" color="#00008F" fontSize="24"/>
<s:Label id="vehicleID" includeIn="selectedState" x="425" y="453" color="#00008F" fontSize="24"
text="Vehicle ID: ____"/>
I think this should answer your question http://blog.flexexamples.com/2009/10/31/determining-how-much-of-an-item-is-visible-in-a-scrolling-vgroup-container-in-flex-4/
basically the layout has firstIndexInView and lastIndexInView property which will tell you which items are visible.
The second issue I was running into was due to the fact I was trying to access the vehicleID component before it had actually been initialized. In other words, I was trying to change an element that wasn't included in the current state, but in fact, was a member of the next state.
Solved it by changing the state first, then assigning the label.
Thanks in advance for anyone who tries to help me out,
I am working with Flex 4 and am trying to get Drag and Drop working between Lists and between a List and non-list component.
I have a custom itemRenderer which has an image and a label.
Graphically everything works great but the data that is attached to the item I am dragging comes up in dragSource as null every time.
Here is my code:
<s:List dataProvider="{userInventory}" itemRenderer="renderers.InventoryItemRenderer" width="198" height="294" y="34" dragEnabled="true" dragMoveEnabled="true" >
<s:layout>
<s:TileLayout />
</s:layout>
</s:List>
</s:BorderContainer>
<!-- /User Inventory -->
<s:BorderContainer dragEnter="fndragEnterHandler(event);"
dragOver="fndragOverHandler(event);"
dragDrop="fndragDropHandler(event);" includeIn="crib" x="243" y="206" width="200" height="200">
<s:Label x="10" y="10" text="This is supposed to be a baby" width="178" height="24"/>
<s:Label x="10" y="39" text="State:" width="42" height="19"/>
<s:Label x="59" y="37" width="80" height="24" id="baby_state"/>
</s:BorderContainer>
private function fndragEnterHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(IUIComponent(event.currentTarget));
}
private function fndragOverHandler(event:DragEvent):void
{
DragManager.showFeedback(DragManager.MOVE);
}
private function dragOverCopyHandler(event:DragEvent):void {
event.preventDefault();
//if (event.dragSource.hasFormat("itemsByIndex"))
DragManager.showFeedback(DragManager.COPY);
}
private function fndragDropHandler(event:DragEvent):void
{
//event.preventDefault();
monsterDebugger.trace(this, event.dragSource, null, "DRAG DROP");
var items:Vector = event.dragSource.dataForFormat("itemsByIndex") as Vector;
var baby:Array = babyObject.source;
monsterDebugger.trace(this, items, null, "DRAG DROP");
items[0].baby_id = baby[0]['Baby']['id'];
var item:Object = new Object();
item.id = items[0].id;
item.baby_id = items[0].baby_id;
item.effect = JSON.decode(items[0].effect);
sendAction(item, "baby", userFbData.id, "use_item_on_baby");
//TextInput(event.currentTarget).text=itemsArray[0].label;
}
And here is my itemRenderer:
<mx:Image x="14" y="19" source="{data.image}" width="50" height="50" smoothBitmapContent="true"/>
<s:Label x="0" y="-1" text="{data.name}" fontFamily="Verdana" fontSize="12" color="#696565" width="80" height="21"/>
The items Vector in the drop handler comes back null every time and I can't quite figure out why.
I thought at first that it was because that particular case is not dragging from List to List, but I tried it that way also and the dragSource.dataForFormat("itemsByIndex") continues to return null.
If anyone can point me in the right direction I would greatly appreciate it, I've been banging my head against this for two days!
you cast to Vector may already nullify the dragsource data. so try with
var items:* = event.dragSource.dataForFormat("itemsByIndex");