Merapi says “Hello World”… World say “Hello Merapi”

If you haven’t already seen the screencast or Dave Meeker’s blog post of Merapi in action, you should definitely check it out! I am very excited for the next months to come.

Stay tuned for an update on my original scanner demo with AIR. Since Adobe’s Blaze DS is under the hood, Merapi will allow me to send my scanned image as a ByteArray back to Flex from the scanner! Better yet, our external Java libraries can now initiate data transfer to AIR. It’s no longer a one way street! A private alpha will be on it’s way very soon but in the mean time, imagine what kind of devices you could integrate into your AIR apps!

–lp

RIA Dev Shed 2008 - Presentation Files

As promised, here are the files for my presentation - Flex and Flash Media Server 3 from RIA Dev Shed 2008 in Utah. Special thanks again to the sponsors (Adobe, Twelve Horses, SLCFUG, NUCFUG, Vox Pop Design) for putting together the event.

RIA Dev Shed Presentation
(Photo by libel_vox)

 

I personally want to thank Matthew Reinbold for putting together the event! He was a pleasure to work with! Thanks again Matthew!

As3Regex Tester

I think one of the coolest addition to AS3 is regular expressions. If you’re like me, you’re probably way out of practice and it would take you awhile to finally get the proper expression to match or replace. So I went online and found a good client-side regex tester. What I quickly learned is that regex has different variations between languages. What I was using online, VBScript or JavaScript regex wasn’t the same standard of stuff I was trying to match using AS3. So I just tried to do the regular expression from flex, and doing a quick compile to see the results. This got really annoying really fast!

As3Regex Tester Screenshot

So enter As3Regex Tester! I decided to write a regular expression tester for ActionScript 3. It supports switching between match and replace, as well as onChange() on the <mx:TextArea> so you can see your changes immediately.  You can also select the specific flags such as global, lower case etc.  It also supports string saving.  It saves the strings to a Local SharedObject so you don’t have to keep pasting in text!

I think the funny part about this application is the UI.  I am a designer and I usually really care how my applications look but I figured the engineers that need regex don’t need a fancy UI ;)

Anyway, I hope you like it!

–lp

Using Flex Framework libraries in an ActionScript project

One of my favorite things about Flex Builder is that you can create a pure ActionScript project that extends Sprite. I can’t imagine writing a Flash application these days without doing it in Flex, but this option is great you’re looking for something more lightweight or if it’s a non-UI project such as a SWF bridge to manage old AS1/AS2 content. Other things could be a Papervision 3D project or if you’re playing around with programmic movement or the drawing API.

It’s still a surprise to me that a lot of hardcore Flashers do all of their work in pure AS3 but still haven’t heard of binding. I thought I’d show how you can use binding and other Flex libraries. There is a “gotcha” or two along the way but I plan on explaining those too.

Lets start out by looking at some of the Flex libraries with the Flex SDK. Go into your Flex Builder installation directory and you should see the following folder path:

{FlexBuilder 3 Location}\sdks\3.0.0\frameworks\libs

It should contain some SWC’s like:

flex.swc
framework.swc
rpc.swc
utilities.swc

These are available for you to use in any ActionScript project, you just have to add them. So to add them right click on your ActionScript project and select properties.

ActionScriptProperties

This lists the existing build path libraries for the compiler. We’re going to add a few more. So go ahead and click on the button “Add SWC” or “Add SWC Folder”. You can add the entire lib directory we talked about above, but it has additional SWC’s you may not need like the automation testing and QTP classes. I just add them individually. Once you add all of them we now have to add the “locale” folder. This locale folder is used by the libraries for error warnings etc and is specific to the language you specify. So click on “Add SWC Folder” and select a similar location:

Locale Location

Now your properties should look similar to:

finallibraries.png

Click ok and wait for it to update the compiler settings. So now you’re ready to use binding and all of the Flex libraries! You also now have the code completion and all of the other good stuff that links to the libraries.

We’re not completely out of the woods yet, we do have to cover one more important item about implementing the actual Flex classes. Lets use mx.rpc.HTTPRequest as an example:

var myURLRequest:URLRequest = new URLRequest( tmpString );
var myService:HTTPService = new HTTPService();

myService.method = "GET";
myService.url = myURLRequest.url;myService.addEventListener( ResultEvent.RESULT, onHTTPServiceComplete, false, 0, true );
myService.addEventListener( FaultEvent.FAULT, onHTTPServiceError, false, 0, true );

myService.send();

