Home / how to / Guest Post: Creating the Flickering Candle Sprite

Guest Post: Creating the Flickering Candle Sprite

This week I invited Malcolm, from Linlou Creative Arts, to share with us some tips on his current project. I hope you enjoy and get excited to contact me to share yours too!

Below, Malcolm words:

One of our current interactive projects is a Christmas story titled “The Night Before Christmas……The Gift.” In looking for creative ways to display the story text we wanted to use a window that had a very rich, old text looking sort of appearance. What we settled on was an ancient parchment scroll. In keeping with our ancient text theme, we thought it would be cool to illuminate the scroll window with candle light. Candle flames flicker and dance about, so we needed to create that animation.

Scroll and Candle
Our first thought was to use sprites, but in discussing this with Alex, he suggested we may wish to also consider a movie clip. We use Adobe Premier Pro for movie clips, however, it is a bit more involved than creating sprites. After all, creating a simple flickering candle flame should be a simple process. Right? Getting where we wanted to go turned out to be fairly complicated, but now that we know the process, it’s a breeze. Here’s how we did it.

I should explain that even though Kwik is a Photoshop plugin, I prefer to draw and design in Adobe Fireworks, and then export .psd files to Photoshop. I find the Fireworks interface much easier to use, and since most of my drawing is in vectors, Fireworks provides more tools and greater flexibility. On the occasions when I need a Photoshop tool or effect, it is very easy to export my drawing, apply the Photoshop effect and return the drawing to Fireworks.

To save time we purchased a scroll and candle vector drawing from our stock supplier. Even though our story scenes are all original art, it just makes sense at times to purchase props, rather than spend hours creating them.

Since the flame is the only item that moves, I sliced it from the drawing and put it on its own layer. I then created four additional flame positions, making a total of five frames including the original flame position. They are shown here on a black canvas for visual clarity, but reside on a transparent background for exporting to Photoshop.

CandleFlameSm

Prior to exporting, the frames were superimposed in Fireworks, saved as a .psd and opened in Photoshop. The sprites were created with the Kwik sprite sheet exporter script, and inserted into our app as a replacement for the original flame layer. The page was previewed in the simulator and it was here that I ran into considerable difficulty. The animation was running, but the frames were not superimposed. What I was seeing was a sequence of each flame position, only one of which was correctly positioned over the candle, with the others to the left and right of the main flame position. When I tried to modify the original .png file, export a second time to Photoshop and create a new sprite export, the sprite sheet exporter script refused to convert the file and gave me several different error messages.

Several hours later and numerous attempts to correct the problem produced no better results. It was time to consult Alex. After trading a couple of e-mails, we decided it would be better to create the sprite export directly in Fireworks. Alex provided a script for Fireworks, which was a breeze to install. The same Fireworks .png file with the frames superimposed was exported to sprites directly in Fireworks…… no problems. The sprite animation was again inserted into our app with Kwik and presto, our animation was working…….. but with the same problem we saw earlier with the flame positions not being superimposed in the animation.

We had solved the problem of creating the sprites from a Fireworks file, our candle flame just needed to get its act together. To correct the problem, I opened the exported sprite file in Fireworks. I then moved the frames closer together until they were nearly touching, but showed several pixels of canvas between them. The file was saved and closed, reinserted into our app and there it was. As you can see in the video clip, our candle flame is now flickering and dancing about exactly like a real one. Thanks once again to Alex for the best support in the business!

Again, I would like to thank Malcolm for his time sharing with us a few tips. Want to be here too? Send me a note to support@kwiksher.com

1 comment

  • Oct13 Stephanie ParkerI love all your creative ideas. Thanks so much for shinrag with the world. I work in a Family Literacy Centre in Whitehorse, Yukon and we’ve been using some of your ideas and colouring sheets. Thanks Joel! Stephanie at the Yukon Family Literacy CentreReply

Leave a Reply

Your email address will not be published. Required fields are marked *

Privacy Preference Center

Strictly Necessary

these coolies are for WP-SpamShield, gdpr-wp, woocommerce, paypal

PHPSESSID, SJECT16, JCS_INENREF, JCS_INENTIM, gdpr, woocommerce_cart_hash, woocommerce_items_in_cart, woocommerce_recently_viewed, wordpress_, wordpress_logged_in_, wordpress_sec_, wordpress_test_cookie, wp_woocommerce_session_, AKDC, akavpau_ppsd

Functionality

WordPress cookie created when auto-saving a post in the editor.

wp-saving-post, wp-settings-, wp-settings-time-

Performance

google analytic

__utma,__utmb,__utmc,__utmz,_ga,_gid,_gat

Advertising