Displaying a video in Flex using the NetConnection, NetStream, and Video classes

The following example shows how you can display a FLV file in a Flex application using the NetConnection, NetStream, and Video classes, as well as how to use the onMetaData and onCuePoint event handlers to handle video meta data and cue points. Full code after the jump. View MXML <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.utils.ObjectUtil; private var nc:NetConnection; private var ns:NetStream; private var video:Video; private var meta:Object; private function init():void { var nsClient:Object = {}; nsClient.onMetaData = ns_onMetaData; nsClient.onCuePoint = ns_onCuePoint; nc = new NetConnection(); nc.connect(null); ns = new NetStream(nc); ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv"); ns.client = nsClient; video = new Video(); video.attachNetStream(ns); uic.addChild(video); } private function ns_onMetaData(item:Object):void { trace("meta"); meta = item; // Resize Video object to same size as meta data. video.width = item.width; video.height = item.height; // Resize UIComponent to same size as Video object. uic.width = video.width; uic.height = video.height; panel.title = "framerate: " + item.framerate; panel.visible = true; trace(ObjectUtil.toString(item)); } private function ns_onCuePoint(item:Object):void { trace("cue"); } ]]> </mx:Script> <mx:Panel id="panel" visible="false"> <mx:UIComponent id="uic" /> <mx:ControlBar> <mx:Button label="Play/Pause" click="ns.togglePause();" /> <mx:Button label="Rewind" click="ns.seek(0); ns.pause();" /> </mx:ControlBar> </mx:Panel> </mx:Application>

Embedding and animating fonts in a Flex application

In this example we embed a font (the awesome “Base 02″ PC TrueType font (TTF) from http://www.stereo-type.net/), animate it using the Zoom effect and the Elastic.easeOut easing method. We also set the rotation and alpha properties (which you can’t do with non-embedded fonts), and we set the fontAntiAliasType to “advanced” to give the font a cleaner look. Finally we use the effectEnd event to loop the animation.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ /* Import all the easing classes so its easier to switch between them on the fly without tweaking import statements. */ import mx.effects.easing.*; ]]> </mx:Script> <mx:Style> @font-face { src: url('assets/base02.ttf'); font-family: Base02; } .MyEmbeddedFont { font-family: Base02; font-size: 16px; } </mx:Style> <!-- Set zoom effect for 2.5 seconds (2500 milliseconds) and use the Elastic.easeOut easing method. --> <mx:Zoom id="zoom" duration="2500" easingFunction="Elastic.easeOut" target="{embeddedText}" /> <!-- Use advanced font anti-aliasing for the embedded font, set the rotation to 5 degrees, alpha to 80% and loop the animation. --> <mx:Text id="embeddedText" text="The quick brown fox jumped over the lazy dog." styleName="MyEmbeddedFont" rotation="5" alpha="0.8" fontAntiAliasType="advanced" creationComplete="zoom.play();" effectEnd="zoom.play()" /> </mx:Application>

How to remove toolbar and restrict the size of browser window in Flex : There are so many methods of doing this : <?xml version=”1.0″ encoding=”utf-8″?> <mx:Application xmlns:mx=” http://www.adobe.com/2006/mxml ” layout=”absolute”> Normal Way: <mx:Button click=”open()” label=”open”/> Through Javascript: <mx:Button click=”openJS()” label=”openJS” x=”59″/> Through External Interface: <mx:Button click=”openEI()” label=”openEI” x=”134″/> Through FSCommand: <mx:Button click=”openFS()” label=”openFS” x=”218″/> <mx:Script> <![CDATA[ private var str:String=” http://www.google.com “ private function openJS():void{ var jscommand:String = “window.open('”+str+”‘,'win','height=200,width=300,toolbar=no,scrollbars=no');”; var url:URLRequest = new URLRequest(”javascript:” + jscommand + ” void(0);”); navigateToURL(url, “_self”); } private function open():void{ var url:URLRequest = new URLRequest(str); navigateToURL(url, “_blank”); } private function openEI():void{ if (ExternalInterface.available) { ExternalInterface.call(”window.open”, str, “win”, “height=200,width=300,toolbar=no,scrollbars=no”); } } private function openFS():void{ fscommand(”openWindow”, str+”winheight=200,width=300,toolbar=no,scrollbars=yes”); } ]]> </mx:Script> </mx:Application> Since External Interface is not supported for all browsers, its recommended that you first check to see if it is supported. If not, you might want to consider an alternate approach.

Flex Using Transitions and Effect Filters Source Code

Flex Effect Filters Sample Source Code:
Create a file:
TransitionsDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.effects.easing.*; private function filterWiderThan100(propChanges:Array, instanceTarget:Object):Boolean { var n:int = propChanges.length; for (var i:int=0; i < n; i++) { if (propChanges[i].target == instanceTarget) { if (propChanges[i].end["width"] != undefined) { return (propChanges[i].end.width > 100); } } } return false; } private function filterOthers(propChanges:Array, instanceTarget:Object):Boolean { return !filterWiderThan100(propChanges, instanceTarget); } ]]> </mx:Script> <mx:states> <mx:State name="One"> <mx:SetProperty target="{cd828_panel}" name="x" value="110" /> <mx:SetProperty target="{cd828_panel}" name="y" value="0" /> <mx:SetProperty target="{cd828_panel}" name="width" value="500" /> <mx:SetProperty target="{cd828_panel}" name="height" value="210" /> <mx:SetProperty target="{talby_panel}" name="x" value="0" /> <mx:SetProperty target="{talby_panel}" name="y" value="0" /> <mx:SetProperty target="{talby_panel}" name="width" value="100" /> <mx:SetProperty target="{talby_panel}" name="height" value="100" /> <mx:SetProperty target="{sony_panel}" name="x" value="0" /> <mx:SetProperty target="{sony_panel}" name="y" value="110" /> <mx:SetProperty target="{sony_panel}" name="width" value="100" /> <mx:SetProperty target="{sony_panel}" name="height" value="100" /> </mx:State> <mx:State name="Two"> <mx:SetProperty target="{talby_panel}" name="x" value="110" /> <mx:SetProperty target="{talby_panel}" name="y" value="0" /> <mx:SetProperty target="{talby_panel}" name="width" value="500" /> <mx:SetProperty target="{talby_panel}" name="height" value="210" /> <mx:SetProperty target="{sony_panel}" name="x" value="0" /> <mx:SetProperty target="{sony_panel}" name="y" value="110" /> <mx:SetProperty target="{sony_panel}" name="width" value="100" /> <mx:SetProperty target="{sony_panel}" name="height" value="100" /> </mx:State> </mx:states> <mx:transitions> <mx:Transition fromState="*" toState="*"> <mx:Sequence id="t1" targets="{[cd828_panel,talby_panel,sony_panel]}"> <mx:Parallel> <!-- The first Move/Resize is applied to objects being resized larger than 100 pixels --> <mx:Parallel> <mx:customFilter> <mx:EffectTargetFilter filterFunction="filterWiderThan100" filterProperties="['width']" /> </mx:customFilter> <mx:Move easingFunction="Back.easeIn" /> <mx:Resize easingFunction="Back.easeIn" /> </mx:Parallel> <!-- The second Move/Resize is applied to all other targets --> <mx:Parallel> <mx:customFilter> <mx:EffectTargetFilter filterFunction="filterOthers" filterProperties="['width']" /> </mx:customFilter> <mx:Move /> <mx:Resize /> </mx:Parallel> </mx:Parallel> </mx:Sequence> </mx:Transition> </mx:transitions> <mx:Canvas id="pm" width="100%" height="100%"> <mx:Panel id="cd828_panel" title="CD 828" x="0" y="0" width="100" height="100" click="currentState='One'" > <mx:Image width="100%" horizontalAlign="center" height="100%" source="../assets/products/CD_828.png" /> </mx:Panel> <mx:Panel id="talby_panel" title="Talby" x="0" y="110" width="100" height="100" click="currentState='Two'" > <mx:Image width="100%" height="100%" horizontalAlign="center" source="../assets/products/Talby.png" /> </mx:Panel> <mx:Panel id="sony_panel" title="Sony P900" x="110" y="0" width="500" height="210" click="currentState=''" > <mx:Image width="100%" height="100%" horizontalAlign="center" source="../assets/products/Sony_p900.png" /> </mx:Panel> </mx:Canvas> </mx:Application>

