I am trying to mirror the camera display in my mx:VideoDisplay object in Flex 3.6. That is, I want the camera image to be flipped horizontally.
This is my MXML file:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" applicationComplete="init()"
xmlns:ns1="components.*"
xmlns:ns2="*"
xmlns:fl="flash.media.*"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:gauge="components.gauge.*"
>
<mx:Script source="script.as" />
<mx:Style source="style.css" />
<mx:Canvas label="recorder" width="100%" height="100%" verticalScrollPolicy="off"
horizontalScrollPolicy="off" id="canvas2">
<mx:VideoDisplay id="myWebcam" scaleX="1" left="0" top="0" bottom="36" right="0"/>
<mx:Image id="mask2" source="#Embed(source='assets/mask.png')"
left="190" top="120" width="270"/>
<ns1:VideoContainer right="0" bottom="0" />
</mx:Application>
I have tried to use myWebcam.scaleX="-1" and adding myWebcam.x = myWebcam.width among many further combinations without success.
So, how am I supposed to flip the image?
Thanks
You can change:
<mx:VideoDisplay id="myWebcam" scaleX="1" left="0" top="0" bottom="36" right="0"/>
to:
<mx:VideoDisplay id="myWebcam" scaleX="-1" left="0" top="0" bottom="36" right="0" x="{myWebcam.width + myWebcam.x}"/>
I also found that myWebcam.scaleX = -1 is not ok, maybe it is a bug.
Related
I've been trying to do a couple of things and I couldn't.
I've been trying to skin a mx:FileSystemTree, to show de data horizontally, I think it's almost impossible, anyone has an idea how to make it?
The second thing I'm trying is to add an itemRenderer to the FileSystemTree wanting to add a pair of buttons(add and delete, which I already had working). Everything I tried so far is giving the same error:
TypeError: Error #1034: Type Coercion failed: cannot convert SKins::FileSystemItemRenderer#971c479 to mx.controls.listClasses.IListItemRenderer.
<s:WindowedApplication 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="750" height="500">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:VGroup width="607" height="134">
<s:HGroup width="607" height="68">
<s:Button label="Button"/>
<s:Button label="Button"/>
</s:HGroup>
<s:TextInput width="600"/>
</s:VGroup>
<mx:HDividedBox>
<mx:FileSystemTree id="tree" width="615" height="480" allowMultipleSelection="true"
borderVisible="false" defaultLeafIcon="#Embed('../assets/folder.png')"
directory="{new File(raiz)}" dragEnabled="true" dropEnabled="true"
folderClosedIcon="#Embed('../assets/folder.png')"
folderOpenIcon="#Embed('../assets/openFolder.png')" fontSize="45"
fontStyle="normal" fontWeight="normal" iconFunction="selectIcon"
itemRenderer="SKins.FileSystemItemRenderer" showIcons="true"
textAlign="left" textDecoration="none" verticalAlign="middle"/>
</mx:HDividedBox>
</s:WindowedApplication>
That's the code which is going to show the tree.
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Label text="{data}"/>
</s:ItemRenderer>
I have tried with a simple renderer receiving the error #1034.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/ -->
<s:MXTreeItemRenderer name="IListItemRenderer"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:HGroup id="hGr" left="4" right="4" top="4" bottom="4">
<s:RichText id="lbl" text="({itemIndex}) {data.label}" width="100%" />
<mx:Image id="img" source="{data.img}" toolTip="{data.img}" width="100" height="67" />
</s:HGroup>
</s:MXTreeItemRenderer>
I also have tried another renderer, but with the same results.
Not sure about showing data horizontally, but your 2nd point about itemrenderer is working fine for me. Here is the working code
<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:HGroup id="hGr" left="4" right="4" top="4" bottom="4">
<s:Rect id="indentationSpacer"
width="{treeListData.indent}" height="22"
alpha="0">
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Group id="disclosureGroup">
<s:BitmapImage source="{treeListData.disclosureIcon}"
width="16" height="16"
visible="{treeListData.hasChildren}" />
</s:Group>
<s:BitmapImage source="{treeListData.icon}"
width="16" height="16"/>
<s:RichText id="lbl" text="{data.nativePath}" toolTip="{data.nativePath}" width="100%" maxDisplayedLines="1" />
<s:Button label="Button"/>
<s:Button label="Button"/>
</s:HGroup>
Using the Rect primitive you can define a fill using bitmap data like so.
<!-- Draw rectangle that is filled with a repeating bitmap. -->
<s:Rect height="100" width="200">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<s:fill>
<s:BitmapFill
source="#Embed('../assets/AirIcon12x12.gif')"
fillMode="repeat"/>
</s:fill>
</s:Rect>
That looks like this:
Is there a way to set define a bitmap fill for the border stroke (and the center is transparent)?
Answer based on suggestions. Since I was trying to create dashed border there are a few additions:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600"
mouseMove="application1_mouseMoveHandler(event)"
click="application1_clickHandler(event)">
<fx:Script>
<![CDATA[
protected function application1_mouseMoveHandler(event:MouseEvent):void
{
if (resize) {
mainGroupRect.width = event.stageX - mainGroup.x;
mainGroupRect.height= event.stageY - mainGroup.y;
}
}
protected function application1_clickHandler(event:MouseEvent):void
{
resize = !resize;
application1_mouseMoveHandler(event);
}
public var resize:Boolean;
]]>
</fx:Script>
<s:Button id="button" label="hello" width="100%" height="100%" visible="true" />
<s:Group id="mainGroup" verticalCenter="0" horizontalCenter="0" maskType="alpha" mask="{rectMask.displayObject}">
<s:Rect id="mainGroupRect" height="100" width="200" >
<s:fill>
<s:BitmapFill source="#Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
<s:Rect id="rectMask" top="0" left="0" right="1" bottom="1"
alwaysCreateDisplayObject="true" alpha=".9999999">
<s:stroke>
<s:SolidColorStroke color="0xFF0000" pixelHinting="true"/>
</s:stroke>
</s:Rect>
<s:Rect id="rightEdge" height="100%" width="1" right="1" bottom="1">
<s:fill>
<s:BitmapFill source="#Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
<s:Rect id="bottomEdge" height="1" width="100%" right="1" bottom="1">
<s:fill>
<s:BitmapFill source="#Embed('checker.png')"
fillMode="repeat" />
</s:fill>
</s:Rect>
</s:Group>
</s:Application>
The fill image is shown below (it appears as a dot. It's a 4x4 image png with transparency on half the image. So additional fills are used on those.
This creates a dashed border. Since there are transparent pixels it does not fill in the image on the right or bottom sides at times. So there are two extra fills that run along the right and bottom edges.
In the example above, click on the stage and you can resize the fill.
You can also wrap the rectMask in a group and then you can just set the mask="{rectMask}"
I have a component that I'm trying to position and it works fine when the parent is not scaled but when it is scaled the positioning is off.
How do I get the correct position?
I will try to provide some example code since it is part of a larger application but it's basically the following:
<Group id="MainGroup" x="10" y="10">
<Group id="SubGroup" x="10 y="10">
<Button id="original" x="10" y="10">
</Group>
</Group>
<Button id="clone">
Then I use the code from this question or similar code to find out how to position the second button that is outside of the scaled containers.
It looks like the code I'm using works so there must be something else going on. Here is updated test code:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" >
<fx:Script>
<![CDATA[
import com.flexcapacitor.utils.DisplayObjectUtils;
protected function button1_clickHandler(event:MouseEvent):void
{
var point:Point = DisplayObjectUtils.getDistanceBetweenDisplayObjects(originalButton, cloneButton);
cloneButton.x = point.x;
cloneButton.y = point.y;
}
]]>
</fx:Script>
<s:Group x="10" y="10" scaleX="2" scaleY="2">
<s:Group x="10" y="10">
<s:Button id="originalButton" x="10" y="10" label="Button"/>
</s:Group>
</s:Group>
<s:Button id="cloneButton" label="position me" click="button1_clickHandler(event)"/>
</s:WindowedApplication>
I'm trying to create a Panel skin (Spark) with a background fill color I can pass as a parameter.
(See in bold:)
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomPanelSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
blendMode="normal">
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" stateGroups="withControls" />
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>
<fx:Metadata>
[HostComponent("spark.components.Panel")]
</fx:Metadata>
<s:Group left="0" right="0" top="0" bottom="0">
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="12" radiusY="12">
<s:fill>
<s:SolidColor color="#184c81" />
</s:fill>
</s:Rect>
<s:Group id="contents" left="1" right="1" top="1" bottom="1">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
</s:Group>
</s:Group>
</s:Group>
</s:SparkSkin>
From what I read I should create a subclass, but there is not much material on the subject.
I would later on want to use this skin in many Panel controls I have in my application.
Base Panel skin has background color implementation using css styles. You can set it using action script:
panel.setStyle("backgroundColor", 0x184c81);
Also you can control skin components when you have a reference to it in the host component.
Read Implementing the partAdded() and partRemoved() methods for skinnable components for Spark components
This is simple.Create a panel skin and name it something as "panelSkin.mxml".In the .as file use the following statement
newPanelBlock.setStyle("skinClass",com.foldername.panelSkin);
newPanelBlock.setStyle("backgroundColor", 0x184c81);
I have view stack in a app like so:
<mx:ViewStack id="viewStack" left="0" right="0" top="0" bottom="0">
<views:LoginView top="0" bottom="0" right="0" left="0" id="loginView"/>
<views:MainHomeView top="0" bottom="0" right="0" left="0" id="childSelectionView"/>
<views:MainHomeView top="0" bottom="0" right="0" left="0" id="mainEvalView"/>
</mx:ViewStack>
When an event is fired, I call viewStack.selectedChild = childSelectionView
My question is how do I code a listener for the NavigatorConent being selected?
Here is what I try to do:
<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:local="*" xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Script>
<![CDATA[
private function init():void
{
// Do something here
advanceButton.visablitiy = false;
}
]]>
</fx:Script>
<s:VGroup>
<s:HGroup>
<s:Button label="Advance" id="advanceButton" />
</s:HGroup>
</s:VGroup>
I know that all the NavigatorConent's dispatch a creationComplete event on the application start, but their childrent aren't created yet. How did I respond to the on selectedChild change to self?
Sometimes it pays to poke around a bit, literally the question right before yours is exactly in the same problem domain. Use the FlexEvent.CONTENT_CREATION_COMPLETE event.
See Flex Error #1009: Cannot access a property or method of a null object reference
<fx:Script><![CDATA[
import mx.controls.Alert;
import mx.events.IndexChangedEvent;
protected function viewStack_childIndexChangeHandler(event:IndexChangedEvent):void {
Alert.show('Selected Child: ' + viewStack.selectedChild.label);
}
]]></fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:ButtonBar dataProvider="{viewStack}"/>
<mx:ViewStack id="viewStack" change="viewStack_childIndexChangeHandler(event)">
<s:NavigatorContent id="navigator1" label="Navigator 1">
<s:Group>
<s:Button label="N1"/>
</s:Group>
</s:NavigatorContent>
<s:NavigatorContent id="navigator2" label="Navigator 2">
<s:Group>
<s:Button label="N2"/>
</s:Group>
</s:NavigatorContent>
</mx:ViewStack>