XML

If reading big thick books just isn’t your thing, see if you can master some of the idiosyncrasies of Flash with ready made website templates. By now most of you already know that website templates can save you a lot of time and effort, but did you know they can also be wonderful as a gentle introduction to the world of web design? Think about it, by having access to the website templates source files we’re actually being given the opportunity to be taught and inspired by the combine efforts of many very skilled developers.

The most common types of ready made web designs are CSS (cascading style sheets) templates and Flash templates. In any given week, I’ll visit a gallery, download a template and try to teach myself a new technique. The code on most premium templates is heavily commented witch makes learning new methods very simple and easy-to-follow. Whether you’re a complete Flash beginner or someone wanting to quickly get up to speed with some new trick in CSS, Flash CS3 and ActionScript 3, premium templates are what you need.

This is perfect for designing reusable apps such as pre-loaders, image galleries and contact forms where’s with the website templates you don’t need to reinvent the wheel anymore. CSS templates can be used to study two to three column layouts and style rules, which you can later apply to any project. Another good example are scalable layouts templates, commonly knows as liquid templates or stretched templates, with one of these ready made liquid templates you’ll be able to master the art of getting around varied screen sizes and resolutions. My personal favorite templates are XML Flash templates because of their unique feature which allows the content to be loaded onto the Flash templates via any text file – a function to keep handy if your ever around Flash.

Yeah, you could spend hundreds of hour reading tutorials on all sorts of topics by rhetorical experts peddling everything from color schemes to grid design, however most of that is either to technical or just isn’t practical in the real world where clients demand more professionalism. The great thing about premium templates is that they are created by professional web designers using the latest technology. In other words these ready-made website templates are made by people that understand typography, layout things like that; skills one could only wish to achieve after years of practice as a graphics designer and or programmer.

Where were website templates 10 years ago, when I first got into Flash? Anyway, these are just some of the benefits of website templates, I’m sure there are many more so please feel free to leave me your thoughts, comments and or experiences you may have had using templates. Also, mustn’t forget to mention that most premium templates shops will even give you a website template free so you can evaluate the quality of the product and try your skill before you buy.

Share This

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

The year was 1985 Saturn makes its national deybute as ” A Different Kind of Car Company” (that’s a laugh!), MacGyver premieres on ABC, and the first film in Steven Spielberg’s “Back To The Future” trilogy profitably brands Marty McFly as a household name. Marty is an average 80’s teenager, except for one problem. He is stuck in 1955. Now, the only other way to get back is to generate 1.21 gigawatts of electricity, but the only source strong enough to generate that kind of power is a bolt of lightning; unfortunately it’s impossible to determine when and where they will strike.

Our topic here is accessing symbols in XML Flash Templates, which is rather like being stuck in 1955 trying to jumpstart a DeLorean. Sure, there are geeks who can do XML, and there are frilly frou frou types that are great at Flash. But an artist writing XML? Or a coder doing Flash movies? Wouldn’t this kind of crossover require a flux capacitor and run the risk of a major disruption to the space-time continuum? Apparently not. In the previous articles (XML Flash Templates - Maintaining your Flash website made simple!) I introduced you to XML Flash Site templates a new product category with a unique feature allowing content to be loaded onto Flash via an XML file.

Basically, what this does is grant anyone the simplicity of editing the Flash template’s content from a text editor, and still keep the performance and beauty of Flash intact. Notwithstanding, what if I needed to access the elements (or “symbols” sometimes these two words may be used interchangeably) within the Flash Template itself (e.g. the frilly frou frou)?
There are three different ways you can do this you can “A” double click the symbol on the stage to edit it in place, “B” select an instance of the symbol on the Stage and right-click (Windows) or Control-click (Macintosh), and select Edit in Place or “C” which in my opinion is the safest and easiest way to access Flash elements and that is through the symbols library. You can launch it using Ctrl+L hotkey or by selecting Library from the Windows menu. Note directions apply to both XML Flash templates and all other Flash template types.

The Library contains all bitmaps, sound and movie clip symbols used in the Flash template. To make the customizations of our XML Flash template easier for our customers we have allocated all symbols in individual folders with appropriate names. For example jpeg and or png files would be within a folder named “bitmaps”. Likewise, you will find a “buttons” folder also for buttons symbols and so forth.

