Hessler Design

Posted by Anthony in Flash tagged actionscript 3, classes, Flash, Video

Version Information:

• Version: 1.1
• Release Date: 3/9/10

Download:

Like what you see? Want to use the MediaPlayer class in your own Flash projects? Click the button below to download the most recent version of MediaPlayer.

License:

MediaPlayer is licensed under a Creative Commons Attribution 3.0 United States License, and is free to use with a link back to hesslerdesign.com. Permissions beyond the scope of this license may be available by submitting a Contact Request.

Description:

MediaPlayer is a very lightweight, fast, flexible, and easy-to-implement custom Flash video player class that can be used in any ActionScript 3.0 file. Some of the key highlights of the MediaPlayer class are:

• Lightweight: Importing the MediaPlayer class and creating an instance adds only 11kb to overall file weight. Compare that to the built-in Adobe ‘flvPlayback’ component, which adds 58kb to the overall file weight. Do the math. That’s over 525% heavier than this MediaPlayer class.
• Easy to Use: With just 3 lines of code, you can import the MediaPlayer class, create an instance of the player, and add it to your Flash file. And because of its dynamically-built nature, there are NO Library components needed. That’s right, NONE. All of the assets included in the MediaPlayer class are 100% built from scratch with nothing but ActionScript 3.0 code.
• Customizable: You can change a number of attributes to your MediaPlayer instances, so you can have a video player that is as unique as the video it plays. The customizable attributes include Width, Height, Auto Play, Auto Rewind, Auto Size, Buffer, Looping, Control Bar visibility, Tint, End Frame visibility, and onStart/onComplete listeners.
• Communicative: By using the onStart and onComplete listener attributes (and accompanying parameter attributes), you can have MediaPlayer dispatch events that call functions back in the parent file when the video starts and/or ends.
• Self-Sufficient: With its robust set of default attributes, MediaPlayer takes care of wrapping up all of the loose ends. Once you create your MediaPlayer instance, you can sit back and relax, knowing that everything is taken care of, including control bar resizing and positioning, buffering, automatic video resizing within the player, and more. Just import the class, create the instance, assign it attributes, and add it to your file. MediaPlayer will take care of the rest for you.

Example:

Parameters & Attributes:

As you can see from the example and accompanying code above, MediaPlayer only takes 1 parameter, an Object, which is optional. This Object contains the specific (and optional) attributes to set in the MediaPlayer instance. The available attributes are:

• autoPlay (Boolean) – If true, will auto play the video. (Default = true)
• onStartParams (Array) – Array to pass in to onStart function in parent file. (Default = null)
• autoRewind (Boolean) – If true, will seek to the video start when the video is done. (Default = true)
• autoSize (Boolean) – If true, will automatically and proportionally scale the video inside the player. (Default = true)
• buffer (Number) – Number of seconds of buffer needed before the video plays. (Default = 3)
• loop (Boolean) – If true, video will auto-rewind (despite the autoRewind setting) and continue to loop playback. (Default = false)
• showControls (Boolean) – If true, control bar is visible and active. (Default = true)
• source (String) – The path to the video that you want to play. (Default = null)
• tint (Array of uint) – Array containing optional uint hex codes to tint (1) the control bar background elements, and (2) the control bar buttons and text elements. (Default = [0x000000, 0xffffff])
• height (Number) – The height of the MediaPlayer instance. (Default = 480)
• width  (Number) – The width of the MediaPlayer instance. (Default = 640)
• showFirstFrame (Boolean) – If false, and autoPlay is false, hides video’s first frame. (Default = true)
• showLastFrame (Boolean) – If false, and autoRewind is false, hides video’s last frame. (Default = true)
• showEndFrames (Boolean) – If false, and autoPlay and autoRewind are false, hides video’s first and last frames. Cancels out showFirstFrame and showLastFrame values, if set differently. (Default = true)
• onComplete (Function) – Function in parent file to be called when video completes. (Default = null)
• onCompleteParams (Array) – Array to pass in to onComplete function in parent file. (Default = null)
• onStart (Function) – Function in parent file to be called when video starts. (Default = null)

