I recently created some Flash applications that utilized “bouncing” motions. After trying a variety of methods to acheive this effect, I eventually developed a surprisingly simple and flexible solution. Since I like the effect so much (and am sure that this is no real invention of mine), I decided to put together the following example and provide the source code.

Due to WordPress Blog limitations, please load the Flash file externally.

View the ActionScript code for the animation above. As you can see, the really useful code in the “onEnterFrame” function is only five lines long, and could be less. The concept of this method is simple: Calculate the clip’s acceleration using the “distance” to the goal, and use it accordingly. This works because, as the clip moves past its goal (via it’s momentum), the acceleration becomes negative and begins to counteract that momentum. Energy is taken from the system so that the clip will eventually reach stasis.

It would take a calculus and/or physics lesson to explain how position, speed, and acceleration are related… I’ll save that for another time. All that matters is that it works, right?

Finally, this solution is very flexible, as you can easily alter the speed and strength of the bounce by changing the “_accelStrength” and “_energyRetained” variables. Play around with these values, and let me know if you find any interesting results!

Today, by chance, I stumbled across a whole realm of computer graphics that I had never even considered… pixel art. Originating before the days of Photoshop and other vector-based programs, this genre of art is created, well, one pixel at a time. Sounds ridiculous, right? See if you still think so after checking out the following images, which are some of my favorites from the eBoy website:

I am amazed by the complexity of these works. They are bright and fun, and it seems as though there is always something new to discover about them. And I can’t even begin to guess at the number of hours that were put into each image. Incredible.

Much of eBoy’s images are done in the classic 3D style, which is a near-isometric projection. This just means that lines don’t converge as they approach the horizon, they stay parallel. Thus, the sides of blocks, walls, and buildings all have a “two pixels over, one pixel up” slope. Not all pixel art follows this formula, however, and can be equally (if not much more) impressive. The following images are from DeviantArt, where you can view hundreds of pixel art entries.

For a final example, I’d like to provide a link to Drububu’s portfolio. He uses pixel art fused with some really nice Flash work to create some very interesting applications and animations. It’s definitely worth a look.

The first pixel art was created as early as the 1970’s, but I would be remiss not to mention the history of art using simple blocks of color. For thousands of years, artists have created intricate mosaics and beadworks with their bare hands. A far cry from a mouse and a computer screen, these art forms are arguably more difficult and tedious than pixel art, and clearly set the precident for the digital manifestation seen today. Regardless, the time and effort put into all these forms of artwork is astounding, and these artists should be applauded for their patience and dedication to their craft.

As part of an ongoing effort to develop useful, unique, and interesting things in Flash, I have built two new applications called SketchTracer and Illumination&Levitation.  You can read more about them and test them out by clicking on either link. 

Please don’t hesitate to comment on these Flash apps… I’d like to know what you think of them!

The Elexicon Blog is ready for Lightboxing!  You can take a look at Lightbox in all its glory by clicking on the following images (taken from DeviantArt)… then read up on how to place the Lightboxed images in your own posts.

Inserting this type of link into your Elexicon Blog posts is a little tricky, so I thought I would write up a quick tutorial for everyone.  When you are typing up your blog entry in “Write Post” section of WordPress, you’ll need to click on the HTML button along the text area’s menu bar.  Once there, you can insert your code for the Lightbox image links, which should take the following form:

<a href=”TARGET_IMAGE_URL” rel=”lightbox[SET_NAME]” title=”IMAGE_CAPTION”>
<img src=”THUMBNAIL_URL” />
</a>

Not too bad, right?  The rel attribute’s SET_NAME should be the same for all images that will be part of a particular Lightbox “slideshow”.  It must be different than all other groups, so it might be a good idea to use the date as part of your chosen SET_NAME.  The title attribute defines what caption the Lightbox image will have below it, and is completely optional.  Finally, the image URLs can be absoulte or relative, and can link images from an external website.

Happy Lightboxing!

Embedding images into your blog post can cause some funny formatting issues with the text, but I’ve found the solution.  When embedding an image, do not select any options for its alignment.  Selecing options for the alignment adds an attribute to the IMG tag, which then causes the text to wrap around the image, and it’s a pain to fix via CSS.  This interesting photo of Bill Gates and Jay-Z demonstrates what the typical image will look like when embedded into a blog post.

If you feelin’ like a pimp, Billy, go an’ brush ya shouldas off.
I got 99 problems but the Gates ain’t one.

So many captions…