Psyked*

it’s easy once you know how.

Superscript and Subscript - with Actionscript*

Posted by James Cannings - 30/03/08 at 10:03:21 pm

*And a little bit of custom-font magic…

Although I do like writing lovely elegant code I’m also a big fan of ‘the cheap hack’! Here’s one I used last week to get round the age old problem of dynamic text boxes in Flash not supporting superscript and subscript. You need to do the following:

1. Install the ggsuperscript and ggsubscript fonts, available from GG’s Flash Blog
2. Make sure that you have 2 dynamic text boxes offstage with the 2 fonts embedded.
3. Then you can use the following code to insert text into a dynamic text box (in this example it’s called ‘textObject’)
4. Job done!

//#######################################

var myString:String = “Adobe^TM C₂H₄”;
var supStartExpression:RegExp = new RegExp(”^{”, “g”)
var supEndExpression:RegExp = new RegExp(”}”, “g”)
var subStartExpression:RegExp = new RegExp(”_{”, “g”)
var subEndExpression:RegExp = new RegExp(”}”, “g”)

myString = myString.replace(supStartExpression, “<font face=\”GG Superscript\”>”)
myString = myString.replace(supEndExpression, “</font>”)
myString = myString.replace(subStartExpression, “<font face=\”GG Subscript\”>”)
myString = myString.replace(subEndExpression, “</font>”)

textObject.htmlText = myString

//#######################################

The above code uses the new AS3 ‘replace’ method along with it’s really cool new support for Regular Expressions (the “g” bit in the regular expression makes sure that it matches and replaces ALL instances of the string). Of course you could just use the <font> tags in your code and forget all the Regular Expression stuff. I was just being a ponce!

If you could be bothered you could even extend the string class etc, etc. If you are using ActionScript 2.0 you could do something really nasty like:

//#######################################

String.prototype.replace = function(find, replace)
{
return this.split(find).join(replace);
};

var str = originalString.replace(”^{”, “<font face=\”GG Superscript\”>”);
str = str.replace(”}”, “</font>”);
str = originalString.replace(”_{”, “<font face=\”GG Subscript\”>”);
str = str.replace(”}”, “</font>”);
textField.htmlText = str;

//#######################################

Have fun…..

3 Comments »

1. 

   I got my Subscript and Superscript fonts from:
   http://www.subscriptfont.com
   They work perfect with dynamic fields too…abd better than GG since it’s lowere than the baseline and it is real subscript..

   Comment by savil — 28 April 2008 #

2. 

   I want just want to share with you the way I get may subscript and superscript inin dynamic and input text field in Flash:
   & tags are not supported by Flash but you can
   use Subscript & Superscript in dynamic and input text field in Flash:

   Download & install Subscript & Superscript fonts from http://www.subscriptfont.com or http://www.superscriptfont.com
   You will need to restart Flash software after installed fonts.
   Create a dynamic text field with Arial font embeded. Set the HTML property to true.
   Create a dynamic text field with Subscript font embeded.
   Create a dynamic text field with Superscript font embeded.
   Use HTML tag to set text to subscript or superscript like below:
   Some text©
   If you are using ActionScript to test the htmlText, use script like below:
   my_txt.htmlText = “Some textTM”;

   They are better than CG since it goes lower than the baseline and it’s real subscript..

   Comment by savil — 4 May 2008 #

3. 

   Cheers savil, we really like those fonts (much more natural than the GG ones because [as you say] they actually go outside the line borders)

   If anyone is looking for a way to do this with custom fonts or non sans-serif fonts, then you might want to try out FontCreator as an option. It’s not free, and its not a quick solution - but you could use the font glyph editor to resize and reposition the characters in the font to act as superscript and subscript.

   Comment by James — 5 May 2008 #

Leave a comment

Name (required)

Mail (will not be published) (required)

Website

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: This post is over a month old. You may want to check later in this blog to see if there is new information relevant to your comment.

Notify me of followup comments via e-mail.