WARNING: This article may contain unhealthy levels of cuteness

You can imagine how some conversations at the recent RunRevLive.09 developer conference might have gone:

"I built a multi-user database front end with real-time reporting using Revolution."

"Well, I control a robot with Rev."

"Oh really? I manage a multi-million dollar orbital imaging satellite with Rev."

"That's nice. I embed Rev on a 15mm radio chip that can transmit through solid steel."*

Imagine your pride when you can cheerfully add, "Well, I made a birthday card for my niece with Rev!"

One of the great things about Rev 4.0 — and especially the new, free revMedia version — is that it's great for projects large and small, for users of all experience levels. It's a lot more fun and easier than working in other tools, too. Since Rev is turning "four-point-oh" this month, it seems like an online animated card, long the domain of a certain multimedia authoring tool starting with F, is a great example of how a little bit of effort can produce terrific results. I'm going to show you how you can create a nice Web greeting card in less than 30 minutes with Rev. You'll need the free revMedia 4.0 or a copy of revStudio or revEnterprise 4.0. Along the way, you'll learn some useful concepts that will serve you well in more serious projects.

Getting started

For my cake, I'll begin with planning out what I want the experience to be. I usually start with a sketch and make some notes about what I want to happen:

Planning sketch

I want to present a very simple birthday cake with a number of candles corresponding to the number of years old the person is turning. (In the case of Rev, the version number.) The flames will be animated GIFs that give a flickering effect. Across the bottom, I want my greeting message to appear. As for interactivity, I would like the recipient to click on each of the candles, and then when all of them have been "blown out" I want to play the birthday song.

The flame

I want to have an animated, flickering flame atop each candle appear when the page is first visited. I found an excellent tutorial to create one here. To save time, I used the existing result from that page, cropping the animated GIF down to just the flame, and resizing the flame to 40 pixels high. Then I used the "Import as Control..." command in Rev to bring it into my stack. I'll use this flame image as the icon for a button. Because I'll have potentially many candles on my birthday cake, using buttons means that only one copy of the flame image is stored within my stack, making it faster to load, and I can hide and show the flame easily, just by setting the icon of the button to either the ID of the flame image, or nothing at all.

The candles

Next, I'll want to have a complete flame-and-candle assembly that responds to mouse clicks. I could use a photo of a candle, or just draw one. Even a simple pink rectangle would do. I decided to draw my own. Again, I will import the image, and use it as the icon for a transparent button. To enhance the glowing effect of the candle, I superimpose an oval with a radial gradient, starting with 100% opaque bright yellow, and fading to 0% blending.

Building the candle. I've left the border active on the glowing oval.

Gradient options for the glowing oval

Next I have to group and "wire up" the candles so they can be "blown out" by clicking on them. I'm not going to group the glow with the candle; that would make the button too wide in the case of multiple candles. I'll just set the glow to "disabled" and use two groups: one for the candle and flame buttons, and one for that group plus the glow. Now, I could just write a script for the group and copy the group multiple times. But I'm going to instead use the "behaviors" feature introduced in Rev 3.5. That way, if I want to enhance the experience of blowing out the candles in the future, I can make the edit in just one place. All the candles will automatically reflect my changes. I create a new button, "Candle Smarts" and give it the following script:

on mouseUp 
     set the icon of btn "Flame" of me to none 
     hide grc "Glow" of the owner of me 
     -- Check if I'm the last candle to be blown out 
   
     -- For development only; remove   
   if the shiftkey is down then 
          set the icon of btn "Flame" of me to \
	the id of img "small-flame.gif"
          show grc "Glow" of the owner of me 
     end if 
end mouseUp  

(I add the bit about the shift key just as a convenience during development, to easily "reset" the candles.) Then, I issue the following from the Rev message box:

set the behavior of grp "Candle" to the long id of btn "Candle Smarts"

