Remove white background from Flash file (see attached)

Jul 28, 2011

Hello,

I have a number of GIF's that I have converted to flash.  Is there a way to remove the white background and make it transparent?  I want to add them as a Flash Object so I can retain the animation.

I have attached the SWF file and the original GIF.

Is this possible?

Cheers,

Dave

24 Replies
Stefano Posti

The simple point is: How did you convert the GIF files?

I just converted yours, and it is absolutely transparent. All I had to do to make it loopable was to adjust the states to the "Forever" option before saving th gif as a SWF file..

Do you know what GIF States are? they're just the "frames" of an animated gif.

You should treat animated gifs with proper software in order to have good quality results; general conversion tools cannot retain meny attributes, like tramsparency, single state attribute etc.

we use Adobe Fireworks for this kind of stuff. Fireworks is perhaps the best PNG software on the market, and PNG, like SWF, are so important to elearning made by Articulate...

I attached the swf you need.

Hope it helps!

Dave Newgass

Hello Stephano,

Thanks for the help with this.....

I inserted the converted GIF and published it...it worked like a charm!

I was nervous at first because when I first imported it into the slide, it still had a white background, but once published, it worked great.

If I get Fireworks, is it an easy process to convert these?  What settings would I use?

Thanks for your efforts!

Dave

Stefano Posti

Hello Dave,

Using Fireworks, you just have to open the animated gif files, and Save them as Flash files;

I suggest, anyway, to try to insert each generated flash file into your slide and preview it; this because the simple "save as" option could retain only 1 cycle of states (in your example, tha man only takes two steps and then he stops); if you need loops, do the following:

  • Open your animated gif file with Fireworks;
  • Click on the Menu -> Windows -> States
  • There you could set milliseconds for each states, duplicate states, etc.... the important is to click on the looping arrow and set the looping to Forever, or 10, 20, whatever you need.
  • Save the file as a Flash file.

You're done. 

cheers

Stefano Posti

Hello Dave,

you can slow down or speed up your gif changing the milliseconds delay of each state:

Take a look: if you right-click a state and then select Properties 

You will have a box where you can set the delay!

The pixelated edges could be  a resolution issue... check your export options and don't resize your flash file too much when you insert it into your presentation.

cheers

Dave Newgass

OK...got that one now.  My brain is getting bigger, I can feel it.

I have a GIF that has 50 'states' (is that the right way to say it?).  It is set at 15/100.  If I want to slow it down, do I increase the number?  is there a way to make them all the same at once, or do I have to manually set the delay?

Thanks again for all of the help!   You're  a star....

-Dave

Stefano Posti

Yes, if you increase the delay, you slow down the specific bit of the animation....

