Solved

Annimated gif challenge with transparent layers.

Posted on 1998-10-18
24
398 Views
Last Modified: 2011-05-23
I am trying to get a transparent frame to overwrite a transparent background layer.  Go to "http://www.maidpro.com/new/index.html" and see the graphic we are trying to get to work.  The larger one is the one I want to get working.  The smaller one is just 6 frames overwriting each other.  This approach creates a file that is too large and the colors are hard to match with the outlying bubbles.

For the first person that can solve this, there is $50 in it for you.

Sincerely,
David
0
Comment
Question by:1stomni
  • 10
  • 8
  • 2
  • +3
24 Comments
 
LVL 1

Expert Comment

by:Timbuk3
Comment Utility
hmmm..... i've looked at the site and i'm not sure exactly what you're asking... what do you mean by "get a transparent frame to overwrite a transparent background layer"  please discribe exactly what you want the final appearance to be, in terms of overall page as well as the image(s) in question.

i think what you want is the background splash image to be over written by the animated text.  The idea being that the text image would not only write on top of the spash, but would also make the tiled background image appear.  Is this correct??

Also, please discribe the formating restraints, like can we use CSS (would require Netscape 4.0+ or IE 4.0), javascript, java applet, etc.  Thanks.
0
 

Author Comment

by:1stomni
Comment Utility
Your second paragraph describes what I want.  I want it to be a annimated gif, not javascript, applet etc.

Thanks
0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
   Do it the other way round.  First build a reference frame something like this:

         --------'---'--------
         |                    |
         |                    |
         -                    -
         |                    |
         |                    |
         -----'--------'-------

     Of course with a graphics app the lines may be solid or whatever you like.  Save this as a master.  Next build two images, one with the suds in the frame and one with the text.  Once you get them adjusted to your liking save each file.  Now you can superimpose them with the same placement using the reference frame.  On the suds image draw some temporary lines to ensure exact repeat of the wipe path.  Most apps have some way of doing this.  Erase enough of the suds to show the first letter.  Make the background transparent and place this image over the text image using the reference lines.  Save the result.  Do the same for each letter you want to show.  When you are satisfied, erase the temporary lines controlling the wipe path in each image.  Erase the reference frame on each image and make the background transparent.  Run the resulting images through you GIF animator and you're done.  Depending on your system and graphics app, this may be tedious; but it should work in any decent program that I am aware of.
0
 

Author Comment

by:1stomni
Comment Utility
I have read your answer and am not sure you have proposed anytning that we haven't already done.  The larger graphic you see was done in the fashion you describe (If I understand you correctly).  The problem is that each new frame which is transparent can not overwrite the transparent first frame.  The background image mus always show through the image.
0
 
LVL 1

Expert Comment

by:Timbuk3
Comment Utility
1atomni....

i think chewyman struck the nail on the head as to how to do it.    Maybe we're reading it differently, but the way I see it, chewman's method solves the problem in exactly the manner you desire...  i'll see if I can pull something rough together so you can get the idea, but credit goes to chewy...
0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
If you are worried about the text showing through instead of the background, do this.  In each case erase alll the text except what you want showing.  Next make the text image background transparent.  Create the suds image needed to match that portion of text and make its background transparent.  Overlay the text image with the suds image.  If you are using truly transparent gifs, the page background will always show through whereever there is a whole in both images.  You end up with a series of gifs that appear to be overlays, but are actually single images.
0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
Sorry.  Its early.  That should read "wherever there is a hole..."
0
 
LVL 1

Expert Comment

by:rakkas
Comment Utility
As you've done It now, the text 'MaidPro' is drawn from left to right above the background splash. Just think backwards; make the _finnished_ frame (background splash with text, just like the smaller pic on your site) and use it as the "background", then animate the foam on top and make the foam 'go-away' from left to right. The foam's size just have to cover the text behind so the whole animated gif won't be any bigger.
0
 

Author Comment

by:1stomni
Comment Utility
I don't know, mabye I am not understanding what you are writing, but it appears you are saying to have each frame to be a full frame and not just the changing part changes.  The bottom/smaller annimation on the page does exactly what I want, it, it replaces each frame with another that has some of the foam missing.  The problem with this approache is that because each frame must be replaced in full, the file size is too large.

If you open up the larger one in an gif annimator you will see that the only portion changing is the small box of suds that is removed.

Mabye you have explained what I need to do, but I am not seeing a solution to my problem.  Mabye you could give me a call at {removed by_alias99}
0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
    It might help if you gave some idea of what size file you think is appropriate.
0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
    If you go to www.lewistown.net/~hallford/test/test.html  you will see a working draft.  The animated gif is 30.5 KB.  Obviously, a finished product with smoother edges will be a little larger.  If this file is still to large, I am out of ideas.
0
 

Author Comment

by:1stomni
Comment Utility
Thanks, I really appreciate your attempt to solve this, but it still looks like we haven't accomplished a solution.

If you look at your file every frame is 150x75 which basically overwrites each frame completely.

If you look at the top annimation on my site (test.gif) the first frame is 411x218 and each frame after that (which contains only the changing parts) is 64x76 or very close to that.

The bottom animation, splash2.gif, the first frame is 234x60 and each frame after that is the exact same size overwriting the previous frame.  This is exactly the same as what you have done.

What I was hoping for is, to be able to get the test.gif to work with a different approach to the disposal method or something.  It is easy to just overwrite each frame with the other, the challenge is to get it to work frame optimization and only have frames the size of what is being changed.

