RegExr – Regular Expressions Tester

Grant Skinner created an amazing regular expressions tester which is available as a web application or as a desktop air application.

This application allows you to create regular expressions and then test them on the fly. I highly recommend downloading this application for testing your regular expressions. I used this to successfully debug some regex parsing errors taking an SVG into flex.

Download RegEx Desktop AIR Application
Live Web Application

Utah is the Flex Capitol

Google Insights reveals that Utah searches the most for “adobe flex,” “flex 3,” “flex 2,” and “flex builder.”

Adobe Flex

Flex 3

Flex 2

Flex Builder

My buddy Bryce Barrand found that Orem is the Flex Capitol of Utah

My buddy John Anderson discovered that Utah is also #1 in search for web technologies such as PHP, CakePHP, MySQL, and Linux.





Utah is definately one of the tech capitols of the United States.

Flex 2 Adobe Certified Professional Prep

Today I paid the $150 and took the Flex 2 certification test. I passed and am now an ACP – Adobe Certified Professional (add that to my Flash MX 2004 Certified Developer, MCP (Microsoft Certified Professional) and MOUS (Microsoft Office User Specialist) certifications).

Overall I found the test to be challenging. I wouldn’t take it without sufficient preparation. Here are my Flex 2 study preparation tips:

  1. Attest – provides practice tests and quizzes. Some questions on the official test came from the questions found on these practice tests.
  2. Lynda Free 7 Day Trial
  3. Flex 2 Advanced: Using Data Services – a must because the average flex developer hasn’t used RemoteObjects or WebServices very much and the test is roughly 30% on these topics.
  4. Flex 2 Beyond the Basics – great review of advanced flex topics.
  5. Flex 2 Essential Training – great review of basic flex topics.

Obviously use the flex documentation as a reference over concepts that you are unfamiliar with.

Topics founds on the test that I rarely used include: IViewCursor, Flex Data Services.

Good luck.

Flex / Flash Font Size Limit 127

Today at work we rediscovered the Flash / Flex font size limit of 127px.

We are creating an RIA that needs the ability to scale down a large SVG to a web editor and then scale it back out for a print-ready SVG. Flex would take a 300 px font, convert it to a 127 px font, and then scale it down. This caused our textfields to be very small and inconsistent.

Flex 3 – How to load a complied css swf

When attempting to load external compiled css swfs that have an embedded font into my flex application I was getting this error: Unable to load style(SWF is not a loadable module). This is reported as an official bug on adobe’s site at: Enable Local App to load RunTime CSS.swf from Server

To solve this, you require two things.

  1. Crossdomain Policy
  2. Local Apache Web Server

Regardless if this is a bug, the host server still needs a crossdomain policy at the root of the domain. Here’s an example crossdomain.xml policy.

The next problem is that you cannot load external compiled swfs from a
document root (c:/my documents/flex projects/myProject/myProject.html) until the bug is fixed.

PC Users:
What I did is installed easyphp. Next, I set up an alias in easyphp. Right click on the ‘easyphp’ icon in the taskbar -> administration. I set the alias to my bin folder of my project so that when I access the url it loads up my bin directory. Also in my debug settings in flex I set the default debug and run path to launch as

Now my css/style swfs are loading great remotely. The only downside is having to run easyphp on top of everything just to load in my external compiled font swfs.

Mac Users:
Thanks to Bryce Barrand

  • go to system preferences
  • click on sharing
  • click on “web sharing” (this will turn on the automatically installed version of apache)
  • edit apache’s httpd.conf file (should be found at disk/private/etc/apache2/httpd.conf)
  • Find the line that says /Directory>
  • Just after that, add an Alias for each project that you want to test such as this:

    Alias /nameOfAlias /pathToYourFlexBinFolder

  • Set your directory node attribute to “/pathToYourFlexBinFolder”. Set the directory node value to:

    Options Indexes FollowSymLinks MultiViews
    AllowOverride None
    Order allow,deny
    Allow from all

  • Restart the webserver by unchecking and rechecking the “web sharing” checkbox

should be good to go after this. you can see the results by going to http://localhost/nameOfAlias in your browser

Adobe Flex Goes Open Source

Visit Adobe’s Press Release

