Warping Symbols

[James Kent]

Hello,

I am currently building a clock for a client. However, this client is
very specific on their requirements. They want the clock to imitate a
ticket clock - one that displays its numbers by dropping a ticket for
every minute. ([url]http://www.mridout.freeserve.co.uk/coroticket_b.JPG[/url])

My problem is that I do not know how to make the 'ticket' look like it
is dropping down.

Thanks in advance.

James Kent

[Steven Post]

In article <fadbdceb.0309011613.11903aa7@posting.google.com >,
[email]james@roadhouse.com.au[/email] (James Kent) wrote:

>Hello,
>
>I am currently building a clock for a client. However, this client is
>very specific on their requirements. They want the clock to imitate a
>ticket clock - one that displays its numbers by dropping a ticket for
>every minute. ([url]http://www.mridout.freeserve.co.uk/coroticket_b.JPG[/url])
>
>My problem is that I do not know how to make the 'ticket' look like it
>is dropping down.
>
>Thanks in advance.
>
>James Kent

If you are doing a photorealistic clock, like the one in the jpg, I'd
recommend you get ahold of a videocamer and make movies of the numbers
dropping. You'd need ten clips, and since it takes less than a second,
you're talking probably less than 12 frames a piece (at 24 fps).

If you are doing an illustrated clock, I'd probably do the same thing,
but use the video frames as a reference -- go frame by frame and draw
what you see in illustrator, then pull it into flash (unless you love
flash's drawing tools, of course). You could probably do some motion
tweening, but I definitely wouldn't approach this sort of thing
programmatically or rely on shape tweening -- that'd be like trying to
build a house with all your tools attached to the end of long sticks.

In any case, you will need ten short clips, one for each transition.

Hope that helps.

cw

--
S t e v e n P o s t
s . p o s t @ n u m b e r - 1 0 . g o v . u k

[Richard Podsada]

[email]james@roadhouse.com.au[/email] (James Kent) wrote in
news:fadbdceb.0309011613.11903aa7@posting.google.c om:

> Hello,
>
> I am currently building a clock for a client. However, this client is
> very specific on their requirements. They want the clock to imitate a
> ticket clock - one that displays its numbers by dropping a ticket for
> every minute. ([url]http://www.mridout.freeserve.co.uk/coroticket_b.JPG[/url])
>
> My problem is that I do not know how to make the 'ticket' look like it
> is dropping down.

You can fake it, whether using bitmaps or vector graphics. It depends how
detailed the animation has to be, and if you require perspective. If it has
to be picture-perfect (photorealistic) then this might not work for you.

First I would draw out the numbers 1 through 9, and cut them in half
horizontally. Make the top & bottom halves of each number as a seperate
symbol.

Set the registration points for the graphics as so:

Top-half graphics: Bottom Center
Bottom-Half graphics: Top Center

Diagram (use Courier or FixedSys font to view):
The + is the reg point:

----------
| top half |
----+-----

----+-----
| bot half |
----------

Let's use an example of one digit display changing from 5 to 6. We start by
displaying the top & bottom half of five:

+------+
| 5top |
| 5top |
--------
| 5bot |
| 5bot |
+------+

Underneath the top half of five, is the top Half of 6.

Overtop of the bottom half of five, is the Bottom half of the 6 -- but not
visible yet.

The first thing that needs to happen is the top half of the 5 "dropping
down" to the center point. You can fake this by tweening an animation (or
setting the _height property of the clip) from it's original height to 0
over a few frames.

However, you want it to scale around the center-line, so it appears that it
is folding from the top to the center. That's why we set the registration
points in the number movie clips above.

Once the top half of 5 is 0 pixels high, we make it dissapear off the stage
(discontinue the timeline)

So now we have the top half of 6 showing, and the bottom half of 5:

+------+
| 6top |
| 6top |
--------
| 5bot |
| 5bot |
+------+

At the frame where the top half of 5 dissapeared, we now show the bottom
half of 6 - but this time, we start with the bottom half of 6 squashed to 0
pixels height at the centerline, and stretch it downwards to full height at
the bottom:

+------+
| 6top |
| 6top |
--------
| 6bot |
| 6bot |
+------+

Make the animation for the bottom half of six a little faster than the top
half, so it appears it is gaining speed as it falls.

And that's pretty much it. You can keyframe these sequences over the
timeline and jump to whichever animation you need in order to flip the
right number, or you could probably get slick and do it completely in
Actionscript. This would work with bitmaps for the top & bottom images too,
but vector will scale a little nicer. Your choice :)

I made an example FLA for you. You can see the SWF at:
[url]http://www.oblius.com/flash/examples/clock_flip.html[/url]

And download the ZIP containing the FLA, SWF & HTML at:
[url]http://www.oblius.com/flash/examples/clock_flip.zip[/url]

--
Richard
[url]www.oblius.com[/url]