Public Methods:

With MediaPlayer, you can call a number of public methods from the parent file. These methods are outlined below.

• play() – Resets the buffer, and reloads the video from the source location. Use when updating buffer length, or changing the source location for your video.
• resume() – Resumes playback from the current playhead location. Use when the video has been paused or stopped, as it will NOT completely reload the video like the play() method does.
• pause() – Pauses playback.
• stop() – Stops playback and returns the playhead to the beginning of the video. Since there is no built-in stop button in the Control Bar, use this method for stopping and resetting the video to the start.
• mute(Boolean) – Mutes/Unmutes sound, based on the passed Boolean value into the function. A ‘true’ value mutes sound. A ‘false’ value unmutes sound.
• getDuration() – Returns the duration of the video as a Number.
• getElapsed() – Returns the elapsed time as a Number.
• setSize(width, height) – Sets video width and height, which are passed in as parameters. Passed width and height need to be typed as Numbers. (Default = 640, 480)
• setAutoPlay(Boolean) – If true, sets video to auto play. (Default = true)
• setAutoRewind(Boolean) – If true, video seeks to the start when the video is done. (Default = true)
• setAutoSize(Boolean) – If true, video will automatically and proportionally scale the video inside the player. (Default = true)
• setLoop(Boolean) – If true, video will auto-rewind (despite the autoRewind setting) and continue to loop playback. (Default = false)
• setTint(cbHex,btnHex) – Sets Control Bar tint. Passed parameters are uint values for (1) background elements, and (2) button and text elements. (Default = 0×000000, 0xffffff)
• setBuffer(Number) – Sets the number of seconds of buffer needed before the video plays. (Default = 3)
• showControlBar(Boolean) – Shows/Hides control bar inside of player. (Default = true)
• showVideo(Boolean) – Shows/Hides video inside of player. (Default = true)

Instructions:

To use MediaPlayer in your Flash project, you must import the MediaPlayer class into your file, create a new instance, and add it to the display list.

Setting MediaPlayer attributes can be done in two different ways, as seen in the two examples outlined below.

1. Setting Object Attributes on Creation (RECOMMENDED):
   import com.hd.MediaPlayer;
var mp:MediaPlayer = new MediaPlayer({width:640, height:480, tint:[0x1c1c1c, 0xffffff], source:"sample.flv"});
addChild(mp);
2. Setting Individual Attributes After Creation:
   import com.hd.MediaPlayer;
var mp:MediaPlayer = new MediaPlayer();
mp.setSize(640, 480);
mp.setTint(0x1c1c1c, 0xffffff);
mp.autoPlay = true; // OR mp.setAutoPlay(true);
mp.autoRewind = true; // OR mp.setAutoRewind(true);
mp.autoSize = true; // OR mp.setAutoSize(true);
mp.buffer = 10; // OR mp.setBuffer(10);
mp.loop = true; // OR mp.setLoop(true);
mp.showControls = true;
mp.showFirstFrame = false;
mp.showLastFrame = false;
mp.showEndFrames = false;
mp.source = "sample.flv";
mp.play();
addChild(mp);

NOTE: In Example 2, mp.play() needs to be called AFTER setting the attributes, even if the autoPlay attribute is set to true. This is because the autoPlay attribute’s default value is set to ‘false’. So when the MediaPlayer object is set, it will NOT play the video until instructed. Also, since you are setting attributes after creating the MediaPlayer instance, the attributes need to be recalculated, which happens when the ‘play()’ function is called. Lastly, if using Example 2, you do not have the ability to add ‘onStart’ and ‘onComplete’ commands, along with their accompanying parameters, unless you pass them as part of the attributes when creating the MediaPlayer instance.

Feedback:

Did you notice a bug? Do you like MediaPlayer? Please let me know. Add a comment below, or submit a Contact Request. I appreciate any and all feedback.

No Comments »

Posted by Anthony in Flash, Web Design tagged actionscript 3, arrays, Flash, optimization, XML

Let’s face it.  When it comes to Flash websites, people either love them or hate them.  For those who hate them, I firmly believe it’s because of two main reasons: crappy SEO (search engine optimization), and long load times (a direct result of heavy file weights).  While the issue of SEO is its own beast, I won’t get into that now.  For now, I’m going to focus on 10 easy ways to optimize your Flash website to make it meaner, leaner, and more user-friendly.  Believe me, if you start using some of these ideas, your sites will transform in ways you never though imaginable.  And you’ll notice that you’ll get a much smoother and quicker site.  With that said, let’s get started.

1. Use XML files to set content framework

On nearly every Flash site I work on, I use at least some XML. The great thing about XML files is they are a great way to structure blocks of your site.  For instance, if you want a slideshow on your site, you could have an XML file that contains the title, url, and other image-specific information you want to include for each image. Then, just import the XML into Flash and store the XML data in arrays to organize the information to use later.  (More on arrays below.)

Another great thing about using XML in Flash is that if you want to stream an RSS feed into a Flash site, you can, because RSS feeds are set up as XML.  (For more info on RSS feeds, see the post on Streaming RSS feeds into Your Flash Applications.)

Additionally, XML is easy to change without having to republish your site.  Say you have that slideshow I mentioned above, but want to swap out an image.  With XML, you just point to the new url, update the title, and save. Your Flash site will automatically update with the new info, and you won’t have to republish every time. Trust me, you’ll thank yourself for using XML when you build your Flash site.

2. Use arrays to organize assets used in your code

For me, using arrays is quite possibly one of the smartest and most powerful things you can do to optimize your code.  Not necessarily from a file weight perspective, but because with arrays, you can reference an object stored in an array by name, number, id, etc. For instance, say you have 20 thumbnail images you want to make clickable to open a larger image. You could attach individual event listeners to each image.  Or, you could set up a couple of arrays — one for the instance names of each image, and one for the reference to the larger image to load when clicked — and run “for” loops to set the event listeners all at once. While you’re in the “for” loop, set an ID number for each image that you can then reference in your “click” function that will fire on mouse click, and call up that ID number slot in the large image array.  With only a few lines of code, you’ll have a powerful way to batch chunks of your code with minimal effort. (For more info on arrays, see my post on Utilizing the Power of Arrays in Adobe Flash.)

3. Only import and embed absolutely necessary image files into your file.

If you’ve been on the Web at all…and judging by you reading this, I’m guessing you have…you know doubt know that a lot of people don’t like Flash sites.  The main reason seems to be they take way too long to load.  To get around this, I highly suggest importing and embedding ONLY the images you absolutely need.  If you have a lot of image assets, I suggest loading them dynamically via code, and placing them in the appropriate places.  This not only makes the file size considerably smaller, but it also opens the door to be able to update an image, replace it, and have Flash automatically read in the updated file without the need to republish the entire site.  (Sorta sounds like one of the key perks of using XML, doesn’t it?)  And trust me, users will thank you for having a site that loads (or at least shows up with a short preloader) in 5 seconds, rather than a beefy site that doesn’t show up until the entire thing loads.

4. Load assets in an orderly fashion, not all at once

Along with #3 above, when you load assets into your Flash site dynamically, it’s best to set up a structure and order in which to load them. For instance, load all of the home/landing page assets first. Once those are loaded, proceed with the next set of assets that you think will be needed/viewed by your users.  Not using a certain set of images until later in the site?  Don’t load them up front. Wait until the rest of the assets before it have been loaded first. Think about it.  Would you rather try to have 20 images load all at once?  Or load them in the order of which they’ll be seen? Loading them one at a time will speed up the individual image load time because there is only one image needing attention while it is being loaded, not all 20?

5. Cool it with the videos

