Flash Exports Bad Quality Animated Gif’s? A Workaround.

The Problem

You may be here because you have made an animation in Flash (in this example it is CS6) and you want to export it into an animated gif.

The problem is that Flash, even when set to 256 colours in the export dialogue window, generates animated gif’s that look like this:

warren_ani_gplus_2

Hey, what’s up with those dots?

The Workaround

To generate a better quality gif you will need a copy of Photoshop. If you don’t have a licensed copy, head over to Adobe and get yourself a trial copy.

Step 1.

With your animation ready, go to Flash and

Click File->Export->Export Movie…
step1_th

Step 2.

Instead of exporting to an animated gif select JPEG Sequence.

Warning: This is going to generate a JPG for each and every frame of your animation, so make sure you create a new folder for your save destination.

Leave all the options to default and set quality to 100.

exportdialog

Click ‘OK

Your JPG frames are generated.

Step 3.

Now, with a folder full of JPG’s, head over to Photoshop and create a new document, make sure it has the same dimensions as your flash movie.

photoshop_new

In Photoshop, with your new empty document open,

Click File->Scripts->Load Files into Stack
step3_th

 

Click ‘Browse‘ in the ‘Load Files into Stack‘ Dialogue, locate your folder and Ctrl-A / ⌘-A to select all your JPG frames, click ‘open‘, click ‘OK‘.

If your animation is long, you may want to brew a coffee now, because Photoshop will now proceed to create a separate layer for each frame.

Step 4.

In Photoshop, once all your layers have been generated,

Click Window->Timeline (this used to be called ‘Animation’ in previous editions of Photoshop)

Click ‘Create Frame Animation
step4_th

 

Now, in the top right corner of the timeline window, click the icon icon,  click ‘Make Frames From Layers‘.

step4_3_th

In theory your animated gif is now ready to go, but you may wish to check two things.

1. Your animation may be in reverse

If this is the case, highlight all your frames in your timeline and simply click icon in the top right of the timeline, click ‘Reverse Frames

2. Your animated gif may play too slow or quickly.

If this is the case, adjust the frame delay values.You may wish to experiment with the values. but if your flash movie is 20fps, set each frame to 0.02, if it is 30fps, set them to 0.03 and so on.

to change the time delay for all frames, Shift select all your frames, click the down arrow on your first frame and click ‘Other..‘, set your value and click ‘OK‘.

Now all your frames have the desired time delay.

The Final Step

To export your new, shiny animated GIF with all the glorious quality options that Photoshop can provide, click File->Save for Web

Select the GIF option in the drop-down menu at the top of this dialogue window.

For the highest quality GIF, adjust your settings as shown below.
finalstep_th

Bye Bye!

warren_ani_gplus_3

 

Tagged , , , | Leave a comment

The Boxies are Back!

I’ve had a long standing relationship with Canadian band, The Boxcar boys. I have worked on their website as well as several of their album cover designs in the past. This year I have done yet another refresh of their website design.

As is often the case, we refresh the website design (which is using the simple Typepad CMS) based on the look and feel of their latest or upcoming album design – In this instance, their upcoming album Cicada Ball.

bcb_typepaddesign-th

The artwork was drawn by fellow band member, John Williams. The final design (having gone through 5 revisions!) was prepared in Photoshop then the HTML/CSS integrated into Typepad.

Previous Work

While we are here, let me also show you the work I did on their previous release, Rye Whiskey.

ryewhiskey-th

I also produced the Rye Whiskey CD packaging, which was a 3 panel fold up sleeve.

ryewhiskey

ryewhiskey2-th

Site is live at theboxcarboys.ca

Tagged , , | Leave a comment

Introducing radiancemanifesto.com!

It’s been a while since I could blog about any web design work I’ve been doing but this month we released a new lifestyle blog into the wild.

Radiance Manifesto is a beauty, fitness, travel and food related blog running on WordPress and using the Hemlock theme at it’s heart.

My role in it’s production was in the branding and customisation of the theme and some basic tutoring on using the back end.

I was keen to make sure my client could use the site for it’s intended purposes in the easiest way possible. Some of the criteria was to be able integrate an existing instagram account, as well as to be able to input recipes in a user friendly manner.

RM Branding

When thinking about the branding I was conscious of the fact that it’s easy to pick the obvious routes when designing something so feminine.

