Seasons Greetings! - to celebrate the time of year Actionsprite has released a special holiday version of Tooth’n'Claw on miniclip. There’s snow, there’s presents, there’s puppies and kittens - and there’s devious snow men! Help Sam and Cody rescue all the pets before it’s too late and grab the rewards.
So while it’s still the season to be jolly play Tooth’n'Claw Holiday Version on miniclip!
I’ve been working with Flash on the iPhone for a few months now, and although I’ve successfully released a game on the App Store (check out The Hypnotist), I’ve spent most of my time experimenting and trying to discover ways of optimising code and working out just how to get the best performance out of the device with the Flash platform.
There are a lot of great tutorials out there specifying how to get the best performance out of Flash on mobile devices (and in general). Many of them talk about the subtlties of structuring your code, and some of these do have tremendous impact, however I’ve always found that the graphics are the true bottleneck for me (and collision detection - but that’s for another day).
The key generally comes down to blitting. For those who don’t know, blitting can be very simply described as the act of copy and pasting flat pixels, rather than relying on multilayerd movieclips with vectors and tweening etc. for your animation. The thing that I’ve discovered is that it’s faster to use a hybrid blit technique on the iphone than to go the traditional way.
To explain, traditional blitting would copy the pixels for every object and sprite directly onto a single bitmap canvas, however the best performance I’ve found comes from blitting to individual Bitmap objects on the screen. In one sense that’s quite handy as it means we can still work in the mind set of having separate display objects that we can position independently, on the other hand it worries me a bit because it feels like there’s something not quite right going on for that to be faster than using the one single bitmap canvas.
So the following results are based on this hybrid blit/display object technique. But there is one other little difference that I’ve seen increase performance considerably… and again it’s a departure from the standard blitting operation that can only be done with this hybrid technique. And that’s not to blit at all!
Let me explain - Blitting usually utilises a single sprite sheet to contain all of the frames of your animation, you then copy the pixels from that sheet for the particular frame as it’s being rendered, pasting them to the display, and so on as the animation cycle continues.
My approach is different, it splits the sprite sheet up into individual bitmapData objects, one for each frame, at the beginning of the program and stores them in an array. Then to render the animation, you don’t use copyPixels to blit, instead you set the bitmapData property of your sprite’s Bitmap to the appropriate bitmapData frame. Hence copyPixels never gets used - instead you’re swapping bitmapData objects. So I guess at the end of the day, this is a non-blit bitmap technique.
Based on the above bitmapData Swap technique, the following results were recorded (compiling with Flex 4.5.1.21328 and Air Beta 3.0 with an app resolution of 480×320)
Sprite size: 40×40 pixels
Sprite frame count:100 frames
Results:
For these results I was actually using an iPod touch (4th gen) which is listed as having 256MB Ram and runs at 800khz. One very useful guideline I formulated whilst doing this experimentation is a rough approximation of the amount of image data that the device can hold in memory at an one time, and that is 25 mega pixels, or 25,000,000 pixels worth of data.
For instance, if you are working at a screen res of 480×320 that would equate to 153,600 pixels worth of data - so in that case you could hold around 150 frames of animation at that full screen resolution. To put it another way, the iPhone memory could cope with @ 2,500 frames of animation at 100×100 pixels.
Bare in mind that this doesn’t reflect any intimate knowledge of the device or it’s physical specs, but is just a real world observation, and should be a handy benchmark for you to use when determining how much room you have to work with. The key indicator that you’re using too much memory seems to be a black screen of death on the device that will shut down your app and return you to the springboard.
The main reason for posting this info is that I’ve been searching online to see the best performance people have been able to achieve and am really just keen to find out what’s yielding best results for everyone out there. So in the interests of pushing the limits and spreading the knowledge please post alternative approaches that might be producing faster results. At the end of the day we shouldn’t be struggling against the technology just to get suitable performance, I’d much rather be focusing on building the content and bringing ideas to life.
I’ve looked around the web for information on measurable performance specs for Corona, if there’s anyone out there that can post a comparison it would be very interensting to see. This might be the topic for a future post.
For those of you who don’t know what parallax is, the best way to describe it is the way objects in the background tend to move less than objects closer to the viewer. Here’s a wiki link for something more indepth. Side scrolling 2D games provide the perfect opportunity to use the effect, giving the environments a great sense of three dimensional depth. This sort of trickery is often known as 2.5D as it sits somewhere between the second and third dimensions.
The best way to explain it is to see it in action, click on the image below to view a quick demo.
You can see in the demo that the environment is made of three layers with the closet layer (layer 1) moving much faster than the layers behind it. The furthest back layer (layer 3) in this case doesn’t move at all. The overall effect is quite an engaging illusion of depth.
Before going in to a description about the class I should probably mention that it doesn’t only relate just to iPhone games and of course you can use the class in any Flash project. Having said that, one of the great things about this class (and this demo) is that they run extremely well on the iPhone (on iOS4, compiling with Air 3.0). This demo is running beautifully at 60fps and you couldn’t ask for anything better (quite literally). That sounds great, and it really is, but if you’ve done any game programming in Flash before, and especially for mobile, you’ll realise that you can hit a bottle neck at any point, especially if you start working with high volumes of animated sprites or collision detection. But it’s a good starting point at least.
For the sake of demonstration I’ve bult the class here as a little stand alone item that you can easily declare and add to the stage. If you’d like to edit, rip it apart or use as is, go ahead that’s up to you. I actually use a different version for my production work that fits better into my programming structure, but it’s a good base. The usage is simple:
var myParallax:EnvironmentParallax = new EnvironmentParallax(480, 320,[bitmap_1, bitmap_2,bitmap_3]) addChild(myParallax)
The three arguments for the constructor specify the view width, view height and an array of bitmaps to use as the background layers. The order of bitmaps in the array specifies the stacking order of the layers in the movieclip with the 0 position being closer to the viewer with each additional layer being further into the background.
You can download the Class along with an example FLA here.
George Patterson Y&R contracted Code and Visual to complete and clean up the development of the Mighty Artline site on a very tight deadline. This involved re-implementing swfAddress and succesfully rebuilding the drawing function which is central to the site concept.
The site also implements Code and Visual’s cutsom form kit which streamlines the production of forms within Flash which I’m intending to release as an open source tool kit very soon.
View the site here: The Mighty Artline
Continuing on from Part Four of the Exporting for iPhone using Air 2.7 and FlashDevelop Tutorial You should should now have your app compiled to a .ipa file ready to be loaded onto your test device.
Having previously installed the provisioning profile on your test device (if you haven’t done this step, refer to Part 3) you are now ready to use iTunes to upload your app.
Plug your device in to your computer via the USB cable and load up iTunes. One your device is synced, select the “Apps” option of the “LIBRARY” section in the left hand column of iTunes. The main content area on the right will then display all of the apps you’ve got installed in your library - this is where you can drag and drop your .ipa file.
Once you’ve placed your app in the library, select your device in the “DEVICES” section of the left hand column, in the main content area on the right, select the “Apps” tab and then go to to the “Apply” button on the bottom right. Once you click that iTunes should begin to sync and will install your app in the process.
Now is when the fun begins, with your app on your test device you can see how well it performs and get a true feel for it on a touch interface. You might find that performance is not quite what you expected which may mean it’s time to start learning about how to optimise content for mobile devices. In graphics heavy apps this might mean learning how to blit graphics as opposed to relying on vectors and complex filters/animation.
Part 1 - Installation
Part 2 - Creating an iPhone Project
Part 3 - Generating Developer Certificates, Provisioning Profiles and .p12 Files
Part 4 - Creating an Air Certificate and Compiling to .IPA
Part 5 - Loading your .IPA File onto a Test Device
Continuing on from Part Three of the Exporting for iPhone using Air 2.7 and FlashDevelop Tutorial You should should now have your Apple Developer account and certificates ready to package up your app. In this part we will compile the .swf into an .ipa file ready to transfer onto an iOS device for testing.
Thanks mostly to the great work done by the author of the FlashDevelop template we installed earlier there should be a .bat file in your project folder that we will use to automate the .ipa compile. I’ve edited it a bit to work with the current packager (note, the zip package from Part Two has since been revised, download the latest template files here). Before we run the .bat file make sure you have both your Provisioning Profile and your .p12 Certificate file in the “certificates” folder of your Project. (the FlashDevelop template will have created this Certificates folder for you). A word of warning, the .bat is set up to search for iphone_dev.mobileprovisions and iphone_dev.p12 so you can either rename your files or edit the .bat file to look for whichever filenames you have, the choice is yours.
The only edit we need to make to the “PackageApplication.bat” file is to tell it where to find the Flex SDK on your machine. Open up the file in a text editor and look to the line where the FLEX_SDK value is set. Copy and paste the correct location to the Hybrid SDK you made as it sits on your harddrive. Remember to specify the bin folder and place in a trailing slash “\” at the end. Save and close the .bat file. I’d suggest going in to the template yourself and hardcoding in your Flex SDK path so that it’s a one off task that you won’t have to repeat for other projects.
Next we will open up the “application.xml” file in your project folder (again automatically created by the template) and do a bit of editing. You’ll see that there are a few options you can set to change the properties of your app but for now we will just focus on the one necessary to make the compile. In particular we need to set the ID of the app in the first XML node of the application (named “id”). Make this value the same as the Bundle ID you entered in to the Provisioning portal for your app, so in my case it will be com.codeandvisual.myawesomeapp
Close the application.xml file and double click on the PackageApplication.bat file to run it. It will take you through a few simple steps in order to create your output .ipa file.
If all has gone well your computer should have started compiling and you can go grab a coffee while you wait for it to finish, which should take a minute or two. The .bat file has got some fairly good error reporting if there have been any issues so read the output carefully and you should be able to sort through it.
In Part 5 we reach the pay off and will finally upload our app onto our iOS test device.
Part 1 - Installation
Part 2 - Creating an iPhone Project
Part 3 - Generating Developer Certificates, Provisioning Profiles and .p12 Files
Part 4 - Creating an Air Certificate and Compiling to .IPA
Part 5 - Loading your .IPA File onto a Test Device
Continuing on from Part Two of the Exporting for iPhone using Air 2.7 and FlashDevelop Tutorial You should have a FlashDevelop project built and ready to export your swf file for conversion into an iOS friendly .ipa file. In Part Three we will learn about the certificates required by Apple in order to create your .ipa file and get it on to your device. For the time being we will be compiling for testing directly on a device as opposed to uploading to the App Store, which requires slightly diferent certificates. A word of warning, although I’m generally a PC user, this stage will require a Mac in order to generate a certificate request and then convert our certificate into the right .p12 format. There is a PC alternative to this for which I’ve linked below.
I’ll start be releasing all of my Apple angst and putting it to the side. I found this part of the process to be confusing and frustrating, not in the least because in comparison to the Android work flow this whole process is unnecessary. The ironic part for me was that compared to how hard Apple have applied themselves to the “it just works” philosophy for consumers, I felt the exact opposite about the developer experience. A big part of the reason was seamingly arbitrary processes that weren’t well explained and used a lot of new jargon. The most telling observation is probably that from a standing start it took me about 2 days to complete on iOS what took about 20 minutes on Android - having had no previous experience with either. But let’s move on because it’s all worth it once you get your app playing on the device, just know that inside I’m gritting my teeth as we walk through most of these steps. Apoligies if some of my frustration seeps out.
The first thing you’ll need is an iOS Developer account (and a credit card because these cost $99 a year). Once you’ve paid your ransom you can log in to the iOS Dev Center (this seems to work better in non-ie browsers):
http://developer.apple.com/devcenter/ios/index.action
From a Flash developer’s point of view you’ll only need to come to the The iOS Dev Center in order to generate and register certificates. We’ll also need it to register the particular device we wish to test on but more about that later. I’d almost ignore everthing else as the bulk of the content is aimed towards Apple developers working in XCode. So, by way of explaination, we will require two things in order to build and test our app on an iOS device, these are:
Maybe it’s just me, but even writing the above sounds a little confusing because they are new terms that I don’t have any past experience with. Ultimately these are just authorisation keys to register your app, one is for you as a developer, and the other is sort of like a sub-authorisation for your app/device combination. Here’s a handy glossary that Adobe put together to help do a bit of the explaining.
The first thing we need to do is to get Apple to generate us a Developer Certificate. Sounds simple enough, but unfortunately it’s a multistage process and in my workflow I switch over to my trusty Mac Mini to take the path of least resistance. For those of you without access to a Mac, there’s a windows alternative method that Adobe has graciously explained, click the link below for more info:
Generating a Certificate Signing Request for iOS using Windows
On the Mac we open up “Keychain Access”. Being unaccustomed to Mac I wasn’t sure what this was or where to find it, but it seems to be the central OSX authorisation manager covering various software and devices within the Mac ecosystem. You can find it by going to Applications>Utilities>Key Chain Access.
A quick reference on locating the Keychain Access, Step 1
step 2
The process is then as follows (from Adobe’s tech note):
- On the Keychain Access menu, select Preferences.
- In the Preferences dialog box, click Certificates. Then set Online Certificate Status Protocol and Certificate Revocation List to Off. Close the dialog box.
- On the Keychain Access menu, select Certificate Assistant > Request a Certificate from a Certificate Authority.
- Enter the e-mail address and name that matches your iPhone developer account ID. Do not enter a CA e-mail address. Select Request is Saved to Disk and then click the Continue button.
- Save the file (CertificateSigningRequest.certSigningRequest).
Once you’ve saved the file to your hard drive you may as well stay on the Mac as we’ll be using it again later to create a .p12 file. Back at the iOS dev centre you can now upload this request file and get a developer certificate in return. Why all of this can’t be done magically behind the scenes on a web interface is a mystery, but that seems to be a common theme in this process.
In the IOS Provisioning Portal, click on “Certificates” in the right hand column, and then the “Development” tab in the main content area that appears on the right. From here you can go down to the bottom and click on the button to upload your Certificate Signing Request (CSR) for Apple to approve. Once you click Submit you can go back to the Development tab, if you’re not taken there automatically, and you should see your certificate listed. It might say “Pending” next to it, but if you refresh once or twice it should switch to “Issued”. Download it to your machine and then go back to Keychain Access so that we can add it to your machine. Select File > Import and then navigate to the certificate (the .cer file) you obtained from Apple. We’ll come back to Keychain Access later in order to generate a .p12 file.
In order to eventually test your app on an actual device you’ll need to register it and then add a provisioning profile on the device itself to allow your app to be installed.
The first step in this process is to find out the Unique Device ID (UDID) of your iPhone/iPod/iPad. The quickest way I know of is to hook up your device to your computer and open up iTunes. Locate your device in the left hand column (under “devices”) and click on it to open up the summary page in the main area on the right. In the first section iTunes should be displaying information about your device including Name, Capacity, Software Version and Serial Number. For some reason Apple decided they couldn’t list the UDID of your device just blatantly out there for you to see, so instead you need to know the secret place to click in order for it to appear. And that place is on the serial number. One click on the serial number and it will show your UDID which you can copy and paste (trust me, even though there is no way to selct the text, once you click you can do a ctrl+C and the UDID will be copied to your clip board).
With your UDID in hand, return to the Provisioning Portal and on the left hand column select the “Devices” option. In the Manage tab on the right hand side click on the “Add Devices” button. Here you can name your device and enter in it’s UDID.
Next we will create an App ID which will register your app and allow it on to your iOS device. On the left hand column of the iOS Provisioning Portal select the “App IDs” option and then in the main content area on the right click on the “New App ID” button. Some of these options feel a bit arbitrary and it’s not immediately obvious when and how these will be used later down the track, despite the tips Apple have given.
The first thing you need to add is a title for your app, this is purely for identification within the Portal and can be something nice and pretty like “My Awesome App” - basically the title of your app will suffice.
Next it’s the bundle seed ID, and for our purposes we’re just going to take the simple route and choose “Generate New”. From what I can tell it’s possible to have more than one app bundled together into a sort of suite which can utilise the same Bundle seed, but let’s just consider this a one off for now.
Finally you have to add a unique Bundle Indentifier which is appended on to the end of the Bundle seed in order to create the complete App ID. Probably the best advice here is to follow the same approach most people use when creating package names in AS3 and use your domain url in reverse in order to be sure that you have something truly unique. (It seems that you have to provide something that is unique not only to your own projects, but to every other app out there in Apple land). So for me I’d enter in something like com.codeandvisual.myawesomeapp. It’s not important to understand too much else, just enter in those 3 things and click Submit. At this point you should be taken back to the Manage tab of the App IDs section and your new App ID should be listed at the bottom.
Now we are able to create what is known as a Provisioning Profile. You’ll generate this using your certificate and your App ID and will be needed to allow you to get your App onto a registered iOS device. Click on the “Provisioning” option on the left hand menu of the iOS Provisioning Portal and then make sure you are on the “Development” tab of the page that loads. (You’ll switch to distribution when it’s time to actually submit your app to the AppStore). Here you can enter the required details:
Click Submit and you should see your new profile listed on the page that loads. Again this might have a status of Pending, but refresh the page and it should have updated to “Active”. We’ll install this onto our device next, so download the file and open up iTunes.
Make sure your device is plugged in and iTunes has finished synching or whatever it needs to do. Go to File>Add File To Library and select your provisioning file. Sync your device again one more time for luck and your device should be ready to receive your App when it’s compiled.
A little tip I read to double check that your provisioning file is actually installed is to try and add the file again in the same way - iTunes should tell you that a version already exists on the device if all was done correctly. You can be more categorical by going to your device and opening settings>general>profiles and seeing if your Provisioning Profile is listed.
You’re almost free of the Mac specific steps now besides one last thing, and that is to create the .p12 file which will allow you to compile your .swf to a .ipa file. For a quick footnote, here’s a definition I found about what a .p12 file actually is:
The P12 file type is primarily associated with ‘Personal Information Exchange File’. In cryptography, a public key certificate (or identity certificate) is a certificate which uses a digital signature to bind together a public key with an identity. The certificate can be used to verify that a public key belongs to an individual. This is a PKCS #12 file. In cryptography, PKCS refers to a group of Public Key Cryptography Standards devised and published by RSA Security.
All we really need to know is that it’s an authorisation certificate to please the Apple ecosphere Gods so they allow us to put our awesome app onto our device. Geez, thanks for that. In order to do so we’ll jump back to the Mac. Again there is a way to do this on windows machines which I will link to below, but for sake of ease I’m going to go the Mac path.
Click here to read how to create a .p12 file on a Windows machine
In Mac world we need to go back to the Keychain Access and from there Adobe’s notes say it best:
This .p12 file is the key to allowing you to compile a .ipa file from your .swf and install it onto your machine. Copy this to a folder handy to your development machine and you’re ready to rock’n'roll.
From this point on you shouldn’t require a Mac at all so, if you’re like me, you can power down your Mac Mini until next time you’re required by the powers that be to do something on a Mac just because they said you have to. That next time may well be when it comes time to create a deploy version of your app which will require you to redo a portion of these steps in order to upload an Appstore approved build. We’ll get to that in a later tutorial, but until that point you can fairly much develop away as you please.
In the Part Four we’ll go through the process of using the .p12 certificate and provisioning profile to generate your .ipa file ready for uploading onto your iOS device for testing.
Part 1 - Installation
Part 2 - Creating an iPhone Project
Part 3 - Generating Developer Certificates, Provisioning Profiles and .p12 Files
Part 4 - Creating an Air Certificate and Compiling to .IPA
Part 5 - Loading your .IPA File onto a Test Device
Continuing on from Part One of the Exporting for iPhone using Air 2.7 and FlashDevelop Tutorial you should now have FlashDevelop primed with the Flex/Air 2.7 SDK and you’re now ready to start building your amazing iPhone App. In Part Two you will see how to set up an iPhone Air project which will allow you to export an swf ready to be packaged up into an ipa file (the file format for iPhone Apps).
We’ll skip through actually coding your application as this is a topic in-and-of itself, but for the most part it’s no different to coding any other SWF, you just have a few more considerations to make, eg. the touch interface and importantly, memory management. I don’t mean to brush over the topic but it will have to be covered in another tutorial.
In order to create iPhone projects the easiest thing to do is to install a template into FlashDevelop. Here’s a template you can download that I use:
The original was created by a German blogger and contains a couple of handy dynamic .bat files that you will use to package your .swf into a .ipa file. I’ve editied it a little bit so that works with Air 2.7.
Once you’ve downloaded and unzipped the template you can install it into FlashDevelop by copying it into the correct Projects folder. This one confused me for a while as there are two projects folders. One is part of the FlashDevelop install directory and the other is in your user appData folder. There is a handy shortcut from the FlashDevelop interface that will open up your appData folder and it seemed to make sense that this woud be the location to copy the files to, but I’ve only been able to get results by copying directly into the applications install directory, so that’s what we’re going to do here.
Once you find FlashDevelop in your Program files directory (hint if you’re using a 64 bit system it will be installed into “Program Files (x86)” ) go in to the directory named Projects. Here you will see that there are already some Project Templates installed as they come standard with FlashDevelop. Copy the downloaded iPhone/Air Template into this folder. Once you restart FlashDevelop it will be there for you to select when you choose to create a new Project.
In Part Three we will export our project and learn how to get a certificate from Apple in order to export and package up the swf into an ipa file.
Part 1 - Installation
Part 2 - Creating an iPhone Project
Part 3 - Generating Developer Certificates, Provisioning Profiles and .p12 Files
Part 4 - Creating an Air Certificate and Compiling to .IPA
Part 5 - Loading your .IPA File onto a Test Device
With the recent release of Air 2.7 Adobe is claiming that they’ve increased performance by up to 4 times what was previously possible. You have to take that with a grain of salt though as the proof is always in real world use and while I would definitely say 2.6 was a vast improvement upon 2.5, I’ve not seen a quantum leap in performance moving on to 2.7 - not for the games I build anyway (Adobe seemed to have focussed on media playback (video,sound etc.)). Having said that, we’re light years ahead of where we were with the original Flash iPhone exporter and now making games for iPhone is a real and plausible proposition!
So now on to the game. It’s DoodleJump meets Bloons! OK I admit that phrase ran through my head once or twice, but I’m yet to be convinced there is glory to be had from riding on the coat-tails of other previous winners. The thinking for Spider Leap is that it takes the “get as far/high as you can” aspect of DoodleJump and combines it with the importance of accuracy as in Bloons. Neither of those ideas are unique even to the two games I’ve mentioned so it’s valid enough to use them as a starting point. Hopefully by combining the two it’ll have a combination of challenges that work well together
Click and drag the mouse to make the spider jump. Grab as many stars as you can without falling off the bottom of the screen. Watch out for bees as they will knock you from your path.
You can see the development is quite far along, the inspiration came from a quick demo I released a few weeks ago but I am still not sure where to take the game play aspect. Right now I’ve covered the screen with stars and there is no win/lose condition (besides falling off the bottom of the screen) But what I’m thinking is that you may be required to achieve a certain score per level (obviously to get harder and harder). I won’t go in to all the other scoring mechanics I’ve had, but there have been 3 or 4 that I’ve been circling around, unable to find the right implementation.
As for the look, I made it water coloured just to be a bit different, hopefully it doesn’t turn people off because it’s not “gamey” enough, but I thought it was kind of interesting - I haven’t seen too many other games using that style.
I’ve been building Flash sites and applications for a while now and I still sometimes forget how to properly embed fonts for use with dynamic text. I’m not talking about populating existing TextFields that have manually had fonts embedded in them, but rather more complex situations where you are either dynamically creating TextFields or you want to have complex formatted paragraphs, perhaps containing different fonts and weights in the one field. This is when things start to get a bit trickier.
Benefits of Embedding Fonts
If you are using a CMS for Flash such as Rainbow Live, you will want the text to display in your swf file the same way it looks in the rich text editor, and that means embedding fonts. What can make this confusing is that if the font is installed on your computer (as it probably will be seeming as your the developer) the text will appear to display properly while you test on your machine, however when someone views the file that doesn’t have the font installed, they will be greeted with a default font instead, and that could really kill your site’s mojo (Times New Roman anyone?). One clue you might have as to an unembedded font is that it will not display antialiased.
Two Approaches
So we’re going to go through two approaches here and the difference depends on how you want to work, as well as if you want font and style variations in your text display. These examples will be as code focused as possible, but there is no reason why you can’t apply the same approach to TextFields on the stage or from the library.
I use this approach when I only need to have a single font per TextField, but I want the flexibility to be able to change what that font is via code without having to go in and change the font properties on an actual TextField in the Flash IDE.
The first thing to do is embed some fonts. For this example we’ll choose two fonts, I’ve chosen Comic Sans and Impact as they are both easily recognisable and it will be easy to double check if they are displaying properly. To embed the fonts, go to the Flash IDE and do the following:
Embedding a Font in the Library
Now that the font is embedded let’s see how we use that font in a TextField. Remember you can do this with a TextField you’ve manually created and placed on the stage, but I will be creating the field with code in this example.
import flash.text.Font; import flash.text.TextField; import flash.text.TextFormat; // //------------------------------------------------------- // CREATE HEADING // // Build Textfield and Set Some Basic Properties. // (You won't have to do this if you are using a manually created TextField) //------------------------------------------------------- var myHeadingField:TextField = new TextField() myHeadingField.embedFonts = true myHeadingField.selectable = false myHeadingField.autoSize = "left" // //------------------------------------------------------- // Create Font Reference and TextFormat //------------------------------------------------------- var myHeadingFont:Font = new heading_font() var myHeadingFormat:TextFormat = new TextFormat(myHeadingFont.fontName,20) myHeadingField.defaultTextFormat = myHeadingFormat // //------------------------------------------------------- // Populate TextField With Text and Add to Stage //------------------------------------------------------- myHeadingField.text = "Here Is An Example Headline In Impact" myHeadingField.x = 10 myHeadingField.y = 10 addChild(myHeadingField)
As you can see in the code above we simply create an instance of the font, and then use the fontName property to set this as the font of a new TextFormat. We can then use this TextFormat to style and TextField we choose. You could reference the font name directly without creating a Font instance such as:
var myFormat:TextFormat = new TextFormat("Impact",20)
But I find that there are a couple of downfalls with this approach. Firstly it means that you are being specific about which font you are using for the headline, this means that if you change your font from Impact to Helvetica you are going to have to come in and change your code so that you’re telling the TextFormat to use “Helvetica” instead of “Impact”, abstacting this part means that you only have to update the font in the IDE and everythign will continue to work. The second advantage is if you are working with swcs as opposed to an FLA file (You might be working with FlashDevelop, Flash Builder or a similar development environment) your font won’t actually be embedded unless it is mentioned explicitly somewhere in the code, hence this technique kills two birds with one stone.
Similarly, to embed a second font for your body copy follow the same process by first embedding the font and then aplying it with code. You might end up with something along the lines of the following:
// //------------------------------------------------------- // CREATE BODY // // Build Textfield and Set Some Basic Properties. // (You won't have to do this if you are using a manually created TextField) //------------------------------------------------------- var myBodyField:TextField = new TextField() myBodyField.embedFonts = true myBodyField.selectable = false myBodyField.wordWrap = true myBodyField.width=450 // //------------------------------------------------------- // Create Font Reference and TextFormat //------------------------------------------------------- var myBodyFont:Font = new body_font() var myBodyFormat:TextFormat = new TextFormat(myBodyFont.fontName,16) myBodyField.defaultTextFormat = myBodyFormat // //------------------------------------------------------- // Populate TextField With Text and Add to Stage //------------------------------------------------------- myBodyField.text = "Here is some body copy for the text embed example. You could use data from an XML file to provide the text content for each of these TextFields" myBodyField.x = 10 myBodyField.y = 40 addChild(myBodyField)
And heres our output:
The second technique is for those times when you wish to use more than one font, or even just use more than one font style (such as using Bold and Italic) as these are considered separate fonts by Flash.
You start things off the same way by embedding the fonts that you’ll need to use, remember to embed Bold, Italic and Bold Italic as individual fonts. Follow the ‘Embedding a Font in the Library’ section above.
In this example I’ll use the same two fonts, Impact and Comic sans, but instead of using two separate TextFields to display the Heading and Body I will display them both in the one field. This is useful for a number of reasons, but in general it means that you can display a chunk of HTML formatted text in the one TextField without having to create a new one for each piece of different formatting within the text block. This is great for working with Rich Text Editors in a Flash CMS such as the one in Rainbow Live, which means the user can edit and format the text as they wish and it can display within Flash without having to be limited by a predefined content structure.
Here’s a screen shot of the text as edited in Rainbow Live:
You can see there are two heading sections and a couple of paragraphs along with some bold and italic text. You can display embedded fonts at any size so there is a smaller footnote section thrown in for good measure also.
The trick behind Rich Text Editors in Flash is that they use a subset of Flash Friendly HTML to style the text. Flash only supports some of the more simple HTML elements such as <p>, <a> and <img>,for a complete list view the support docs from adobe.
Here’s the HTML output from Rainbow:
<TEXTFORMAT LEADING=”2″>
<P ALIGN=”LEFT”>
<FONT FACE=”Impact” SIZE=”20″ COLOR=”#333333″ LETTERSPACING=”0″
KERNING=”0″>Here Is An Example Headline in Impact</FONT>
</P>
</TEXTFORMAT>
<TEXTFORMAT LEADING=”2″>
<P ALIGN=”LEFT”>
<FONT FACE=”Comic Sans MS” SIZE=”12″ COLOR=”#333333″
LETTERSPACING=”0″ KERNING=”0″></FONT>
</P>
</TEXTFORMAT>
<TEXTFORMAT LEADING=”2″>
<P ALIGN=”LEFT”>
<FONT FACE=”Comic Sans MS” SIZE=”16″ COLOR=”#818181″
LETTERSPACING=”0″ KERNING=”0″>Here is some body copy for the
text embed example. This data has been formated with the
<I>Rich Text Editor</I>in
<B>Rainbow Live*</B></FONT>
</P>
</TEXTFORMAT>
<TEXTFORMAT LEADING=”2″>
<P ALIGN=”LEFT”>
<FONT FACE=”Comic Sans MS” SIZE=”12″ COLOR=”#818181″
LETTERSPACING=”0″ KERNING=”0″>
<I>* learn more about</I>
<FONT COLOR=”#333333″>
<I></I>
<FONT COLOR=”#3452FF”>
<A HREF=”http://www.codeandvisual.com/rainbow”
TARGET=”_blank”>
<I>Rainbow Live Flash CMS</I>
</A>
<FONT COLOR=”#818181″></FONT>
</FONT>
</FONT>
</FONT>
</P>
</TEXTFORMAT>
<TEXTFORMAT LEADING=”2″>
<P ALIGN=”LEFT”>
<FONT FACE=”Comic Sans MS” SIZE=”12″ COLOR=”#333333″
LETTERSPACING=”0″ KERNING=”0″></FONT>
</P>
</TEXTFORMAT>
<TEXTFORMAT LEADING=”2″>
<P ALIGN=”LEFT”>
<FONT FACE=”Comic Sans MS” SIZE=”12″ COLOR=”#333333″
LETTERSPACING=”0″ KERNING=”0″></FONT>
</P>
</TEXTFORMAT>
<TEXTFORMAT LEADING=”2″>
<P ALIGN=”LEFT”>
<FONT FACE=”Impact” SIZE=”20″ COLOR=”#333333″ LETTERSPACING=”0″
KERNING=”0″>Here is a Second Heading</FONT>
</P>
</TEXTFORMAT>
<TEXTFORMAT LEADING=”2″>
<P ALIGN=”LEFT”>
<FONT FACE=”Comic Sans MS” SIZE=”12″ COLOR=”#333333″
LETTERSPACING=”0″ KERNING=”0″></FONT>
</P>
</TEXTFORMAT>
<TEXTFORMAT LEADING=”2″>
<P ALIGN=”LEFT”>
<FONT FACE=”Comic Sans MS” SIZE=”16″ COLOR=”#818181″
LETTERSPACING=”0″ KERNING=”0″>If we wanted to do this with the
first text embed example we would have had to have a separate
TextField for each heading and copy section. This option allows
us to have as many heading and body sections as we like within
the one TextField.</FONT>
</P>
</TEXTFORMAT>
You’ll notice a lot of TEXTFORMAT and FONT tags in the markup. These are created especially for use in Flash and are now superceded in standard HTML. Flash will also recognise HTML formatted without these tags but unfortunately won’t recognise div or table tags (along with many others).
Now that you have some HTML to display, we can display this text very similarly to the first example, with one important difference in particular - use of the TextField.htmlText Property rather than TextField.text
import flash.text.Font; import flash.text.TextField; import flash.text.TextFormat; // //------------------------------------------------------- // Make Reference To Fonts //------------------------------------------------------- var style_heading:Class = heading_font var style_body:Class = body_font var style_body_italic:Class = body_font_italic var style_body_bold:Class = body_font_bold var style_body_bold_italic = body_font_bold_italic // //------------------------------------------------------- // CREATE HEADING // // Build Textfield and Set Some Basic Properties. // (You won't have to do this if you are using a manually created TextField) //------------------------------------------------------- var myField:TextField = new TextField() myField.embedFonts = true myField.selectable = false myField.wordWrap = true myField.width = 450 myField.multiline = true myField.autoSize="left" myField.condenseWhite = false // // //------------------------------------------------------- // Populate TextField With Text and Add to Stage //------------------------------------------------------- myField.htmlText = '<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Impact" SIZE="20" COLOR="#333333" LETTERSPACING="0" KERNING="0">Here Is An Example Headline in Impact</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333" LETTERSPACING="0" KERNING="0"></FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="16" COLOR="#818181" LETTERSPACING="0" KERNING="0">Here is some body copy for the text embed example. This data has been formated with the <I>Rich Text Editor</I> in <B>Rainbow Live*</B> </FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="12" COLOR="#818181" LETTERSPACING="0" KERNING="0"><I>* learn more about</I><FONT COLOR="#333333"><I> </I><FONT COLOR="#3452FF"><A HREF="<a href="http://www.codeandvisual.com/rainbow">http://www.codeandvisual.com/rainbow</a>" TARGET="_blank"><I>Rainbow Live Flash CMS</I></A><FONT COLOR="#818181"></FONT></FONT></FONT></FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333" LETTERSPACING="0" KERNING="0"> </FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333" LETTERSPACING="0" KERNING="0"></FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Impact" SIZE="20" COLOR="#333333" LETTERSPACING="0" KERNING="0">Here is a Second Heading</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="12" COLOR="#333333" LETTERSPACING="0" KERNING="0"></FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="16" COLOR="#818181" LETTERSPACING="0" KERNING="0">If we wanted to do this with the first text embed example we would have had to have a separate TextField for each heading and copy section. This option allows us to have as many heading and body sections as we like within the one TextField.</FONT></P></TEXTFORMAT>' myField.x = 10 myField.y = 10 addChild(myField)
You’ll see at the beginning of the code we’ve made reference to the font classes the we created and embedded in the library, there’s no need to make instances of them as we don’t need to apply the fonts to the text manually because this is all being set in the HTML content. As long as the classes are referenced by name we can be sure they’ll be available to Flash at run time.
Here’s the output:
Immediately the power of this approach becomes clear - you don’t have to limit or second guess the exact structure of the content being displayed in the text field, and by using an external XML source you’ll have incredible flexibility in what you’ll be able to display. You’ll see that you can change colours and font sizes and even embed links. It’s also possible to display images via a standard <img>, tag within your HTML content, however your control options about how the images display are slightly limited.
That’s It!
And so that’s the end of the Flash text embed crash course, I hope you found it a useful reference. If you’d like to download the sample files you can download them here:Download example files
Learn more about Rainbow Live and how to use it a a simple Flash CMS, or even to make your Flash sites more Google Friendly.
