5 Replies Latest reply on Jan 18, 2012 12:59 AM by CleanCoder

    Graphic Anomaly involving Buttons

    William Spence Level 1

      I am writing an Air app.  All of the graphics that I am using for the app, including skins for buttons, are .png files.  My background images are also .png.  None of the images are resized from their original dimensions so there is no pixelization going on.


      The problem that I am running into which is very inconsistent, is that I have a background image that is a .png, with a button placed on top of it that has a skin made of .png files.  Occassionally, when I mouse over the button in my Air application, I get a small horizontal line at the top of my button in the over state.  It does not always show up.  I found that if I let the application sit open for a few minutes, chances are that most of my buttons will exhibit this behavior.  Once a button is moused over once, it will not exhibit this behavior again unless I let the application sit for another minute or two.  The line is always a color from the background .png.  Very strange, here is a mockup of what I am seeing on my screen:




      In my application, I play movies that when they are not playing, they are represented in a .png format.  The play button is skinned in .png files.  Sometimes, when I mouse over the button, I get a small 1 pixel horizontal line the width of my button that is the same color as the background .png.  This looks very unprofessional and will not meet our design requirements.  Has anybody seen this before, have an explanation, and any possible fixes?



        • 1. Re: Graphic Anomaly involving Buttons
          William Spence Level 1

          Bump...  I might add that the buttons were created in Actionscript and not MXML

          • 3. Re: Graphic Anomaly involving Buttons
            CleanCoder Level 2

            Post the portion of your code that involves the drawing methods.

            • 4. Re: Graphic Anomaly involving Buttons
              William Spence Level 1

              Well, eventually I am going to have all of these videos displayed in a List, so I will be using a custom itemRenderer.  But for now, I simply have a Group called videoThemesGroup that I create in MXML, and I simply add all the graphics to the group in ActionScript by going through a for loop.  Here is what it looks like:



                                  themeImage = new Array(cnt);
                                  themeRadios = new Array(cnt);
                                  themePlay = new Array(cnt)
                                  themeLabels = new Array(cnt); 
                                  themeVideos = new Array(cnt);
                                  themeAdded = new Array(cnt);
                                  selectLabel = new Array(cnt);
                                  videoFrame = new Array(cnt);
                                  for (var i:int = 0;i<cnt;i++){
                                            videoFrame[i] = new BitmapImage;
                                            videoFrame[i].source = frameHolder;
                                            videoFrame[i].width = 242;
                                            videoFrame[i].height = 134;
                                            videoFrame[i].alpha = 1;
                                            videoFrame[i].horizontalCenter = -333+(i*318);
                                            videoFrame[i].top = 29;
                                            themeVideos[i] = new VideoDisplay;
                                            themeVideos[i].source = "http://www.flickerbee.com/Videos/Themes/" + themeDesc[themeDescIndex].themeCatName + "/" + themes[i].themeID + ".mp4";
                                            themeVideos[i].autoPlay = false;
                                            themeVideos[i].alpha = 1;
                                            themeVideos[i].width = 240;
                                            themeVideos[i].height = 132;
                                            themeVideos[i].setStyle("top", 30);
                                            themeVideos[i].addEventListener(Event.COMPLETE, function(e:Event):void{videoCompleteHandler(e,themeImage,themeVideos)});
                                            themeImage[i] = new Image;
                                            themeImage[i].source = "http://www.flickerbee.com/Videos/Themes/" + themeDesc[themeDescIndex].themeCatName + "/" + themes[i].themeID + "Thumb.png";
                                            themeImage[i].width = 240;
                                            themeImage[i].height = 132;
                                            themeImage[i].alpha = 1;
                                            themeImage[i].setStyle("horizontalCenter", -333+(i*318));
                                            themeImage[i].setStyle("top", 30);
                                            themePlay[i] = new Button;
                                            themePlay[i].setStyle("skinClass", skins.VideoSkins.Video.PlayButtonSmallSkin);
                                            themePlay[i].width = 60;
                                            themePlay[i].height = 60;
                                            themePlay[i].horizontalCenter = -331+(i*318);
                                            themePlay[i].top = 65;
                                            themePlay[i].alpha = 1;
                                            themePlay[i].focusEnabled = false;


              So basically, I have video frame that adds a 1 pixel border to my video.  I add the actual video on top of that.  I layer a still image downloaded from my website on top of that.  And finally, I add a play button to the top of this.  When you click the play button, the image disappears and the video begins to play and when it finished, the still image reappears.  All of this will be replaced by a more elegant itemRenderer soon.

              • 5. Re: Graphic Anomaly involving Buttons
                CleanCoder Level 2

                I was hoping I could spot a quick fix for you, but it doesnt look that way. My first thought is that the issue is with the Button skin because the erronous line appears to be the same width as your Button. Im not sure why you are calculating the horizontalCenter on your elements the way you are, but it could also be a rounding issue.


                As an optimization I would recommend storing the array element as a local variable so that you dont have to access the array each time you want to reference the element.


                var themeButton:Button = themePlay[i];

                themeButton.width = 60;

                themeButton.height = 60;


                Also I'm not clear as to why you are using an anonymous function as an event handler and then calling another method from that function. I dont think that is related to your issue, just curious.