This is very valid but it’s actually going to throw the following runtime error in your project:

No class registered for interface ‘mx.resources::IResourceManager’.

Believe it or not, during the initialization of a Flex Application, many classes are loaded to be used later. The solution is to create a method called initFlexFrameworkSpecifics() which you call in your constructor or inside init() and have the following code:

private function initFlexFrameworkSpecifics() : void
{
    Singleton.registerClass("mx.resources::IResourceManager", Class(getDefinitionByName("mx.resources::ResourceManagerImpl")));
    var resourceManager:IResourceManager = ResourceManager.getInstance();
}

HTTPService was making call to a IResourceManager which didn’t exist.  The Singleton Class reference is what the Flex Framework does to ensure there is only one instance of your class. So what we do is create that class reference of IResourceManager for all other libraries to use.

That’s it! You’re good to go now.  Please understand that there may be more libraries that you’ll have to initialize depending on which classes you use. I hope you find this post helpful!

–lp

Eclipse “TODO/FIXME” Goodness

I’ve been meaning to try this TODO/FIXME plug-in for eclipse sometime now. If you haven’t already installed it, you definitely should try it out.   I think it’s very handy! This is going on my list of default plug-ins to install along with the viPlugin and Subclipse. Yet another great tool released by the community!

User Tracking with Google Analytics and Flex

For user experience, we’re always concerned how users interact with out applications. I think it’s easy to overlook that we can check where our users have actually been. For years agencies have been tracking our clicks to get more information about the user and their experience. Why not track users in Flex applications? In this post, I’m going to show you how you can tweak Google Analytics and add some Flex code that will allow you to track user clicks.

One of the good (and bad some might say) things about Flash is the page doesn’t require a refresh when dealing with data. But you’re probably wondering how can you track RIA/Flex stuff without a page refresh?

Take a look at this simple piece of JavaScript that’s required on every page you want to track via Google Analytics:

<script src=”http://www.google-analytics.com/urchin.js” type=”text/javascript”></script>
<script type=”text/javascript”>
_uacct = “your_site_id”;
urchinTracker();
</script>

Now, lets add a little more JavaScript that we’re going to call from Flex via ExternalInterface.

function trackClicks( str )
{
    urchinTracker( str );
    _uff = 0;
}

So the method ‘urchinTracker()’ actually takes a parameter. If we passed “/loginButton” it’ll actually show that as a hit on Google Analytics! Pretty cool huh. If you pass a parameter, _uff gets reset anyway but I put it there just to be safe. For more information on _uff and other things, check this link out.

So the next suggestion I have is to create a class with a bunch of constants of the URI names of what you want to track. You can put the ExternalInterface call in that same class and make a static class call to it. You can put that pretty much anywhere from clicks to event handlers! If you’re not experienced with ExternalInterface, check out an old post that can help you.  I hope you find this useful!

–lp

Presenting on Flash Media Server 3

On Monday February 11 from 5:30 - 7:30, I’ll be speaking at the Adobe Users Group about the new release of Flash Media Server 3. Make sure you register here and get directions here.  I will be showing some of the new features in Flash Media Streaming Server and Flash Media Interactive Server including server-side ActionScript, streaming video, how to create multi-user applications and streaming HD Video using the H.264 codec. I really hope to see you there!

Going beyond the boundaries of AIR

I’ve been traveling a lot for work lately and with all the glamor of traveling comes the hideous tasks of expense reports. So I started working on a travel application that would allow me to manage my itineraries, flights and expense reports. Since I need the application to be offline/online, AIR was just a great fit. My first issue was, if I’m traveling how am I going to scan my receipts? I went and got the Plustek OpticSlim M12 Plus portable scanner… problem solved!

scanner

The next issue was getting hardware to talk to AIR. At the time of this development there was only really one project bridging this gap. It’s called Artemis. Artemis allows me to create my own libraries and integrate it with AIR. For simpletons, I can execute Java code and return values back to AIR. Mike Chambers and Ted Patrick have also done their own implementations, but at the time of concept for my application, Artemis was the only project available to me. I also like that Artemis is in Java which I can execute on pretty much any platform. Unfortunately I couldn’t get the image to save as ByteArray to send back to AIR because I think Artemis doesn’t currently support it. So in this sample I’m just going to be writing to the file system, and send a string back to AIR to let it know that I’m done scanning.

A lot of people in the industry have not seen any improvements to Artemis in the last few months but the original architect Adam Flater is going to release a new version when AIR 1.0 goes final. I’m really looking forward to using it and it should be pretty bad-ass.

