Superscript and Subscript – with Actionscript*

About
AIR Applications
- ImageSizer
- Screentweetr
Blog
Contact

Loading ...

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:

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

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

var myString:String = “AdobeTM C2H4”;
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, “”)
myString = myString.replace(supEndExpression, “”)
myString = myString.replace(subStartExpression, “”)
myString = myString.replace(subEndExpression, “”)

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 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(“”, “”);
str = str.replace(“”, “”);
str = originalString.replace(“”, “”);
str = str.replace(“”, “”);
textField.htmlText = str;

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

Have fun…..

Posted by James Cannings

Full profile: http://www.mmtdigital.co.uk/

March 30, 2008 | In Flash | 16 Comments

16 Comments »

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 #
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 #
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 #
I can’t seem to get it to work on my flash. I installed the font files and saved them in my C:…fonts folder, where all the rest are. I have the two dynamic text boxes and embedded them with the right font. I put in this line of code:

instructText.htmlText = “goo blob “;

instructText is my text field. My font that I have in the field is Calibri. But it doesn’t work for me. All it does is put a space in between the words, but no superscript action.

I create the text field dynamically on the line before that line. Does that have anything to do with it? Does the location where I saved it have anything? Does the fact that I have a different font in the box have anything to do with it? I saw on another site:

instructText.html = true;

but when I tried that it threw me an error. Is there something along those lines that I need to do? Does it have anything to do with the “face” class added to the ?

In the end I want to import the text from an xml file, what will I need to do differently?

Help would be highly appreciated! Thanks!

Comment by Kevin — 2 July 2009 #
Ok, so the line

instructText.htmlText = “goo blob “;

should be

instructText.htmlText = “goo (font face=\”GG Superscript\”>blob”

where the first parenthesis is the tag opener, “<".

Comment by Kevin — 2 July 2009 #
Kevin – One immediate thing to try is turning off font embedding on your textfield, if you have it on. Flash can be a little difficult with font embedding, and I often find that if I can’t see what I’m expecting, then it’s a font embedding issue. So, turn off font embedding and see what happens when you test it.

When Flash doesn’t have a font embedded it tends to put a 4 pixel space in the place of the characters.

Beyond that, it could be a number of different issues – your font names could not be matching up, for example. Do you have a file or some complete code you can post, to have a look at?

Comment by James — 2 July 2009 #
Yeah, I have the file you can look at. How can I best get it to you?

Comment by Kevin — 2 July 2009 #
Kevin – can you send an email to jford[at]psyked.co.uk with the files?

Comment by James — 4 July 2009 #
I’ve had a look at the file you sent, and I believe I’ve figured it out.
What you’ve got at the moment is function calls in the following order;

[...]
set htmlText
[...]
setTextFormat()

What’s actually happening is that the setTextFormat is overwriting the text formatting you’ve set with htmlText. An ‘intricacy’ of the way these things work. Switch these two functions around and you should find that things start to work!

If you use setTextFormat() and setNewTextFormat() on your textfield before you set the htmlText, that should work.

Comment by James — 7 July 2009 #
This method doesn’t seem to work when I uploaded my files online to my webserver. My guess is the font GG Superscript cannot be recognised by the server. Is there any method to make the font show in websites?

Comment by Stephen — 21 January 2010 #
Stephen – Your fonts should be embedded in Flash, so they should work wherever you upload your Flash. – It shouldn’t matter that the server doesn’t have the font installed, nor that the client doesn’t have the font installed.

I’m guessing you need to check that your fonts are being embedded correctly in the Flash movie.

Comment by James — 21 January 2010 #
This hack has been around for a while. I still don’t understand why flash has no supprot for this yet! It’s unbelievable to be honest.

I’ve been waiting for a decent implementation for these tags and tags since flash 4!

They can make flash now work for mobile devices and th eiphone but still they can;t make a numbered list support by default!

Comment by Stef — 15 February 2010 #
Stef – you might want to check out the new Text Layout Framework for Flash Player. It’s only available for the newer Flash 10, but it introduces a whole new text rendering system, with far greater text formatting support.
http://labs.adobe.com/technologies/textlayout/

Comment by James — 16 February 2010 #
@James

nice to know the update in flash 10.

Ive been using this particular HTML rendering to solve most of the super/subscript issues.

Thanks

Comment by Aditya — 15 May 2010 #
// I like the solution, but this CSS method works for me:

var style:StyleSheet = new StyleSheet();
style.parseCSS(‘sub{font-family:”GG Subscript”;}sup{font-family:”GG Superscript”;}’);
displaytext.styleSheet = style;

Comment by sonicoliver — 13 July 2010 #
hi james,

iam very new to action script.iam not gettiing superscript in flash10.

i created the textfield ,and i embeded the superscript font from (http://blog.ggshow.com/index.php/reference?cat=121)
my_txt.text = “AdobeTM”;

still iam not getting..i have to submit the project urgently..
plz help me.

plz let me explain clearly (step by step)how to embeded font for textfield..

Comment by srinivas — 17 August 2010 #