The solution was to make a “container” SWF file that would load in the actual content for the page.  This was nice because the container ended up also acting as a preloader for the main content.  All I had to do in the container file was to append a query string to the end of the content to load in (i.e. “photo.jpg?id=12345678″), which effectively acted as a “cache buster” that would make the browser and server think it was loading a new file each time the page was loaded.

The result was this little nugget of Flash goodness: FileLoader.

I polished up the container file I made in my solution above, adding in a couple of customizable variables, and am making it freely available for download.

Version Information:

• Version: 1.0
• Release Date: 1/12/11

Download:

Like what you see? Want to use FileLoader with your own Flash projects? Click the button below to download the most recent version of FileLoader, including a demo file with full instructions.

License:

FileLoader is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License, and is free to use. Links back to hesslerdesign.com are always appreciated. Permissions beyond the scope of this license may be available by submitting a Contact Request.

Description:

FileLoader is a simple, lightweight, easy-to-implement FLA/SWF file that acts as a preloader and container for files. It is made to load a specified URL, can enable “cache busting”, and provides the ability to change the hex color of the preloader and text. It can load any type of file that the built-in Loader class loads (SWF, JPG, PNG, GIF).

Example:

Instructions:

To use this file, simply update any/all of the customizable variables located on the aptly-named “Customizable Variables” layer (in .fla file). These variables include:

1. contentURL (String): URL path of the content you wish to load into FileLoader. (Default = “”)
2. tintHex (uint): Hex value to tint the preloader and error message. (Default = “0×000000″)
3. cacheBuster (Boolean): Enables/Disables “cache busting” on your content. (Default = “false”)

Once the variables are updated, just export the SWF and it’s ready to be embedded into your HTML page for the web.

Notes:

1. FileLoader is set up to resize itself to 100% of the stage width and height, making it flexible to be used at any size. This means you don’t have to worry about changing the dimensions of the file, and when embedding this file into your HTML page, you can specify any width and height you wish. The Preloader and Load Error (if applicable) will automatically center themselves to the stage. The content, however, has no special positioning logic, and will be placed at the (0,0) point of the stage. Thus, it is intended that this file will be embedded at the exact size of the content you’re loading into it, as this file is only intended to be a preloader and container for the contents of one file.
2. The Preloader and Load Error elements (where applicable) are automatically added to and removed from the file when needed. Your content will automatically be placed into the file when it’s loaded, and be the only item on the stage at that point. You don’t have to do anything special to get your content to display other than specifying a valid content URL.
3. When you’re ready to post the files to your website, just make sure you upload this file along with the content it loads. Also, make sure your pathing is set up appropriately for the content URL or your content may not load correctly.
4. If you update or change any of the MovieClips in the library, or update, append or change any of the code in the main Actions layer, this file may break. If you know what you’re doing with Flash and ActionScript, you shouldn’t have any problem figuring out how things work and can be edited. If you’re a beginner or novice, you may have a harder time editing. With that said, edit the non-customizable elements at your own risk.
5. If the “cacheBuster” variable is set to “true”, a random 8-digit ID will be appended as a query string to the “contentURL” variable (i.e. “photo.jpg?id=12345678“). When the cache buster is enabled, it will force the FileLoader to load a fresh version of the content URL each time it is loaded. This is helpful if you are posting your Flash content on a server with its own cache settings that would result in updated content not being immediately visible until the server cache clears. If this variable is set to “false”, no ID will be appended to the content URL, and the loaded content will be cached as normal.
6. Important: Use the cache busting sparingly and only when necessary, as it may end up bogging down the server with unnecessary calls to the server to reload the content.

With that said, on with the code!

Step 1: Set Up HTML Code

The first thing you want to do is to create two div tags in your file, each with unique IDs.  One will be the “container” for the progress bar, and the other will be located inside of it, and will be the one getting sized to show the progress.  Here’s how I have set it up:

<div id="progress-bar">
   <div id="status"></div>
</div>

Step 2: Add Some Style

Now that the basic HTML is set up (and seriously, how easy was that HTML setup?), we’ll add some CSS magic to make it look better.  Here’s how I have styled our example:

