14 Replies Latest reply on Oct 20, 2011 9:35 AM by j_reynolds

    Using swf for source of spark image

    j_reynolds

      Hi, I'm not sure if something changed in flex 4.5.1 but I have a published version of my app from earlier (flex 4.0) that uses a spark image control and I'm able to assign a swf as the source and it displays no problem. I just tried in my newest version and I recieve an error "Error #1034: Type Coercion failed: cannot convert flash.display::MovieClip@e523f91 to flash.display.Bitmap". I'm not trying to access any properties -- just setting '.source = abc.swf'.

       

      Anyone have any idea why I can't assign a swf to an image control anymore?

        • 1. Re: Using swf for source of spark image
          Flex harUI Adobe Employee

          There is now a bitmap cache by default for Spark Image.  Looks like it can’t handle SWFs.  Please file a bug at bugs.adobe.com/jira.

          1 person found this helpful
          • 2. Re: Using swf for source of spark image
            j_reynolds Level 1

            Could you suggest a work around for now? I tried setting cacheAsBitmap to false & cachePolicy to 'off' but still the same error. It's at " if (loaderInfo.childAllowsParent)" in the BitmapImage where it is failing.

            • 3. Re: Using swf for source of spark image
              Flex harUI Adobe Employee

              Looks like you could subclass and override contentComplete

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.<http://www.adobe.com/>

              Blog: http://blogs.adobe.com/aharui

              1 person found this helpful
              • 4. Re: Using swf for source of spark image
                pcoyne1979

                Try using a SWFLoader instead. I think it is better to display SWF's using this component in Flex 4.5.

                • 5. Re: Using swf for source of spark image
                  j_reynolds Level 1

                  How do I replace " public var imageDisplay:BitmapImage;" inside <s:Image>?

                   

                  I may just use SWFLoader if I have to adjust my app that much anyway but it would be nice to know if that is how it would be done. I'm still undecided, although the more I think of it I'd really rather have this work as it did before.

                   

                  Also, please vote for the bug! https://bugs.adobe.com/jira/browse/SDK-31814

                  • 6. Re: Using swf for source of spark image
                    Flex harUI Adobe Employee

                    First, you subclass BItmapImage and override contentComplete.

                     

                    Then you copy the default ImageSkin, give it a new name, and  replace the BitmapImage in the skin with your subclass.

                    • 7. Re: Using swf for source of spark image
                      j_reynolds Level 1

                      Thanks much for the help. I subclassed BitmapImage (SwfBitmapImage) but I'm a little confused on making a copy of ImageSkin.

                       

                      I created a new class, copy & pasted the source of Image into a new component and replaced  "public var imageDisplay:BitmapImage;" with "public var imageDisplay:SwfBitmapImage". Also adjusted the package name and class name.

                       

                      I'm missing something though, when I add it to the display list (addElement) I get a skin not found error "Error: Skin for blah.blah.blah cannot be found."

                      • 8. Re: Using swf for source of spark image
                        Flex harUI Adobe Employee

                        There should be no need to copy Image.as, only the ImageSkin.mxml from the spark.skins folder.  Let’s say you call it MyImageSkin.mxml.  Then you add at the top:

                         

                            xmlns:local=”*”    (or whatever the path is to the SwfBitmapImage class)

                         

                        And replace <s:BitmapImage

                         

                        With <local:SWFBitmapImage

                         

                        Then where you used <s:Image, add skinClass=”MyImageSkin” />

                         

                        Or specify the skinClass in CSS.

                        • 9. Re: Using swf for source of spark image
                          j_reynolds Level 1

                          Thanks, that worked to get the override working. I'm still stuck on getting the SWF to display however. Without the call to setBitmapData it never appears on the screen. It's the 'var image:Bitmap = Bitmap(loaderInfo.content)' that is causing the grief here.

                           

                          I'm also wondering if I'm going to run into problem by leaving out any code in contentComplete that is private to BitmapImage?

                           

                          Perhaps I should be overriding setBitmapData? I'm clueless what's going on in there though, so I'm not quite sure how to get a SWF to show up and not be leaving holes or a mess with my override.

                           

                          Any suggestions would be appreciated.

                          • 10. Re: Using swf for source of spark image
                            Flex harUI Adobe Employee

                            Yeah, it was harder than I thought it would be.  I got it to display with this subclass of BitmapImage, but I didn’t beat it up so there might be other issues:

                             

                            package
                            {
                            import flash.display.Sprite;
                            import flash.display.LoaderInfo;
                            import spark.core.IGraphicElement;
                            import spark.core.DisplayObjectSharingMode;
                            import spark.primitives.BitmapImage;
                            import mx.events.FlexEvent;
                            
                            public class MyBitmapImage extends BitmapImage
                            {
                                private var imageWidth:Number;
                                private var imageHeight:Number;
                            
                                override protected function measure():void
                               {
                                    super.measure();
                            
                                    measuredWidth = imageWidth;
                                    measuredHeight = imageHeight;
                                }
                            
                                override public function canShareWithPrevious(element:IGraphicElement):Boolean
                                {
                                    return false;
                                }
                            
                                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                               {
                                    super.updateDisplayList(unscaledWidth, unscaledHeight);
                                }
                            
                                override protected function contentComplete(content:Object):void
                               {
                                    var loaderInfo:LoaderInfo = content as LoaderInfo;
                            
                                    // For untrusted content we must host the acquired Loader
                                   // instance directly as our DisplayObject.
                                   displayObjectSharingMode = DisplayObjectSharingMode.OWNS_UNSHARED_OBJECT;
                                    invalidateDisplayObjectSharing();
                            
                                    // Create a content holder to use as our display object.
                                   var contentHolder:Sprite = new Sprite();
                                    setDisplayObject(contentHolder);
                                    contentHolder.addChild(loaderInfo.loader);
                            
                                    // Retain our source image width and height.
                                   imageWidth = loaderInfo.width;
                                    imageHeight = loaderInfo.height ;
                            
                                    // Update
                                   if (!explicitHeight || !explicitWidth)
                                        invalidateSize();
                                    invalidateDisplayList();
                            
                                    // Dispatch ready event
                                   dispatchEvent(new FlexEvent(FlexEvent.READY));
                            
                                }
                            }
                            
                            }
                            

                             

                            • 11. Re: Using swf for source of spark image
                              j_reynolds Level 1

                              Thank you so much! It works and I appreciate your making that class. Do you know if it is a bug or if Image just won't support swf's anymore? I did end up separating my regular images from my swf's so I could use the SWFLoader class.

                               

                              I will use this in my orginal places in my app because it's much simpler but just curious for future solutions if it's better off to assume that Image doesn't support SWFs?

                               

                              Thanks again much for your time, will make the one area of my app much cleaner!

                              • 12. Re: Using swf for source of spark image
                                j_reynolds Level 1

                                Actually, where I'm using this I'm allowing the user to resize the image at runtime. I can see you manually put the width/height in there so the app is no longer able to resize it. If you can point me in the right direction I'd love to see it fixed -- but for now I'll have to keep my images separate from the swf's unfortunately.

                                • 13. Re: Using swf for source of spark image
                                  Flex harUI Adobe Employee

                                  I made these adjustments and it will now scale the swf:

                                   

                                  private var content:Object;
                                  
                                      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                                     {
                                          super.updateDisplayList(unscaledWidth, unscaledHeight);
                                          var loaderInfo:LoaderInfo = content as LoaderInfo;
                                          loaderInfo.loader.width = unscaledWidth;
                                          loaderInfo.loader.height = unscaledHeight;
                                      }
                                  
                                      override protected function contentComplete(content:Object):void
                                     {
                                          var loaderInfo:LoaderInfo = content as LoaderInfo;
                                          this.content = content;
                                  

                                   

                                  • 14. Re: Using swf for source of spark image
                                    j_reynolds Level 1

                                    Thanks so much for taking the time for this... it's appreciated! I suppose this all got me some new knowledge on how skins are used and made me get a swfLoader working as well (in a separate part of the app).

                                     

                                    Thanks much again for your help!