3D perspective text

[dj_uncas]

Hi everyone,

I'm creating a Flex application which is basically a loan calculator for a
bank.

I've received a psd from a designer and have cut out the important part:

[url]http://www.aoa.nu/images/blog/calculator_background.jpg[/url]

My problem is the numeric values which have been twisted a bit, to create a 3D
effect. I believe the designer used the "Edit -> Transform -> Perspective" tool
in Photoshop.

Is there any way to create this effect in Flex? Or Flash for that matter.

Best regards,
Mads

[VarioPegged]

Are your text labels dynamic? If that's the case, then the least painful way to
do this would be to create the background and dynamic text labels in Flash and
embed* that SWF in your Flex app.

In Flash you can skew and rotate the labels interactively to match what the
designer has created. You'll want to skew the text first, then rotate. Skew the
upper edge of the text field slightly to the left (horizontally). Because of
the perspective of the background, each label will have to be skewed and
rotated individually.

Make sure that the text in Flash is set to "Dynamic Text" in the property
inspector. Select "Anti-alias for readability". I imagine your labels will be
numerals only, so embed only those to keep the file size down. Then give the
instance of that text label a unique name. Now you'd be able to set those
labels from within your Flex app (e.g. mySWF.label1.text). This is true only if
you load the Flash SWF at runtime (Flash 9 SWF).

*For a Flash 8 SWF, or if you're embedding the final Flash SWF in your Flex
app, you have to use LocalConnection to set the labels from your Flex app. The
docs have some examples on using LocalConnection.

TS

[dj_uncas]

Sounds like a fine solution. It definitely seems to be easier to rotate and
skew in Flash..

However, in my attempt I made the text look right inside Flash. but the Flash
Player won't show it correctly - L=see this
screenshot[]http://www.aoa.nu/images/blog/calculator-flash-screenshot.png

Do you know what's happening?

[VarioPegged]

Hmmm, tried it and it works fine for me. How are you doing your transform...
Transform -> Rotate and Skew from the menu or value input in the Transform
window?

Can you upload a screen shot of the properties window with the text selected
in Flash?

TS

[dj_uncas]

I used the menu Modify -> Transforn ... menu.

The requested screenshot is [url]http://www.aoa.nu/images/blog/flash-screenshot2.png[/url]

[VarioPegged]

Yikes, I tried it again just now with a new text field and it's doing the same
for me as for you with that text field. Seems like a bug to me! Have you tried
creating a different text field where you drag out the size of the text box as
you click the stage?

Screenshot settings look fine.

TS

[VarioPegged]

Seems that "Anti-alias for animation" has to be selected. I gave you bum information. I did have that anti-alias setting on my text input.

TS

[dj_uncas]

It works perfectly now! Next obstacle: match rotate & skew to design...

Thanks :-)

[dj_uncas]

I guess I was a bit too hasty there.. I have problem with the Flash text
fields. They all have different letter spacing, which looks fine in the Flash
IDE, and when I open the SWF as a standalone file. When I load it into Flex,
however, and set the dynamic text fields, the letter spacing disappears! Any
suggestions?

And yes, I have embedded the font...

[VarioPegged]

Never had to use letter spacing on dynamic fields, but you could probably try
this:

In your SWF, add a variable that'll hold the text field's format:

var fieldFormat: TextFormat = someTextField.getTextFormat();

Then from within Flex try and reset it (I'm not exactly sure about the syntax
here, but you get the idea):

mySWF.someTextField.setTextFormat(mySWF.fieldForma t);

TS

[dj_uncas]

Perfect :-)