On April 26, Adobe announced strategic plans to move the development of Flex to an open source model.

Adobe is announcing plans to open source Flex under the Mozilla Public License (MPL). This includes not only the source to the ActionScript components from the Flex SDK, which have been available in source code form with the SDK since Flex 2 was released, but also includes the Java source code for the ActionScript and MXML compilers, the ActionScript debugger and the core ActionScript libraries from the SDK. The Flex SDK includes all of the components needed to create Flex applications that run in any browser – on Mac OS X, Windows, and Linux and on now on the desktop using “Apolloâ€?.

Scripted Motion Tweens Tutorial

Penner Tweens, created by Robert Penner, use built-in Macromedia Flash MX 2004 classes to script tweens. This is the touch of class that adds to any flash application / navigation / presentation. To set it up, you define an ease type, then apply the ease type to a Tween object.

Create a new flash document (File -> New… -> Flash Document)

Double-Click ‘Layer 2’ and label it “A” (for Actions). We will place all actionscript on this layer.

Create a new layer (Insert -> Timeline -> Layer). Double-Click ‘Layer 1’ and label it “mc” (for movieclips).

Draw a box using the Rectangle Tool (hotkey is ‘R’) near the top left of the Stage.

Double-Click on your new box. Now Right-Click on your box and select “Convert to Symbol…”.

In the ‘Name’ field put “m_box”. In the ‘Behavior’ radio button group, select “Movie clip”. Press ‘OK’.

Having your m_box on the stage still selected, in the ‘Properties’ toolbar, where there is a white field that has “” enter “box_mc”. Notice that the instance name on the stage is different than the instance name on the stage. We use the “_mc” naming convention for actionscript hints in our code.

Next, select Frame ‘1’ in the ‘A’ Layer. Open up your actions panel (Window -> Development Panels -> Actions or using hotkey ‘F9’). Copy and paste this code into the ‘Actions’ panel.

var easeType = mx.transitions.easing.Regular.easeOut;
myTween = new mx.transitions.Tween(box_mc, "_y", easeType, 0, 300, 30);

Now you might be asking what this just did. Well lets take an indepth look at the code defintion of the Tween object.
(do not enter this code into your movie):

Tween(myMovie:MovieClip, myProperty:Property, easeType, startValue:Number, endValue:Number, frames(or seconds), secondsSet:Boolean);

myMovie:MovieClip — Targets the Instance of a Movieclip on the stage.
myProperty:Property — Selects the property of the Movieclip on the stage to tween. (I.E. _x, _width, _alpha, etc)
easeType as (Parent.Child) — Your tween definition set up as a variable. SetParent Types (Back, Bounce, Elastic, None, Regular, Strong). Child Types (easeIn, easeOut). (i.e. Bounce.easeOut).
startValue:Number — Starting value of property to tween. For more advanced tweens, try (box_mc._y) to get the current starting Y position of the targeted Movie Clip.
endValue:Number — Starting value of property to tween.
frames(or seconds) — Number of frames to tween over, or number of seconds to tween over.
secondsSet:Boolean — Optional value, defaults to false. When set to true, uses seconds instead of frames to tween over.

Save your document (File -> Save)

Test your movie (Control -> Test Movie or hotkey “Ctr-Enter”)

Your box should go from _y position 0 to 300. Now try out variations of properties and movieclips and tweens.

For smoother framerate, try changing the framerate to 31 fps. To do so, go to Modfiy -> Document… . In the Frame rate input box, type in ’31’. Press ‘OK’. Try your movie again.

To try out my click demo, replace your current code on you “A” Layer with this code:

someListener = new Object();
someListener.onMouseDown = function () {
var easeType = mx.transitions.easing.Elastic.easeOut;
myTweenY = new mx.transitions.Tween(box_mc, "_y", easeType, box_mc._y,_root._ymouse, 60);
myTweenX = new mx.transitions.Tween(box_mc, "_x", easeType, box_mc._x, _root._xmouse, 60);

For more easing variations, view the folder on your computer >>
..Program Files/Macromedia/Flash MX 2004/en/First Run/Classes/mx/transitions

Try out Rober Penner’s examples at:
Robert Penner’s Easing Demo