Hi,

I'm still fairly new to flex so bare with me. I'd like to create a user
interface in my flex app with buttons that have events attached. I was thinking
of doing this in flash, as I can then style my buttons, create hover events
etc. and contain all of the buttons which are intented to be laid out to look
quite nice graphically and then use the events in the swf to trigger actions in
the flex app. Is this possible? is there a more sensible way?

Basic Idea

Flex App- contains -> SWF - contains-> Buttons - contain -> Events - point to
-> Flex events

Hope that makes sense.

The basic container in Flex is an application. When you compile the src with an
mxml extension you produce a file with an swf extension that runs in the Flash
player inside the browser. Yes, you can load other swf files into your
application, if that's what you are asking. And I'm pretty sure that you can
load swfs that are produced by Flash, but if you want to access the objects in
that swf from your Flex application, well it might be easier just to do the
whole thing in Flex.

Think about it this way:
<mx:Button mouseOver="handleHover(event)" click="handleClick(event)"
styleName="CoolButtons" />

In this Flex button definition you have your hover event (a mouseOver or you
can use rollOver) and a click event as well. You write those event handler
functions in ActionScript.

Notice the styleName property? This is how you can make your buttons look
special. In a style CSS file:

.CoolButtons {
upSkin=Embed(source='mySkins.swf',symbol='ButtonUpSkin');
overSkin=Embed(source='mySkins.swf',symbol='ButtonOverSkin');
downSkin=Embed(source='mySkins.swf',symbol='ButtonDownSkin');
}

What I've done is specify that the button skins are taken from symbols in the
Flash SWF. So this is how you can use Flash to contribute wisely to a Flex
application. Those skins can be as simple as Graphic symbols or as complex as
MovieClips that blink, pulse, and dance.

Hi, I just tried this method and it doesn't seem to be working. Either I have
to export as actionscript 2.0 because otherwise flash won't let me set an
identifier, or I don't set one.

Either way these files aren't being recognised in flex builder. It says
definition for symbol not found. Also it says unable to transcode my swf.
Perhaps I'm importing it into flex wrong. I can't seem to find a way to import
the swf file without it saying that the swf is not a supported verson for the
importer.

Thanks

Hi, I just tried this method and it doesn't seem to be working. Either I have
to export as actionscript 2.0 because otherwise flash won't let me set an
identifier, or I don't set one.

Either way these files aren't being recognised in flex builder. It says
definition for symbol not found. Also it says unable to transcode my swf.
Perhaps I'm importing it into flex wrong. I can't seem to find a way to import
the swf file without it saying that the swf is not a supported verson for the
importer.

Thanks

Your Flex code should look something like this:

<mx:Style>
.RoundButton {
upSkin: Embed(source='SkinAssets.swf',symbol='RoundButtonUpSkin');
overSkin: Embed(source='SkinAssets.swf',symbol='RoundButtonOverSkin');
downSkin: Embed(source='SkinAssets.swf',symbol='RoundButtonDownSkin');
disabledSkin:
Embed(source='SkinAssets.swf',symbol='RoundButtonDisabledSkin');
}
</mx:Style>

<mx:Button label="Button" horizontalCenter="-1" top="109"
styleName="RoundButton"/>
<mx:Button horizontalCenter="-1" top="199" label="Disabled"
styleName="RoundButton" enabled="false"/>

The Flash content would have 4 symbols (RoundButtonUpSkin,
RoundButtonOverSkin, RoundButtonDownSkin, and RoundButtonDisabledSkin). These
symbols would have "Export for ActionScript" and "Export in First Frame"
checked on their Properties. Then you publish your FLA so it creates a SWF (in
the above case, that's SkinAssets.swf").

I can send you the files if you like as I have these as an example.

Hi, Thanks for that!

I've got it working now. No idea why it wasn't working before. The problem I'm
having now (which I possibly didn't explain) is that my movie clips in my flash
file are somewhat linked in a menu sort of way. What I'm actually doing is
displaying the buttons round in a circle, making them draggable and then
dynamically drawing lines from the center of the stage to the buttons. So
effectively, they look like a spider diagram (brainstorm) and you can drag them
round. If I use the buttons as skins in flex, I lose their programmed effects
and they won't all display together. Is there a way I can just use my swf file
as is, and then tell flex to treat x,y,z movieclips as buttons? rather than
pulling the movieclips out (which is what it's doing now)?

I see where you are going with this. Unfortunately you've chosen a fairly
advanced topic if you are new to Flex. What I suggest is that you treat all of
the Flash stuff as a single Flex control. You can do that with the Flash CS3
Flex Extension Kit (I think it is still on the Adobe Labs site, but also check
the Flash CS3 site). This will let you, from Flash CS3, pick a symbol from your
library and turn it into a Flex component. You should chose a symbol that
contains all of the buttons and the code which links them together. You can
write ActionScript code to either make new buttons on the fly or relabels the
buttons you have; that code goes into the Flash CS3 side, not the Flex side.
All Flex will do is call it.

You might instead, check out a Flex component called "SpringGraph" which
sounds very similar to what you describe. It is available from Mark Shepherd:

http://mark-shepherd.com/blog/springgraph-flex-component/

Hi, thanks for the link. I'd like to try to import the flash in as a component
anyway (so I know how for the future). I've exported in flash and it created a
..swc file.

I've been googling around, but can't seem to find how to bring that into my
flex app as a component.

Thanks for all the help so far :)