Dev Center - Desktop >
> 
> 
Reduce Rounding Errors (magenta fringe) on Animated Gif files?

Answered Reduce Rounding Errors (magenta fringe) on Animated Gif files?

  • Monday, April 09, 2012 2:46 PM
     
     
    Sign In to Vote
    0

    Not sure what the way around this is.  My gadget is a flower that opens up on mouseover and closes when not in use (that's the idea anyway).  Every image in the gadget has been inserted into the transparent background file because that was the only way to avoid magenta fringes on everything.  But since animations can't be inserted in the background, the actual transitional animated of the flower opening and closing has to be a gif inserted with a img tag and sure enough it's pink edged :P

    Maybe I should just make the flower pink lol...

    Anyway here's the unfinished closing animation.  It doesn't close all the way but it does contract, though you'll probably have to refresh the page to see that.  If anybody is handy with avoiding pink edges I could really use some tips.  Thanks a lot.

     

All Replies

  • Monday, April 09, 2012 3:38 PM
     
     
    Sign In to Vote
    0

    Actually I should ask this off the bat because I'm already mulling it over.  If I embed say 10 flower pictures in the background and use a series of timed hide/unhide events to mimic an animation would that work?

    I'm sure it would fix the magenta issue but would I be setting myself up for other problems?

     
  • Monday, April 09, 2012 5:03 PM
     
     
    Sign In to Vote
    0

    K, the answer to that is no, it doesn't work.  There's kind of an outline/echo effect when an image is removed from view and it's really noticeable when you try to sequence it like that. 

    So back to the gif again.

     
  • Monday, April 09, 2012 10:27 PM
     
      Has Code
    Sign In to Vote
    1

                      

    The image just looks like it is getting smaller so you could try forgetting about the animated gif.

    Instead try using the initial image you add to the background and scripting the size change.

    Following example uses:
    - a 100x100px flower png that includes transparency
    - a 130x145px background image - this is made transparent by the onload function

    Amazingly you just have to change the width and height for a centered animation

    Anyway, no magenta fringe here and it gives a pretty smooth animation.

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test focus</title>
<style type="text/css">
body {margin:0;width:130px;height:145px;font:bold 12px/14px "Segoe UI";}
input {width:58px;background-color:#555;border:0;}
#bbar {position:absolute;left:5px;bottom:5px;width:120px;}
</style>
<script type="text/jscript">
var bgImg=null;
var t=null;
function shrink(){
 clearTimeout(t);
 if(bgImg.width>50){
  bgImg.width=bgImg.width-2;
  bgImg.height=bgImg.height-2;
  //bgImg.top=bgImg.top-1;
  //bgImg.left=bgImg.left+1;
  t=setTimeout(shrink,30);
 }
}
function grow(){
 clearTimeout(t);
 if(bgImg.width<100){
  bgImg.width=bgImg.width+2;
  bgImg.height=bgImg.height+2;
  //bgImg.top=bgImg.top+1;
  //bgImg.left=bgImg.left-1;
  t=setTimeout(grow,30);
 }
}
function fx(){
 bgImg=bg.addImageObject('flower.png',15,10);
 bg.opacity=0;
 shrinkImg.onclick=shrink;
 growImg.onclick=grow;
}
</script>
</head>
<body onload="fx();">
<g:background id="bg" src="back4.png">
<div id="bbar">
<input type="button" id="shrinkImg" value="shrink" title="shrink the image"/>
<input type="button" id="growImg" value="grow" title="enlarge the image"/>
</div>
</g:background>
</body>
</html>

    You could probably develop some interesting effects by overlaying another image or two and varying their opacity in the shrink and grow functions.
    • Edited by mystifeid Monday, April 09, 2012 10:30 PM
    •  
     
  • Monday, April 09, 2012 10:30 PM
     
     
    Sign In to Vote
    0

    Ok so I've got part of my answer after alot of searching, I added the following CSS code:

      #animation
      {
      filter:Alpha(opacity=100);
      }

    That changed the magenta fringe to sort of a black fringe which I might be able to live with since the transitional image is only on screen for a second or two.

    BUT I have another problem.  For some reason the gif isn't running at the speed it should be.  I change the frame change speed in the editor but it doesn't seem to make a difference, the gif is going slow.

     
  • Monday, April 09, 2012 10:41 PM
     
     
    Sign In to Vote
    1

    Also please check out the other g:image properties you could change in the shrink and grow functions.

    eg rotation, brightness, blur, softEdge.

    • Edited by mystifeid Monday, April 09, 2012 10:43 PM
    •  
     
  • Monday, April 09, 2012 11:02 PM
     
     
    Sign In to Vote
    0

    Sorry didn't see your post right away. 

    The shrinking function you posted might be useful for me, I'll have to experiment.  I did intend however for there to be other stages to the animation that shrinking won't cover.

    My other problem right now is that the gif is running much more slowly than it should. 

     
  • Monday, April 09, 2012 11:19 PM
     
     
    Sign In to Vote
    0

    Other stages ?

    Hard to help just relying on my psychic ability.

    I think your best results will come from using script to manipulate the image/s rather than using an animated gif.

     
  • Monday, April 09, 2012 11:59 PM
     
     Answered Has Code
    Sign In to Vote
    0

    You could also try making every transitional image you need and naming them eg
    flower0.png, flower1.png, flower2.png, flower3.png....
    and then using a function to change the src property of the g:image
    eg if you had 11 images (from flower0.png to flower10.png)

    var t=null;
var bgImg;
var i=0;
function changeImgUp(){
 clearTimeout(t);
 if(i<10){
  i++;
  bgImg.src="flower"+i+".png";
  t=setTimeout(changeImgUp,30);
 }
}
function changeImgDn(){
 clearTimeout(t);
 if(i>0){
  i--;
  bgImg.src="flower"+i+".png";
  t=setTimeout(changeImgDn,30);
 }
}

    In this fashion you could generate any animation. Don't know how smooth it would be the first time - you might have to cache the images onload.



    • Edited by mystifeid Tuesday, April 10, 2012 12:00 AM
    • Edited by mystifeid Tuesday, April 10, 2012 12:08 AM
    • Marked As Answer by Classic_Cool Tuesday, April 10, 2012 2:58 PM
    •  
     
  • Tuesday, April 10, 2012 1:25 AM
     
     
    Sign In to Vote
    0

    Just tried it out of curiousity.

    I used a graphics program to resize the original flower and made 26 images to simulate the same animation in my first post.

    It is just as smooth - even the first time.

    (Hard to be objective though since they are loading off 2 ssd's in raid0.)


    • Edited by mystifeid Tuesday, April 10, 2012 1:29 AM
    •  
     
  • Tuesday, April 10, 2012 3:24 AM
     
     
    Sign In to Vote
    0
    That might solve a few issues, I'll give it a try tomorrow and see how the effect is.  Thanks for the pointers.
     
  • Tuesday, April 10, 2012 3:03 PM
     
     
    Sign In to Vote
    0

    Wow this is working better than I could've hoped! 

    So I inserted the animation with:

        animation=stembackground.addImageObject('Transition_Images/Transition1.png',165,425)
        animation.opacity=0

    And now I can unhide it with an animation.opacity=100 and make it run through the .src images just like you outlined.  No magenta fringes and no weird ripple effects, it's flawless.

    Thanks mystifeid :)

     
  • Tuesday, April 10, 2012 4:00 PM
     
     
    Sign In to Vote
    0

    Glad to help.

    There are a lot of things you could do.

    Don't forget you could unhide (and hide) the flower using the same type of function manipulating the opacity. Then when opacity===100 call the next function.