Pink was certainly out, as were curvy hand written typefaces! Whilst those things suggest femininity, they also seemed too obvious and not sophisticated enough for the purposes of the blog.

I think what we ended up with was both sophisticated looking, elegant and aesthetically pleasing, whilst still ticking the feminine ‘box’.

rm_footer_th

The only symbolic aspect of the logo is the use of the asterisk shape to represent the ‘radiant’ part of the title. The philosophy behind the blog is to encourage readers to become the best, most radiant version of them selves through good eating, travel, health and beauty and I wanted this to be present in the logo.

Radiance Manifesto

Radiance Manifesto is now in it’s early stages, but currently live at radiancemanifesto.com

Tagged , , , , | Leave a comment

Easter is Loomin’

And I found this old illustration I did for printed.com in my folder of old pictures. Happy pre-emptive Easter from Wurwal Design!

wurwal-chubbas-egg-with-title-th

Tagged , | Leave a comment

Transform your Small Company’s Literature Today

Here is an example of a recently remade amateur magazine ad, if you are interested in making your ad more attractive, whilst still retaining your identity and getting your message across, click here to enquire.

ca-remake_th

Tagged , , | Leave a comment

Fantasy Graphic Design

Check out my latest ‘Final Fantasy’ inspired piece of graphic design. A fantasy-imagined postage stamp design based on the ‘Moogle’ creatures which inhabit the world of Final Fantasy and often handle the mail delivery system within the games.

5gilstamp_th

Tagged , , | Leave a comment

EHRMAHGERD!

Here is something fun I made over the weekend.

I took a dose of the famous EHRMAHGERD! meme girl and put her on a classic Penguin Books cover.

emg-th

Tagged , , | Leave a comment

Printed Ad for Olney ‘Phonebox’ Magazine

I have delved back into the print world recently with this ad for Milton Keynes based computer/IT company, Counter-Act. This particular ad is for a computer system with a gaming spec, themed to the upcoming Christmas season and aimed for an older demographic to purchase as a gift.

In addition to producing a few of these ads throughout this year, I have also been involved in refreshing the companies logo and brand as well as their website.

I have been working alongside my client and colleague, Warren Niva who has been assisting them with SEO, marketing and social media.

Counter Act IT Christmas offer

Tagged , , , | Leave a comment

Introducing wuffpiepsmiau.at!

I worked with Vienna based graphic design house studio-es.at on this website for a veterinarian surgeon called ‘wuffpiepsmiau’. Through collaboration and liaison we were able to bring a minimalist and functional website to fruition.

Wuffpiepsmiau Mobile

Sites are always tested for compatibility on mobile devices like tablets.

The site has some very specific formats when it comes to page navigation and reading blog posts. I was also able to address some very bespoke functions through the use of custom coded jQuery. Animal language website text translator anyone?

wuff_th

Site is live at wuffpiepsmiau.at

Tagged , , | Leave a comment

‘Traum Entlein’ short animation

It’s been almost 10 years since I made this animation at university. Although I find it hard to watch these days (the pacing is very slow and the plot isn’t very clear) – I am proud of some of the shots in this.

It was also because of this that I won a copy of the full Creative Suite software from Adobe (the prize for best animation final year project) and can do my freelance work with it today, albeit after a few software upgrades.

Tagged , | Leave a comment

Austin MEGA DO 2015

Back in 2011 I helped build the website for an annual event called the Austin Mega DO, based in Austin, Texas. The event is held for frequent travellers and those who are interested in travel. This year we gave the website an overhaul with a new, more up to date design.

megado15_th

Site is live at ausmegado.com

– Thomas Wurwal

Tagged , | Leave a comment

“DrumZcool” branding

Check out this logo I made for a Gosport based drum tuition teacher.

drumzcool logo

In addition to this, I took the logo and did a basic custom WordPress theme and Facebook page branding (see below).

Starting a project like this with me is an ideal way of getting a quick, budget-friendly first step into web presence for your company or brand.

If you are interested in getting similar work done, feel free to contact me.

web_th

fb_th

Tagged , , | Leave a comment

Twitter rebranding

With twitter changing it’s branding format recently, I was asked to come up with a custom twitter design for this document management company. More detail to come on this soon.
readsoft-th

Tagged | Leave a comment
footer TipsPassions Website Portfolio Illustration Portfolio Graphics Portfolio View My Blog Project News