Flex Composite Effect Source Code

Flex Custom Effects Defined Programmatically Sample Source Code:
Create a file:
CompositeDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"> <mx:Script> import mx.effects.*; public function emphasize():void { var p:Parallel = new Parallel(); var m:Move = new Move(img); m.xTo = canvas.width/2 - 50; m.yTo = canvas.height/2 - 100; var r:Resize = new Resize(img); r.widthTo = 100; r.heightTo = 200; p.addChild(m); p.addChild(r); p.play(); } public function deemphasize():void { var p:Parallel = new Parallel(); var m:Move = new Move(img); m.xTo = 20; m.yTo = 20; var r:Resize = new Resize(img); r.widthTo = 30; r.heightTo = 60; p.addChild(m); p.addChild(r); p.play(); } </mx:Script> <mx:Panel title="Parallel Effect Demo [Programmatic Approach]" width="100%" height="100%"> <mx:Canvas id="canvas" width="100%" height="100%"> <mx:Image id="img" x="20" y="20" width="30" height="60" source="@Embed('../assets/products/Nokia_6630.png')"/> </mx:Canvas> <mx:ControlBar> <mx:Button label="Emphasize" click="emphasize()"/> <mx:Button label="Deemphasize" click="deemphasize()"/> </mx:ControlBar> </mx:Panel> </mx:Application>

