I want to make an image clickable/tap , so when the user clicks/taps it a sound can be played.
I,m working on flex SDK version 12 and using s:BitmapImage for images.
s:BitmapImage is a primitive component that doesn't support interactivity.
If you want interactivity, you need to use a component that extends InteractiveObject.
Use s:Image instead.
s:Image is also skinnable, giving you a lot more flexibility. Of course the footprint will be heavier than that of s:BitmapImage, so I would recommend still using s:BitmapImage when you don't require the extra functionalty.
BitmapImage does not support touch events, but you can put it into a Group:
<s:Group click="zoomAvatar(event)">
<s:BitmapImage id="_avatar"
width="{AVATAR_WIDTH}"
height="{AVATAR_HEIGHT}"
scaleMode="letterbox"
source="{male_happy}"
contentLoader="{AVATAR_CACHE}" />
</s:Group>
Related
At my project I've a DataGrid component that holds some information and, at the final column I need to put a floating tool box.
The idea is when the user hit on the icon's tool box, it appears above a floating tool box like a menu holding some icons to perform different actions.
So far, I've solved the column's ItemRenderer to show the dispatcher tool box icon but to show the upper floating tool box is something that I still can't solve. I've tried to make a custom component ( it's a Canvas that holds a HBox that contains the action's icons ) to hold the tool box's icons and showing it by a Menu control (mx.control.Menu) like this:
private function createAndShow():void {
var myCustomMenu:CustomContextMenu = new CustomContextMenu();
var myMenu:Menu = Menu.createMenu(this, myCustomMenu, false);
myMenu.show(btnToolBox.x + 10, btnToolBox.y + 10);
}
But this approach shows a weird container at the left and top of the page instead of show it at the given point i.e. (btnToolBox.x + 10, btnToolBox.y + 10).
So, can anybody help my out with this?
I was searching through the Internet looking for some examples but, I can't found anything that can help me to accomplish this situation so, if anyone knows a way to solve this or at least can point me somehow, any suggestions would be gratefully appreciated.
Finally, after a long research I found an answer. I created a Custom Component that uses a PopUpAnchor and solution looks like this
<s:PopUpAnchor id="hDropDown" x="{btnToolBox.x-options1.width+30}" y="{btnToolBox.y-6}" includeInLayout="false"
showEffect="{showEffects}" hideEffect="{hideEffects}">
<s:BorderContainer minHeight="0" id="options1" mouseDownOutside="{hDropDown.displayPopUp=false}"
cornerRadius="2" borderWeight="1" borderColor="gray" backgroundColor="black">
<s:layout>
<s:HorizontalLayout gap="5" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" />
</s:layout>
</s:BorderContainer>
</s:PopUpAnchor>
I have just simple rectangle button realized as image content and i wanna to show it on screen without any tracking and without using screen anchors.
You can see i have no translation and rotation, but screen is still empty.
<object id="button1">
<title><![CDATA[Button 'images']]></title>
<assets3d>
<model><![CDATA[html/resources/0cde94934f9b4dab0998a3d73b2865ba/0cde94934f9b4dab0998a3d73b2865ba.zip]]></model>
<transform>
<translation>
<x>0.0</x>
<y>0.0</y>
<z>0.0000000000</z>
</translation>
<rotation type="eulerdeg">
<x>0.0000000000</x>
<y>0.0000000000</y>
<z>0.0000000000</z>
</rotation>
<scale>
<x>0.0</x>
<y>0.0</y>
<z>0.0</z>
</scale>
</transform>
<properties>
<coordinatesystemid>0</coordinatesystemid>
<screenanchor flags="4">0</screenanchor>
</properties>
</assets3d>
<viewparameters/>
</object>
You can use Dummy-Tracking: http://helpdesk.metaio.com/questions/7548/explanation-on-dummy-tracking
In general the best place to ask questions about AREL or the metaio SDK is http://helpdesk.metaio.com
There you should get an answer quickly.
I think that the problem is here:
<scale>
<x>0.0</x>
<y>0.0</y>
<z>0.0</z>
</scale>
The 0.0 is not a neutral scaling value.Your scaling transformation results in an object with no dimension. As it is shown on http://www.advancedmetaio.com/explaining-the-arel-xml-structure-part-2-transformations/, if you don't want to apply any scaling transformation your scaling values should be (1, 1, 1) :
<scale>
<x>1.0</x>
<y>1.0</y>
<z>1.0</z>
</scale>
I currently have the following setup (abstracted for simplicity):
<s:TabBar id="extentTypeTabBar" dataProvider="{vs}"/>
<mx:ViewStack id="vs">
<s:NavigatorContent id="firstTab" label="Action">
<!--content-->
</s:NavigatorContent>
<s:NavigatorContent id="secondTab" label="Adventure">
<!--content-->
</s:NavigatorContent>
<s:NavigatorContent id="thirdTab" label="Favorites">
<!--content-->
</s:NavigatorContent>
</mx:ViewStack>
I want thirdTab to have an image rather than a label (i.e. an image of a star or heart, instead of the word 'Favorites'). I've tried using the 'icon' property on the NavigatorContent, to no avail.
I believe to achieve this I'm going to have to create a custom skin with logic behind it for the Spark TabBar since I only want to uniquely skin one tab, not all tabs. Does anyone have an example of how to accomplish this?
Thanks!
jp
This should work just fine if you use the icon property of the NavigatorContent object. The icon property is typed as Class, so you have to provide it with the class that represents an embedded image or a FXG object.
Here is an example of both methods:
<s:NavigatorContent icon="#Embed('favorite_icon.png')" /> <!-- embedded icon -->
<s:NavigatorContent icon="{FxgAsset}" /> <!-- fxg asset -->
For convenience, I put the icon in the "default package" of my project, just change the path to the icon to match the location of your icon. The FXG asset I'm using in the second example can be a located anywhere in your project. FXG assets are classes by nature, so you don't need to specify a path (your IDE should find it like any other class).
Note there are a few other ways to embed images, all of them should work ... the example I've shown here is the simplest :)
I have a simple list with a tileLayout of images. From the examples I've looked at it looks like i'm supposed to use the DefaultComplexItemRenderer. It works, and my array of images loads fine, but each item has a solid background. I need the background behind each image to have an alpha of 0. How Can I set that?
In the past i've just made a custom itemRenderer, and overrided the drawBackground function on itemRenderers, but DefaultComplexRenderer doesn't have a drawBackground function to override.
Is there another simple solution in the flex code? OR it would be awesome if someone could show me how to make a custom DefaultComplexRenderer.
NOTE:
This is a Flex MOBILE project. I know some itemRenderer's aren't friendly with mobile. Adobe says to "always do item renderers in AS3 rather than mxml" so, keep that in mind.
Thanks!
Here's my code:
<fx:Declarations>
<s:ArrayList id="arrList">
<s:BitmapImage source="assets/images/one.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
<s:BitmapImage source="assets/images/two.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
<s:BitmapImage source="assets/images/three.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
<s:BitmapImage source="assets/images/four.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
</s:ArrayList>
</fx:Declarations>
<s:List id="extrasList_list" width="100%" height="100%"
dataProvider="{arrList}"
itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
horizontalCenter="0"
verticalCenter="0">
<s:layout>
<s:TileLayout requestedColumnCount="-1"
requestedRowCount="-1"
horizontalGap="10"
verticalGap="10"
orientation="rows"
columnAlign="justifyUsingWidth"
/>
</s:layout>
</s:List>
Things I've tried:
this in my main css file...
s|DefaultComplexItemRenderer {
contentBackgroundAlpha:0;
}
but i get this warning, and it doesn't work...
-Cannot resolve namespace qualified type 'DefaultComplexItemRenderer' in CSS selector 'DefaultComplexItemRenderer'
[Edit]
The contentBackgroundAlpha and contentBackgroundColor styles for a Flex List are somewhat misleading! You generally want to style the item renderers. In the context of a list, these styles only affect a tiny bit of "chrome" that can appear around the list. See below for details on styling the renderers.
If you just want to show an image, the IconItemRenderer is the way to go. It extends LabelItemRenderer so it's optimized for mobile and also has two text fields as well.
Flex List components recycle item renderers to be efficient, and only create as many renderers as needed to display what is currently visible. To do this, the list populates the renderer's data property. So you want to configure your item renderer using this data property.
An efficient way to do that is to override the setter function for data. Create a new Actionscript class that extends IconItemRenderer add this to it:
override public function set data(value:Object):void
{
super.data = value;
// IconItemRenderer already has a BitmapImage component, it's property name is iconDisplay
// your ArrayList should therefore only contain Strings representing the image sources
// note how I've changed your ArrayList in the declarations tag below
iconDisplay.source = data.imageSource;
}
You'll likely want to configure that iconDisplay BitmapImage to look how you want it. The method above may get called frequently, so you can put code that only needs to happen once somewhere else... by overriding a Flex component lifecycle method like createChildren():
override protected function createChildren():void
{
super.createChildren();
iconDisplay.scaleMode="letterbox";
iconDisplay.smooth=true;
}
Now tell the List to use your renderer w/syntax like this:
<s:List itemRenderer="com.yourdomain.or.whatever.MyIconItemRendererClass" />
Styling the renderer:
<s:List alternatingItemColors="[0xFFFFFF, 0xFFFFFF]" selectionColor="#FF0000" />
Another way is to override the mobile item renderer's drawBackground() and/or drawBorder() protected methods and draw your own stuff w/the graphics api (or nothing at all).
Supplying the data:
Instead of giving the list an array of BitmapImage components, you give it an array of objects that contain your data. It's better to use strongly typed objects, but this works too:
<fx:Declarations>
<s:ArrayList id="arrList">
<fx:Object imageSource="assets/images/one.png" />
<fx:Object imageSource="assets/images/two.png" />
<fx:Object imageSource="assets/images/three.png" />
</s:ArrayList>
</fx:Declarations>
I like writing renderers in Actionscript... But there is also an MXML example in the link to IconItemRenderer docs at the top. It also shows how you to set the values of the two text areas in this renderer (with labelField and messageField). You can also specify a function that returns the label/message/icon values (with labelFunction, messageFunction, and iconFunction).
Looks like you should be able to use setStyle('contentBackgroundAlpha', 0); on your DefaultComplexItemRenderer.
Not 100% this is what you're looking for, not really familiar with this class. Any reason you're using this over extending LabelItemRenderer?
edit
I believe you may want to extend IconItemRenderer
Check out this tutorial
http://www.youtube.com/watch?v=EOpsDZaQrOI
Thanks for trying to help guys, but I found the quickest/simple solution to be be just as simple as copying the DefaultComplexItemRender from the SDK into a custom one, and then changing this one line of code
autoDrawBackground="false"
It's simple and it worked.
I've looked through all IBM doc and Adobe livedocs, My labels for my columns which are loading dynamically are not centered properly under the columns. Here is the component code. The labels are off center to the left, and some overlap the one left of where it should be. I tried adding styles to several different areas but couldn't get it:
<ilog:ColumnChart3D id="columnChart" dataProvider="{chartData}" showDataTips="true" elevationAngle="5" projectionType="oblique" width="90%" height="100%"
rotationAngle="2" lightLatitude="0" lightLongitude="0"
ambientLight="0.1"
totalDepth="2" zoom="1" >
<ilog:horizontalAxis>
<mx:CategoryAxis dataProvider="{chartData}"
categoryField="{chartCatField}"/>
</ilog:horizontalAxis>
</ilog:ColumnChart3D>
<mx:Legend dataProvider="{columnChart}" right="0" bottom="0" />
</s:Panel>
The 3D charts axis renderer labels layout is not as smart as the one of the 2D charts due to the layout in a 3D space that is not as easy.
You can try to labelRotation property on the AxisRenderer3D to rotate the labels so that they don't collapse. Or reduce their size using the fontSize property on the same object.
<ilog:ColumnChart3D ...>
...
<ilog:horizontalAxisRenderer>
<ilog:AxisRenderer3D labelRotation="30" fontSize="8"/>
</ilog:horizontalAxisRenderer>
</ilog:ColumnChart3D>
You can also remove some labels using the canDropLabels property is needed.
FYI IBM ILOG Elixir does have specific forum here where you can find information on the product.