Okay, this sounds harsh, but hear me out. Video is great. It’s everywhere, and it’s getting more popular by the day.  (YouTube, anyone?)  But when you’re making a Flash site, video can also be a beast to work with, specifically video that needs to stream without a playback bar.  The worst thing about video is file size. I’ll admit, video has come a long way in optimizing file weights and all, but at the end of the day, even a small video is still going to be around 1-2MB.  When you are using video, make sure you utilize the “loading assets in an orderly fashion” advice from above.  If you try to start streaming a video when 20 images are loading while it’s trying to play, you’ll no doubt get choppy playback.

6. Use TweenMax or TweenLite for code-based tweening and animating

I’m a big fan of keeping my Flash sites on one frame of the timeline, and doing as much as I possibly can with code, rather than with the timeline.  The reason for this is simply less time making changes later on down the road.  Want to make every tween of an image fading out half as long across the entire site?  Pretty laborious if you’re using the timeline.  But if you’re using code, it’s a matter of updating a couple of numbers.

This is where TweenMax and TweenLite come in.  In a nutshell, they’re the best tweening engine out there.  Using it, you can call one function that can alter many facets of an object at once (x and y position, alpha, tint, etc.).  You can also attach event listeners like onComplete, onStart, etc., that call functions to run at specific times during the tween.  In short, these tweening engines will make you wonder why you ever used timeline-based animations.  And best of all, they’re extremely light in file weight, unlike a lot of timeline-based animations.  And it’s a one-time file weight addition, not a per-tween sort of thing.

7. Simulate downloading on slower connections

Not everyone has a cable-speed connection. Believe it or not, there are still a lot of people out there using DSL or slower connections.  And as unfortunate as it may be, those are the people you need to build the site for.  Don’t ever assume that your audience is going to have the latest and greatest computers.

To simulate downloads in Flash, export your movie and select “View > Simulate Download”.  To set different connection speed settings, select “View > Download Settings”, and select your desired speed (or create your own custom speed).  Flash can be deceiving. When you test out a movie, it always runs lightning fast. But by testing it using the “Simulate Download” method, you’ll get a much better idea of how your site will behave on the Web.

8. Build buttons and other UI components as vector artwork in Flash

One of my biggest pet peeves is using raster images for buttons that could easily be made as vector art in Flash.  Not only does this make having to update the button a multi-step process, but it also beefs up the size of the file.  It may not be much, but if you get a dozen different image buttons, you could easily have just added 100+ kb to your file weight.  Might not seem by much, but as people’s attention spans are getting shorter and shorter, that added 2 seconds of load time you just added might be costly, and you may see an increase in the number of dropped users.

My motto is this: “If it can be made in Flash, make it in Flash”.  Vector art is not only easily editable, but also a huge file weight saver.  Plus, you don’t get any degradation of quality that you’d get if you used images.  All of your lines, colors, gradients, etc. are crystal clear.  Pair that with the almost non-existent file weight they carry, and what’s not to love?

9. Write custom Classes for reusable code

If you write Actionscript code, you use Classes.  You might not know it, but you do.  Every time you use a property of a MovieClip instance (i.e. myClip_mc.y to get the “y” position), you’re calling the MovieClip class.  Same with Sprites, Buttons, UI Components, etc.  Classes are a staple in object-oriented programming, and allow you to read or set properties, call functions (methods), and respond to events.  It’s a great way to reuse the same code over and over again, by simply importing the classes into your site file.

One of my personal favorite classes that I have written is for an Email Validator, which contains the logic to check whether a string is a valid email address or not.  You can check it out in my previous post on Building a Better Email Validator in Flash.  Each time I need to use this, I simply import it into my file (which is 1 line of code), make an instance of the validator (1 line of code), then call the validate function and pass in the string to validate (1 line of code).  In all, for me to validate an email address, it takes 3 lines of code.  Much better than rewriting all of the validation logic in a dozen different files, eh?

10. Use FlashVars to set important global variables

Every so often, you’ll run into an issue where you’ll want to change a variable from outside of your Flash file. An easy way to do this is to use the FlashVars parameter when embedding your Flash file in HTML.  I find that I mostly use FlashVars for variables that will change from a “staging” site to the final “production” site.  The most often used variable that I personally encounter is the account name for Omniture tracking. The bulk of sites I develop have different staging and production Omniture account names, so the metrics don’t get skewed while testing.  But if I embed that account name into the Flash file, I suddenly need 2 different versions of the Flash file — one for staging, one for production.  But if I have a FlashVar set up for this account name, I can just change the variable in the HTML code, and have Flash read it in.  Trust me, it’s a handy way to avoid having multiple versions of the same file for different environments.

In Conclusion…

So there you have it.  10 easy ways to optimize your Flash sites.  There are many more ways to optimize Flash sites, and I’m sure I’ll get into them in later posts.  But these are some of the main culprits.  And trust me, individual posts could be written about each one of these (and some already have).  If you want to see posts that dive deeper into any of these, just let me know and I’ll write it up.  Until next time, happy coding!

No Comments »

Posted by Anthony in Flash, Tutorials, XML tagged actionscript 3, arrays, Flash, rss, XML

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:

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!

No Comments »

Posted by Anthony in Tutorials, WordPress tagged html, PHP, themes

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:

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!

No Comments »

Posted by Anthony in Blogging tagged design, themes

I guess you could call this a case of under-promise, over-deliver. As I was working to get my custom blog theme design done, I found that it went surprisingly faster than I thought. So in my previous post when I said the updated look would be here “in the coming weeks”, I had no idea it would be more like “in the coming days”. Either way, the newly updated theme is here, complete and better matching the rest of HesslerDesign.com.

For those tech-nerds out there (you know who you are), you may appreciate that the theme is a completely custom WordPress theme.  Previously I had piggy-backed another nice theme and tweaked it to my heart’s content.  Nothing wrong with that, but as I said, it no longer matched my sites redesign.  The cool part is, I (obviously) learned a lot about building WordPress themes in the process, including a handful of neat PHP tricks (some used in my theme, others stashed in my back pocket for use later on down the road).  If you keep an eye out, you may even see one or two of these tricks surface in future posts.  Not making any promises — just throwing it out there.

With all that said, I hope you like the new blog theme design.  I’m sure I’ll be tweaking it along the road, adding new functionality, nit-picking details down to the pixel, and other good stuff us web designers/developers like to do.  But for now, it’s time to take a little breather, sit back and relax.

No Comments »

Posted by Anthony in Blogging tagged design, themes

So as time goes on, HesslerDesign.com undergoes updates – both with content and design. Recently, the main site has been redesigned, but the blog section has remained tied to the previous design. Well, I’m happy to announce that I am now well on the way to bringing the main site and blog together into one cohesive design and site. Keep a keen eye out in the coming weeks when the update will be launched.

1 Comment »

Posted by Anthony in Flash, Tutorials, Web Design tagged actionscript 3, Flash, html, javascript

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.
Read the rest of this entry »

1 Comment »

Posted by Anthony in Flash, Web Design tagged actionscript 3, email, Flash, validation

I work on a lot of Flash projects that require form validation. One issue that keeps coming up is the process of field validation, and more specifically, email validation. There are numerous rules that people use to validate email addresses (does it contain an @ sign, does it contain a dot, how many characters are there, etc.), but there is a fine line between overly strict validation and validation that’s way too loose. So I did some investigating about what makes up an email address, and how to best validate an email address in Flash. The result of my work is a robust EmailValidator class that I authored, written in ActionScript 3.0. Read the rest of this entry »

No Comments »

Posted by Anthony in Flash, Tutorials tagged actionscript 3, Flash, fonts, text format

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!

1 Comment »

Posted by Anthony in Flash, Tutorials tagged actionscript 3, components, Flash

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!

No Comments »