Flex Simple Effect Source Code

Flex Custom Effects Defined Programmatically Sample Source Code:
Create a file:

simpleDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"> <mx:Script> import mx.effects.*; private function moveImage(xTo:int, yTo:int):void { var m:Move = new Move(img); m.xTo = xTo; m.yTo = yTo; m.play(); } </mx:Script> <mx:Panel title="moveEffect Demo [Programmatic Approach]" width="100%" height="100%" horizontalAlign="center"> <mx:Label text="Click anywhere on the canvas to move the phone to that position"/> <mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage(mouseX - 40, mouseY - 80)"> <mx:Image id="img" source="@Embed('../assets/products/Nokia_6630.png')"/> </mx:Canvas> </mx:Panel> </mx:Application>

Flex Parallel Effect Source Code

Flex Custom Effects Defined Declaratively Sample Source Code:
Create a file:
ParallelEffectsDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"> <mx:Parallel id="emphasize" target="{img}"> <mx:Move xTo="{canvas.width/2 - 50}" yTo="{canvas.height/2 - 100}"/> <mx:Resize widthTo="100" heightTo="200"/> </mx:Parallel> <mx:Parallel id="deemphasize" target="{img}"> <mx:Move xTo="20" yTo="20"/> <mx:Resize widthTo="30" heightTo="60"/> </mx:Parallel> <mx:Panel title="Parallel Effect Demo" width="100%" height="100%"> <mx:Canvas id="canvas" width="100%" height="100%"> <mx:Image id="img" x="20" y="20" width="30" height="60" source="@Embed('../assets/products/Nokia_6630.png')"/> </mx:Canvas> <mx:ControlBar> <mx:Button label="Emphasize" click="emphasize.play()"/> <mx:Button label="Deemphasize" click="deemphasize.play()"/> </mx:ControlBar> </mx:Panel> </mx:Application>

Flex Sequence Effect Source Code

