How to add flex controls to my AS3 project? - apache-flex

I'm absolute newbie in Flash development but anyway I need to do something.
I have a pure AS3 project that plays video from youtube (chromeless player). I need to add some controls to manage this player. I don't know how to do that? If I just add mxml file into the project nothing happens. How to bind this file to as3?
Thanks

Flex components need to have UIComponent parent to function properly. If your player is based on Sprite, controls will not be initialized.
There is a trick to use Flex controls in the Sprite, but only after initialization in Flex Application. If you don't have Application, no luck.

You could use an AS3-only alternative. One library I've used is minimalcomps which offers some simple but effective controls for use in any AS3 project.

You can't use MXML, but nobody stops you to create your own controls if they are simple.

A short and simple example of how to add a button with an image:
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest('http://i1.nyt.com/images/misc/nytlogo379x64.gif'));
function onComplete(event:Event):void
{
var button:Sprite = new Sprite();
button.addChild(event.currentTarget.content);
addChild(button);
button.buttonMode = true;
button.addEventListener(MouseEvent.CLICK, onButtonClick);
}
function onButtonClick(event:MouseEvent):void
{
trace ('click');
}
This would be the most basic version of a button with a loaded bitmap image.
Normally you would like to check for errors as well... what to do if the image is not found, or when you're not allowed to access it.
If you're going to need more then one button you could make a class which accepts an url, so you could just pass the url to the class and the button would be created.
A completely other way to approach this is with an SWC file, you could create the buttons in the Flash IDE and export them as an swc, which you can embed and use in your pure AS3 project.

Related

How to run one application from another application in flex?

I have two flex applications Main.mxml(where I have a button called loadDataViewer) and ViewData.mxml. What I want is when the user press the loadDataViewer button, the application ViewData.mxml will open in a new window. Is there any way to do it in Flex?
SWFLoader class looks interesting but I think it will load the other appliation inside the Main application which I don't want. I also saw that there is ExternalInterfaceAPI which can be used to open a url browser but not sure if I can reference the swf file of VewData application. As suggested here( http://learn.adobe.com/wiki/display/Flex/Local+Connections ) that LocalCOnnection can be used to reference one flex application in another but that's only when both applications are open I guess.
Any suggestion to guide me to the right direction wouild be greatly appreciated.
You could embed your viewData swf to an HTML file, and either do any of the following:
Call External Interface...
var url:String = 'myViewData.html';
ExternalInterface.call('window.open("' + url + '")');
or
Call the navigateToURL method...
var url:String = 'myViewData.html';
var urlReq = new URLRequest(url);
navigateToURL(urlReq,'_blank');
Use Modules. Adobe help.

Javascript-Caching Video Player

I've got the following Javascript for creating the HTML of video player. I use Javascript because this is the only way I can tell the player which video to play.
function createPlayer(videoSource){
document.writeln("<div id=\"player\">");
document.writeln("<object width=\"489\" height=\"414\" >");
document.writeln("<param name=\"player\" value=\"bin-debug/FlexPlayer.swf\">");
//etc
The problem is FlexPlayer.swf is loading every time and I need to cache this SWF file. Maybe I should use Javascript constructor but don't know how in this case. Any code help will be greatly appreciated.
If you're video player is in flex (and I'm guessing that it is with the flex tag and the bin-debug folder) - you should just call into the flex app in order to set the video.
You can allow flex and javascript to communicate with each other, without having to embed different versions of it in the HTML! It's awesome, check it out...
In your flex app, after it is initialized you can add something like this :
ExternalInterface.addCallback( 'playVideoFromJS' , playVideo );
What the above does is expose a function named "playVideoFromJS" that can be called in your javascript that will execute the 'playVideo' funciton in the flex app! Neat!
Then add a function like so somewhere in your flex app:
public function playVideo ( videoToPlay : String ) : void {
...play video code here
}
Then in javascript, you can actually call your flex function playVideo!
myFlexAppName.playVideoFromJS( 'myvideoofile.flv' );
More information on ExternalInterface here :
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6#addCallback()

how to use UIComponent/Flash in Flex