Testing it out, I see that indeed the candle is "blown out" when I click on the candle (and comes back when I shift-click it). Clicks to the glow outside the candle are properly ignored. I'll come back to the business of checking if I'm the last candle later on.

The song

I want a short "Happy Birthday" audio greeting to play when all the candles have been blown out. A fairly universal sound format is MP3. I've found the ideal way to handle this in a revlet is to use a "Player" object linked to an external MP3 file. I obtained such a file from iStockPhoto which offered a few inexpensive choices, though the source format is in WAV. Once I obtain this file and convert it to MP3, I upload it to the same location where I'll be saving my revlet.

When you publish a stack online, your revlet needs no special permissions to access resources on the same server hosting the revlet. So be sure to keep audio files like this in the same directory as your revlet. If you try to access information on a different domain, your users will either get a security warning (if you've enabled this in the Standalone Options panel), or it just won't work (if you've disabled the alert).

I drag out a new player object on to the card and size to about 150 pixels wide by 32 high. Then, in the Property Inspector, I set the filename of the Player object to the full Web URL of the MP3 file - this will work whether I'm testing on my local machine or whether I'm uploading to a Web server. I also set the Player object to invisible, turning off the controller and traversal.

To my master behavior script in the "Candle Smarts" button I add a line underneath the "check if I'm the last candle" comment:

start player "Song"  

I click on the candle. Sure enough, I'm rewarded with an audio treat.

Final Touches

I've got almost all the media elements of my Web birthday card in place, except for the cake itself and a nice background. I turn again to iStockPhoto to obtain a cake image, which I cut out and trim to create a transparent PNG. I decide to use a Rev graphic with a gradient for the background. This will let me easily change the background as part of the reward for blowing out all the candles. I position the background above the source images and behavior button to hide them from view. The final result looks like this:

All the elements assembled

Finally, I need to make the "Candle Smarts" script intelligent enough to know when all the candles have been blown out. I decide to put the handler for checking the candles into the Card Script:

on checkCandles 
     repeat with i = 1 to the number of buttons in this card 
          if the short name of button i is "Flame" \
	and the icon of button i > 0 then
               put "True" into CandlesStillLit 
          end if 
     end repeat 
   
     if CandlesStillLit then 
          exit checkCandles 
     else 
          show fld "Greeting" 
      
          -- change the background to purple
          put the fillGradient [ "ramp" ] of grc "Background" into myRamp
          put "0.45832,128,128,255" into line 1 of myRamp 
          set the fillGradient [ "ramp" ] of grc "Background" to myRamp
      
          -- play the music 
          start player "Song" 
     end if 
end checkCandles 

And of course, changing the script for "Candle Smarts" to:

on mouseUp 
     set the icon of btn "Flame" of me to none 
     hide grc "Glow" of the owner of me 
     -- Check if I'm the last candle to be blown out 
     checkCandles 
end mouseUp  

The end result of the above is (you can download the source file here):

Getting fancy

One of the great things about Rev 4.0 is its ability to "communicate" with the Web page hosting the revlet. This can take the form of fancy JavaScript commands; or it can be simple parameters that are passed on in the HTML code used to embed the revlet.

Once you've put all the work into making such a beautiful card, it would be nice to re-use it for other people's birthdays. (No one has to know!) There are some elements here that would be nice to dynamically adjust depending on the intended recipient. For example, adjusting the number of candles, and changing the text at the bottom to show a custom message. These are easy to implement. To change the greeting, for example, you might say:

on opencard 
     put the revletParams [ "Greeting" ] of this stack into fld "Greeting"
end opencard  

Make sure you also edit the HTML code of the page hosting the revlet to add the parameter you need to both sections of the embed code.

Conclusion

So there you have it, a really impressive and charming birthday greeting that you built yourself, probably in less time than it would take for you to bake and decorate a real cake, and without all the messy cleanup afterward. Of course, your cat might not find it as tasty!

* Actual projects where Rev has been used.