Busy Bee

[ksiads]

Can anyone tell me how to animate this graphic http://www.kevinternet.com/bee/bee.png so it enters, circles, and exits my stage (page) sort of like a real bee would?

Ideally, I'd like the image to enter random edges, perhaps hover for a few seconds in different places, and then fly off screen.

Can this be done using WD7 Premium or Designer Pro 7?

Any help you can give is greatly appreciated.



ps. Adding a buzzing sound effect would be nice also, but not necessary.

[Big Frank]

i suspect for an animation that includes "random" and "sound" you will need something more complex than xara, like flash professional cs5.5 (i don't know if earlier versions are still available)

Let me see if I can knock something up in XDP7 - you never know

[ksiads]

i suspect for an animation that includes "random" and "sound" you will need something more complex than xara, like flash professional cs5.5 (i don't know if earlier versions are still available)

Let me see if I can knock something up in XDP7 - you never know

Thanks, beretgascon.

[ksiads]

You know, I was just thinking, maybe I'm doing too much with this bee. Maybe I just need the thing to come in from off-screen, make a couple of circles, then fly off-screen again. If there's a way to specify a path and the number of times the bee enters/leaves, I could use it as just a page accent.

Does this make the problem any easier?

[Big Frank]

it certainly makes it possible to do in Xara XDP7 - I'll have something for you soon

[Big Frank]

here we go

[ksiads]

here we go

beretgascon! That is really nice! Did you make it in Designer Pro 7? Can you show me how you did it?

[Big Frank]

Yep it's totally done in XDP7, from transforming your busy bee bitmap into a vector drawing, to creating the finished animation.

With one exception. I kinda went overboard. There's a special feature of XDP7 whereby you can have text (but not objects) flow along a path and so give you the smooth flowing effect I seem to have achieved in the above file. Of course the vector bee I created from your bitmap isn't text so there would have been no way to achieve the smooth curves of its path without this next stage.

So, I stepped out of XDP7 and into FontCreator to create a font called "BusyBee.ttf" containing two glyphs, the black lines of the bee and the yellow body colouring (my keyboard characters "1" and "2" in my new font). I then reopened XDP7 and typed 1 followed by 2, coloured 1 black and 2 dark yellow. At this point the two parts of the bee are side by side, so to overlay them to create the "busy bee" I set the font tracking to -460, thus overlaying one character over the other.

And so I created a bee that could flow along a curved path, something you can't do in XDP7 Flash with a vector drawing.

The rest was simple. I created a short curved line and joined my text to that path. Each frame of the flash file was simply another point on on the curved line. I then went back to each frame and every three or four frames (the entire XAR file has just 36 frames) increased or decreased the size of the font (our "busy bee") to give the impression of the bee flying towards or away from us.



Without the background image (Gaddesden Place, the home of Xara) and boxshot, the Flash file comes out at just 20Kb, which is the beauty of creating Flash files in XDP7 - it's very economical). Even with the images included (at 75% jpg compression) the file is only 88Kb.

Of course, you don't need to go to the extreme of creating a font at all (and indeed most people won't have the software available to do so), but not doing so makes the seemingly random movements of our bee more complex and would add a lot more frames to the animation. Putting text on a path in a flash file gives you this really smooth effect.

Umm, and that's all there was to it (he said, sweating profusely)

[ksiads]

That is so cool, beretgascon. I wish I could stop the animation just to see the overlapped fonts you made. Ingenious. I never would have thought of doing that. You've totally pushed the envelope.

How can I thank you for the tutorial? I guess I'm going to have to pick up a copy of FontCreator to try out your method. Seems to me like you've done something worthy of inclusion in a future release of XDP7. I hope everyone gets the opportunity to see what great work you've done.

Bravo!

[jvila]

Hey, what a great solution, thank you very much for sharing it