Flex Custom Effects Defined Declaratively Sample Source Code:
Create a file:
SequenceEffectsDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"> <mx:Sequence id="jump" target="{img}"> <mx:Move yBy="-50"/> <mx:Move yBy="50"/> </mx:Sequence> <mx:Panel title="Sequence Effect Demo" width="100%" height="100%"> <mx:Canvas id="canvas" width="100%" height="100%"> <mx:Image id="img" x="{canvas.width/2 - img.width/2}" y="{canvas.height/2 - img.height/2}" source="@Embed('../assets/products/Nokia_6630.png')"/> </mx:Canvas> <mx:ControlBar> <mx:Button label="Jump" click="jump.play()"/> </mx:ControlBar> </mx:Panel> </mx:Application>

Flex Rotate Effect Source Code

Flex Custom Effects Defined Declaratively Sample Source Code:

Create a file:
RotateEffectsDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"> <mx:Script> [Bindable] public var angle:int=0; private function rotateImage() : void { angle += 45; rotate.play(); } </mx:Script> <mx:Rotate id="rotate" angleFrom="{angle-45}" angleTo="{angle}" target="{img}"/> <mx:Panel title="Rotate Effect Demo" width="100%" height="100%" horizontalAlign="center"> <mx:Canvas id="canvas" width="100%" height="100%" verticalScrollPolicy="off"> <mx:Image id="img" x="{canvas.width/2 - img.width/2}" y="{canvas.height/2 - img.height/2}" source="@Embed('../assets/products/Nokia_6630.png')"/> </mx:Canvas> <mx:ControlBar> <mx:Button label="Rotate" click="rotateImage()"/> </mx:ControlBar> </mx:Panel> </mx:Application>

Flex Zoom Effect Source Code

Flex Custom Effects Defined Declaratively Sample Source Code:

Create a file:
ZoomEffectsDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"> <mx:Zoom id="zoomIn" zoomWidthTo="1" zoomHeightTo="1" /> <mx:Zoom id="zoomOut" zoomWidthTo=".5" zoomHeightTo=".5" /> <mx:Panel title="Zoom Demo" width="100%" height="100%" horizontalAlign="center"> <mx:Label text="Mouse over the image to enlarge it"/> <mx:Canvas id="canvas" width="100%" height="100%"> <mx:Image id="img" x="{canvas.width/2 - img.width/2}" y="{canvas.height/2 - img.height/2}" source="@Embed('../assets/products/Nokia_6630.png')" scaleX=".5" scaleY=".5" rollOverEffect="zoomIn" rollOutEffect="zoomOut"/> </mx:Canvas> </mx:Panel> </mx:Application>

Flex move Effect Source Code

Flex Effects Sample Source Code:

Create a file:
MoveEffectsDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"> <mx:Panel title="moveEffect Demo" width="100%" height="100%" horizontalAlign="center"> <mx:Label text="Click anywhere on the canvas to move the phone to that position"/> <mx:Canvas id="canvas" width="100%" height="100%" mouseDown="img.move(mouseX - 40, mouseY - 80)"> <mx:Image id="img" source="@Embed('../assets/products/Nokia_6630.png')" moveEffect="Move"/> </mx:Canvas> </mx:Panel> </mx:Application>

Flex Event Triggered Effects Source Code

Flex Effects Sample Source Code: /span>

Create a file:

ShowEffectsDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"> <mx:HBox horizontalGap="50"> <mx:VBox horizontalAlign="center"> <mx:Image source="@Embed('../assets/products/Nokia_6630.png')" showEffect="Fade" hideEffect="Fade" visible="{cb1.selected}"/> <mx:CheckBox id="cb1" label="visible" selected="true"/> </mx:VBox> <mx:VBox horizontalAlign="center"> <mx:Image source="@Embed('../assets/products/Nokia_6630.png')" showEffect="WipeRight" hideEffect="WipeLeft" visible="{cb2.selected}"/> <mx:CheckBox id="cb2" label="visible" selected="true"/> </mx:VBox> </mx:HBox> </mx:Application>

