7 Replies Latest reply on Nov 25, 2010 5:23 AM by SourabhRaheja

    swf Image Optimization

    BennyB23

      I'm working on a project where many of the design elements and controls contain mx:Images with common source attributes. In the Flash Professional working environment I would be using these images as instances of MovieClips, which only needing to be referenced once at compilation (as I understand it), don't bog down the loading time for the compiled swf. When I run my flex application in debug mode I can see each swf image is being decompressed individually as the application initializes. While the decompression runs almost instantly on my computer locally, I imagine it will noticeably reduce efficiency when I put it online.

       

      So my first question is this; is my assumption about the decompression time being a performance "liability" accurate? And if so, what's a more efficient way to load a copy of the image into memory that I can reference in all the different components that use it throughout the application?

       

      Thanks~Benny

        • 1. Re: swf Image Optimization
          rtalton Level 4

          You can embed the image as a Class, then use it in any source attribute tag.

          Look in the help docs under "Embedding asset types".

          • 2. Re: swf Image Optimization
            BennyB23 Level 1

            Thanks =]

             

            Respect~B

            • 3. Re: swf Image Optimization
              aktell2007 Level 1

              Hi there,

               

              You do not mention any Image size (kB) ? so embedding will not always be the answer !!!

              With larger Images I would suggest you Load & Cache the Image rather than embedding them

              as well as what type of Image do you use .png, .jpg ??? and what do you understand under swf Img. optimization ???

               

              regards aktell

              • 4. Re: swf Image Optimization
                BennyB23 Level 1

                The images I'm referring to are small, as in 4KB (apparently the smallest file size mac displays by default in the finder).... Actually, if anybody could tell me what view or preference you need to have set up in the Flash Builder workspace to view file sizes (either I'm blind, or it's tucked away in some sort of asinine fashion which is eluding me...) please let me know... =\

                 

                ... Anyway, these are vector graphic designs, which are MovieClips created in Flash, then exported from the Flash library into the image folder in my Flex project. The 4KB swf files range from around 400 to 2000 after decompression and one image, which is relatively complex and detailed, is 78KB in the finder and about 150,000 after decompression, but it's only used once.

                 

                Like I said, this is all loading almost instantly locally, but when I see a laundry list of duplicate entries in the console, the technologically savvy part of my mind frowns disapprovingly, but with uncertainty.

                 

                I'm still looking at different ways of handling this and looking into other ways to streamline and consolidate my project before I try to figure out why my seekbar component is acting up (not moving) anymore in the video state, so if you have any additional input, I'd be glad to hear it.

                 

                Thanks~Benny

                • 5. Re: swf Image Optimization
                  aktell2007 Level 1

                  **** The images I'm referring to are small, as in 4KB (apparently the smallest file size mac displays by default in the finder).... Actually, if anybody could tell me what view or preference you need to have set up in the Flash Builder workspace to view file sizes (either I'm blind, or it's tucked away in some sort of asinine fashion which is eluding me...) please let me know ****

                   

                  Here I would say just use R?H click ‘Properties’. At least that would be in Windows.

                   

                  I have constantly my work directory open and check IF needed for file size there and for .swf file size in the debug or release directories.

                   

                   

                  **** exported from the Flash library into the image folder in my Flex project. The 4KB swf files range from around 400 to 2000 after decompression and one image, which is relatively complex and detailed, is 78KB in the finder and about 150,000 after decompression, but it's only used once. ****

                   

                  Here I would say for the first part, and as ‘rtalton’ pointed out embed this Image is quiet small - embedd it once use it as many times as !.

                   

                  The second part: Well, I have built over the last four years some very large Image Application and never ever worried about ‘decompression’ and my Images are as well all done in Flash files and I never have them as small as 78 kb I use mine more the 300 kb size fully modified into Flash and as long they come out below 180 kb I never worry. I handle that all with preloading, loading and caching but I use modules so that is a little different as well.

                   

                  And to the rest I’m not sure about that.

                   

                  regards aktell2007

                  • 6. Re: swf Image Optimization
                    BennyB23 Level 1

                    I feel like a real turkey on the file size display thing; I just stumbled upon it and it was just a matter of right-clicking on the item in the package explorer and looking a bit more closely under the properties window. Well, I guess I did raise the possibility of blindly missing it...

                     

                    Turns out there was a different option for addressing redundant image source references, which works a bit better to my liking (at least so far as I can tell). I grabbed the Flex Component Kit for Flash Professional (https://www.adobe.com/cfusion/entitlement/index.cfm?e=flex%5Fskins), converted the MovieClip to the UIMovieClip class, exported the file as a swc file, then added it to the build path of my Flex project and now it's a class I can instantiate in mxml anywhere I need to throughout the project.

                     

                    Probably nothing new to those with experience, but it works for me...

                     

                    =]     ~B...//))

                    • 7. Re: swf Image Optimization
                      SourabhRaheja

                      There is an easy way to embed an image into you code:

                       

                       

                      [Embed(source='resources/images/line.png')]

                            public static var LINE:Class;

                       

                       

                      Then you can use it as source for your various images. Even if you Embed an image multiple times in your code, Flex compiler optimizes it at compilation time. So, it wont have any impact on overall SWF size and memory usage if you embed it once or multiple number of times.

                       

                       

                      In case, you want to have this optimization for images loaded at runtime, you can use a custom component CachedImage (that extends from Image component). Its implementation along with the Cache implementation is available at:

                       

                                                    http://xebee.xebia.in/2010/11/25/flex-in-memory-image-cache/

                       

                       

                      You can replace all Image instances with CachedImage instances and it will automatically cache BitmapData for images loaded at runtime.