css

This tutorial will show you how to include an external XML text file into Flash using external Cascading Style Sheet (CSS) to get crisp, clean and elegantly styled text within your text boxes. The latter serves two primary advantages over any other approach… (1) XML allows you to populate Flash content-driven applications with data from a simple text file. This is perfect for designing reusable application where’s nobody has to come into the Flash file again; all they have to do is add new entries to the XML file. (2) Cascading Style Sheets can be used to group style rules, which can be applied to XML elements allowing you to format all of your text boxes quickly and easily by editing just one single text file.

Not long ago, editing text in Flash left little to be desired. Any formatting and updating of the text boxes had to be done within the FLA file, so a Flash designer would have to be called on for even the slightest modification – you would have to reopen the source file, go through the whole movie editing text boxes one at a time, recompile the new SWF file, then maybe, if blessed with the worlds nicest client you might get lucky and not have to redo it over and over again. Not to mention Flash’s anti-aliasing feature, which tends to hinder rather than serve any purpose at all. This became further complicated and even more of chore when in the process fonts would come out of focus (because of positioning). I’ve seen people try all sorts of ways to get rid of that blurriness and end up ripping their hair out, because all they get is what you see bellow.

So before you go bold, refer back to this article and try some of this code. To write my XML, I generally use Notepad++, which it’s just a nicer version of the typical Notepad that comes with Windows; but you can use any text editor doesn’t have to be this one. Here’s the XML file we start with.

It looks like plain old HTML doesn’t it? Absolutely, XML is very similar in many ways to traditional HTML - the difference being is that you are no longer restricted by a predefined list of tags; you can actually makeup the tag names yourself. Nevertheless don’t get too carried away, there are certain rules to naming your tags, such as not including spaces in the names, keeping your names short, simple, descriptive and all lower case. And always remembering to close your tags, every opening tag must have a matching closing tag.

The above XML reads as follow - the first line in any XML file is this XML declaration, HTML also has something like this and it’s basically just saying that this is an XML document and it should be treated as such. This is generally required but technically Flash will work either way. The next line is the root element or parent node, node is just another word for element, again this is very similar to the html tag in HTML in that every other tag will have to be nested between these two tags.

I will explain about the stylesheet in a minute, for now lets save this as “rhymes.xml” and head on over to Flash and create the code and visual elements needed to read our XML document. Open a new movie (.fla) - add two layers an Actions layers and a Visuals layer. Highlight the first frame in the Visuals layer then selects the text tool in the tools bar and drag it along the stage to create your text filed. Finally, in the text Property inspector (Ctrl F3 to access), resize it to about 400*350 pixels and set the follow options:

1. Select “Dynamic Text” from the Text Type drop-down menu. 2. In the Instance Name text box of the Property inspector, give it an instance name of “content_txt”. 3. For Line Type, select “Multiline” to ensure the text wraps correctly. 4. Select “Render text as HTML” and “Selectable” from the Properties inspector

With that out of the way, select the first frame on your Actions layer and opening the Actions panel (F9 to access) paste this code.

What the hell? Right lets go over this. What we’ve done is, create an instance of the StyleSheet class, load our stylesheet using the ‘load’ method and then associate it with our text field. Also, load our XML into Flash using the XML object and call our loadXML function to determine if our XML file loaded successfully. It seems now is a good time, or as good time as any to write our loadXML function so, open the Actions panel again and enter the following.

That’s it! Make sure to save your .fla file in the same folder as the rhymes.xml file and press Ctrl+Enter to test your movie, if you’ve followed the instructions correctly you should see some thing like this.

By George, I think we’ve got it! Though the text still seems a little dull and out of focus. Lets cut to the chase, shall we? I’m hoping you know something about stylesheets already, hopefully from working with HTML and stylesheets (CSS). If not, it’s no biggie. CSS in ActionScript is somewhat limited. The properties listed bellow are all you have access to.

To make this a bit easier for you. I’ve already created the stylesheet for you. Feel free to use it or create your own.

Save the stylesheet as “crisp_styles.css” in the same folder as your other files and, switch back to Flash to display the movie.

Not bad! But, how about adding a little more text between our XML tags to see what a real paragraph might look like. Heck, lets also add an image while we’re at it and amend the stylesheet by adding a class to give emphasis to special words within the paragraph then, we’ll return to the XML document and apply our new class to any word withing our tags as follows.

(1) Open the XML file and add this.

(2) Go to the stylesheet and paste this chunk of code.

(3) Return to the XML to apply our new class.

Needless to say you’ll need to make your own image, also I should point out that the Flash Player does not support progressive JPEG files. Now, if all is well the Flash should look like this.

That’s basically it-it might seem like a lot at first but it really isn’t all that difficult. If you still find this hard to understand, leave a reply.

Share This