If the AutoCrop and AutoDifference options are not checked, you're free to change each state delay (There's not an option to change them all);  but if you need to slow down the whole animation, is simple: when you Save as.. SWF file, click the Options button: in the Flash option window, you can set the State rate! Try to play with numbers and see what speed you get (if you increase the state rate, you increase th speed, and then you have to see the result in your Articulate slide preview .

Unless you want to calculate flash rate considering the gif frames and the delays....

Just go and try, the best thing!

Dave Newgass

Hello,

I am stuck on this one.  I am trying to loop this flashing green light that I saved as a .swf using Fireworks.  I have attached an Articulate Package if somebody can take a look.

What I have done is attempted to use Fireworks to convert a .gif file to an .swf file.  I need to animate to loop and flash at a rate this seems natural.  I have tried several times, but can't seem to get this right.  It just won't loop!

The first screen is an flash conversion from the website I downloaded it from.  The reason I don't used that is because the background is white.  The second screen has a transparent background, but does not blink like I need it to.

Any ideas or help would be greatly appreciated!

Cheers,

Stefano Posti

Dave, did you try to overset the number of times changing the value of Looping attribute in Fireworks? try to set a "20 times" value, for instance, if it's currently set on "loops forever"...

take a try...

or just attach the original gif file so that we can try to convert it with flash, if fireworks is not giving the wanted result...

cheers

Dave Newgass

I'm not sure what I did or what I am doing! LOL.....

I tried to set the rate to 20 but it still does not cycle through the states. 

Here is a SCREENR of what I am doing to see if you can pick out where I am going wrong.  The last part of the SCREENR shows that the GIF flashes when I preview it.

SCREENR

I have attached the GIF just in case.... 

Thanks for all of the help Stefano.  If this forum had a 'rep' system, I would click it for you.

Cheers,

Dave

Stefano Posti

No Dave, forget AS3 now,

it's a matter of fps (frame per second);

Let's proceed :

Articulate flash content runs at 30 fps; although you might change this value, I would NOT suggest to change it, ever; it's the standard framerate good for fast and slow PCs.

First of all, you didn't see tha looping because when you inserted your flash in the slide you didn't choose the IMPORTANT OPTION (in this case) "Movie plays independently of slide"; You should always consider this option with animated gif-flash looping objects...

Second: Fireworks thinks in "States per Second" and when saving to flash, the option translates to Flash FPS; but it's quite a low framerate, and when I tried to insert the correct Flash file, the upspeeding to 30 fps caused a too fast blinking;

then I imported the states in flash, working in native mode 30 fps, and then it's easy.... you simply move keyframes to decide, and then export your flash.

then I imported the states in flash, working in native mode 30 fps, and then it's easy.... you simply move keyframes to decide, and then export your flash.

I attached a ZIP file with everything you need.

Anyway, find some time to take seriuosly EVERY tutorial posted in the community BLOG, even when it seems not relevant to your work... this is my suggestion before going on vacation... Jeanette, Dave, Tom, are so great, and have faced thousand of issues and posted how to deal with almost all Articulate Studio features....

Bye!

Dave Newgass

Hey Stephano,

There is a light bulb that is starting to flicker now.....


I have read and re-read your post and also looked at the files yoyattached. Do I understand this right that you have performed some editingusing Adobe Flash or are all of you edits being performed in Fireworks?


I am now able to get the looping action after your pointing out the wrong setting I had. Now I need to nail down the speed of the animations....


Cheers,


Dave






Marti Stemm

Dave,

I wanted to suggest that is you buy fireworks and want an inexpensive way to learn to use the software you might try Lynda.com training courses.  The site offers hundreds of training courses including all of the Adobe suite (Inclucing Fireworks) for only $25 a month.  or $250ish a year unlimited courses and use. 

My company has provided this for me each year, and I use it as a "I forgot how to", or a "teach me how to" resource.  It is one of the best software training deals available.  I am a corporate trainer full time, but a college instructor part time.  The collage IT department put me on to this resourse several years ago.    If you only used it for one month and 25 dollars you could get all the Fireworks info you want, and unlimited other stuff too for that month.    I love values.  :&lt

Stefano Posti

Hello Dave,

Yes, I used Adobe Flash . in the zip you can find the source file, and the greentrafficlight.swf files that I published at 30 fps.

If you insert the file I made, you will see the difference...

Using fireworks you will have to work quite a lot to slow down your animation! If try to increase state delays to huge values (800/100, 2000/100) in fireworks the resulting flash file seems not to work properly... it gets too hard to "translate..."

stefano

Dave Newgass

Hey Stefano,

Thanks for all of the help....my trial is still downloading at the moment.  With that being said, I will take a stab once it's completed.  It sounds like I can cut Fireworks out of the equation...(assuming I can import the animate GIF)

Your example is exactly what I am after, so at least I know it can be done.

-Dave

Stefano Posti

Hey, you will need a software for graphics, anyway...

try to import your gif in flash and you will have a surprise... one of the gif layer is rendered for compression, and you will say "Oh no it's spoiled!" but it's not.

And then Flash is quite complicated, if you're not used to.

If I were you, I would simply: Copy each frame of th gif files (using fireworks, you can visualize each state, ok?), and paste into your PPT slide; then, you use POWERPOINT ANIMATIONS! much simpler, uhu! In your case, it's quite simple...

Stefano Posti

Hi Hasan,

the problem in your flash file is that each frame contains a non trasparent bitmap; the white background is not the flash stage background, is just part of each bitmap...

What I had to do was to edit the animated gif in Adobe Fireworks and clean the background of each state using tha magic wand tool.. find the gif enclosed.

So, when you have bitmaps, you have to manually clean background... no tool perform automatically chroma key...

I want to try with Ms Powerpoint 2010 and animated gifs....who knows....

Stefano Posti

Hi Hasan,

if you open the .gif, clear the backgrounds of each state, and then just save you should have your gif ok.

Otherwise, if use the save as animated gif , the defautl option for transparency is "No transparency"; you have to set it to alpha transparency.

you can correct the walking assigning delays to the states, and moving a state up or down to have a correct pace.

cheers

This discussion is closed. You can start a new discussion or contact Articulate Support.