8 Replies Latest reply on Jan 25, 2008 11:17 AM by mac_55

    Using Swfs in Flex app

    mac_55 Level 1
      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.
        • 1. Re: Using Swfs in Flex app
          camfieldaj Level 1
          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.
          • 2. Re: Using Swfs in Flex app
            peterent Level 2
            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.
            • 3. Re: Using Swfs in Flex app
              mac_55 Level 1
              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
              • 4. Re: Using Swfs in Flex app
                mac_55 Level 1
                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
                • 5. Re: Using Swfs in Flex app
                  peterent Level 2
                  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.
                  • 6. Re: Using Swfs in Flex app
                    mac_55 Level 1
                    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)?
                    • 7. Re: Using Swfs in Flex app
                      peterent Level 2
                      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/

                      • 8. Re: Using Swfs in Flex app
                        mac_55 Level 1
                        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 :)