How to create a Flex Display component in Flash? - apache-flex

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!

Related

Impossible to import mx.controls.Alert

I got a strange problem.
Just using Flash Builder 4.5 and trying to use the Alert Popup for some user messages.
But when i use it, it told me :
"Importation not found" (with a ? logo)
Here is the code :
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
Sounds like you only included the Spark component set. Alert is only available in the MX component set. You need to include it as well in your project.
Right click on your project and choose Properties. Choose Flex Build Path from the left menu. You should see an option for Component set. Make sure to set it to MX + Spark (or MX only if you don't need Spark).
Is your project a Flex Mobile Project? If so the mx components are not available.... There are crazy ways around this, but its pretty difficult

Instantiating a button using AS3 in Flex 4?

I used this code on Flex 3.5 SDK with Flash Builder 4 inside a function that is being called on creationComplete of the MXML app.
var myButton:Button = new Button;
myButton.label = "test";
addChild(myButton);
Alert.show("Button Created");
It works fine however, when I use it on the same Flash Builder 4 only this time, under Flex 4.0 SDK, nothing's happening. The Alert.show() isn't even showing which means it doesn't even get to that point.
So my question is, what's wrong? Am I missing something?
P.S.
I need to be able to create / remove MXML components on the fly (while the app is running). This is just a test script and I'm failing miserably at achieving what I need.
In Spark you need to use addElement instead of addChild
var b:Button = new Button();
addElement(b);
I'm not sure why your alert isn't working :\
Usually you create the UI in MXML, but in some cases you do need to create UI elements on the fly, and as the other poster mentioned, addElement() is the key with Flex 4 Spark containers.
When adding components to MX containers (from Flex 3), you still use addChild() in Flex 4. You only need to use addElement() when adding to Spark containers.
Of course, Adobe recommends you use the Spark containers when there is a somewhat comparable MX container.
Its better that you do it in the flex way.
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private function alert():void
{
Alert.show("Button added to stage");
}
]]>
</fx:Script>
<s:Button id="myButton" label="test" addedToStage="alert()"/>
You can't add a button using mere addChild in flex. First you need to create an UIComponent and then add the button to the UIComponent. Its a bit different from the flash way.

Flash and Flex

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.

What is the best way to share assets - icons/images - across multiple Flex applications?

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!

Flex application to component?

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.

Resources