FDS2: default refreshFill() behaviour

To test this I used the CRM sample that ships with FDS.

Problem: An arraycollection that had previously been fill()'ed using query parameters would not update if CreateItem() was called. If no query parameters were used it worked fine. UpdateItem() and DeleteItem() worked fine as well.

Solution: If you DO NOT implement your own refreshFill() in your custom Assembler class, then the default behavior of refreshFill() might be the cause of the problem.

The refreshFill() method proactively queries on whether or not data needs to be pushed out to clients. It checks to see if the newly created record would fall within the query parameters of the LAST Fill() requested.

Example: Let's say you retrieve all Roles for System ID 12 - this creates a unique fill situation for your flex app/session. DataService1.fill(roles, "12")
Let's say Jim, another user, is currently viewing all Roles for System ID 8 - he too has his own unique fill situation. DataService1.fill(roles,"8")

Now you go and add a new Role for System ID 8. Here's what happens:
FDS recognizes the fact that you are not currently looking at a list that would include this record... so you get no update (DO_NOT_EXECUTE_FILL)
FDS also 'knows' that Jim is looking at a list that should be updated, so it pushes out an update to him, EXECUTE_FILL

This keeps updates pushed out to a minimum I guess.

To test: in CRM project modify the CompanyAssembler by commenting out the RefreshFill() method completely. Run CompanyApp.mxml in debug mode with a breakpoint in companyResultHandler(). Change industry to filter by health care, add a new record with a different industry. When breakpoint kicks in, check the companies arraycollection... you should NOT see your recently added company.

Sizing Blues - Using Canvas to keep it under Control

I find a spend a great deal of time trying to get all the components of my application to play nice with one another. But every now and then, I'll get that nasty vertical or horizontal scroll bar on my application, when I'm quite sure that I've been using percentages for widths and heights throughout.

So then the search begins, from the top layer, the application, I start to give different background colors to different containers, and each time I color a container I assign it a fixed size. Step by step, layer by layer, I will eventually find the component that isn't playing along. Most of the time it's either some form controls where the sum of their sizes is causing the percentage amounts to be ignored, or it's an image that's too big.

One of the more common pitfalls is adding a form container to an HBox or VBox. In this case, if the controls are too wide or too tall, the form will simply push out the rest of the containers in the app. Of course I could constrain the size of the form or the container of the form, however then I risk losing the cool auto-grow features of flex. Yet if the screen size is too small, I'd like the scrollbars to be restricted to the container closest to the source of the error.

What seems to work best, I find, is wrapping controls that risk causing this distortion inside a Canvas control. So, in other words, instead of:
...
I would suggest using:
...
The Canvas will popup scroll bars and contain the distortion, but will also autogrow with the app.

You can find an example of a little app I wrote that demonstrates this concept here. Right click on the app to get the source code.

Getting Effects to play when transitioning back

Simple little task. Click a button [State:Login], have it fade out, change viewstate, have new panel fade in [State:Register]. Works like a charm. Now, click button on panel, have panel fade out, change viewstate, have button fade back in. Also do the same thing with the WipeUp and WipeDown effect.

Problem. Transitions to the Register state work fine, but transitions back to the original Login State don't. The panel just disappears, no fade, and then the button [State:Login] fades back in nicely. It appears that the controls in the Register State are removed by default before any effects can play visually on them. Using a Sequence and setting the duration of the Panel fade to 10 seconds proves that the effect does play, since it delays the fade in of the button [State:Login], however the control is no longer visible because we're no longer in the Register State.

I realize this is probably confusing... but those of you that have come across this same problem will recognize it. I poured over the LiveDocs but it took just alot of troubleshooting different ideas before I got it working. I've posted a working demo in my Flex Projects column to the right. As usual, right click on the demo to get at the source.