Comments aren’t part of the example

Unless you are reading a book about writitng good code ( I recommend Code Complete by Steve McConnell ) the comments in the code are not there to show you good commenting practice. I could rant on and on how code should be self documenting and be able to be read like a good book but my main complaint with comments in most example code is stuff like this:

// define variable a as an integer and set it to 5
var a:int = 5

Now when you are learning about defining and setting variables this comment is important and that is why this comment is in example code. Unfortunately, I see this all too often in code I’ve had to debug. Code that is straight forward doesn’t need to be commented. In case you don’t know, comments like that in real world code scream amateur and/or I just copied this from the internet somewhere. Moving forward, you might want to make your code as straight forward as possible so you don’t need to comment it.

Best Practices are rarely in example code

Recently I was reading a book on AJAX programming that was trying to show how to use a simple service written in PHP.  To do this they had two input fields in a form where you entered numbers.  The javascript would then send the values of those two fields to a simple PHP webservice that divided the numbers then returned the results. After that the results were parsed to show the answer on the screen.  For the purpose of the book, which was to show how you could use a webservice without being overloaded with other code, this is okay.  In real life, you should just divide the numbers using javascript and leave the webservice out of it.

Also, if you read books and blog posts word for word the authors know that what they are doing isn’t meant for prime time so they will leave a caution warning ( possibly with a cartoony icon ) letting you know this. Please heed their advice if it is there, but since it usually isn’t just realize that example code probably isn’t the best way to handle the problem domain it seems to be solving.

My oh my!

This next section is about a pet peeve of mine, the use of the word “my” in example method and variable names.  For instance, I sometimes run across code like the following:

var myName:String
function myClickHandler( event:Event ):void{
...
}

Unlike the previous examples, I don’t think the reasoning behind this convention in example code is strong enough to even use it there. The reason I don’t like this convention is the readability of code that has to use it .  Using the myName variable as an example, which code appears cleaner and easier to read?

if( employee.myName == 'Jeff' )

or

if( employee.name == 'Jeff' )

I think you’ll agree that the second example, without the redundant prefix is cleaner and easier to read.

The code doesn’t always work

Anyone who has ever tried to copy or [GASP!] cuts and pastes example code has probably figured out that there is a high probability that it won’t work.  There are several possibilities for this from editors who think they know better to code that was only written in a text editor but not tested or even an errant copy and post from the author’s IDE that forgot a semi-colon.

This isn’t a problem in the way that the previous items are a problem with example code. Though it would probably be better if it didn’t occur, its better just to know that your chances of perfectly working code are 50/50. In fact, non-working example code can be a good thing to debug. Especially when you consider a majority of your programming career ( or hobby for that matter ) will probably be taken up with debugging code that you swear should work.

What else?

While the heading for this section might make you think I’m going to discuss the overuse of if-else statements I’m really asking for your opinions on example code.  Am I off base?  Do you have your own issues with example code? Perhaps you want to discuss the overuse of if-else statements in example code or maybe you’d like to see more of them.  Please, comment below and let me know.

If you liked this post please subscribe to my RSS feed and/or follow me on Twitter. If you only want to see my Flash Friday posts you can follow the subscribe to the Flash Friday feed. How’s that for alliteration Until next time keep on coding.

• Blinds
• Fade
• Fly
• Iris
• Photo
• PixelDissolve
• Rotate
• Squeeze
• Wipe
• Zoom

import fl.transitions.*;
var transitionMgr:TransitionManager = new TransitionManager( myClip );
var params:Object = new Object();
params.type = Fade;
params.direction = Transition.IN;
var transition:Transition = transitionMgr.startTransition( params );

import fl.transitions.*;
var params:Object = new Object();
params.type = Fade;
params.direction = Transition.IN;
var transition:Transition = TransitionManager.start( myClip, params );

Using Parameters

The two transition methods both take a parameters object, but you might be wondering what goes in the object. That depends on a few things and here are some options.

1. The type is required – enter one of the 10 above.
2. Other common properties for all transitions include
   1. direction – choices are Transition.IN and Transition.OUT ( default is Transition.IN )
   2. duration – this is measured in seconds
   3. easing – This is a function. I believe the default is None.none;
3. You can add parameters specific to the fade type you are using( i.e. numStrips for a Blinds transition )

When does it end?

When looking at the documentation for the Transition and Transition Manager classes, there appears to be a problem. If you want to do something when the transition(s) are done there doesn’t appear to be any events that tell you when this occurs. The truth is there are events that get fired, the documentation is just lacking. The events that get fired are of type flash.event.Event and there are no constants to give you any auto completion help.

For the transitions the following events may be fired:

• “transitionInDone”
• “transitionOutDone”
• “transitionProgress”

The TransitionManager fires the following 2 events

• “allTransitionsInDone”
• “allTransitionsOutDone”

Example

With all the above in mind I thought I would show each of the different transitions and the events that fire. Each transition uses all of its defaults, but you do get to choose the direction so you can see the different complete events

One Last Thing

The Transition classes unfortunately are only coded to work with MovieClip instances. For many people who don’t code in MovieClips you may have to find a different solution but for most users of Flash CS4+ this shouldn’t be a problem.



If you liked this post please subscribe to my RSS feed and/or follow me on Twitter. If you only want to see my Flash Friday posts you can follow the subscribe to the Flash Friday feed. How’s that for alliteration Until next time keep on coding.

Flash Player 10.1

Flash truly goes mobile this year and this is made possible by many of the changes in flash player 10.1. Many performance optimizations have been made to the player to allow better performance and this will help out, not only mobile, but all forms of the flash player. Mobile devices also require new interface methodologies and thus flash player 10.1 will be able to handle multitouch events and gestures. This is huge in mobile but will also be making a difference on the desktop with another thing I am looking forward to AIR 2.0.

AIR 2.0

Flash Player 10.1 is at the heart of the newest version of the AIR runtime. Along with some of the other benefits of Flash Player 10.1 such as gesture events there are some AIR only improvements. As a former audio professional the access to the Microphone sound is exciting. Other stuff I’m looking forward to are global error handling, detection of USB devices, more sockets and file promises.

Flash Builder 4

Flex builder is being rebranded as Flash Builder and there are lots of changes. I’ve been a fan of Degrafa for a while so the new graphic changes are something I’m looking forward to. The new spark architecture will take some getting used to but the design flexibility will be nice.  Though I’ve got an e-article available on Amazon that will be mostly worthless, the better integration between Flash Builder and Flash CS5 will make my life much easier.

Flash CS5

The big thing with this new version of Flash CS5 is IPhone application development. Unfortunately, at this time it looks like that’s the closest that the I-platform is coming to having flash in 2010 unless something major changes. Everyone else having flash in the mobile market may be the  catalyst that makes this happen. Speaking of a catalyst…

Flash Catalyst

I’ve been looking forward to this for a long time. Better integration between a design tools and Flash Builder. I’ve loved using Flex Builder since Flex 2 and Flash Catalyst will ( hopefully ) make a dramatic change in our office workflow. Also, this could be a boon for user experience architecting if all is done correct.

So what else is coming? What are you looking forward to? I’ve only touched on what Adobe has announced here but maybe you’ve heard a rumor.



If you liked this post please subscribe to my RSS feed and/or follow me on Twitter. If you only want to see my Flash Friday posts you can follow the subscribe to the Flash Friday feed. How’s that for alliteration Until next time keep on coding.

When flash player 10 came out we noticed 2 new wmodes, direct and gpu. Both were suppose to affect drawing performance on the screen and we thought gpu mode should improve the quality of our videos. In order to be sure we had to test it and compare it to the default mode that we almost always use.

Test after test proved that there really wasn’t any noticeable difference. In fact, wmode=gpu didn’t provide any noticeable playback difference but it did affect the player.



The more we read, the more it sounded like wmode=gpu really wouldn’t do much for most people until Flash Player™ 10.1 ( currently in beta 2 version on Adobe labs ). Installing Flash Player 10.1 did improve performance on the CPU ( which is awesome ) but their still wasn’t a difference from the default.

In the end the best thing to do with our video was to turn smoothing on. This actually made a dramatic improvement. In Flash Player 10.1 you get enough of a performance increase to make this work on even slower computers than before.

So wmode=gpu still may not be a magic bullet unless you control the playback platform but turning on smoothing gives you good performance if you are having artifacting when your videos get resized. You still need to be concerned about cpu performance ( for now ) but flash player 10.1 will really improve that.

If you have had different results or even the same, I’d love to hear your experiences. If you celebrate Christmas today then Merry Christmas and to everyone Seasons’ Greetings and Happy Holidays.

Not only is this reloading of data bad for your application but much of what gets reloaded is the Flex framework itself. The fact that it gets reloaded with every Flex application out there means it is adding to bandwidth use on the internet and thus bad for the image of Flex and Flash. Before you give up and start exclusively building AJAX applications, I’d like to introduce you to runtime shared libraries (RSLs).

RSLs were introduced in Flex to allow common libraries to be extracted from Flex application SWF files and put into their own files. That way the Flex apps that use classes from the library(ies) would be smaller and the classes would only need to be loaded once for all the SWF files that need them. Originally there were only two types of RSLs, signed and unsigned. Basically this is still the case but unsigned RSLs are now split into standard and cross-domain varieties while signed RSLs are now referred to as Framework RSLs.

The great thing about the signed, Framework RSLs ( and to a lesser extent cross-domain RSLs if the location used is the same ) is that once someone has loaded the RSL of that Flex SDK on their system, they shouldn’t have to reload it for any other app that requires that RSL. In other words, if someone has used another app that required the same Flex SDK (3.2, 3.3, 3.5, etc ) RSL as your app requires then your application will benefit with faster load times ( and vice versa ).

For today’s post we are going to focus only on using RSLs. I will save the lesson on creating them for another post if there is interest. Because of this fact I will explain how to use the framework RSLs specifically, but the same technique can be used with standard and cross-domain RSLs.

Using the framework RSLs is actually quite easy. It is even easy enough to take existing live apps and set them up to use RSLs in an effort to decrease load. I made one of my clients, extremely happy by doing this one little task.

In the Flex Build Path screen of project properties window select the Library Path tab ( you can also do this when initially setting up a project ). At the top of you should see a ComboBox labeled Framework Linkage: and you are given the choice of Merged into code (the default) or Runtime shared library (RSL). Select Runtime shared library (RSL). If you are going to have your RSL files in the same directory as your SWF, then that is all you need to do, as your RSL files will be in your bin-debug/bin-release folder along with your application SWF. For the Flex 3.5 SDK these are framework_3.5.0.12683.swz and framework_3.5.0.12683.swf. The SWF is just a backup for the SWZ.

If, however, you want to put your RSL into a different location on your server, or on a different server altogether, you’ll need to take a couple extra steps to let your application know where to look. The framework RSL files will still show up in your bin-debug and bin-release folders next to your application SWF but it will look for them in a different location. To make these changes you’ll need to go to the tree view labeled Build path libraries: and open the node for your flex SDK ( in my picture it says Flex 3.5 ) and then open the node that says framework.swc. Select the node that says RSL URL: and click the Edit… button on the right that probably just became enabled. The only thing you want to edit here are the deployment paths.

When editing the deployment paths for BOTH the SWZ and SWF files, you have the ability to edit 3 things:

• An input field labeled – Deployment Path/URL:
• A checkbox labeled – Copy library to deployment path
• Another input field labeled – Policy file URL:

The deployment path input field is the path to your SWZ or SWF file. Relative paths are acceptable and I recommend using them. The copy library checkbox is used to tell Flex Builder whether or not to include the SWZ or SWC file in your bin-debug/bin-release folders. I like to uncheck this once I already have a copy of the SWZ and SWC available somewhere else because I’m not a big fan of having multiple copies of the exact same file on my computer. The policy file field is used for RSLs served from different domains. It is the path to the appropriate cross-domain policy file. As such it needs to be an absolute path. Cross-domain policy files are out of the scope of this document but more info can be found at: http://livedocs.adobe.com/flex/3/html/security2_04.html#139879.

Now that you have set up your project just upload the RSL file(s) to the appropriate location and everything should be ready to go. You probably noticed quite a difference in file size and on subsequent loads should see an improvement in loading time. However there is one problem that is common with RSLs.

The dreaded RSL error

Usually you will get an RSL error if the RSL files aren’t where your application SWF is expecting them to be. An easy enough problem to fix. The problem arises in that you won’t  be able to recreate this error if you already have the files in your cache. Another hiccup is that, while standard and cross-domain RSLs are stored in your browser cache, signed framework RSLs are stored in the much lesser known flash cache. The flash cache is the location shared objects are stored in. It can be managed via the Adobe Flash Player™ Settings Manager’s Global Storage Settings tab ( available at: http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager03.html ). Just uncheck the store common Flash components to reduce download times checkbox while testing to make sure you load the framework RSL every time instead of pulling them from your cache.

I highly recommend using the runtime shared library for the Flex framework on all your Flex projects. This will speed up the load time of all Flex applications online that are set up to use them and that is good for all of us. The other reason is that there are some drawbacks to using RSLs and the framework RSLs don’t really suffer from any of them. In fact from the looks of beta 1 and beta 2 of Flash Builder 4, the framework runtime shared libraries are going to be set by default and they’ll be served up by Adobe’s own servers. I hope this remains true upon release as it will greatly help Flex apps and their image in the developer community.



If you liked this post please subscribe to my RSS feed and/or follow me on Twitter. If you only want to see my Flash Friday posts you can follow the subscribe to the Flash Friday feed. How’s that for alliteration Until next time keep on coding.

Flex is great for building rich internet applications quickly. Building an application quickly is nice, but to give your application that truly professional touch you need to customize the look and feel of your app. In order to fully customize the look and the feel you will need to use a font that’s different than the default serif font that is used everywhere.

The flash player affords you the opportunity to embed many non standard fonts into your app, something that sets it apart from AJAX applications that need to rely on web safe fonts. In the flash IDE this is as easy as setting the font in the properties panel and selecting which character from that font which you want to embed. In a Flex app, things get a little trickier – especially if you want to use a non True Type font, which is the only type it can import natively. However, if you have the Flash IDE you can use its simplicity to get any font you can use in Flash into your Flex app.

The process is broken up into two steps.

1. Create a SWF with the font(s) you need embedded in it
2. Add Style (CSS) info to your Flex project that imports the font into your Flex project

Character Embed Dialog in Flash

Step one starts with the simplest of FLA files and can be created with earlier versions of the Flash IDE  (so you can use Flash 8 or MX2004 if that’s all you have). I recommend using a separate FLA for each font you want to embed, that way it is easier to catalog, store and reuse in other projects. Create 4 dynamic text fields. Each text field is for the different versions of the font so you should have:

• normal
• italic
• bold
• bold italic

You need to make sure you set up all 4 text fields to embed all the glyphs from the font you will need.  For most western languages Numerals, Punctuation and Basic Latin should cover all the glyphs you will need. Once again, make sure to set up the character embedding for all 4 text fields. If you notice certain parts of your flex document using the default font you may not have set up character embedding. You can of course leave out any of the 4 ( ie italic and italic bold ) that you aren’t going to use but if you are going to reuse the SWF I would do all 4.

Once you are done setting the character embedding for all 4 text fields, publish the file to a SWF.

The second step of this process is to add Style to your Flex project that imports the font into the project. That’s as simple as adding an @font-face entry to your CSS file or <mx:Style> block. At first you simply give it the path to your font SWF and the name of the font ( ie Futura Book, Calibri ).

@font-face

{

src:url( "path/to/yourFont.swf" );

fontFamily:"Exact Name of Font"

}

You also need to add an @font-face entry for each version of the font you want to use. So if you also wanted to use the bold version you would add the following:

@font-face

{

    src: url( "path/to/yourFont.swf");

    fontWeight:"bold";

    fontFamily:"Exact Name of Font";

}

After you are done adding the appropriate @font-face entries you can style any component you need to or you can style the entire application with your font.

Application

{

    fontFamily:"Exact Name of Font";

}

There are a couple other ways to embed fonts, and if you don’t have a version of the flash IDE those are the only way to go. If there is enough interest I can cover those in comments or another post. However this is by far the simplest, it allows you the ability to embed non True Type fonts and you can reuse a font more quickly in the future.



If you liked this post please subscribe to my RSS feed and/or follow me on Twitter. If you only want to see my Flash Friday posts you can follow the subscribe to the Flash Friday feed. How’s that for alliteration Until next time keep on coding.

Testing out the sample code

The first thing I did was try out the examples straight from the magazine. This was straightforward. The samples didn’t build anything too advanced but I noticed something. It didn’t take very many lines of code to get the video playing. Most of the code was for adding buttons and making them call a single function in the OSMF API. As usual when doing samples from an article I decide to tweak it to see has intuitive it was to do things. Adding and customizing simple playback controls and capabilities was a breeze. I only needed to check the documentation to make sure my assumptions were true, which they were in most cases. For a basic custom player, this thing is extremely easy to use.

Looking under the hood

The second thing I did is something I like to do with a framework I’m looking at, skim over the documentation. This consists of going through each package and seeing what classes are where. For the most part I will click into each classes documentation to find out what the class is meant for. Sure, this has me look at a lot of helper classes that I may never use ( which is a good learning exercise ), but it also has me find obscure classes that might be quite useful in a pinch.

One class that interested me both for educational and practical reasons was the ListenerProxyElement class. It is actually quite beautiful in its simple use. It is a class that is meant to be extended. The class itself sets up all the listeners for a MediaElement and has them trigger hook functions that you override to handle these events with custom code. I foresee using this in many projects. There are quite a few other things taken care of in this framework, such as handling of a video player that is sized differently from the video content.

Overall, Adobe ( who is in charge of this open source project ) has put together a very useful, intuitive and extensible framework that is still in the early stages. I’m looking forward to see what types of media players I can build now that so much is already handled for me. Is there anything you want to know about OSMF? Have you already used it on a project? If you have can we see your work (and hopefully code)?

For more information check out:

• The Open Source Media Framework main page
• The OSMF documentation
• The OSMF forums