Mike Orth - Booya!

Usually, changing colors inside your application is easy. You can set just about everything from textColor to backgroundColor, inline (backgroundColor = “#FFFFFF”), in a stylesheet (background-color: #FFFFFF) or using the setStyle method( uic.setStyle(”borderColor”, “green”) ). But what if you are trying to change the color of an embedded asset?

Say your designer gives you an asset, like a black funky shaped blob for a logo or icon. Then, later on, your company changes the icons to white. Why wait around for 2 weeks while your designer finds time to change the graphic when you could change in the code? Or perhaps a better example would be if your application requires applying different stylesheets at run-time for users to pick custom colors and layouts.

This is where using transforms comes in handy. The ColorTransform class lets you do some cool things to set RGB and alpha offsets or multipliers as well as set the color explicitly, which is what this example does. All you do is create a new instance, set the color value and assign the instance.

    var ct:ColorTransform = new ColorTransform();
    ct.color = event.color;
    img_funky.transform.colorTransform = ct;

This is not just limited to embedded assets. You can use transforms on almost any DisplayObject.

Example Application - Click Here

No comments

This is an extension of a great blog from Justin Opitz on normalizing value objects.  We were discussing the a best way to take objects that are somewhat similar in form and conform them to an interface. Normalizing objects allows you perform logic on data that is generic and more makes your code more reusable.

So imagine we have several different object types coming in, like Artist, Album, & Track objects with properties that are similar, yet unique, including “artistName”, “albumName”, “trackName”, among others. We want to put this into a VO with just “name”.

Below is a modified version of the translator. If you have several different VOs that implement an interface then you may want the ability to assign them as needed. Since it could be any one of the VOs being, we’ll pass it in as a wild card vo:*" and then return the newly assigned object. Also, if the current propety doesn’t match a pattern we’re looking for, then it assigns it as-is.

So here’s what the function will look like:

public static function TranslateObject ( targetObject:Object, vo:* ):*
{

for (var s:String in vo)
{
//we are going to check each prop name to see if there is a match for our
//targetObject’s known properties
//obvious ly this list will grow the more props you have to normalize
//however it only grows once regardless of the number of non-normalized VOs

if (s.toLowerCase().indexOf(’name’) != -1)
targetObject.name = String(vo[s]);

else if (s.toLowerCase().indexOf(’id’) != -1)
targetObject.id = int(vo[s]);

else if (s.lowerCase().indexOf(’genres’) != -1)
targetObject.genres = vo[s] as Array;

else
targetObject[s] = vo[s];

return vo;
}
}

1 comment

If you’re like me, and always get really wrapped up in your work, then you should check out Tiny Alarm for Mac. It’s a great little app that lives in your menu bar and is a snap to use. Just click the alarm clock to set the time and it gives you a few short beeps (or other sounds) when the time comes and subtly flashes. You can ignore it and it’ll beep again every minute. Clicking it again will turn it off or snooze depending on preference.I use it to remind myself to get up and stretch or to move on to working on something else. I just got the new version which has cool features to gives you notes on why you decided to set the alarm in the first place. Now if it only made me get up instead of ignoring it or hitting snooze 8 times….More info on Tiny Alarm here

No comments

The “Number” data type in Flex is used for floating-point numbers (i.e. decimals like 42.11). It is usually the default type when using numerical values, even though Flash Player handles int and uint more effeciently. The Number class uses the IEEE 754 standard which gives you values up to 53 bits (highest of which is approx. 1.79e+308).

When doing calculations involving Numbers, calculations are done using binary addition. This can really throw you off course in a few rare instances if you’re not careful! Take the following example:

   var a:Number = .1;
   var b:Number = a * 3;     // .1 + .1 +.1

b = .3, right? Right.. only, not. The value comes out to 0.30000000000000004 instead. Ok, not too far off, but imagine making several calculations on the result and you can start to sway off course. The following example is a watered-down version of what I encountered lately. I knew about this type of discrepancy, but it took me a couple of days to figure out where things were going wrong because I didn’t assume that something was failing at such a base level; you typically expect things like subtraction to work correctly.

   var a:Number = 1;
   var b:Number = .2;
   while (a > 0){
      a = a - b
      trace(a);
   }
   ...
   OUTPUT:
   .8
   0.6000000000000001
   0.4000000000000001
   0.2000000000000007
   5.551115123125783e-17
   -0.19999999999999996

Whoa. Things start getting funky (btw, in case you’re not familiar with the notation, that second to last one is 5 with 17 decimal places, “.00000000000000005″). Why the discrepancy? Again, it has to do with converting the numbers to binary and evalutating them. You can read more on the IEEE 754 standard here. This is typically not something you will have to deal with, but when you do encounter it, you can spin your wheels for a while.

Try it for yourself here.
Demo application that adds/subtracts and includes some default cases.

No comments

I’ve been fielding questions about fading audio in Flex lately and decided to package up my FadingSound. I worked on this about a year ago and then threw it on the shelf, so I’ve begun cleaning it up and wanted to release a prototype as a proof of concept. This class creates the Sound and SoundChannel objects for you and fades in and out each song in a playlist. It’s so simple, all you have to do is create an instance say:

myFadingSound.play(playlist);

where “playlist” is an ArrayCollection of URLs. If you just want to have 1 song fade in or out, only put 1 URL in the array. Optional params specify the length of fades and the duration of the songs (if you want to scan through 10 second clips for example). See it in action here.

Fading 1 song in was the easy part - the hurlde was to have 2 channels playing at the same time and control their fades to give the illusion of concurrecny. There are still some bugs in it with buffering songs and fading out at the right time with dynamic tracks which is why the example only plays short clips rather than full songs. I’m in the process of cleaning that up and will update things when I get time. Also I’m going to have an mp3 player that utilizes this where you can create XML playlists to feed it. Feel free to drop me line with features you’d like or any comments on the FadingSound.

Application demoing the Prototype

4 comments

Don’t get caught by Firefox’s popup blocker! Have you ever had some windows blocked and some not? Here’s a way to help ensure that your navigateToURL works in FF (even though having a popup is typically not a good idea in the first place and should be used sparingly).

Firefox tries to help you out and block malicious popups. This has to do with opening a new window without a direct user-interaction (e.g. opening a popup on page load rather than opening a window when a user specifically clicks a button).

I worked on a project where I had to open a new window from within a Flex app. When the user clicked a button, it did some processing behind the scenes based on their input fields, assembled a query string, then made the request to open a new window. Sometimes it worked, sometimes it didn’t! It was a really hard issue to nail down, but after a lot of testing I finally concluded that it had to do with the amount of time taken before the request was sent out.

After you initiate a click event, there’s a set amount of time the browser has to respond to it. If a new window is opened within that time limit, then you can get past the popup blocker because this is an accepted behaviour. Otherwise, it assumes that the request is not potentially not valid. Firefox (and most browsers) blocks this type of action because of malicous applications that could open several windows at will without permission.

Depending on your machine and what you has running at the time, the amount of code you can execute before you choke is variable. I created a quick demo here that illustrates this. If your popup blocker is enabled, one button will open a blank page, the other should get blocked. Right-click to view source. Here’s a snippet from it:

        
      private function onButtonClick(event:Event):void
      {
        if (event.target.id == "success_btn")
        {
          popupSuccess();
        }
        else
        {
          popupFail();
        }
      }

      private function popupSuccess():void
      {
        openNewWindow();
      }
      
      private function popupFail():void
      {
        // do some sort of heavy processing before making the request
        for (var i:int=0; i < 1000; i++)
        {
          var o:Object = new Object();
          var num:Number = Math.log(Math.PI);
          o.num = num;
        }

               openNewWindow();
      }
      
      private function openNewWindow():void
      {
        navigateToURL( new URLRequest(URL), '_blank');
      }

Click here to view the app

5 comments

Reduce the size of your Flex application. In Flex 3, they’ve changed the way to use the debug swfs. Before, if you would Debug your app, it launched /myApp-debug.swf or if you just Ran it, it would launch /myApp.swf. It now seems to be all rolled into one swf for both Run or Debug. So if you’re going to push a release to production or anywhere online, make sure to use Projects->Export Release Build… for it. It takes out the debug information and copies the assets to a new folder.

This will take good chunk out of your application size. It took my latest project down from 840KB to 521KB.

If you want to take it down even more, then use the new Flex framework caching. This was something that we rallied to get from Adobe since Flex 2 and finally did! It can be found under Properties->Build Path->Library Path, and set Framework linkage to RSL.

I won’t go into the specifics of it, but it will put two files (framework_3.0.0.477.swz and .swf depending on your build number) in your release folder which you will need to include when you post a build. Also it requires use of Flash Player 9.0.115. For the same project it took the size from 521KB to 263KB! With these two options it cut the app down to almost 1/3 the originial size! Sweet!

Also as a sidenote, in Flex 2, I have run into some intermittent issues when using RSLs where the application would always look for the debug version. So I always had to compile with “-debug=false” in order for it not to throw up the debug message. I imagine that specifying the default option in flex-config.xml would also work, but it’s a pain to continually open another file.

2 comments

I finally got my new blog up and running. This is mainly here to serve as a placeholder, but in actuality, I’ll probably never delete it so I should try to at least put something useful here.I’ll be posting things that I have found to be helpful in my daily Flex development. Also I’ll be writing about issues I’ve come across that were painful to work around so hopefully someone else can reap the benefits of me banging my head against the wall. I’ve done a lot of work with using audio in Flex so I will be writing about Sound as well.

No comments