#progress-bar {border:1px solid #bebebe; background:#ffffff; width:300px; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}
#status {background:#0066cc; width:50%; height:14px; -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px;}

The important thing to note here is that the #status ID has a percentage-based width.  Since it is contained within the fixed width #progress-bar div, it’ll automatically calculate how wide it has to be.  Oh the magic of CSS!

Another thing to note here is the use of the multiple “radius” attributes for different browsers.  It’s a bit out of the scope of this post, but to make a long story short, if your browser supports one of these attributes, you’ll get a nice rounded look.  If not, it’ll just be a normal rectangle.  Your call on whether you like the rounded corners or not.

If you decide to use the “radius” attributes for styling, be warned that if the percent width on your status bar is at or lower than the radius amount, it may throw off the look of the edges, as the browser will try to “make up” the shape with corners as best it can with the radius values included. This isn’t a factor when the corners are squared off, but it’s a good thing to know up front, just in case you need small percentages used.

Also, feel free to style these with background images, with taller heights, different colors, etc.  As you’ll see in the included sample below, I’ve gone ahead and added in some background images to spice up the design a bit.

3. Jazz It Up with jQuery

Once your HTML and CSS are in place, you’re all done.  Unless, however, you want to update the progress bar on the spot in front of the user.  If that’s what you’re going for, then here’s where you can use some jQuery goodness to animate the bar however you need.

First, you’ll need the most recent version of the jQuery library.  Link it into your HTML file, and then whenever you need to change the width of the #status bar, just call a JavaScript function like this (with the “80%” width attribute set to whatever you need it set to):

$("#status").animate( { width: "80%" }, 500);

Wrapping It Up

That’s really all there is to it.  Pretty basic stuff.  But it’s definitely a nice trick to have up your sleeve.  And with a little extra work on styling and JavaScript logic, you can have some pretty robust logic that does some really cool things.  The example below shows you how the extra styling looks, and will allow you to see how the #status bar animates when the jQuery function is called.

Until next time, happy coding!

Example

Step 1: Add PHP Functions for Setting/Resetting Variables

In the last post, we set the form up so the value for each form field is set to a corresponding PHP variable. Now we need to make sure that when the form field changes and a user action (like submitting the form) takes place, the PHP variables get set to the newly updated form field values.  This is a simple process, as we just have to create a function to set the PHP variables.  And while we’re at it, we can create another function to reset the PHP variables for our ‘Clear Form’ button.  Here are the functions we’ll use.  Note that we need to use the ‘global’ keyword inside the functions to access and successfully update the variables.

function setVariables() {
   global $user_name;
   $user_name = $_POST["user_name"];
   global $user_email;
   $user_email = $_POST["user_email"];
   global $user_message;
   $user_message = $_POST["user_message"];
}
function resetVariables() {
   global $user_name;
   $user_name = "";
   global $user_email;
   $user_email = "";
   global $user_message;
   $user_message = "";
}

Again, these functions will eventually get called when a user clicks on the Submit or Reset button, respectively.

Step 2: Add PHP Functions for Form Field Validation

Now it’s time to write out the validation functions for the form.  In our example, we have three fields.  The name and message fields will be a simple character count for their validation.  In the email validation, we will use one of the well known regular expressions that will check the email value for correct syntax.

For the simple text input, we’ll create a function that accepts two arguments.  The first argument will be the value to get validated, and the second will be the minimum number of characters that need to be present in the first value.  Inside the function, there will be some simple conditional logic that will check the string length of the first value to the minimum number of characters.  We’ll also set a return value of ‘y’ or ‘n’ so we’ll know whether or not our value is valid.  Here’s what our simple text input validation function will look like:

function validateTextInput($str, $minLength=1) {
   if (strlen($str) < $minLength) {
      $lValid = 'n';
   } else {
      $lValid = 'y';
   }
   return $lValid;
}

For the email validation function, we’ll simply pass in the value to check as the one and only argument.  Inside the function, the conditional logic checks the value against the aforementioned regular expression.  And, like the text input validation function above, this one also returns a ‘y’ or ‘n’ value telling us whether or not the value is valid.  Here’s what our email validation function will look like:

function validateEmail($str) {
   if (!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $str)) {
      $lValid = 'n';
   } else {
      $lValid = 'y';
   }
   return $lValid;
}

Step 3: Add PHP Function for Overall Form Validation

Now that we have set up the individual form field validation functions, we’ll need a master function that will be called when the user clicks the Submit button.  It will validate all of our fields, and will hold logic to either show an error or send the form.  Here’s what the function will look like.  An explanation of the function is below the function.

function validateForm() {
   $default_error = "There was a problem with your entry. Please correct the following fields.";
   $error = "";

   // Set up global variables to check
   global $user_name;
   global $user_email;
   global $user_message;

   // Perform validation for fields
   $valid_user_name = validateTextInput($user_name, 1);
   $valid_user_email = validateEmail($user_email);
   $valid_user_message = validateTextInput($user_message, 5);

   if ($valid_user_name != 'y') {
      $error .= "<li>Your Name</li>";
   }
   if ($valid_user_email != 'y') {
      $error .= "<li>Your Email</li>";
   }
   if ($valid_user_message != 'y') {
      $error .= "<li>Message</li>";
   }

   // Return error value or send form
   if ($error) {
      echo "<div class=\"error\">";
      echo "<label>" . $default_error . "</label>";
      echo "<ul>";
      echo $error;
      echo "</ul>";
      echo "</div>";
   } else {
      sendForm();
   }
}

First, the function will have two variables: $default_error and $error.  As you noticed, the $default_error has the general text calling out that there’s an error, and the $error variable is blank by default.

Next, we set up the global variables that we need to check.

Third, we set up a unique variable that will be set to the return value of our individual field validation functions.  After these variables are set up, we put in conditional logic that appends the $error variable with <li> tags if the variable isn’t set to ‘y’.

Finally, there is conditional logic that checks the $error variable.  If this variable is set to anything other than its default blank value, we echo out some HTML markup that writes out our $default_error message, and then lists out each individual form field that is invalid.  If the variable is still blank, we call the sendForm() function (not included in this article – you can write that out depending on the needs of your project).

Step 4: Add Markup and Logic for Submit and Reset Button Actions

Now that we have everything set up, we obviously need to be able to call our validation and reset functions, based on what button the user clicks.  I am a fan of putting this logic inside of a <div> tag at the top of the form.  Since the validation function echos out a message if invalid, it will thus echo out to a div tag that we can style however we want.  Same with the reset logic, as we will first display a “are you sure you want to reset?” message with a ‘Yes’ and ‘No’ button.  Here’s the markup we’ll insert for this logic, that we’ll place between the opening <form> tag and the first <label>.

<!-- Error Message -->
<div id="error-message">
   <?php
   if ($_POST["submit"]) {
      setVariables();
      validateForm();
   }
   ?>
</div>

<!-- Reset Confirmation Message -->
<div id="confirm-reset">
   <?php
   if (isset($_POST['reset'])) {
      setVariables();
      echo "<div class=\"confirm\">";
      echo "<label>Are you sure you want to reset?</label>";
      echo "<div class=\"hidden\"><br /></div>";
      echo "<input type=\"submit\" class=\"button\" name=\"reset-yes\" value=\"Yes\" />";
      echo "<div style=\"display:inline; width:16px;\">&nbsp;&nbsp;</div>";
      echo "<input type=\"submit\" class=\"button\" name=\"reset-no\" value=\"No\" />";
      echo "</div>";
   } else if (isset($_POST['reset-no'])) {
      setVariables();
   } else if (isset($_POST['reset-yes'])) {
      resetVariables();
   }
   ?>
</div>

As you see, the error message <div> tag has conditional logic that checks for $_POST["submit"].  If our submit button is clicked, the two functions inside this conditional statement are fired off.  First, we call the setVariables() function, which as outlined above, sets all of our global PHP variables to the value of the form fields.  After we have called this function, we call our validateForm() function that validates each field and checks whether to display an error message or send the form.

