How to create a transparent annimated gif or flash swf file

I am trying to create a transparent graphic - i could do it through ann gif or flash swf -
in flash (CS3 I have done - publish settings - html - window mode - transparent  -

doesnt seem to work - its a simple graphic - a ball going from one side to the other - all i can get it the white background as a rectangle -  
nathan1038Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

prunckleCommented:
Do you have Fireworks CS3?  To create an animated gif just create the image you would like (the ball) in frame one.  Make sure to go to canvas color and select transparent.  Go to the Frames Tab and add duplicate frames, continue to add frames until you have the animation image series complete.  Select the loop option and set the amount of looping you would like.  After you have the file saved, goto File ->Image Preview and in the export options, select animated gif.  Choose the matte as transparent (the white box with the red line through it.  Save the file as your intended filename.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
prunckleCommented:
If you're attempting to make the background transparent in your flash file, it sounds like you're doing everything correctly.  However, you may want to specify a background color of your chosing to display below the flash animation...this would probably be the same color as your page background.
0
ZefferCommented:
you have to put the swf over something..
open the html file and add a background picture..eg
</head>
<body bgcolor="#ffffff" background="feather1.jpg">

then it works
http://www.redpearl.co.nz/eeOne/transparent.zip

Z
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

prunckleCommented:
Here's the code I used for the animated gif w/ the file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body bgcolor="#FF9900"><img src="../LPRFC IFrames/images/bitmap/Untitled-1.gif" width="200" height="100" />
</body>
</html>

Open in new window

Untitled-1.gif
Untitled-1.png
0
nathan1038Author Commented:
hi there guys - Ok - let me explain a little further - I am using a program called adobe captivate - and camtasia ( but lets stick with captivate for now ) it produces swf files for training purposes - so you can import annimations  swf's anf flv's - but when i try and do this i cant get it to be transparent, yet I know it can be done becasue the gallary options inside captiate give you swf files like moving arrows - so this is what I need to know
0
prunckleCommented:
Nathan,

Okay...I think I may have figured out the issue.  First off, I have to admit that I'm a bit ignorant when it comes to captivate and camtasia....but I'll assume that you're looking to embed these movies in HTML, correct?

My guess is that you're missing the following "param" for your .swf file:
  <param name="wmode" value="transparent" />
That allows you to render the swf file as transparent in the document.

Scot

P.S.  Below is the HTML embed code for a few local example page I put together....I was going to attach the associated files as a .zip for you to look throught, but it looks like .zip isn't supported.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample animations</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
 
<body bgcolor="#FF9900">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','195','height','150','title','Sample Rollover 1','src','rollovergraphic','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','rollovergraphic' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="195" height="150" title="Sample Rollover 1">
  <param name="movie" value="rollovergraphic.swf" />
  <param name="quality" value="high" />  
  <embed src="rollovergraphic.swf" width="195" height="150" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object>
</noscript>
 
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','195','height','150','title','Sample Rollover 1','src','rollovergraphic','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','rollovergraphic' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="195" height="150" title="Sample Rollover 1">
  <param name="movie" value="rollovergraphic.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
  <embed src="rollovergraphic.swf" width="195" height="150" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
 
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','195','height','150','title','Sample Rollover 1','src','rollovergraphic','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgcolor','#00FF00','movie','rollovergraphic' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="195" height="150" title="Sample Rollover 1">
  <param name="movie" value="rollovergraphic.swf" />
  <param name="quality" value="high" /> 
  <param name="bgcolor" value="#00FF00" />
  <embed src="rollovergraphic.swf" width="195" height="150" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#00FF00"></embed>
</object>
</noscript>
</body>
</html>

Open in new window

0
nathan1038Author Commented:
Ah, thankyou so much for that answer there pruncle - but inface I am not importing the swf / ann gif into a html file - but into the wf made by captivate -

What I did try was opening the source code for one of the swf arrows - getting rid of the arrow and replacing it with my own graffic - ofcourse, it worked. unfortunatly I cant post the sfw of fla here becasue that file is not supported -

0
prunckleCommented:
Hrm...lemmie ask one of the moderators on here if it is a violation of the terms to try and post an unsupported file type?
0
prunckleCommented:
Nathan,

Can you get at any of the Captivate code where you import/embed the flash file?  Technically if it allows you to use any parameters, it might circumvent the issue you are having....

Just out of curiosity, when editing the .swf source - say for the arrow - did you just remove the background?  Or replace it with one that matched the background in Captivate?
0
nathan1038Author Commented:
Ok go to

http://www.4shared.com/file/37754713/c508e5f9/down.html

you should be able to download the fla source file frm from there - how does captivate import swf's - its all done for you, you click - insert annimation and it will appear on the stage -

I picked this up earlier today :

Flash objects (SWF) and animated GIFs must have a solid color designated as the "transparent" color in the object itself.  Captivate reads all objects as bitmaps (as opposed to vector graphics), and checks the color designated for the top-left-corner pixel in the image.  It is that color that will be treated as the "transparent" color in the object (image).  Which means, simply, that Captivate will treat that specific color (RGB or HEX) as transparent anywhere it is found on the object.

So the bottom line is, transparency is determined at the time the SWF is originally created, it is not something you can "set" once the object is brought into Captivate.  Most images  that are to be given transparency attributes will be created on a "background color" that is sure not to be found in the image itself.  For instance, a fuscia, or bright pink is a good color for the background, because it is unlikely that most images will contain colors like those in the actual image.  A rule of thumb is, the uglier the color of the background, the more likely it will be successful as a "transparent" color.  Of course, the downside to that is that if transparency is not selected, you have one very ugly image background. ~grin~

To summarize, there is no setting you can make inside Captivate (other than choose "Transparency" on the object Properties dialog) that will make a non-transparent image, transparent; that has to be done with the creation of the image itself.  Hope this is some help, if not comfort.  
0
prunckleCommented:
Nathan,

Sorry for the delay....so the project you are working on in Captivate - does it have a gradient background of some sort that necessitates the transparent animation background?

Ah, yes, I remember the good old days of using #00FF00 backgrounds on my gif images so I could export them as transparent....  I will investigate the link above.  I hope that all is going well with the project and that the .swf backgrounds don't have you tearing your hair out.
0
nathan1038Author Commented:
Hi prunckle - let me put it like this - with the arrow swf at the above hyperlink, you can place it over anything you like - text - images, a rainbow - and the user will only see the arrow , e.g. in front of the rainbow -
not a rectangle showing the total size of the arrow as a movie clip -

Tell me if you were successful in downloading the file and using it in flash - if so - have a look at it for me - and then note what I said above - (picked up earlier today) becasue that's what I need to do - I just need some help doing it
0
prunckleCommented:
Nathan,

I was able to download the file and open in Flash without problem.  I've uploaded two new .fla files with a contrasting background color (#00FF00) for you to view:
http://www.4shared.com/file/38001780/99b03019/down-greenbgCS3.html and
http://www.4shared.com/file/38001780/99b03019/down-greenbgFL8.html

I'm currently downloading and installing a trail version of Captivate to see if I can't help you circumvent this issue....
0
nathan1038Author Commented:
that's very nice of you prunckle, but I think you may have sorted it - it was quite simple - use a background colour that matches nothing in the video - and job done - now Im going to leave this question open for your reply just incase you find something or what ever - but thankyou so much for your help
0
prunckleCommented:
Nathan...no worries.

I haven't come across anything just yet, but will let you know if I do find something.

Best of Luck!
0
ZefferCommented:
Recommend PAQ with 500 points to Prunkle..see post from nathan1038 just before your's Vee_Mod.. "but I think you may have sorted it".
Z
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.