10 Replies Latest reply on May 22, 2008 1:10 PM by madsgodvinjensen

    3D perspective text

    madsgodvinjensen
      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:

      Cropped screenshot

      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
        • 1. 3D perspective text
          VarioPegged Level 2
          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 animation". 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

          Edit: Changed "Anti-alias for readability" to "Anti-alias for animation"
          • 2. 3D perspective text
            madsgodvinjensen Level 1
            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 - see this screenshot

            Do you know what's happening?
            • 3. Re: 3D perspective text
              VarioPegged Level 2
              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

              • 4. Re: 3D perspective text
                madsgodvinjensen Level 1
                I used the menu Modify -> Transforn ... menu.

                The requested screenshot is here
                • 5. 3D perspective text
                  VarioPegged Level 2
                  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...

                  TS
                  • 6. 3D perspective text
                    VarioPegged Level 2
                    From the docs: "Anti-alias for readability" will not work with skewing or if the text is flipped. I gave you bum information. I did have "Anti-alias for animation" setting on my text input. I should've known this, for crying out loud.

                    TS
                    • 7. Re: 3D perspective text
                      madsgodvinjensen Level 1
                      It works perfectly now! Next obstacle: match rotate & skew to design...

                      Thanks :-)
                      • 8. Re: 3D perspective text
                        madsgodvinjensen Level 1
                        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...
                        • 9. Re: 3D perspective text
                          VarioPegged Level 2
                          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.fieldFormat);

                          TS
                          • 10. Re: 3D perspective text
                            madsgodvinjensen Level 1
                            Perfect :-)