9 Replies Latest reply on Nov 3, 2009 10:21 PM by Flex harUI

    Button Flicker?

    William Spence Level 1

      Hi.  I am not a programmer, so I am not actually looking for code as much as an explanation that I can share with my programmer to help point him in the right direction.  I hired a graduate student from a local college who is newly learning Adobe Flex.  We are creating an Adobe Air application using Flex Builder 3.  One thing that I have noticed is that every button that he has created has a really quick flash the first time you mouse over it.  Any subsequent mouseovers and you don't see it again.  But it happens when you mouse over any button on the screen the first time.  It is a really fast, single flicker that is just annoying.  Are we doing something wrong, or is this common with Flash and Air applications?  Is there a way to correct it that I could pass onto my programmer?

       

      Thanks for any help!

        • 1. Re: Button Flicker?
          Flex harUI Adobe Employee

          Hard to say from that description.  Well-written apps don't flicker, but there are lots of ways to cause flicker.  Depends on what the code looks like.  Create a small test case, (one button) and see if it flickers and post the code if it does.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

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

          • 2. Re: Button Flicker?
            William Spence Level 1

            I will have my programmer make up a sample application as you have requested and I will attach the code that he uses to my next post.  Thanks for your insight!

            • 3. Re: Button Flicker?
              William Spence Level 1

              OK, Alex, here is the code that you have requested.  I have also attached an Adobe Air application to this post so that you can see the flicker problem.  You will notice that when you mouseover the button for the first time in the sample application, there is a quick flicker, and when you click on the button for the first time, there is a quick flicker, but all subsequent mouse-overs and clicks work just fine.  This is the problem that we are seeking an answer to.  Thanks for any input!

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

               

                 <mx:Style>
                           .helpButton {
                         up-skin: Embed('assets/b help.swf');
                         down-skin: Embed('assets/b help click.swf');
                         over-skin: Embed('assets/b help over.swf');
                     }
                       </mx:Style>        <mx:Script>
                     <![CDATA[
                         public function clickMe():void{
                             mytxt.text = "You have clicked the button!";
                         }
                     ]]>
                 </mx:Script>

               

                 <mx:Button width="82" styleName="helpButton" height="30.3" horizontalCenter="0" verticalCenter="-79"
                     click="clickMe()"/>
                       <mx:Label text="" horizontalCenter="0" verticalCenter="0" width="489" height="44" fontSize="15" textAlign="center"
                     id="mytxt"/>
                </mx:WindowedApplication>

              • 4. Re: Button Flicker?
                William Spence Level 1

                Sorry, I wasn't able to attach the file to the post.  But here is a link to the application.  YOU MUST DOWNLOAD THE APP IN ANY OTHER BROWSER THAN INTERNET EXPLORER!  For some reason, Internet Explorer zips the file, and it does not unzip correctly.  So download it from this link in Firefox, Chrome, Opera, etc. and it will work fine.

                 

                http://www.flickerbee.com/SampleApp/Sample.air

                • 5. Re: Button Flicker?
                  Flex harUI Adobe Employee

                  If your assets are entire SWFs you can probably have problems like this.  SWFs take one frame to load and so the over state's skin will have 0 size

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

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

                  • 6. Re: Button Flicker?
                    William Spence Level 1

                    Thanks for the reply Alex.  So are there any vector format graphics that do not take a frame to load causing this flicker?  In other words, can you please send me a list of file formats that would eliminate this flicker problem?  Thanks!

                    • 7. Re: Button Flicker?
                      Flex harUI Adobe Employee

                      Usually, you have one Symbol in a SWF that you want to use as a skin (not the entire SWF).  Then you embed the swf and specify the asset and that will load immediately.

                      • 8. Re: Button Flicker?
                        William Spence Level 1

                        I'm fairly new to adobe flex/flash/air so let me see if I have this correctly.  Right now we are using three different .SWF files for the three button states and you say that loading each state takes one frame and is causing the flicker.  Are you saying that we can use three different symbols in a single .SWF file for the three different states?  If so, I don't really know how to make this happen.  I am making the buttons in Illustrator and exporting each state as a SWF.  I have the Master Collection so probably have all the software needed to make this happen correctly.  Perhaps if you could just walk me through the steps or point me to a tutorial to make the button correctly to eliminate flicker, I could pass this on to my programmer.

                        • 9. Re: Button Flicker?
                          Flex harUI Adobe Employee

                          I don't use Flash that much, but IIRC, you import Illustrator files to Library, go to Properties or Linkage and give them a symbol name and export for actionscript.  Then publish the SWF and specify an asset name in the embed

                           

                          [Embed(source="my.swf", asset="someSymbol")]