The last problem was actually working with the scanner. I gotta give huge props to mm’s computing for providing me with jtwain. This allows me to access the scanner, set resolution and settings and actually save the file.

Alright, enough with the credits and on to the good stuff! Here’s the steps I suggest you take:

1) Make sure you download Artemis and get the sample working.

2) Download jtwain and get a separate java project working with it. When you run it, it’ll open up a little scanner wizard. With the AIR demo, I bypass this GUI and go right to scanning. You should really do this first so you know that you can get it working on it’s own.

3) Download the sample files I have for you.

Once you get everything setup, here is how you get it running

Run Artemis

Scan Tutorial  - Launch Artemis

See Artemis listen (I get this error but it still works)

Scan Tutorial - See Artemis

Run the AIR app

Scan Tutorial - Launch AIR

Press scan image

Scan Tutorial  - Scan

Insert a business card or paper

Scan Tutorial  - Insert Card or Paper

Watch it scan

Scan Tutorial - Scanning

All done!

Scan Tutorial - Done!

I hope you enjoy it :). My travel application is far from done but I might get less development done on it because I’ll be side-tracked on experimenting with more devices and trying to get this to save to ByteArray!

–lp

User Experience, you aren’t just another pretty face.

Have you ever bought something that needed batteries and when you get home you don’t have any batteries? Are you pissed or just thoroughly annoyed? Same thing goes when you go through the drive through and there isn’t any sauce for your chicken nuggets or tenders, or no spoon to go with your soup. When you get a printer these days, they rarely ship with USB cables. It’s up to the department store to sell you one to ensure you’ve had a good user or customer experience. Imagine a non computer savvy person coming home to setup their new printer and find out the don’t have the proper cable. It happens and yes they do get upset. They call the store wondering why they just got home and they don’t have the proper cable. The question is, would this bad experience deter or make you think twice from returning as a customer? The answer is yes.

I’ve been visiting New York for almost two months now and one of my favorite parts of the city is the wide array of choices on where to eat. I’ve been told by a local of many years, “Bad restaurants just don’t survive in this city, there’s just too many choices”. After seeing this first hand, I can see how service, food and price as a combination can affect the users experience. We’ve all had terrible service before so I don’t need to go in to detail about the effects of it. But think about the quality of the food, or maybe the portion then ask yourself “Was it really worth the price?”. How many times have you heard yourself say “Man that was expensive but it’s worth it”. You probably had a great user experience then.

By now you are asking how does this deal with UI’s that I create? I’m not telling you that it does, but I am suggesting is to be aware that user experience goes beyond just being visual. All of this is still part of “User Experience”. In an industry for the race for the next jaw dropping user interface, I think we all lose sight of what really is part of the users experience. Lately, I’ve been observing the little things in life and how horrible experiences I’d have if I didn’t have the littlest things. I’ve tried to analyze it and simplify it to a few items easy to remember:

Ease. If it’s easy to use or do, you’ll just have a better time doing it.

Proper resources to complete or accomplish something. Humans LOVE the feeling of accomplishment! Think of the guy who got home with a new printer and didn’t have a USB cable. Or think of buying a cup of soup and not getting a spoon! (This just happened to me the other day.)

Comfortable. Anything less is just frustrating. Frustration is the Kryptonite of a great user experience.

Aesthetics. Ok, so it’s gotta look good. You’d be surprised on how much the user thinks your design is “pretty” when they’re ready to throw their computer out the window. I’m throwing this in there for the people who’d flame me for not throwing a “visual” element for a great user experience. I’m also one of the first to say it doesn’t hurt to have a killer design.

So the next time you have a terrible experience just remember - you could be doing that to your users!

WOCCU, You’ve Arrived.

Ever since my first postings about this web site in June of 2007, I’ve always wondered when I’d be able to blog about this. I’m very proud to announce that WOCCU has finally launched their new website. I must say that seeing my design up there is pretty gratifying. I know the team worked overtime on this and they are probably glad that I’m not around anymore telling them to push pixels :).

As I look back on this design, I remember feeling that this wasn’t just another website design for me. I was really inspired and driven to show a new face and the true colors of WOCCU. I hope you like it.

–lp

WOCCU Website Redesign

Louie Penaflor is a web developer in Madison, Wisconsin specializing in Flex, Flash and Design. The views expressed on this blog are personal views and should not be taken to represent corporate strategy or official Digital Primate positions. The content of the posts at this site should not be re-distributed by commercial media.