Thursday, December 2, 2010

Make swf without flash

As I am currently a Flash Builder only guy, I have run into some serious issues creating animations for my game. I started by using animated gifs, and quickly dumped those due to quality. If you're going to embed good-looking animation, it pretty much has to be a swf file. This is especially true if you only want certain bits to repeat indefinitely or want your animation to stop instead of repeat.

So I searched for tools that could help me out. I found mostly crap ware sites that wanted $30 for a thrown together tool that converted gifs to swfs, or swfs to flvs, or just about anything except making simple swfs from pngs. The only affordable tool (this dismisses Flash cs5) I could find which looked half decent was KoolMoves. The demo made it seem like a lite version of flash - but used only for simple animations, and very simple actionscript. About the time I was reaching for my credit card I stumbled across this, SWF export for Gimp. My wallet was saved! Since Gimp is my primary graphics tool, all my animations were ready for export. I needed python installed for the plug-in to work, so I booted up Ubuntu and got to it. The plugin worked great (after installing the swftools), and I was on my way.

Some time later I realised that I couldn't get Flex to control my animations. I couldn't stop, rewind, or effect the timing in any way. This became a huge problem and something the plug-in couldn't help me with. Even if I were able to stop the animation, the timing wasn't working correctly and my more intricate animations looked the worse for it. It burned me that all I seemed to be missing was the ability to stop and control time. (super-villians be damned) So instead of giving up and going for the Kool Moves option, I looked into what the gimp plugin was doing behind the scenes. God bless the linux command line and open source, it was only really using the swftools in a very predictable way. jpeg2swf to be exact. So if I could just get the tool to put a stop or loop or something in animation I would be golden.

I found another gimp plugin that lets you export all your layers as pngs, Export Layers Plugin. Using this I exported my animation and figured out the syntax for png2swf. But still, I found no mechanism for stopping. Apparently people only ever want to make infinitely repeating animations. Well, fair enough, it's not what I want though. I dug a little deeper and found swfc. It's part of the swftools package, and allows for animation building from simple(ish) script files. Huzzah! I finally hit the motherload. It took quite a bit of finagling and some guesswork, but I was able to adjust my animations and get the result I wanted by using swfc.

The workflow would go like this:

1)Make a folder for the animation and export you animation layers into the folder
2)Make a swfc script and save it in the same folder. I suffix my animation scripts with .swfc
3)Run >swfc scriptName.swfc
4)Enjoy your delightful animation!

The scripting language is sort of straight forward. I was able to divine the functionality I needed from the the scant examples I found and the poorly established manual. Oddly, very few examples showed how to make a simple animation with things like stopping and timing, most were focused on far more complicated topic like scaling,translating and other tweening transformations.

The most curious problem I ran into was that Flex did not respect the fps set in the swfc script. So the timing worked in Firefox, if I loaded the raw swf, but did not work if I loaded it into my flex application. To overcome this, I went with whatever framerate Flex decided to impose on me and increased the space between frames to make the timing work.


Another problem I needed to solve was how to create sub-animations within my animation. I solved it by making a sprite (in this case called 'poop') and referring to that in my main animation. I'll include that script as my example.


.flash filename="esoStealAnim.swf" version=10 fps=12 change-sets-all="yes" background="white"

.png s1 "1.png"
.png s2 "2.png"
.png s3 "3.png"
.png s4 "4.png"
.png s5 "5.png"
.png s6 "6.png"
.png s7 "7.png"
.png s8 "8.png"
.png s9 "9.png"
.png s10 "10.png"
.png s11 "11.png"

.sprite poop
.frame 1
.put s3
.frame 3
.del s3
.put s4
.frame 5
.del s4
.put s5
.frame 25
.del s5
.put s6
.frame 27
.del s6
.put s7
.frame 29
.del s7
.put s8
.frame 31
.del s8
.put s9
.frame 51
.del s9
.put s10
.end

.frame 1
.put s1
.frame 3
.del s1
.put s2
.frame 5
.del s2
.put s3
.frame 20
.del s3
.stop
.put poop
.play poop
.end


So far swfc has done everything I need it to, I have a feeling I will be getting a lot of use out of it in the future.

Peace!

1 comment: