I want to embed a Flash movie into Flex (Flex Builder 3), both using Action Script 3, and have my flash movie call functions in Flex and vice versa.
Is this possible?
Yes it is possible. If you want to embed another swf into your flex application you have a few options.
Option 1 - Embed the swf, inline, into a SWFLoader component. This option has some security drawbacks as the swf gets loaded into another application domain and so communication between your flex app and the embedded content can sometimes be difficult. You can give this component an id, listen to the complete event and then talk to the content property of SWFLoader to get access to the loaded swf. Something like:
<mx:Script>
<![CDATA[
private function completeHandler(event : FlexEvent) : void
{
trace(mySwfLoader.content);
}
]]>
</mx:Script>
<mx:SWFLoader id="mySwfLoader" source="#Embed(source='YourSwf.swf') complete='completeHandler(event)" />
Option 2 - You could use a meta tag to embed the swf as a class and then create an instance of that class in code. This is gives a lot of flexibility but you loose the benefits of being able to add the object declaratively. Something like:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationCompleteHandler(event)">
<mx:Script>
<![CDATA[
[Embed(source="mySourceSwf.swf")]
private var mySourceSwfClass : Class
private function creationCompleteHandler(event : FlexEvent) : void
{
var mySourceSwf = new mySourceSwfClass();
myCanvas.addChild(mySourceSwf);
trace(mySourceSwf);
}
]]>
</mx:Script>
<mx:Canvas id="myCanvas" />
</mx:Application>
Option 3 - Don't have a swf at all. Have whatever you want to embed as a UIMovieClip in the fla. You can then create a .swc file whenever you publish that fla. You can then link to that swc file in flex builder. this will then automatically add that MovieClip as referencable in your project (this may need some more investigation on your part). Essentially you can then do something like:
<local:MyMovieClipInSwc id="myMovieClip" />
This way you get the benefits of both worlds, declarative markup and everything within the same application domain. One thing i would say about this method is that Adobe royally f**ked up with the UIMovieClip class and it's performance sucks. Just be aware if you start to use this everywhere you app may become extremely sluggish.
Related
I'm trying to embed swf file with some frame labels defined in its timeline into my Flex application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1000" height="563" creationComplete="doSomething()">
<mx:Script>
<![CDATA[
private var movieClip:MovieClip;
private function doSomething():void {
movieClip = swfFile.content as MovieClip;
movieClip.gotoAndPlay('playIntro');
movieClip.addEventListener("swfFinished", doSomethingElse);
}
private function doSomethingElse():void {
//
}
]]>
</mx:Script>
<mx:SWFLoader id="swfFile" width="1000" height="563" source="#Embed(source='test.swf')" />
</mx:Application>
However, I cannot control swf timeline in this way... Is it possible to embed swf file and control it in a way I want?
Thanks!
Some searches on this seem to indicate that this is happens when the swf is embedded. If you can get away with not embedding the swf, do that.
Here's a solution I found that allows the embed to work:
http://iamjosh.wordpress.com/2008/04/09/embedding-flash-in-flex/
I think the issue may lie Flash Player's security model, just a hunch. It may not be allowing this type of communication with the embedded swf ... but you might be able to do something like Security.allowDomain("*") (a dangerous shortcut).
But first, check out the docs for allowDomain, as the docs suggest you might be able to do this:
Security.allowDomain(loader.contentLoaderInfo.url); // 'loader' is a SwfLoader
But I'm guessing that url might be null in the embed case :)
I have used Flash to make skins, which I import and apply to Flex components.
But how can I create a component in Flash, with properties and methods. And make it able to be added to the displayList in a Flex app?
I installed the Flex component kit for flash. Created my component in flash (it extends MovieClip). Did Command->Convert to flex Component, did File->Published, which gave me a .swc, dropped the .sec file into my Flex project. Now when I create a new var the class "FlashFlexComponentTest" pops up in the new class hint box, so flex sees it. But afterwards I get the error:
Type was not found or was not a
compile-time constant: FlashFlexComponentTest
I feel like I must be missing a step?
Thanks!
UPDATE
I added the .swc via project build path -> add SWC.
I no longer have a compile-time error but I am getting a runtime error:
Type Coercion failed: cannot convert FlashFlexClassTest#9089129 to mx.core.IUIComponent
The base class for all flex components, UIComponent, allows you to add Sprites that don't implement the IUIComponent interface.
An example :
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="init();">
<mx:Script>
<![CDATA[
private function init():void
{
var component:FlashFlexClassTest = new FlashFlexClassTest();
container.addChild(component);
}
]]>
</mx:Script>
<mx:UIComponent id="container" width="100%" height="100%"/>
</mx:Application>
There's a good video tutorial on this at Linda.com by David something. I did a lot of this a year or so ago, and that was the best resource I found. Doesn't cover absolutely every possible angle, but does a great job of covering what you need to know.
I'm guessing there's just some small linkage detail that you're missing. The tutorial should get you straight, if that's the case. It was worth the $20, or whatever, for a monthly subscription for me.
Sorry, that's the best I can do... haven't built Flex components in Flash since last year.
basically there are step what need to do:
open Flash
drag a component you need to stage
right click on it in Library > Export to SWC
put this SWC in your Flash Builder libs folder
There is explanation by Jesse Warden http://jessewarden.com/2011/06/integrating-flash-components-with-flex-revisited.html
Cheers!
I am in the process of creating a new - "lite" - version of a Flex application I created a while ago. I have been porting over many of the Classes and Components to a Flex Library Project that compiles an SWC file. Because both are Cairngorm applications, I'm not able to completely eradicate duplicate code, but it seems logical that I should be able to share assets - such as icons (PNG files). What is the best way to do this? I have tried including them in the SWC, but I can't figure out how to access them in the application. If you can help me figure that out, then my question will be answered. Any thoughts?
Here is and example of how I currently embed icons/images in my Flex application:
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/icons/cancelIcon.png")]
private var cancelIcon:Class;
[Bindable]
[Embed(source="assets/icons/saveIcon.png")]
private var saveIcon:Class;
]]>
</mx:Script>
Thanks.
0) First, looking at the code above - I recommend some minor changes:
// Actionscript instead of MXML:
public class ResourceClasses
{
Bindable]
[Embed(source="assets/icons/cancelIcon.png")]
public static var CancelIconClass:Class;
// make your variable public and static without public no one
// outside the class can access AND bindable won't matter
}
---- Now, compile your library.
---- If the assets aren't in the right place the compiler will complain
1) In your application, you need to reference the library project / swc
---- You should be able to get code hints / intellisense in Flex Builder / eclipse from classes in your Application to classes in the library project
2) In your Application - Do some code like this:
var image:Image = new Image();
image.source = ResourceClasses.CancelIconClass;
// more image property setting...
someCanvas.addChild(image);
3) This will get you going - using a Library project to hold images, etc...
*** DO NOTE: If the images need to be loaded multiple times, reused, etc -- There are other steps to take to squeeze out the best performance, etc...
This section of the livedocs would be interesting to you:
http://livedocs.adobe.com/flex/3/html/help.html?content=building_overview_5.html.
Do you have a specific example of how you are embedding the assets and trying to use them in the resulting swc that isn't working? Do you think your problem is in the embedding them into the swc or using them from the swc in the actual application?
Well, using #Gabriel's advice, here's what I ended up with:
package
{
[Bindable]
public class ResourceClasses
{
[Embed(source="assets/icons/cross.png")]
public static var CancelIconClass:Class;
}
}
Referenced in my application like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Button label="Cancel Changes" icon="{ResourceClasses.CancelIconClass}" />
</mx:Box>
Thanks!
Ok, so I have a custom render that I have created:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalAlign="middle"
width="100"
height="100">
<mx:Script>
<![CDATA[
[Bindable]
private var fileLabel:String;
[Bindable]
private var fileIcon:Class;
override public function set data(value:Object):void{
fileLabel = value.label;
fileIcon = value.file.url;
}
]]>
</mx:Script>
<mx:Image source="{fileIcon}" />
<mx:Label text="{fileLabel}" />
</mx:VBox>
That I want to use for a photo gallery with images that are dragged and dropped onto a TileList. I have that part down, but I can't seem to get the icon thing to work.
Given: value is sort of wrapper for a File class. I want to set the mx:Image source to something that needs to be of type Class. Using nativePath or url gives me a cast error. I see tons of examples online using XML and something like "Embed(/url/to/img.jpg)". I promise you that if you give me one of those examples (using a static image) I will give you a negative vote. THAT IS NOT WHAT IM LOOKING FOR HERE!
The reason that this isn't working is because the type of the fileIcon property is Class. You would generally would only want an object of type Class if you plan to use it like a factory, creating instances of that class with it. When you use the [Embed] metadata, you are indicating to the compiler that it should embed the specified asset into the SWF and also generate a Class to act as a factory for vending object instances that can represent that asset. However, as you had already discovered before posting this question, the problem with [Embed] is that you need to hard-code the reference, it doesn't let you supply a value at runtime (because the compiler needs to literally embed the asset, at compile-time).
Fortunately, mx:Image.source is a very flexible property that also accepts Strings (despite the fact that most documentation demonstrates using it with embedded assets). As long as the Flex application is capable of loading the asset, you can just supply a String-typed URL as the source.
Change the type of fileIcon to a String, and also verify that value.file.url is actually a URL of an image that your application can load. (You can test this just by hardcoding this URL into the mx:Image's source attribute.)
I have an application built in Flex Builder 3. It has a fair amount of mxml and as3 code which uses some other custom compenents. I have looked at the documentation on building components which shows how to make a simple mxml or action script component that extends something like a combobox, but I'm lost as to how to take a whole existing and independently functioning Application and turn it into a reusable component.
Basically, I'd just like to create multiple instances of this app inside of another flex project.
Anyone able to provide a little guidance?
The easy thing to do is to swap the Application mxml tag with a VBox tag...thus making it act like a component.
e.g. If this were your application:
//Foo.mxml
<mx:Appliction xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Label text = "foo" />
</mx:Appliction>
change it to:
//Foo.mxml
<mx:VBox>
<mx:Label text = "foo" />
</mx:VBox>
and then you can do something like this:
//App.mxml
<mx:Appliction
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:local="your.package.scheme.*"
>
<local:Foo />
</mx:Appliction>
You may have to make some public properties if you need to pass in any data to the component...
If you simply want some "parent" Flex application to embed several instances of this autonomous child application, then you should see Adobe's "Embedding Asset Types" documentation, which describes how to embed one SWF file in another.
From the documentation:
You typically embed a Flex application
when you do not require the embedding
application to interact with the
embedded application. If the embedding
application requires interactivity
with the embedded application, you
might consider implementing it as a
custom component, rather than as a
separate application.
If you do require interaction between the embedded application and the parent application, you can look into the SWFLoader control.