www.webdeveloper.com
Results 1 to 7 of 7

Thread: Animated GIF and Transparency Trouble

  1. #1
    Join Date
    Sep 2003
    Posts
    11

    Animated GIF and Transparency Trouble

    I am pulling my hair out.

    Lets say I have an Image which is a white circle on a black background.

    I am going to place on a page that has a black background.

    I save the file as a GIF file and set the Black area to transparent. I could just save as solid and would still just see a white circle either way if I place on my page with a black background and I was not going to animate. I am making the black transparent as I am going to "animate" teh white region only.

    Now I open in Image Ready to create an animated GIF. I create another layer which is 100% transparent and then create my animation with two frames. The first is the 'white circle' image and the 2nd is the all transparent image. I tween say 10 frames.

    I save this image and place on a page.

    I expect that what will happen is that the white dot will slowly disappear. But what happens is that the white dot just stays on the screen and does not "disappear". The animaton previews fine in Image Ready.

    I remember reading somewhere that maybe a previous image does not get replaced (refreshed) when an animation occurs unless....

    Please help and I will be glad to share a URL with anyone willing to explore this with me.

    thanks - dan
    Last edited by chipper3; 03-01-2004 at 09:08 PM.

  2. #2
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Did you make each layer invisible after selecting the next frame?

    [J]ona
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  3. #3
    Join Date
    Sep 2003
    Posts
    11
    I started with a White Circle on a transparent background.

    I duplicated this image to create frame 2.

    I modify this 2nd image by making it 100% transparent.

    I then Tween bewtween frame 1 and frame 2. The preview in Image ready works fine. The Explorer preview in Image ready DOES NOT run but just shows file info in the browser window .

    I save optimized as HTML and Image.

    I run the new page in Dreamweaver and All that happens is that I see the original image and NO animation.

    dan

  4. #4
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Did you save it as a GIF file? JPEG's cannot be animated. Other than that, you might be only saving one frame instead of all of them together. That's the only thing I could think of...

    [J]ona
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  5. #5
    Join Date
    Mar 2003
    Location
    Escondido, CA
    Posts
    998
    Originally posted by chipper3
    I run the new page in Dreamweaver and All that happens is that I see the original image and NO animation.
    If you are only previewing it inside of DW, I don't think you will see animation. You need to preview in a browser.
    Computer Zen:
    Program aborting
    Close all that you have worked on
    You ask far too much

  6. #6
    Join Date
    Sep 2003
    Posts
    11
    DW allows you to Preview in the browser of your choice to "check it out."

    I am starting to beleive that the problem is Associated with some type of transparency "mismatch."

    So instead of flogging this, let me start over and state what i want to do. Maybe starting from scratch will develop a better solution than fixing this mess.

    I want a web page that has a black background. I want to place on that page a Logo that is white on black. Then I want that logo to dissolve to all black and "disappear." I do not want the black backgound of the logo to dissolve as the white dissloves and spoil the effect - I just want teh white to dissolve from white to black.

  7. #7
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Logo? I thought you said it was a circle.

    Anyway, it would be the same concept. On the first frame, have the logo. Then select the second frame, duplicate and hide the original layer, create a new layer, fill it with black, set its opacity to 40%, press CTRL+E to merge the layer with the duplicate of the original layer. Repeat, increasing the opacity until it is black. Then reverse it to go back. Shouldn't be too hard...


    [J]ona
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles