Interactive IQ : The Hessler Design Blog » Tutorials http://www.hesslerdesign.com/blog Smart Developers = Smart Websites Thu, 26 Jan 2012 23:00:19 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Formatting Raw Numbers with Commas http://www.hesslerdesign.com/blog/tutorials/formatting-raw-numbers-with-commas/ http://www.hesslerdesign.com/blog/tutorials/formatting-raw-numbers-with-commas/#comments Tue, 26 Oct 2010 14:48:44 +0000 Anthony http://www.hesslerdesign.com/blog/?p=637 I’ve worked on a number of Flash projects where I’ve needed to convert a raw number into a correctly comma-formatted string for display.  Doing this is a relatively simple process, but since I found myself repeating the same chunk of code in multiple projects, I ended up creating a function that I could reuse over and over again. And the nice thing about this chunk of code is that, with a few language-specific modifications, you can use it as JavaScript, PHP, etc.

// This variable gets set as 1,234,567,890
var commaFormattedNumber:String = formatWithCommas("1234567890");

function formatWithCommas(pNum_str:String):String {
   var lReturn_str:String = "";
   var lStringAsArray_arr:Array = pNum_str.split("");
   var commaCounter_num:Number = 1;
   for (var i=lStringAsArray_arr.length-1; i>=0; i--) {
      lReturn_str = lStringAsArray_arr[i] + lReturn_str;
      if ((commaCounter_num == 3) && (i != 0)) {
         lReturn_str = "," + lReturn_str;
         commaCounter_num = 1;
      } else {
         commaCounter_num++;
      }
   }
   return lReturn_str;
}

Notes:

  • In our example, we pass in 1 String value into the function, and it returns a String.
  • Inside of the function, we split the passed-in string into an Array, then we loop through the array backwards, adding the number in each array slot each time through the loop.
  • While looping through the array, notice that we have the variable commaCounter_num, which keeps track of which slots to also add in a comma. The conditional logic checks if the commaCounter_num is up to 3 and if the value of i is NOT zero. If both of these are true, we add in a comma and continue on. We must add the check of ensuring that i is not zero, so we don’t get a 6-digit number, for example, that ends up being returned with a comma at the very beginning of the string.

So there you have it.  A nice little chunk of code you can use to format a number into a correctly comma-formatted string. Not a whole lot to it, but still a nice reference function to have for future use.

Until next time, happy coding!

]]> http://www.hesslerdesign.com/blog/tutorials/formatting-raw-numbers-with-commas/feed/ 0 Making Your Web Page Elements More Dynamic with PHP Variables http://www.hesslerdesign.com/blog/tutorials/making-your-web-page-elements-more-dynamic-with-php-variables/ http://www.hesslerdesign.com/blog/tutorials/making-your-web-page-elements-more-dynamic-with-php-variables/#comments Thu, 30 Sep 2010 18:08:00 +0000 Anthony http://www.hesslerdesign.com/blog/?p=629 One of my little PHP tricks I have become a big fan of is having a set of variables at the top of each file that I use to populate values later on in the file. For instance, I often bulk all of my <head> tag content into one file, and then have a “include_once("headTag.php");” to write it into each file in which it needs to be. If I do this though, I’m stuck with the same page title, description, etc. Or am I?

If I include a standard set of variables at the very top of each of my PHP files for my site, I can then utilize those variables in any file that is written into that file. So if I want a custom page title on each page, I can make a variable named $pageTitle_str, and set it equal to whatever I want to be the page title for that particular page.  Then, in the file that includes all of the <head> tag content, I would have a little PHP logic to echo that into the <title> tag.  And if I use conditional logic to echo it in, I can set the title to a default value in case the variable isn’t found.

Here’s how it’s done. In the example below, I have the PHP code for a fictitious page in my site that will be placed on the top of that file. I also have the <title> tag for the file that is written into this fictitious page, which includes the conditional logic to echo in the variable for page title.

File – fictitious.php
Code Snippet:
   <?php
   $pageTitle_str = "Custom Page Title";
   ?>

File – headTag.php
Code Snippet:
   <title><?php if ($pageTitle_str) { echo $pageTitle_str; } else { echo "Default Page Title"; } ?></title>

And that’s all there is to it. The <title> will be written out whether the variable exists or not. And if you include the variables on each page, you can do WAY more than just setting page title. You can set sections and subsections for use in styling in a top navigation file, or have custom descriptions or keywords for the <head> tag on each individual page. The possibilities are endless.

Until next time, happy coding!

]]> http://www.hesslerdesign.com/blog/tutorials/making-your-web-page-elements-more-dynamic-with-php-variables/feed/ 0 Build a Customized Progress Bar Using CSS and JQuery http://www.hesslerdesign.com/blog/tutorials/build-a-customized-progress-bar-using-css-and-jquery/ http://www.hesslerdesign.com/blog/tutorials/build-a-customized-progress-bar-using-css-and-jquery/#comments Wed, 11 Aug 2010 19:30:02 +0000 Anthony http://www.hesslerdesign.com/blog/?p=590 One nice feature that many websites have is a progress bar.  They come in many shapes and sizes, whether they are showing a user what step they’re on in a process, what percent of the way through a process the user is, etc.  And today, with the use of trusted CSS and JavaScript (in the form of the jQuery library), a progress bar has never been easier to create with a minimal amount of images needed.  (Truthfully, you don’t need any images, but in the example below the tutorial, I’ve used a few to add some nice styling to the example.)

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

]]> http://www.hesslerdesign.com/blog/tutorials/build-a-customized-progress-bar-using-css-and-jquery/feed/ 0 Bulletproof Your Online Forms for Mobile Devices with PHP – Part 2 http://www.hesslerdesign.com/blog/tutorials/bulletproof-your-online-forms-for-mobile-devices-with-php-%e2%80%93-part-2/ http://www.hesslerdesign.com/blog/tutorials/bulletproof-your-online-forms-for-mobile-devices-with-php-%e2%80%93-part-2/#comments Tue, 10 Aug 2010 16:50:54 +0000 Anthony http://www.hesslerdesign.com/blog/?p=566 In the last post, we explored how to set up an online form using HTML and PHP. In this post, we’re going to finish setting up the logic to store form field values and validate the form.  If you haven’t read the last post and want to catch up, please click here to go to part 1.

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!

]]> http://www.hesslerdesign.com/blog/tutorials/bulletproof-your-online-forms-for-mobile-devices-with-php-%e2%80%93-part-2/feed/ 3 Bulletproof Your Online Forms for Mobile Devices with PHP – Part 1 http://www.hesslerdesign.com/blog/tutorials/bulletproof-your-online-forms-for-mobile-devices-with-php-part-1/ http://www.hesslerdesign.com/blog/tutorials/bulletproof-your-online-forms-for-mobile-devices-with-php-part-1/#comments Tue, 03 Aug 2010 16:09:28 +0000 Anthony http://www.hesslerdesign.com/blog/?p=541 The more popular mobile devices get, the more reason there is to be cautious and deliberate when creating your website. While there are a bevy of issues in dealing with creating mobile-friendly sites, the one I’d like to focus on here is building out an HTML form. More specifically, since some mobile devices don’t have JavaScript enabled (either by default or by choosing, either way done to increase speed on your device), it’s not necessarily good to rely on JavaScript validation for your forms. And, since most current mobile devices aren’t Flash-friendly either (thank you Steve Jobs), the best method in creating a form is using HTML, styled with CSS, and using PHP for validation and processing.

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!

]]> http://www.hesslerdesign.com/blog/tutorials/bulletproof-your-online-forms-for-mobile-devices-with-php-part-1/feed/ 0 Streaming RSS Feeds into Your Flash Application http://www.hesslerdesign.com/blog/flash/streaming-rss-feeds-into-your-flash-application/ http://www.hesslerdesign.com/blog/flash/streaming-rss-feeds-into-your-flash-application/#comments Thu, 17 Dec 2009 21:30:35 +0000 Anthony http://www.hesslerdesign.com/blog/?p=300 One of the great things about RSS feeds is that RSS formats are specified using XML.  Because of this, you can parse the RSS feed in your Flash applications just as you would an XML file.  So if, for instance, you have a Flash-based website that you would like to add a “Recent Blog Posts” section to, you can just import the RSS into Flash and *BAM*, you’re all set.  Here’s a quick rundown of how to do it:

Step 1: Locate the RSS Feed

If you’re the owner of a blog that you want to get the RSS feed to, all you should need to do is go to the blog’s home page, and add “/feed/” to the end of the URL.  (For example: http://www.hesslerdesign.com/blog/feed/)  This is an XML-based page that gives you a list of the blog’s posts, titles, contents/extracts, etc.

If you need an RSS feed through a service like FeedBurner, you first need to go to the FeedBurner page of the site you want an RSS feed from. (For example: http://feeds.feedburner.com/hesslerdesign)  This page is NOT the one you need to link to, however.  At this page you’ll notice a link to “View Feed XML” in the Subscribe Now! box.  Click on that link, and you’ll be presented with a page exactly like that of the “/feed/” URL mentioned in the previous paragraph.

Once you get to the XML-based page, copy the URL, because you’ll need it in Flash.  (If you want to confirm that the page is the correct one, view the page’s source. It will be set up as an XML file, with a line like <?xml version="1.0" encoding="UTF-8"?> at the very top.)

Step 2: Importing the RSS Feed into Flash

To import the feed into Flash, just follow the normal steps you would to import an XML file.  Create an XML object and a URLLoader object, then load your RSS feed URL using the URLLoader.  Since I’m the type of developer who likes to code as dynamically and flexibly as possible, I like to also set up an empty array for each of the items I want to hold from the RSS feed, such as titles and permalinks.  Then, when I parse the XML, I assign a slot in the appropriate array for each title and accompanying permalink, and then have them to use when I display the Recent Posts section.  Here’s how to do this:

/* Begin ActionScript 3.0 Code */
var rssXML:XML;
var rssLoader:URLLoader;
var rssTitles_arr:Array = new Array();
var rssLinks_arr:Array = new Array();
function importFeed():void {
rssLoader = new URLLoader();
rssLoader.addEventListener(Event.COMPLETE, loadRSS);
rssLoader.load(new URLRequest("http://www.hesslerdesign.com/blog/feed/"));
}
function loadRSS(e:Event):void {
rssXML = new XML(e.target.data);
trace(rssXML);
for (var i=0; i<4; i++) {
rssTitles_arr[i] = rssXML.channel.item[i].title;
rssLinks_arr[i] = rssXML.channel.item[i].link;
}
// Garbage Collection
rssLoader.removeEventListener(Event.COMPLETE, loadRSS);
}
importFeed();
/* End ActionScript 3.0 Code */

An important note:

To dig down into the XML and get things like Post titles and permalinks, you need to be familiar with the structure of the RSS file.  You can see from the code above that the title for each post is inside an item tag, which sits inside of the channel tag.  If you want to get more info than just these two items, just go to the RSS URL (see Step 1) and view the page source.  Or, you can do as I’ve done in the code above and trace out the XML in Flash once the XML loads.  This is a helpful first step to see what the structure of the XML file is before you get into parsing the XML into appropriate arrays.

Another quick thing to note is in the for loop, inside of the loadRSS() function. I used the number 4 as a benchmark to populate my arrays (seen in the snippet i<4). You can use a different number if you want. It’s a matter of (a) the number of posts available in the RSS feed, and (b) personal preference.

Once you incorporate the code above, you can then use the arrays populated with RSS info and populate text fields, buttons, etc.  Since it’s stored in an array, the possibilities are virtually limitless.

So there you have it.  The flexibility of RSS feeds makes it just that easy to import into Flash.  Until next time, happy coding!

]]> http://www.hesslerdesign.com/blog/flash/streaming-rss-feeds-into-your-flash-application/feed/ 2 Making Your WordPress Menu Items Smarter http://www.hesslerdesign.com/blog/tutorials/making-your-wordpress-menu-items-smarter/ http://www.hesslerdesign.com/blog/tutorials/making-your-wordpress-menu-items-smarter/#comments Wed, 16 Dec 2009 19:20:55 +0000 Anthony http://www.hesslerdesign.com/blog/?p=270 In my current work with designing my custom WordPress theme for this blog, I came up with a few nifty little tricks to make the theme smarter. One particular thing I found tricky was how to make the top nav (or any nav, for that matter) menu items smart enough to be classified as “active” if the user was on a page in a given section. My answer came in a nice little solution called Page Templates, and a built-in function called is_page_template().

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:

<?php
/*
Template Name: My Cool Template
*/
?>

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:

<li><a href="<?php bloginfo('url'); ?>/mysection/">My Section</a></li>

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:

<li <?php if(is_page_template('my_cool_template.php')) : ?> class="active" <?php endif; ?>><a href="<?php bloginfo('url'); ?>/mysection/">My Section</a></li>
In the code above, we added the PHP logic:
<?php if (is_page_template('my_cool_template.php')) : ?> <?php endif; ?>
And then, between the blocks of PHP code, we add the ‘active’ class to assign to the list item:
class="active"

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!

]]> http://www.hesslerdesign.com/blog/tutorials/making-your-wordpress-menu-items-smarter/feed/ 0 Making Your Flash Application Communicate with the Outside World http://www.hesslerdesign.com/blog/flash/making-your-flash-application-communicate-with-the-outside-world/ http://www.hesslerdesign.com/blog/flash/making-your-flash-application-communicate-with-the-outside-world/#comments Tue, 03 Nov 2009 22:14:15 +0000 Anthony http://www.hesslerdesign.com/blog/?p=181 I’ve recently been working on a number of Flash sites that require communication back and forth between the Flash SWF file and the parent HTML page. This is relatively easy to do, but includes a few “gotcha’s” that should be addressed. Below is a list of items that you will need to make sure you follow that will make your Flash be able to communicate with the outside world, and vice-versa.

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:

flashJS_htmlObjectCode

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 »

]]> http://www.hesslerdesign.com/blog/flash/making-your-flash-application-communicate-with-the-outside-world/feed/ 1 Embedding Fonts Using ActionScript 3.0 http://www.hesslerdesign.com/blog/flash/embedding-fonts-using-actionscript-3-0/ http://www.hesslerdesign.com/blog/flash/embedding-fonts-using-actionscript-3-0/#comments Tue, 08 Sep 2009 17:05:31 +0000 Anthony http://www.hesslerdesign.com/blog/?p=137 If you read my previous post on Embedding Fonts Using ActionScript 2.0, you’ll remember that I didn’t cover embedding fonts in ActionScript 3.0 in that post. So now, I’ll take you through the steps necessary to embed fonts in your ActionScript 3.0 files.

As we did when embedding in ActionScript 2.0, you’ll need to make a new Font item in your Library. Click on the Library menu, and select “New Font…”. Find your Font and Style from the dropdown menus in the dialog box, and give it a unique name. I generally give it a name that includes reference to both the Font and Style (in this example, I am using RockwellBold). Then, make sure the “Export for ActionScript” checkbox is checked under the Linkage section of the dialog box, which will auto-check the “Export in frame 1″ checkbox. Lastly, give your new Font a unique identifier in the “Class” field beneath the checkboxes. I like to make this Class the same as the Name I gave it above. Once all that is done, click OK.

(Note: You may get a dialog box that tells you, “A definition for this class could not be found in the classpath, so one will be automatically generated in the SWF file upon export.” This is fine. It’s just telling you that the Class you identified isn’t a built-in Flash Class. As long as you don’t need to access additional functionality beyond that of the Font class, you don’t have to worry.)

Next comes the ActionScript:

var rockwellBold:Font = new RockwellBold as Font;
var rockwellBoldTF:TextFormat = new TextFormat();
rockwellBoldTF.font = rockwellBold.fontName;

myText_txt.text = "Hello World!";
myText_txt.setTextFormat(rockwellBoldTF);
myText_txt.embedFonts = true;
myText_txt.antiAliasType = AntiAliasType.ADVANCED;

First, we create a new Font object, and assign it to our Font Class we created above (RockwellBold). Then, we create a new TextFormat, and give it the font attribute with the name of the Font object you just created, appended with fontName property. Then, set the text of your text field ("Hello World!"). After setting the text, use the setTextFormat attribute, and pass in the TextFormat variable you created in the first line. Next, set the embedFonts attribute to "true". Lastly, you can optionally set the antiAliasType attribute of your text to either ADVANCED or NORMAL. By anti-aliasing your text, you effectively smooth the edges of your font to avoid any distortion artifacts that may be introduced through screen display. According to Adobe's documentation, the ADVANCED setting is most useful for applications that have a lot of small text, and isn't recommended for font sizes above 48 pts. The NORMAL setting is most useful for applications that don't have a lot of text, and sets the anti-aliasing to the setting that was used in Flash Player 7. Once these steps are done, you're all set.

As with embedding fonts in AS 2.0, it's nothing too complicated. Until next time, happy coding!

]]> http://www.hesslerdesign.com/blog/flash/embedding-fonts-using-actionscript-3-0/feed/ 1 Adding Line Breaks to Flash Checkboxes & Radio Buttons http://www.hesslerdesign.com/blog/flash/adding-line-breaks-to-flash-checkboxes-radio-buttons/ http://www.hesslerdesign.com/blog/flash/adding-line-breaks-to-flash-checkboxes-radio-buttons/#comments Wed, 26 Aug 2009 23:01:06 +0000 Anthony http://www.hesslerdesign.com/blog/?p=134 I was recently working on a Flash website where the space in the registration form was really tight.  I needed to squeeze a full sentence into a checkbox label, but only had enough room for about half of the sentence to fit.  I needed a line break in the checkbox label, but found that trying to add one in using the Component Inspector did nothing.  So I went to ActionScript.

Using ActionScript 3.0, you can add labels to your CheckBox and RadioButton components, as long as they have a unique instance name.  The simple syntax for doing this is:

myCheckBox.label = "Hello, World!";

If you need to add in a line break, all you need to do is include “\n” where you want the line break.  Using the previous line of code as an example, we could break the two words into two lines by putting:

myCheckBox.label = "Hello, \nWorld!";

If you find it hard to read the string with the “\n” scrunched right up against a word, you can always concatenate strings together for greater code legibility.  An example would be:

myCheckBox.label = "Hello," + "\n" + "World!";

The line of code above does the exact same thing, but shows you more cleanly where your line break is, should you need or want to see it better.

So there you have it.  Line breaks in your Flash components using ActionScript 3.0.  Until next time, happy coding!

]]> http://www.hesslerdesign.com/blog/flash/adding-line-breaks-to-flash-checkboxes-radio-buttons/feed/ 0