Pardon me while I geek out again. This particular article falls under the, "look Ma, no hands" category, a shameless play for adoration of my cleverness. What I’m about to show is neither new nor terribly beautiful, nor cost effective for most professional flash designers and/or web designers.
It’s just cool that it was done procedurally and entirely on Linux. First, another caveat; I absolutely do not get these animation tools with their tweening, paths and visual interactions for creation of animations. For some reason, when I animate my stupid brain sees a stack of cells, straight up and down. I see the frame changes like a flip book. If I try to abstract an object in the animation into some sort of mathematical formula, line, path, or whatever, my little pile of gray matter goes all slushy. Also, my brain likes to see things in text. I know, I know, what’s the matter with me? I don’t even see the code. All I see is blonde, brunette, red-head. Chuckle.
Here’s the finished product: www.og-consulting.com
The door scene modeled in POV-ray scene description language and is typical of Old San Juan, Puerto Rico Spanish Colonial architecture. The real doors are beautiful. If you ever get a chance to take a cruise from/to Puerto Rico, don’t miss the chance to walk around Old San Juan (El Viejo San Juan) and check them out. I rendered three frames with the doors rotated from 0 to 75 degrees to simulate… guess what? Opening doors. Clever, huh?
There’s a lot of POV code, here’s a little bit of what it looks like:
cylinder { <0, 0.5, 0>, <0, -0.5, 0>, 0.5
texture {
pigment { color rgb <0.6, 0, 0> }
normal { granite 0.02 turbulence <0.5, 0.9, 0.2> scale 0.25 }
finish { specular 0.1 reflection .1 }
}
}
It’s pretty simple. You place objects in an X-Y-Z space (Cartesian coordinates) like a sphere, cylinder, box or any other of the predefined primitives. You can merge them, subtract them, intersect them in creative ways. Finally, you apply some sort of texture which includes a pigment, a surface (normal), and a finish (reflections effects etc). There are easier ways to model, but sometimes POV-ray’s scene description language is just the most elegant and easiest way to model something.
The next step was to convert the png files to jpegs for inclusion in the flash animation. I used a little sprinkle of bash and a dash of kosher ImageMagick’s convert.
for file in *.png; do convert -quality 100 "$file" "${file%.png}.jpg"; done
For each png file, convert the png file to a 100 percent quality jpeg file. We use 100% quality because I’m going to let the swftools take care of the final compression. There’s no sense in lossy compressing then lossy compressing again. That’s just crazy talk.
We will now create the flash source file. Open a new file slideshow.sc. This is the textual language for the swftools Linux Flash toolkit. I have never ever ever looked at a flash source file from any Macromedia product, so I have no idea if this animation description method looks/acts/walks/talks in anyway shape or form like Macromedia’s products. Don’t know, don’t care.
.flash bbox=640x480 filename="slideshow.swf" version=6 fps=25 compress background=white .jpeg s1 "puerta_open03.jpg" .jpeg s2 "puerta_open02.jpg" .jpeg s3 "puerta_open01.jpg" .font font "gilc____.ttf" .font arial "arialbi.ttf" .text text1 text="Opening Doors" font=font .text text2 text="Opening Doors" font=font .text text3 text="Opening Doors" font=font .text text4 text="OG" font=arial .text text5 text="Experts in" font=font .text text6 text="Open Source" font=font .put s1 scalex=640 scaley=480 alpha=100% .put text1 scale=100% x=40 y=220 alpha=0% .frame 25 .put s2 scalex=640 scaley=480 alpha=0% .change text1 alpha=100% .put text2 scale=100% x=40 y=220 .frame 100 .change s2 alpha=0% .change text1 alpha=100% .change text2 alpha=100% .frame 125 .change text1 alpha=0% .change text2 alpha=100% .change s2 alpha=100% .put s3 scalex=640 scaley=480 alpha=0% .put text3 scale=100% x=40 y=220
And so on (that’s not the whole file, but the rest is just repetition. There are 71 total lines of code for that little flash animation. Is that a lot or a little? Seems pretty small to me anyway. Basically, with swftools you define an object (image, or text); you put it; then you change it. You can change its fade, size, location, and more. The swfc program will implement the change from the object’s last known state. Check out swftools for more examples (that’s where I got all the reference I needed to make my little flash thingie).
So there you have it. I walk through the frames, changing elements, putting, fading, growing, moving stuff around. It’s was all described from start to finish in a procedural language, from the POV-ray scene description language, to bash and ImageMagick for command line image manipulation, and finally to swftools flash scene language for the final animation. Pretty nifty, huh?
The neat thing about this is that once the procedure has been developed, you can reuse it for other clients, other looks, colors, messages, etc. In fact, you could directly render it on the server to update information on the fly via end user input. There’s no limit to what you can do with something like this.
Of course if you’re on Windows, you would probably just buy Macromedia’s software… but where’s the fun in that?