David
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:1stomni
Comment Utility
Thanks, I really appreciate your attempt to solve this, but it still looks like we haven't accomplished a solution.

If you look at your file every frame is 150x75 which basically overwrites each frame completely.

If you look at the top annimation on my site (test.gif) the first frame is 411x218 and each frame after that (which contains only the changing parts) is 64x76 or very close to that.

The bottom animation, splash2.gif, the first frame is 234x60 and each frame after that is the exact same size overwriting the previous frame.  This is exactly the same as what you have done.

What I was hoping for is, to be able to get the test.gif to work with a different approach to the disposal method or something.  It is easy to just overwrite each frame with the other, the challenge is to get it to work frame optimization and only have frames the size of what is being changed.

David
0
 
LVL 1

Expert Comment

by:rakkas
Comment Utility
Ok, make the first frame (the big one) with a transparent box-area in the middle. Then make the other frames as small as the transparent area and put them ontop of that area. Then do as I told you in the earlier answer. Ofcourse this would make the first fram show upp with a whole in it and then (from fram 2 and forward) animate properly....BUT cant you set which frame the animation will start with or at least from wich frame it will loop from. Am I completely lost now? (It's early in the morning and the lights are dim over here) :-)

0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
   I don't understand the reason for your objection.  You said you needed a smaller file size, which my method accomplished.  Are you looking for a final result or determined to do it with a certain method?   There is a reason that most animated gifs are done either with frame replacement or cutting up the animation as you did in your smaller version.  It is more efficient.  If I understand what you are trying to accomplish, you may have to consider DHTML animation.  However you stated it must be an animated gif.  It might be that your desires are unreachable within the original parameters.
0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
  After some more thought I think what uou are asking is impossible in gif format.  You want to make part of the background layer transparent.  However in gif89 format, you can make only one color transparent.  Your suds gif is multi-colored. Therefore, the only way to make a section transparent is to change that section to one color, which implies frame replacement.
0
 

Author Comment

by:1stomni
Comment Utility
It is not that I am determined to use a certian method, it is that I want the file to be as small as possible.  I knew that I could replace each frame completely to accomplish my goal. the splash2.gif on my page was done exactly like this.  I want to try and get it to work with frame optimization....only replace the small area in each frame. My fear was that this was not possible also, that is why I posted the question.  I will give you the points if no one else can answer within 1 week (for your attempt), but not the cash for you haven't come up with a solution.
0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
   Sounds more than fair to me.
0
 
LVL 4

Expert Comment

by:chewymon
Comment Utility
    Along the lines of optimization, just remember that the size of the image is directly related to the size of the file.  That is why the draft I posted is 150X75 pixels.  When you force the display size with the height and width attributes, you do slow down the loading some, but not as much as loading a large image.  As an approximation, if you double the image size, you quadruple the file size.  I have played with this and it is a challenge to get the image as small as possible with as high a dpi as possible that will not distort when it is expanded by the browser.  Good luck, and if you find another solution contact one of the software companies, sell it and make some money.
0
 
LVL 1

Expert Comment

by:Jason_G
Comment Utility
Hi 1stomni,
Why not try using vector based graphics, possibly using flash, very small, very easy, very animated.  Could be exactly what you need.  http://www.macromedia.com/software/flash/

With the flash editor you can import your existing graphics as well, and the learning curve on this product is next to none, so check it out.

I hope you get the results you're looking for.  BTW: Nice graphics!

Sincerely,
Jason
0
 
LVL 2

Expert Comment

by:johnny99
Comment Utility
Can I get an update on this question please?

When I go to your site, I see a nice animated gif, "splash.gif", which starts off transparent, animates the wiping off of the soap to reveal the text, and when it's finished, is still transparent.

What's the problem? I've read the history of this question and I must admit I'm confused. You need a transparent animated gif where successive frames follow each other and still remain transparent? That's what you've got! Do you just want it smaller, or have you solved the problem and not told us so?
0
 

Author Comment

by:1stomni
Comment Utility
Johnnyy99,

The graphic you see on the page now is the finished version of what we are trying to do.  We have basically solved our problem by including the background tile in the small frames in order to overwrite the previous bubbles and keep the first large frame transparent.  The trick was getting the small marble in the annimataion to align with the background tile image.  We were able to get the size to 22k, and I think I can get it smaller if I tweek it. Any way, we accomplished our goal and I appreciate everyones help.  Chewymon, please post a answer so that I can give you the points.

David
0
 
LVL 4

Accepted Solution

by:
chewymon earned 500 total points
Comment Utility
When you get it done send me the URL so I can see the result.  rhallford@zdnetmail.com  I am corresponding with a gentleman in Britain who's hobby is paintball and optimizing animated gifs.  He sent me one that is 3+KB.  I should have the page up this weekend.  www.geocities.com/SiliconValley/Peaks/8601  It will be listed under Badger's Page.  Can't give you the URL because it is not up yet.  If you like what you see, let me know and I will contact him to see if he is interested in working with you.  Might be helpful for you in your website design and helpful for him in building customers for something he loves doing.
0
 

Author Comment

by:1stomni
Comment Utility
Thanks you cheweymon for your help...and everyone else too.

You can view the image at "http://www.maidpro.com/new"  It will be at "http://www.maidpro.com" as soon as it goes live to the world.

Please send me the url of what your friend in Britain has done, I would love to see it.

Sincerely,

David
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now