You’ve heard of them Way-you-see-is-what-you-get (WYSIWYG) Editors for web development. Some common WYSIWYG editors include Front page, Dreamweaver, and so on. For beginning designers I think trying to create websites with them is quite an excellent source especially if your savvy enough to be able to look at the code a WYSIWYG editor produces, interpret it, and in the end understand what it is doing.

This method of developing websites is something I had been doing some 7 or more years ago. It taught me the hard way, by learning that spending 50+ hours on developing a garbage newbie site in Dreamweaver could look immensely better in only 15 hours tops. One thing that makes Dreamweaver unique to other WYSIWYG editors is it writes xhtml and css; the standard for compliant web design.The learning curve with one of these editors also is enormous, it’s a point and click type of deal almost like Windows (and yes, it runs on Windows).

In my own personal experience as a web designer, I found in the early days of my web development that a program like Dreamweaver where you can point and click and are then able to view the code that edited a certain region of the site was tremendous, it was something that taught me so much in so little time.

About the Author
Currently, I’m a college student studying Computer Information Systems at Cabrini College in Radnor, Pennsylvania. I work for the U.S. Navy in Philadelphia, PA as a database adminstrator full-time during the summers working with PHP, mySQL backend databases, XHtml, and Css.Enjoy the article and please visit my blog .

Share This

A typical challenge faced by Flash developers like me is getting fonts to look like you want then to. For any project choosing the right font face and size is a process that requires both you and ultimately the client to see eye to eye.

In Flash MX and earlier versions fonts were by default anti-aliased, meaning that the edges of the text are smoothed. This is good when dealing with large type but it causes small text to appear blurry. Earlier versions of Flash also had other issues. For instance if one were to realign textfields around other objects fonts might come out of focus (because of positioning), and getting it right could take several tries.

More recently with the advent of Flash MX 2004 came the “alias text” option but, more importantly the TextField.StyleSheet() class. What is the TexFiled.StyleSheet() class? I’ll get to that but first let me tell you about this new “alias text” feature. The latter hides the anti-aliasing to make small text sharper and more legible yada, yada, yada. However, most often than not, fonts appear overly pixilated and cracked. In my opinion “alias text ” is nothing more than a little ransom note generator making every character appear as if it had been cut out of a magazine. Adding insult to injury if you are publishing for the Flash 6 player or earlier versions on Flash MX 2004 the “alias text” feature does not work on dynamic and or input textfields.

Moving forward with stylesheets. If you don’t already know something about CSS don’t fret the small stuff. Get to your favorite search engine and key in CSS (short for Cascading Style Sheets), and in seconds flat you will find hundreds of articles on CSS benefits, syntax, usage and whatnots. Very quickly, CSS is the language of style on the web and as opposed to other languages CSS is much easier to read and write. One of the reasons for this is you can pretty much read everything just as you would plain English, another is the ability to write everything in lowercase, something you could never getaway with in JavaScript.

CSS in ActionScript is relatively simple. The first thing we want to do is open the Action panel and create an empty style sheet object. Basically the idea is to load our style sheet information in there (font size, weigh, color etc.), and then assign that information to some text. Not only will you have more crisp and legible fonts but more importantly, this means you can change details about your font in an entire Flash template site by simply editing one file. Pretty powerful stuff huh?

Very handy when clients decided they don’t like red anymore or call to tell you that the font is too small. In the past such changes could be very time consuming, requiring developers to go through the whole movie editing textfield after texfield one at a time; providing that the client was happy with the changes you’d might get lucky and only need to run around that track once.

In my line of work I convert pre-designed web sites (web templates) into a unique Internet project (web sites), in other words I work with pre-made website templates. The whole basis for using a website template is to develop fast and high-quality website in half the time that it would normally take a regular design studio to do the same. Utilizing style sheets with my Flash templates enables me to keep my production time at a minimum and ultimately the time I save will benefit my clients. For detail instruction on how to create a style sheet object in Flash MX 2004 simply open the help panel and search under the keywords “cascading style sheets”.

In all fairness I must also mention something about Pixel fonts. Pixel what? Pixel fonts are fonts specially designed so that every part of every character falls exactly on the monitor’s pixel. Pixel fonts are incredible at getting fonts at small sizes looking crisp and legible at any resolution. If you are wondering if Pixel fonts would display correctly on the end user’s computer or some other platforms that does not have these fonts already installed. The answer is yes, but Pixel fonts must be embedded to ensure they are displayed correctly on every computer. The downside here is that embedding these fonts means an increase in file size which in turn causes an increase in bandwidth needless to say bandwidth determines the rate at which information is sent.

Nevertheless if you want to use fonts that look crisp even at small sizes without the use of CSS, Pixel fonts are right for you. To buy and or read more about Pixel fonts checkout these website www.FontsForFlash.com and www.ductype.com.

In sum the choice is your, on smaller projects I would actually prefer Pixel fonts over Cascading Style Sheets, I mean why bring a gun to the snipe hunt when all you need is my gunnysack. On the other hand you can do without a lot of unnecessary frustration going with CSS when working on larger projects.

Share This