As you browse through the symbols library you will be able to see the content of each symbols in the preview area, however if nothing shows in the preview area it means that the symbols color is the same as the background color. For example you would not expect to see white text on white background. You can easily remedy this by momentarily changing the movie background color. Press Ctrl+J hotkey to open Movie Properties window, and select a lighter or darker shade of color.

In some cases you might also want to duplicate a symbol. The menu, for example, may have a total of 5 main navigation items and you desire to add one more (i.e. you wish to include a FAQ page); from the symbols library, what we need to do is right-click (Windows) or Control-click (Macintosh) the symbol, select Duplicate Symbol and give the duplicate symbol it’s name. Next, drag the symbol unto the stage and give it an instance name. Note an instance name and a symbol name are tow totally different things. Meaning, that while there may be two or more instances of the same symbol with the same name “symbol 1”, each instance must have assigned a unique identifier (e.g. instance name) for all ActionScrip reference purposes.
To edit the symbol, you simply double click the symbol to access it in the Main Area. Then double click the text area and enter your own slogan. Once you edit a symbol, Flash updates all the instances of that symbol in your document. You can customize all other Flash elements by repeating these simple steps.

Share This

On September 18th, 2007 templatemonster.com, announced that it now offers XML Flash Site templates a new product category with a unique feature allowing content to be loaded onto Flash via an XML file, no doubt aimed at lessening the convoluted task of running and maintaining Flash Sites.

One of the claims made on the templatemonster web page is:

“XML Flash Site templates are equipped with the system that will simplify your work with the Flash website by giving you the opportunity to edit it without having to use the special Flash software for that (you only work with the XML file)”

What their basically saying is that I can get the functionality and simplicity of editing my template’s content from a text editor, and still get to keep the performance and beauty of a premium Flash website.

So I decided to put this to the test, using a free sample XML Flash site, a copy of which I have taken the liberty to make available to you here (Free XML Flash Site Template Tryout). Don’t mention it! Besides as a developer you’re expected to be somewhat comfortable around XML. So if you aren’t, this free XML Flash Site template is just what you need to start getting your hands dirty.

Once I extracted the files I opened the site_flash directory, located the tfile_main.xml file and in just a few key strokes same as I’m doing right now I was literally changing menu items, adding more links, and even editing the content throughout the entire Flash template instantly requiring no prior knowledge of Flash whatsoever (I only worked with the XML file). What I liked best of all is not having to buy some hyphy Flash software in fact I did all my editing in Notepad. I simply edited all my stuff from the text file, changed whatever I wanted, and still kept the efficiency and beauty of Flash totally intact. Seriously, it’s unbelievable!

One neat thing XML Flash Site templates allow me to do is add as many “read-more” pages as I want or, for that matter, any page. Here’s what you do. I wont go into too many details-this is already beyond the scope of this article, and you’re darn smart.

Copy (Ctrl+C) an existing code for a “read-more” button

, find an area where you want the button to be, paste (Ctrl+V) and give it a unique identifier

The same if you were to add a 3rd button you’d change this function to a “2” the 4th would be “3” etc… Mi conprende? Oh yeah! I almost forgot, in addition to that little tidbit you’ll need to copy the existing code for a read-more page and paste (Ctrl+V); then replace the old text with new text and give it title. See? That wasn’t too bad.

The greatest gain for web site owners is they wont have to hire someone each time they have to make a change on their website. XML Flash site templates will let you circumvent the need to modify FLA source files whenever you need to change some text or move some pictures around. And it’s not just for beginners either, just think of the time we’ll save, I cant tell you the number of times I’ve been coding away the hours seemingly making huge progress, when out of nowhere I’ve got one of these “Flash has encountered a problem and needs to close” Dam!

Lastly, here’s the basic information you need to edit XML Flash site templates.

Open the “tfile_main.xml” file in the text editor (e.g. Notepad ++). DO NOT rename this file. Otherwise you’re screwed. Find the text you need and type in your new text. Upload all files to your public_html folder. All files should be placed in one folder. Also there are a number of free XML text editors that offer some really neat features such as color-coded text and section highlighting which can be very helpful. If you would like to find a text editor that provides this feature, try searching Google for a free XML editor or if you like you can contact the Foamers.net Web Team for our recommendations.

Share This