8 Replies Latest reply on Oct 8, 2011 2:55 AM by Umesh Gamit

    How To Embed and Display an SWF in a Flex App.

    phaseblue Level 1

      Hello all,

       

      I'm trying to embed an swf animation into a flex 4.5 application and display it, but it isn't working!

      I am getting error after error.  When I try to use addElement(), I get the following error:

       

      1067: Implicit coercion of a value of type mx.core:MovieClipLoaderAsset to an unrelated type mx.core:IVisualElement.

       

      If I use addChild(), then it throws another error at runtime.

       

      Here is my code:

      [Embed(source="assets/con_mov.swf")]
      private var connectMov:Class;
      private var conMov:MovieClipLoaderAsset = new connectMov();
      

       

      Here is the code I'm trying to use to displey it:

      borderContainer.addElement(conMov);
      

       

      I've tried just adding it to the application using this.addChild(connectMov), but I get an error at runtime.  This is ridiculous!  Bringing an swf generated in Flash into Flex and displaying it shouldn't require this much effort - IMHO.  There is plenty of documentation on how to embed an swf into Flex, but almost nothing on how to display it!

       

      It's just a simple placeholder animation and I don't need to access any functions inside of it, so I want to embed it rather than use swfLoader.

       

      Thanks for any help or advice you can give!

       

      Matt

        • 1. Re: How To Embed and Display an SWF in a Flex App.
          Kanchan Ladwani Level 2

          Hi,

           

             Please check out this link, U may get some help from it

           

             http://stackoverflow.com/questions/602057/load-and-play-embedded-swf-file-in-flex-actionsc ript

           

          Thanks and Regards,

          ---------------------------------------------------------------------- ----------------------------

          Kanchan Ladwani | kladwani@infocepts.com | www.infocepts.com

          ---------------------------------------------------------------------- ----------------------------

          • 2. Re: How To Embed and Display an SWF in a Flex App.
            phaseblue Level 1

            Thanks Kanchan,

             

            I read the link you suggested and I'm guessing that creating a UIComponent is probably the best way.  However, how do you do that purely in ActionScript?  Also, where do you embed the movie clip?

             

            Here is the code:

            public class MovieClipUIComponent extends UIComponent {
               public function MovieClipUIComponent (mc:MovieClip) {
                  super ();
            
                  mcHeight = mc.height;
                  mcWidth = mc.width;
            
                  // add your own magic
            
                  addChild (mc);
               }
            }
            
            

             

            This is simply unbelievable!  I just want to embed an swf and display it somehow!  Why must it be so complicated?

            • 4. Re: How To Embed and Display an SWF in a Flex App.
              Kanchan Ladwani Level 2

              Hello,

               

                 here is a sample code..please hav a look,

               

              <?xml version="1.0" encoding="utf-8"?>

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark"

                             xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()">

                  <fx:Script>

                      <![CDATA[

                          import mx.core.UIComponent;

                          [Embed(source="assets/abc.swf")]

                          private var myClass:Class;

                          private var myMovieClip:MovieClip;

                         

                          private function init():void {

                              myMovieClip = MovieClip(new myClass());

                              swfcontainer.addChild(myMovieClip);              

                          }

                      ]]>

                  </fx:Script>

                  <mx:Image id="swfcontainer" source="assets/abc.swf" />

              </s:Application>

               

              Thanks and Regards,

              ---------------------------------------------------------------------- ----------------------------

              Kanchan Ladwani | kladwani@infocepts.com | www.infocepts.com

              ---------------------------------------------------------------------- ----------------------------

              • 5. Re: How To Embed and Display an SWF in a Flex App.
                phaseblue Level 1

                Thanks a lot Kanchan!

                 

                I ended up following the advice on the link you gave me and built a custom UIComponent to hold the movie.  It works fine, but does create extra code.

                 

                I just tested the new code you posted and it also works!  The only problem is that it is showing a generic image icon in the upper left corner of the screen along with the swf animation.  Could this be caused by the fact that you are setting the source of the image component (i.e. source="assets/abc.swf")?  It seems to me that this would be unneccesary since you are adding the movieClip which contains the swf with swfContainer.addChild(myMovieClip);


                Also, I notice that it is possible to embed an swf file and then use SWFLoader to actually make it usable at runtime:

                <mx:SWFLoader source="@Embed('assets/abc.swf')"/>
                

                What are the benefits of this?

                 

                Thanks again for the awesome help!

                 

                Matt

                • 6. Re: How To Embed and Display an SWF in a Flex App.
                  Kanchan Ladwani Level 2

                  Hello Matt,

                   

                       Yes u r right, there is no need to set source for the image as we are adding movieclip with swf.It was by mistake in my

                       code, as i was trying it by too many crazy ways.

                   

                  Now abt the SWFLoader,

                  <mx:SWFLoader source="@Embed('assets/abc.swf')"/>

                   

                  This technique works well with SWF files that add graphics or animations to an application but are not intended to have a large amount of user interaction. If you import SWF files that require a large amount of user interaction, you should build them as custom components.(Adobe Docs)

                   

                  Thanks and Regards,

                  ---------------------------------------------------------------------- ----------------------------

                  Kanchan Ladwani | kladwani@infocepts.com | www.infocepts.com

                  ---------------------------------------------------------------------- ----------------------------

                  • 7. Re: How To Embed and Display an SWF in a Flex App.
                    phaseblue Level 1

                    Kanchan,

                     

                    Thanks a lot for all your help!

                     

                    I just had one more question.  Is there any way to center the swf in the contentGroup?  I can hardcode the x and y values, but there must be a better way.  Unfortunately, I don't think I can get the height and width of the movieClip object before the swf is loaded into it, so it will be difficult to do: myMovieClip.x = (application.width/2) - myMovieClip.width;

                     

                    Do you have any suggestions for the best way of doing this?

                     

                    Thanks,

                     

                    Matt

                    • 8. Re: How To Embed and Display an SWF in a Flex App.
                      Umesh Gamit Level 1

                      hi friends

                       

                      i wnat to disply external SWF file into flex but without using SWFLOader(it's make lot's of problem) nad i also Embed that SWF

                       

                      this is code

                       

                      import mx.core.UIComponent;

                                  [Embed(source="assets/1.swf")]

                                  private var myClass:Class;

                                  private var myMovieClip:MovieClip;

                       

                                  private function init():void {

                                      myMovieClip = MovieClip(new myClass());

                                      swfcontainer.addChild(myMovieClip);              

                                  }

                       

                      private function load():void{

                      var symb:MovieClip = new loadswf() as MovieClip;

                      this.addChild(symb);

                      }

                      <mx:Canvas id="swfcontainer" />

                       

                      it's give me error....

                      TypeError: Error #1034: Type Coercion failed: cannot convert demos_loadswf@39ab3c1 to mx.core.IUIComponent.

                       

                      please help to resolve this error or give me suggestion to simple Disply/Load and Unload Embed SWF file in flex