The reset <div> tag is a bit more detailed.  Our form ‘Reset’ button is set up with name ‘reset’, which is equivalent to $_POST['reset'].  This is the first check of our conditional logic here, which calls the setVariables(), and echos out a <div> tag with the reset confirmation message and accompanying ‘Yes’ and ‘No’ buttons.

The second and third checks of the reset conditional logic check for the ‘Yes’ and ‘No’ button clicks.  If the ‘No’ button is clicked, we simply call the setVariables() function.  If the ‘Yes’ button is clicked, we call the resetVariables() function which as outlined above, resets all variables and therefore erases the form field values.

Wrapping It Up

As I mentioned at the beginning of the article, this is useful because all of the logic is done with PHP, and can thus be used on any browser and device, regardless of how the settings are configured.  What I like to do is to put all of the logic in its own file, and then include it in the page wherever I need it.  That way, if I have a completely separate set of files for full web vs. mobile, for instance, I can still use the same one file that contains the form, and style it with CSS depending on what version of the site the user is seeing.

Also, at this point, feel free to add in your own CSS and/or other HTML markup for how the form is set up and will be displayed.

Also, since there’s A LOT of code and logic here, I have gone ahead and packaged up the files in a zip file that you can download for your convenience.  The zip file includes some sample CSS styles that I have set up to customize the look of the form.

Until next time, happy coding!

With that said, here’s part 1 of how to build a bulletproof form using only HTML, PHP and CSS.

Step 1: Plan Your Form

This first step is important when building out a form.  Rather than just jumping in and starting to throw together a form, it’s helpful (and a big time-saver) to plan out what fields your form will have, and what types of fields they will be.  I find it helpful to either jot this info down on a piece of paper, or write it in pseudo-code inside of a comment block in my working file.  Either way, plan your form fields first.  It will make life much easier as you build out the form, and eventually its validation and processing.

For this tutorial, we’ll build out a form with three fields: Name, Email, and Message.  The form will also have a Submit and Reset button for form processing and resetting.

Step 2: Create PHP Variables for Each Form Field Value

Now that we have the form architecture figured out, we need to assign a PHP variable to each form field.  In our example, this means we’ll need 3 variables.  So at the very top of our file, inside of the PHP wrapper tags (<?php ?>), create a variable for each.  In our example, it will look like this:

<?php
$user_name = "";
$user_email = "";
$user_message = "";
?>

Note: This step could be swapped with step #3 below, but for the sake of brevity in this tutorial, I’m putting it here so we can plug these variable values directly in the form fields when we build out the form in step #3.

Step 3: Build Out the Form

This step is simple, as we just need to put together the pure HTML code for our form.  Our form will have two input fields and one textarea (for the message).  While assembling the code, I’m going to insert some extra <div> and <span> tags that are inserted to break up the form into containers in the absence of CSS.  This is done as a precaution for mobile devices that are not set up to enable CSS.  Many times the default is okay, but I’ve noticed that here and there, you need to hammer it down a little bit.

Another important thing that we’ll do here is to set the value of each form field to its accompanying PHP variable.  This is a setup step that will ensure that our form will “remember” its values, should any of the form fields fail in the validation process (still to come).  You know what I mean here – we’ve all been there – you fill out a long form, submit, and find out that the form is somehow invalid, and all of the form fields are blank again, forcing you to refill the entire thing all over again.  Frustrating, isn’t it?

This is actually much easier than you might think using PHP.  For the input fields, it’s a simple matter of echoing out the PHP variable inside of the ‘value’ attribute of the tag.  For the textarea, you’ll need to echo out the PHP variable between the opening and closing tags.  And don’t worry – since our PHP variables are set as empty strings by default, the fields will also be empty when the form initially loads.  But as the form and validation logic get built out, our PHP variables are set to match the form fields, and thus the form fields will be populated with the “remembered” value of the field (stored in the variables) rather than being blank.

In our example, our form looks a little something like this:

<form action="" method="post" name="contact_form" id="contact_form">
   <div>
      <label for="user_name">Your Name:</label>
         <span class="hidden"><br /></span>
      <input type="text" name="user_name" value="<?php echo $user_name; ?>" autocomplete="off" tabindex="1" />
   </div>
   <div>
      <label for="user_email">Your Email:</label>
         <span class="hidden"><br /></span>
      <input type="text" name="user_email" value="<?php echo $user_email; ?>" autocomplete="off" tabindex="2" />
   </div>
   <div>
      <label for="user_message">Message:</label>
         <span class="hidden"><br /></span>
      <textarea name="user_message" autocomplete="off" wrap="physical" tabindex="3"><?php echo $user_message; ?></textarea>
   </div>
   <div class="centered">
      <input type="submit" name="submit" value="Submit &raquo;" />
      <input type="submit" name="reset" value="Reset Form" />
   </div>
</form>

A few important notes about the form setup:

• We didn’t include any value in the action attribute for the form tag.  This is because we’re going to house all of the form logic within the same file to reduce page-to-page navigation, and the amount of external files we need to concern ourselves with.  There are different schools of thought about this, but this is the method we’ll use for this tutorial.
• As discussed above, PHP markup has been inserted into the form fields as their values.
• Each form field tag has a unique name.  This will be necessary when we start to set/reset variables and validate the form later on down the road.
• Each form field is set up here with the autocomplete attribute set to “off”. This is just more of a security precaution that I like on contact forms, that makes it so the browser doesn’t remember previous values you’ve typed in other forms, in the case that you’re using a public computer that doesn’t delete private browsing history.  (Note: This doesn’t have anything to do with the method we’re using to echo out our PHP variables into the form, as our PHP variable method will simply keep our values in the form upon unsuccessful form submission, whereas the autocomplete attribute would have a dropdown of “remembered” values of past forms when the user starts typing.)
• Overall, I’ve included a number of ids and classes in the form that will be later used to style it with CSS for browsers and mobile devices that have CSS enabled.

What’s Next

We now have the framework for our form, and have set up some of the initial PHP logic to help us populate and store form values.  In the next segment, we’ll work on adding in the variable setting/resetting functionality, as well as the validation functions.  Also, and most importantly, we’ll tie in the Submit and Reset buttons with the correct functionality to make the form do what it’s supposed to do.

Until the next part of this tutorial, happy coding!

Why, you ask?

As time goes on, I’m finding myself drawing closer and closer to sticking close to pure HTML/CSS code, with other standards-compliant languages like PHP/MySQL and JavaScript.  Not to say Flash and it’s programming language (ActionScript) isn’t compliant with anything.  I had simply found myself doing things in Flash by default because it’s what I was most comfortable with, and could do with the least amount of technical issues.

But, now that I’ve been exploring more uses for JavaScript in place of what would normally be Flash code, it’s easier and easier to pull myself away from Flash.  Plus, as I’ve been doing more and more dynamic code content with PHP, I’m finding myself a lot more excited about using PHP than I am about using Flash.  I still enjoy Flash, and don’t get me wrong — there are definitely times and places for Flash.  But for where I’m at now, I am finding that my own site doesn’t currently need to rely on Flash so much.

Outside of the programming techniques used for the most recent release of the site, I felt like it was definitely the time for a change regarding the design of the site.  The new design has a much more sophisticated simplicity and clean look than the old version. It’s focus is more on the projects and artwork, as they take a very prominent position on the Work page with only the project details to accompany them.  No fluff content just to fill in space and give users something else to read.  Only the necessities.

With that all said, I hope you enjoy the newest iteration of HesslerDesign.com.  If you haven’t already, check out the Work page, which has a few new projects listed that I’ve completed recently.  I hope you like what you see.

Until next time, happy coding!

In your CSS code, simply assign the following:

html body {margin:0px; padding:0px}

That’s it. Seriously. By default, most (I hesitate to say all) browsers have a built in 10px or so padding around the edge of the window. By setting your html and body to have no margin or padding, it effectively overwrites the browser default values and uses yours.

While you’re at it, you might also be wondering how you can center your main container in the browser window, instead of having it left-justified.  This too is easy to implement with one snippet of CSS.  Let’s go ahead and assume that your main div container has the ID “container”. Your CSS code to center the div “container” will be:

#container {margin: 0 auto; width:960px;}

Notice that in this example, you need to fix your width to a certain value so the container knows not to take up 100%. The margin setting “0 auto” tells the container to have a margin of 0 (zero) pixels on top and bottom, with auto margins on the left and right.

So there you have it. Two basic CSS rules to make your page go all the way up to the edge of the browser window, and to center your main container in the window.

Until next time, happy coding!

Step 1: Create a New Page Template

If you’re familiar with WordPress, you may know that you can create Page Templates that differ from the “index.php” page template. All you need to do when creating a new Page Template is save your new file as a unique file name (with a few exceptions) in your Theme directory, and put the following code at the top of the file:

This little snippet of code defines your file as “My Cool Template”, or whatever template name you give it. There’s plenty more about making Page Templates at the WordPress Codex, in the Pages section.

Step 2: Assign a Page Template to a Page

Once you’ve got your page templates set up, you can assign a specific page template to one of your pages in the ‘Pages’ section of your WordPress Admin. All that you need to do is get into ‘Edit’ mode for a page, then in the ‘Attributes’ section on the right, select your template under the ‘Template’ section. It’s that easy. (If you want more info on different page attributes that can be set, check out WordPress Support for Page Attributes.)

Step 3: Update the Menu List Items

Once the page templates have been set up, it’s time to set up the top nav list items to be smart enough to be classified  as “active” if the page being viewed is an instance of that page template.

(Note: When I was creating my custom template, I hard-coded my nav links because I knew exactly what links I wanted to have, and because I wasn’t interested in my theme being shared and used by others. With that said, the logic below may need to be edited if used for a template whose navigation is built dynamically.)

In the code where the navigation items are built, I initially had the following syntax used for each menu item:

This is your standard menu list item syntax for a menu item that’s hard-coded. It’s smart to use the bloginfo('url') function inside of the href to get the URL of your blog, and then append any additional directories to the end (if needed). This way, if you switch URLs, or do end up sharing the theme with others, it won’t be hard-coded to just one URL. But each <li> tag needs to have the ability to be appended with class="active" if the page being viewed is on a page with a given page template. For that, we need to add in another function (is_page_template()), and wrap it inside of a conditional statement:

The is_page_template() function checks the page against the file name of the template passed into it. When used inside a conditional statement, it will return a true or false value, depending on whether or not the page being viewed uses that template. And after applying this “active” logic to our list items, and as long as the CSS file has a style for linked list items classified as active (i.e. li.active a), any list item whose conditional statement returns a true will have the ‘active’ class assigned to it.

That’s a Wrap

So there you have it. A simple bit of conditional logic (assuming you’re decently familiar with PHP) that you can put into your menu list items so the links can be classified according to the page being viewed. Until next time, happy coding!

Step 1: Embed your Flash SWF file in your HTML page

When embedding your SWF file, give your object tags the same id and name. Your non-Internet Explorer object tag should have the id, and your IE object tag should have the name. And again, both should be set to the same value. (In this example, these attributes are set to “helloSWF”.) Additionally, you need to set the allowScriptAccess attribute of your Flash object to either “sameDomain” or “always”. Without this attribute set, you won’t be able to have Flash communicate with the HTML file. At a basic level, the object tag will need to look something like this:

Step 2: Write a JavaScript function that targets and calls to Flash

There must be a JavaScript function that acts as the mediator between HTML and your Flash SWF file. In this JS function, you need to access the SWF file. This is done by referencing the id/name (see step 1). In its simplest form, this JS function should look something like this:

function jsSayHello() {
   var mySWF;
   mySWF = document.helloSWF;
   if (!mySWF) {
      window.helloSWF;
   }
   mySWF.sayHello();
}

In this example, you’ll notice a variable that get set to document.helloSWF. If you’re using a browser that doesn’t recognize the ‘document‘ syntax, the conditional statement catches it, and uses ‘window‘ to reference the SWF file. Once the variable is set, you can simply call the function you wish to call in your Flash file by using the syntax “jsVariable.flashFunctionName()“. In our example, this is the line “mySWF.sayHello();“.

Step 3: Set functions and ExternalInterface properties in Flash

In your Flash file, you need to import the ExternalInterface Class, and add a callback that listens for the function being called from outside of the Flash file. When adding the callback, you also need to specify the function to run in your Flash file when it gets instructed to do so from the outside world. The code snippet below provides the basic structure of what you’ll need:

import flash.external.*;
ExternalInterface.addCallback('sayHello', helloWorld);
function helloWorld():void {
   // Insert actions
}

In this example, you’ll notice the addCallback accepts two parameters: (1) a String that is the function called from outside of Flash, and (2) a function inside of Flash to run.

If you want to have Flash call out to JavaScript, you can use the ExternalInterface.call method to call a JavaScript function. For example, if you wanted to call a JS function named “hiFromFlash”, the ActionScript code would look something like this:

ExternalInterface.call('hiFromFlash');

If you need to pass parameters, simply add them after the function call, separated by commas.

So there you have it. With these three items, you will be all set to have your Flash file be able to receive instructions from its parent file. Until next time, happy coding!

Download source files »

First, we need to set up the XML file.  In the text editor of your choice, you can begin setting it up by entering the following code:

<?xml version="1.0" encoding="utf-8"?>
<site>
   <theItem></theItem>
</site>

In the code above, we simply set up the main tag, named site, and put another tag named theItem inside of it. (I’m not going to get into explaining best practices for setting up XML files here. That’s a topic for another post.)  Inside the theItem tag, we can put our text. I’ll start by putting one sentence, contained inside of a <p> tag, with <b>, <i>, and <a> HTML tags.

<theItem><p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>.</p></theItem>

Save your XML file as “text.xml”.

Now that we have the XML built, let’s move over to Adobe Flash and import the XML.  With Adobe Flash open, create a new ActionScript 3.0 file, and make a new dynamic text field and name it “text_txt”.  Set the color, font, and size to your own liking.  Then, create a new layer, named Actions, and lock it.  (I always name my ActionScript layer “Actions”, lock it, and put it as the top layer.  It’s a good practice to get into if you don’t already.)  Save your Flash file in the same directory location as the XML file.

Now, in your Actions panel, type the following code:

var theXML:XML;
var xmlData:Array = new Array();
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, processXML);
loader.load(new URLRequest("test.xml"));

function processXML(e:Event){
   theXML = new XML(e.target.data);
   var xmlLength:Number = theXML.theItem.length();
   for (var i=0; i<xmlLength; i++){
      xmlData[i] = theXML.theItem[i];
   }
   text_txt.text = xmlData[0];
   text_txt.multiline = true;
   text_txt.wordWrap = true;
   text_txt.height = text_txt.textHeight + 6;
}

Here’s a quick rundown of what this code does:
- Define a new XML object named theXML
- Create a new Array named xmlData
- Create a new URLLoader named loader.  This loader then gets an event listener that will fire the function processXML when loading is complete.  To load the XML file, we load a new URLRequest to the path of our XML file (which should be in the same directory as your Flash file.)
- The processXML function then creates our XML object, filling it with the data from the loader.
- Create a number variable containing the length of the XML. This is essential for what’s coming next.
- Run a for loop starting at 0 and going through the length of the XML object.  This loop populates our Array, xmlData, with each theItem tag from the XML.
- Fill the text field with the text from the first spot in the array (our only tag in this example).
- Set multiline and wordWrap to true so the text won’t be limited to one line.
- Set the text field height so it includes all of the text, plus a few extra pixels of buffer at the bottom.

Save your Flash file and test your movie.  You’ll see something very similar to the image below, which isn’t very appealing yet.

Close the test movie and return to your Actions panel.

In the Actions panel, we’re going to change the line of code that sets the text in our text field to the array data.  Instead of using text_txt.text, we’re going to use text_txt.htmlText = xmlData[0];

Save your Flash file and re-test your movie.  You’ll notice the results are much nicer, but the lines break up each time there is an HTML tag, as in the image below.  The good news is that the bold and italic tags display the text correctly, and the hyperlink does work.  But there’s really no way to tell the user that the hyperlink is actually a hyperlink.

Close the test movie and return to your Actions panel once again.

To style our HTML text, we’re going to need to create a style sheet object and attach it to our text field.  To do this, we can use the following code, placed above our processXML function:

var textStyles:StyleSheet = new StyleSheet();
textStyles.setStyle("a:link", {color:'#01628b', textDecoration:'underline'});
textStyles.setStyle("a:hover", {color:'#d68402', textDecoration:'underline'});
text_txt.styleSheet = textStyles;

Here, we create a new StyleSheet object, and set styles for <a> tags, based on the correct syntax that Flash uses.  In this example, we assigned a color and underline to our link, and to its hover state.  (For more info on StyleSheets, consult the Flash documentation on StyleSheets.

Lastly, we set the styleSheet attribute on our text field to our StyleSheet object.

Save your Flash file and re-test your movie again.  Our lines are still broke, but our hyperlink now looks like a hyperlink.  We’re getting closer.

Close the test movie, and return to your XML file.

Here, we will get to the key to successfully displaying the HTML content correctly, and on one line:  The CDATA tag.

In order to display HTML content and special characters successfully, we need to put a CDATA tag into our theItem tag.  The syntax of the CDATA tag starts with <![CDATA[ and ends with ]]>.  It wraps around the outside of the theItem content, like this:

<theItem><![CDATA[<p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>.</p>]]></theItem>

Save the XML file, and return to Flash.  Once in Flash, re-rest your movie.  You’ll notice that the text now flows correctly, and is styled according to our HTML tags and style sheet data!

Ah, sweet success!  We did it!  But the fun doesn’t stop there.  Inside of the CDATA tag, we not only have the ability to successfully show HTML tags, but also special characters.  Let’s put some special characters into our XML tag and see what happens.

To use special characters, we will need to know the respective HTML Entity Number, which can be found at the W3 Schools website here: HTML Entity Number Reference.

Now that we have a reference for finding special character entity numbers, we’ll put in another sentence containing a handful of them to see how they look.  In your XML file, add another sentence to the theItem tag, like the one I’ve included below:

<![CDATA[<p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>. It also contains special characters, like &#198;, &amp;, &#169;, &#174;, and &#187;.</p>]]>

Save the XML file, return to Flash, and re-test your movie.  Notice that the special characters show up correctly, and in line with everything else without those annoying line breaks!

Now, I will say this:  CDATA tags aren’t needed to merely display HTML tags and special characters within Flash. Flash has done a good job with the htmlText attribute, but we still need to set up the XML file with CDATA tags to make the content flow properly without the line breaks.

Here’s a look at our final code for this test:

<!-- Begin XML -->
<?xml version="1.0" encoding="utf-8"?>
<site>
   <theItem>
      <![CDATA[<p>This is an example of XML text with <b>bold</b> and <i>italic</i> words, as well as <a href="#">hyperlinks</a>. It also contains special characters, like &#198;, &amp;, &#169;, &#174;, and &#187;.</p>]]>
   </theItem>
</site>
<!-- End XML -->

/* Begin ActionScript */
var theXML:XML;
var xmlData:Array = new Array();
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, processXML);
loader.load(new URLRequest("test.xml"));

var textStyles:StyleSheet = new StyleSheet();
textStyles.setStyle("a:link", {color:'#01628b', textDecoration:'underline'});
textStyles.setStyle("a:hover", {color:'#d68402', textDecoration:'underline'});
text_txt.styleSheet = textStyles;

function processXML(e:Event){
   theXML = new XML(e.target.data);
   var xmlLength:Number = theXML.theItem.length();
   for (var i=0; i<xmlLength; i++){
      xmlData[i] = theXML.theItem[i];
   }
   text_txt.htmlText = xmlData[0];
   text_txt.multiline = true;
   text_txt.wordWrap = true;
   text_txt.height = text_txt.textHeight + 6;
}
/* End ActionScript */

If you want the source files, you can download them here.  Download Source Files »

I hope that this sheds some light on the topic of getting HTML text to correctly display and flow inside of your Flash application.  Until next time, happy coding!