I am new to Flash/Flex.
I would like to use a Component I created in Flash extending fl.core.UIComponent. How do I use this in Flex? Do I just export it as a swc or do I have to use the Flash Flex 3 kit which will convert it to a UIMovieClip. That does not sound right.
I would appreciate a few simple steps describing the process.
Thanks
Sanoran
You can publish your file as a .swf and use the SWFLoader to load it, just remember the paths are relative to your run/debug directories.
My understanding is swc files are generally library files, rather than visual components, because you want the libraries included at compile time (swc) rather than at runtime (swf).
var loader = new SWFLoader();
// set autoload to false just so we KNOW when it loads. Also prevents
// us from accidently loading it twice by calling load() later
loader.autoLoad = false;
loader.addEventListener(Event.INIT, function (nt:Event) {
// Remove event listener so can be garbage collected
event.currentTarget.removeEventListener(event.type, arguments.callee);
// note we can the loader, rather than
// loader.content
someIVisualElementContainer.addElement(loader);
});
// relative to bin-debug or bin-release
loader.source = "movie.swf";
loader.load();
Just import the .as file into your flex app. Use rawChildren.addChild instead of plain addChild to add it to the display list because flex overrides the default addChild method to accept only mx.core.UIComponent and its derived classes.
Update: You can't use FLA in flex, so if your component is not just an AS class extending fl.core.UIComponent, you should either export it to SWC or load the corresponding SWF at runtime to the flex app.

Flex: How to call function of embedded swf?

I have a Flex 3.4 app that embeds a swf with mx:SwfLoader...
That swf has a public function named "playIt". I've tried dispatching events to gettingHere.content, casting gettingHere.content as a MovieClip and other stuff...
var swfApp:MovieClip = MovieClip(gettingHere.content);
if (swfApp.hasOwnProperty("playIt")) {
var helloWorld:Function = (swfApp["playIt"] as Function);
helloWorld();
}
to no avail. Help!
See the example here for interacting with a loaded Flex application.
Essentially:
var swfLoader:SWFLoader; // assuming loading complete
var loadedSM:SystemManager = SystemManager(swfLoader.content);
var loadedApp:Object = loadedSM.application;
app.playIt();
Are you able to load the swf into Flex at runtime rather than embed it? I've had good results loading swfs into Flex after launch, whereas embedding tends to be problematic for accessing a swf API.
Either use Loaders with eventListeners in a script or mx:SWFLoader in MXML with a listener on complete should work for you.

Flex: Passing MXML file as XML Parameter

Is it Possible to pass MXML it self as parameter(XML param) from external application and load in Flash Player dynamically to create page. For e.g
passing xml = <mx:canvas><mx:label text="hello" /></mx:canvas> to Flex and flex should create canvas with label control in it. Is there any example related to it.
Thanx
MXML code needs to be compiled down to ActionScript before Flash Player can do anything with it. MXML is not interpreted by Flash Player at runtime.
What you are wanting to do is not possible. Like brd6644 said, mxml is compiled down to bytecode in the swf which is interpreted by the flash player. The mxml (and even actionscript) is not understood by the flash player.
That being said, there is a JSP library that you can use for dynamic MXML. See here:
http://www.adobe.com/devnet/flex/articles/server_perf_05.html
That link is old, and right now I can't seem to find an updated link, but I know the project still exists. I believe it actually ships as part of ColdFusion still. It allows you to create dynamic mxml which gets JIT compiled at the request. It of course has a substantial performance hit because of it, but if you need dynamic MXML it is an option.
I will update this comment with a better link when I find it.
Just store the properties of the
component to a XML and put a className
attribute so that if you load the XML
you can have a function to set the
attributes of the XML to the
properties of your created component
which will be determined in your
className attribute
My initial guess is no, it would still be of type "XML", and there is no "eval" in Actionscript 3. I did a quick search and am going to have to say no, this is not possible.
I have however, done something similar in an app I created.
What I did was store in a database the object type, and some properties (x,y,width,height, etc). This data is returned from a remote object call and these objects are then created at runtime, which can get a similar effect you are trying to achieve.
For example:
var resultAC:ArrayCollection = event.result as ArrayCollection;
var tmpCanvas:Canvas;
for(var i:int = 0; i < resultAC.length; i++)
{
if(resultAC.getItemAt(i).type == "Canvas")
{
tmpCanvas = new Canvas();
tmpCanvas.x = resultAC.getItemAt(i).x;
tmpCanvas.y = resultAC.getItemAt(i).y;
...
parent.addChild(tmpCanvas);
}
}

Resources