How to display remote swf in flex UI component? - apache-flex

I am trying to display remote swf in my flex application, I am able to load swf, but it is not shown(visble) in my flex application.
here is the code
private function onLoaderComplete(event:Event):void{
can.addChild(l);
}
import flash.system.SecurityDomain;
import flash.system.ApplicationDomain;
var l:Loader = new Loader();
private function initApp():void {
var context:LoaderContext = new LoaderContext();
l.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
if(Security.sandboxType == Security.REMOTE){
var context:LoaderContext = new LoaderContext();
context.securityDomain = SecurityDomain.currentDomain;
l.load(new URLRequest('www.somedomain.com/load.swf?id1'), context);
}else{
l.load(new URLRequest('www.somedomain.com/load.swf?id=1'));
}
private function onLoaderComplete(event:Event):void{
can.addChild(l);
}
<mx:Canvas width="100%" height="50%" backgroundColor="red">
<mx:UIComponent id="can" width="100%" height="100%" >
</mx:UIComponent>
</mx:Canvas>
any idea
Thanks all

Your code snippet does not define what 'L' is
The most likely problem you're having with your current code is that you are adding your 'l' onto a UIComponent which has no built in code for sizing and positioning its children, therefore your 'l' will have no height and width, effectively making it invisible.
I would use a SWFLoader to load another SWF File and display it as part of your application.

Related

google maps in flex withiout mxml component

How do I add google maps as Class into main.mxml
withiout <maps:Map key="" sensor="" />
like in Flash
UPDATE:
and if i have class
package{
import com.google.maps.Map;
public function myMap extends MovieClip {
var map:Map = new Map();
map.setSize(new Point(300, 300));
this.addChild(map);
}
}
if i use this in mxml
myMap:myMap = new myMap();
addChild(myMap);
return error
addChild() is not available in this class. Instead, use addElement() or modify the skin, if you have one.
if i use this
var container:UIComponent = new UIComponent();
container.width = 300;
container.height = 300;
addChild(container);
myMap:myMap = new myMap();
container.addChild(myMap);
Nothing is not added
thanx
MXML is declarative markup that is translated into actual instances at compile time.
For example:
<s:Label text="Something" />
is the same as running
var label:Label = new Label();
label.text = "Something";
this.addElement(label);
So in your case, just assign a function to execute at some point in the component lifecycle and keep the reference to the map at the class level. (I'm using some VGroup component for example)
<s:VGroup creationComplete="onCrtComplete()" ...>
<fx:Script>
<![CDATA[
private var map:Map;
private function onCrtComplete():void
{
maps = new Map();
//now you can do something with the map.
}
]]>
</fx:Script>
</s:VGroup>
Alternatively, you can add an id attribute to the MXML and then reference it programmatically using that id as the property name:
<maps:Map id="map" key="" sensor="" />
In the case of "addChild()", use "addElement()" instead - it's part of the changes between Flex 3 to 4.

Create new window in Air Application

how to create new window(same application duplicate) in Air Project. Any one Help thanks.
Use mx:Window, and take your code out of mx:WindowedApplication and put it into a reusable Canvas. The put an instance of that back in mx:WindowApplication, and then you can create a new mx:Window and add your reusable Canvas component in there as well.
<mx:WindowedApplication ...>
<p:YourComponent ... /> <!-- by putting it in your own file you can reuse it -->
</mx:WindowedApplication>
In a separate file called YourComponent.mxml:
<mx:Canvas ...>
<!-- put the contents that's in WindowedApplication here -->
<!-- add this block to your script block, and hook up a button/menu/whatever to
invoke this function. See how it creates a new instance of Window, adds a
new instance of YourComponent (which is the guts of your app), and shows that.
-->
<mx:Script>
private function createNewWindow() : void {
var window : Window = new Window();
var yourComponent : YourComponent = new YourComponent();
// initialize yourComponent instance's properties
window.addChild( yourComponent );
window.width = 800;
window.height = 600;
window.open(true);
}
</mx:Script>
</mx:Canvas>

Adding a custom UI component as a panel titleIcon (should be easy, I'm kind of a newbie)

The concept of this seems easy, but I'm having trouble getting it right and can't find anything to help me on this.
I have a panel I need to perform a drag and drop operation on, but I only want to perform that if the user mouses down on a particular area of the panel. I can add an Icon to the panel by doing this:
[Embed("/img/icon.png")]
[Bindable]
public var dragIcon:Class;
newPanel.titleIcon = dragIcon;
But what I really want to add is a box, which I can then add my listeners to for the drag and mouse down like I do on some canvases created in actionscript like so
var tempBox:Box = new Box;
tempBox.x=0;
tempBox.y=0;
tempBox.width = 20;
tempBox.height = 44;
tempBox.setStyle("horizontalAlign","center");
tempBox.setStyle("verticalAlign","middle");
tempBox.addEventListener(MouseEvent.ROLL_OVER,over);
tempBox.addEventListener(MouseEvent.ROLL_OUT,out);
tempBox.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownAnswer);
var tempImg:Image = new Image();
tempImg.source = grabbableItem;
tempBox.addChild(tempImg);
myCanvas.addChild(tempBox);
So what do I need to do to use that tempBox and turn it into a class to be used as my panels titleIcon?
Edit 12/29/09:
So I came up with something where I'm extending the panel class (shown below) but all this is really doing is covering up the icon with something I can access publicly. I'm sure there's a better way out there right?
package custClass
{
import mx.containers.Box;
import mx.containers.Panel;
import mx.controls.Image;
public class DragPanel extends Panel
{
[Bindable] public var iconBox:Box = new Box();
[Embed("../img/doc_page.png")] [Bindable] public var grabbableItem:Class;
public function DragPanel()
{
super();
}
override protected function createChildren():void{
super.createChildren();
iconBox.x = 10
iconBox.y = 4
iconBox.width = 20;
iconBox.height = 20;
iconBox.setStyle("horizontalAlign","center");
iconBox.setStyle("verticalAlign","middle");
iconBox.setStyle("borderStyle","solid");
iconBox.setStyle("backgroundColor",0x000000);
var tempImg:Image = new Image();
tempImg.source = grabbableItem;
iconBox.addChild(tempImg);
this.rawChildren.addChild(iconBox);
}
}
}
EDIT 1/7/10 (or 16 according to my windows mobile phones text messages):
Using Chaims help from below here is my new answer.
Create a box mxml component like Chaim says but also add the following script block to it.
<mx:Script>
<![CDATA[
import mx.core.Application;
[Embed("/img/doc_page.png")]
[Bindable]
public var grabbableItem:Class;
public function init():void{
this.addEventListener(MouseEvent.MOUSE_DOWN,Application.application.mouseDownSection);
this.addEventListener(MouseEvent.ROLL_OVER,Application.application.over);
this.addEventListener(MouseEvent.ROLL_OUT,Application.application.out);
}
]]>
</mx:Script>
This adds in all the event listeners I want on the Box that will be used as my icon. Now just add the box as an Icon and it's good to go.
panel.titleIcon = DraggableBox;
I guess since it's a separate mxml component it is now a class, though I don't think I understand why.
The Panel expecting titleIcon property value to be a IFactory and create an instance by himself.
Make your box a component (lets name it DraggableBox.mxml):
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml"
x="0" y="0" width="20" height="44"
horizontalAlign="center" verticalAlign="middle">
<mx:Image source="{grabbableItem}"/>
</mx:Box>
And assign it to titleIcon:
<mx:Panel titleIcon="{DraggableBox}" >
...
</mx:Panel>
If you want do it in ActionScript use ClassFactory:
panel.titleIcon = new ClassFactory(DraggableBox);

how to load a big picture or swf file by calling Loader.load() in Flex, and make the container adjust the size of the loading content?

I get a ActionScript class for loading the content:
public class LoaderContainer extends Sprite {
public function LoaderExample() {
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
addChild(loader);
var request:URLRequest = new URLRequest("File://C:/1.swf");
loader.load(request);
}
private function completeHandler(event:Event):void {
Alert.show(this.x+"/"+this.y+"/"+this.width +"/"+ this.height);
}
}
And then add the LoaderContainer to a Panel control in main MXML.
What supprise me is that the LoaderContainer's width/height is changing all the way according to the contents that it loaded.
Is there any way that we can limit the content's size right obeying the container's size?
Thanks
Michael
Since you're using Flex, is there any reason why you wouldn't just load it directly into an mx:Image or mx:SWFLoader? Since you're loading it and using addChild it's not being wrangled into the Flex framework where you could control it...
<mx:Image source="File://C:/1.swf" width="100" height="100" />

How to display a live streaming video using VideoDisplay in Flex

I'm wondering how to use a VideoDisplay object (defined in MXML) to display video streamed from FMS via a NetStream.
The Flex3 docs suggest this is possible:
The Video Display ... supports progressive download over HTTP, streaming from the Flash Media Server, and streaming from a Camera object.
However, later in the docs all I can see is an attachCamera() method. There doesn't appear to be an attachStream() method like the old Video object has.
It looks like you can play a fixed file served over HTML by using the source property, but I don't see anything about how to attach a NetStream.
The old Video object still seems to exist, though it's not based on UIComponent and doesn't appear to be usable in MXML.
I found this blog post that shows how to do it with a regular Video object, but I'd much prefer to use VideoDisplay (or something else that can be put directly in the MXML).
VideoDisplay is a wrapper on VideoPlayer, which in turn is a Video subclass. Unfortunately, the wrapper prevents you from attaching an existing NetStream to the Video object.
However, a reference to that component is held with in the mx_internal namespace, so the following should do the trick:
videoDisplay.mx_internal::videoPlayer.attachNetStream(incomingStream);
videoDisplay.mx_internal::videoPlayer.visible = true;
(you need to import the mx.core.mx_internal namespace)
Unfortunately you can attachNetStream() only on Video object. So you are doomed to use em if you want to get data from FMS.
By the way attachCamera() method publishes local camera video to the server so be careful ;)
it works.
mx:VideoDisplay live="true" autoPlay="true" source="rtmp://server.com/appname/streamname" />
that will give you live video through a videodisplay... problem is it won't use an existing netconnection object, it creates it's own... which is what I'm trying to find a work around for.
Here a link to example on how to use video:
http://blog.flexexamples.com/2008/03/01/displaying-a-video-in-flex-using-the-netconnection-netstream-and-video-classes/
<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>
I've seen sample code where something like this works:
// Connect to the video stream in question.
var stream:NetStream = new NetStream( chatNC );
stream.addEventListener( NetStatusEvent.NET_STATUS, handleStreamStatus );
stream.addEventListener( IOErrorEvent.IO_ERROR, handleIOError );
// Build the video player on the UI.
var video:Video = new Video(246, 189);
var uiComp:UIComponent = new UIComponent();
uiComp.addChild( video );
uiComp.width = 246;
uiComp.height = 189;
stream.play( streamName );
video.attachNetStream( stream );
video.smoothing = true;
video.width = 246;
video.height = 189;
view.videoPlayerPanel.removeAllChildren();
view.videoPlayerPanel.addChild( uiComp );
But I can't actually get it to work myself. I'll post here later if I can figure it out.

Resources