![\"\"](\"http:\/\/dpscomputing.com\/wordpress\/wp-content\/uploads\/2012\/07\/cs5textformatas3-1.png\" "\\"cs5textformatas3-1\\"")
<\/a><\/p>\nSo, firstly we need a text field. \u00a0This can either be created using the GUI or in ActionScript. \u00a0Seen as though we’re covering text formatting using ActionScript we’ll use the ActionScript method but if you feel more comfortable creating the text field initially in the GUI then that’s perfectly fine, it’ll still work for this example.<\/p>\n
So, as a minimum we’re going to need an import: (depending on your setting this may be done automatically as required, but if not, make sure you insert the import statement yourself)<\/p>\n
[codebox 1]<\/p>\n
Now, we are able to create the textfield (a TLF Textfield in this case) below our import statement:<\/p>\n
[codebox 2]<\/p>\n
So, just to briefly explain the code above. \u00a0First we create a variable of type TLFTextField and call that variable txtOurText. \u00a0We then assign this a value of new TLFTextField() – this basically creates a new text field instance to assign to the variable using the TLFTextField constructor. \u00a0Then, we set the initial contents of our text field, in this case – DPS Computing Limited Rocks! . \u00a0We set its initial position on stage to be at 30, 30. \u00a0Please note, the initial position of the textfield has been set, however the text box doesn’t exist on the stage yet so at the moment, that’s just a theoretical position which indicates where the textfield will go when it is added to the stage. \u00a0This is where the addChild() function comes in which finally adds the textfield to the stage using the criteria that we specified directly above it.<\/p>\n
Right, so at the moment our text is probably going to be quite boring. \u00a0Probably standard paragraph sized black text. \u00a0You preview should look just as exciting as below (please note, if it looks more exciting you’ve probably done it wrong ;)).<\/p>\n
Now for the exciting stuff (well as exciting as it’s going to get formatting text anyway!). \u00a0The common mistake and cause of frustration at this point is to start trying to apply new values to attributes of txtOurText. \u00a0Hold on one second!!! \u00a0That won’t work. \u00a0And you’ve possibly already realised that after you became that frustrated that it wasn’t working that you used Google to perform a search and found this guide!!<\/p>\n Anyway, I digress, back on topic. \u00a0To avoid this common mistake, we don’t apply changes to the style of the textfield directly to the textfield. \u00a0This may sound a little bit odd, but bear with me.<\/p>\n We want to do a bit of text formatting, so logically we look to the TextFormat class – and low and behold, it actually exists, hurrah! \u00a0Now, lets concentrate on doing some formatting and worry about the applying further on.<\/p>\n So, firstly, we need another import. \u00a0Again depending on your settings, this may be inserted automatically, but just to be on the safe side you can put it in anyway. \u00a0If you’re copying and pasting this code in, the imports are not likely to be automatically included, irregardless of your settings. \u00a0This is due to Flash only checking whether it needs any more inputs as your type in new code – and copying and pasting doesn’t count as typing unfortunately. \u00a0From past experience, the automatic import statements fail to materialise occasionally, typically resulting in 3000 runtime errors at which point you are ready to throw your computer out of the second floor window (and sometimes, when it gets really bad, you also consider following the computer!). \u00a0So, import statement:<\/p>\n [codebox 3]<\/p>\n Tada! \u00a0Text formatting ability activity. \u00a0Now, we need a variable to for the text formatting (of type Text Format) and we need to set some of its attributes. \u00a0Please note, in the following code we are setting the attributes of the TextFormat<\/strong><\/em> variable not<\/strong><\/span> the TextField<\/strong><\/em> variable:<\/p>\n [codebox 4]<\/p>\n Right so here we’ve created the new text format variable (fmtOurText – thats ‘format our text’ when spoken, not something like ‘furmert our text’ ;)) and we’ve decided that we don’t like (and hence want to change) the colour, typeface and size of our so-far boring text. \u00a0For the non-Americans of us reading, please remember that although we use colou<\/span><\/strong>r, in Flash its the US English spelling, in line with most other programming languages, so use\u00a0color<\/strong> instead (please note, automatic spell checkers that sit ‘on top’ of all your programs may try to correct your spelling if it’s set to British English, disable them if possible or they can become frustrating! \u00a0Mine just automatically corrected my spelling of colour (when I wanted the US English spelling), obviously in an attempt to make me look silly!). \u00a00x0000FF is the hex for blue so we’re going to have bigger, bluer and more aesthetically pleasing (Verdana) text.<\/p>\n Now, we have our textfield, our text and a nice new format. \u00a0Now we just need the format to apply to our text field. \u00a0This can be done by using the following simple statement:<\/p>\n [codebox 5]<\/p>\n Change the width that we previously set to 500 (we need this so when the text grows we’ll be able to see it all still). \u00a0After you’ve done that, give it a test run and you should see something like this:<\/p>\n Beautiful isn’t it! \u00a0Well at least better than what we had. \u00a0And we’ve only just scratched the surface here. \u00a0You can use the TextFormat class to change all the attributes you can think of (and more) that relate to text fields and text holding containers in general. \u00a0Obviously the main benefit of formatting text in this way is the ability to change text dynamically at runtime. \u00a0This can be for the purposes of animating text, grabbing the users attention, highlighting an error or responding to an event or condition.<\/p>\n There’s a few important notes to add about ordering of the code. \u00a0All imports go at the top, nothing before them. \u00a0Then the TextFormat code, followed by the TextField code. \u00a0And make sure that you apply the format before you add the text field to the stage.<\/p>\n Now if you’ve been confronted be the dreaded errors, sample shown below….<\/p>\n …don’t despair! \u00a0We can fix it.<\/p>\n Look at the working code listing below if you’re having trouble getting the code in the right order:<\/p>\n [codebox 6]<\/p>\n If you’ve still got errors, check you’ve not missed out any semi colons or quotation marks. \u00a0You’re code should be coloured similar to below if you’ve punctuated it correctly:<\/p>\n <\/p>\n And if you’ve truly lost the will to live, you can download the fla file<\/a> (and heres the swf<\/a> as well) and have a play around with it!<\/p>\n Now hopefully everything hasn’t come crashing down and you’ve managed to run the example in the tutorial error free. And hopefully some of your previous stress has been relieved due to finding out the solution to your AS3 formatting problems and this guide interspersed with witty comments ;).<\/p>\n Happy developing! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":" Although Flash applications and development has had a mixed press over the past couple of years, it still remains a popular and versatile technology, with the CS6 series of applications released by Adobe recently....<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[29],"tags":[570,569,571,572,573,574,578,564,566,563,565,580,561,562,567,576,579,568,575,577],"class_list":["post-1136","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-action-script","tag-actionscript","tag-actionscript-3","tag-as3","tag-as3-text","tag-as3-text-formatting","tag-computing-tutorial","tag-creative-suite-5","tag-creative-suite-6","tag-cs5","tag-cs6","tag-dynamic-text-formatting","tag-flash","tag-flash-cs5","tag-flash-cs6","tag-flash-text-formatting","tag-runtime-text-formatting","tag-text-formatting","tag-tlftext-formatting","tag-tutorial"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3nsfA-ik","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/1136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/comments?post=1136"}],"version-history":[{"count":2,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/1136\/revisions"}],"predecessor-version":[{"id":1143,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/1136\/revisions\/1143"}],"wp:attachment":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/media?parent=1136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/categories?post=1136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/tags?post=1136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/p>\n<\/p>\n<\/a><\/p>\n<\/a><\/p>\n