Loading Remote SWFs and parameters

Here is another example of one SWF loading another SWF and how parameters can be passed through the url.

The main application (called Loader1) has a panel which displays information about the current application, parameters, url etc.

The main application loads a remote application SWF (called Loader2) which also has the same panel displaying information about the application, parameters, url, etc. The differences are highlighted in bold.

Here is the code for loading a remote swf - notice how parameters are passed into the url:

private function loadRemoteSWF():void {     var remoteSwfUrl:String =          "http://keg.cs.uvic.ca/flexdevtips/loaders/Loader2.swf?loaderurl=hello";     var loader:SWFLoader = new SWFLoader();     loader.addEventListener(Event.COMPLETE, remoteSWFLoaded);     loader.load(remoteSwfUrl); } private function remoteSWFLoaded(event:Event):void {     var loader:SWFLoader = event.currentTarget as SWFLoader;     ui.addChild(loader.content); // ui is a UIComponent }

In the remote application you can access the parameters that were passed in from the main application through the SWFLoader by the parameters property, but you MUST be inside the remote application MXML (e.g. in this case in Loader2.mxml), otherwise if you use Application.application.parameters this will refer to the parameters from the main application and not the ones that were passed in using the SWFLoader.


Source Code:

• Loader1 (Main Application), or right click View Source
• Loader2 (Remote SWF Application)

Default stylesheet in an SWC (Flex Library Project), and embedded font rotation

For ages now I've been trying to figure out how I can use a StyleSheet from inside my Flex Library Project in ActionScript. I kept reading that it is very resource intensive to be calling UIComponent.setStyle(...) at runtime, so I wanted to set all my styles using a StyleSheet. The LiveDocs on the subject seem to say that there are two ways to load a StyleSheet:

1. From inside MXML in your Application using the <Style source="assets/styles.css"/> tag
2. By loading an external stylesheet SWF file (compiled from a CSS file) using the
   StyleManager. loadStyleDeclarations(url)

Then I finally found the solution in this article (right near the bottom of the page in the comment by Henk). And that pointed me to this LiveDoc - Applying styles to your custom component which solved the problem. Scroll most of the way down until you get to the part called "Applying styles from a defaults.css file".

If you don't want to read the articles above, here is my brief summary.

Using a StyleSheet in your FlexLibrary Project:

1. create a StyleSheet in the src directory of your project, and call it defaults.css
2. open the project Properties > Flex Library Build Path and check the src/defaults.css file under the Assets tab
3. define your styles inside the defaults.css StyleSheet

Restrictions:

• You can include only a single style sheet in the SWC file
• The file must be named defaults.css
• The file must be in the top-most directory of the SWC file

*Note: it appears that having a defaults.css file in your Flex Application project (swf) also works without having to specify the stylesheet in the mxml (e.g. <mx:Style source="defaults.css"/> is not needed).


Using Embedded Fonts inside Flex Library Project/SWC:
If you want to use an embedded font inside your library project you have two ways of doing this:

1. Embed the font inside an ActionScript file like this (the font is inside the project src/assets directory):
   

   [Embed(source='/assets/verdana.ttf', fontName='localVerdana',         mimeType='application/x-font')] public var verdanaFont:Class; ... setStyle("fontFamily", "localVerdana");

2. Or put your embedded ttf font in your project's src directory and embed the fond using the defaults.css file (the font must be in the src directory for this to work - see this Adobe Bug for more details):
   defaults.css:
   
   @font-face {
     font-family: localVerdana;
     font-weight: normal;
     src: url("verdana.ttf");
   }
   .label {
     /* must use embedded font for label rotation to work */
     font-family: localVerdana;
     /* must specifically set the font weight */
     font-weight: normal;
   }

Note that if you want to set the DisplayObject.rotation property then you have to use an embedded font otherwise it doesn't work.

Here is a simple example of font/label rotation (right click "View Source" for the code).
In this example I actually included three fonts - Verdana plain, Verdana bold, and Comic Sans.

* Note that fonts can greatly increase the size of your SWF. The three fonts that I used above are all about 150 KB each. One way to reduce the size of your SWF is to restrict the unicode character range (meaning that only part of the font set is included in your SWF). Here is the LiveDoc on Using Fonts and Setting Character Ranges.

Ben Stucki's blog helped me figure out how to embed a bold and plain font in CSS.

Error: Could not find resource bundle rpc

I ran into this runtime error "Error: Could not find resource bundle rpc" when running my application which loads a remote SWF file. After a few futile Google searches (which turned up this bug report) I realized that I had compiled the remote SWF using the Flex 2.0.1 compiler instead of the default Flex 3.2. Once I changed my remote SWF to be compiled using the 3.2 compiler (this can be done under the project
Properties > Flex Compiler > Use default SDK (currently "Flex 3.2") then it all worked as expected. So I'm guessing that Flex 3 and Flex 2 SWFs don't play nicely...

Creating a BevelFilter

It is remarkably simple to add a bevel filter to any DisplayObject using the filters property. You can also apply a bevel filter to a BitmapData object by calling the applyFilter() function.

The two classes that you can use are: BevelFilter or GradientBevelFilter. In the example below I use the BevelFilter because it is slightly more simple. Almost all the properties are the same, except that the GradientBevelFilter class lets you choose more than 2 colors, as well as the ratios and alpha values. Here is a GradientBevelFilter example.

Here is an example that lets you set all the BevelFilter properties and see how it affects the image on to which the filter is applied.


Most of the properties are quite self explanatory. The quality property can be set using constants defined in the BitmapFilterQuality class (high = 3, medium = 2, and low = 1). But the documentation also says that the allowed quality values are from 0 - 15, but you decrease the performance by setting the quality value higher than 3.
There are also constants for the bevel type using the BitmapFilterType class.

Adobe LiveDocs:

• DisplayObject
• BitmapData
• BevelFilter
• GradientBevelFilter
• BitmapFilterType
• BitmapFilterQuality

I'm also using the BindingUtils class to bind the bevel filter properties to the inputs (so that when the inputs change, the filter properties change too).

Unable to export SWC oem

Ever seen this error? I just came across it today. Thankfully the solution is very simple, but it took a few minutes of Google searches to find the solution.

The problem is caused by having invalid assets selected in your Flex Library Project. Probably you've removed one or more asset files, but the project properties didn't get updated.
To fix this open your project Properties > Flex Library Build Path > Assets, then de-select all your assets, and then re-select the assets. Click OK and it should update your project properties with the correct assets.

Credits go to this useful website: FlexGarden.net

Full Screen support in Flex

I recently learned that you can make your Flex application full screen. Here are the steps to accomplish it:

First edit your project's html-template/index.template.html file and add the following allowFullScreen property to the JavaScript code:

else if (hasRequestedVersion) {
  AC_FL_RunContent(
    ...
    "allowFullScreen","true",
    ...
);

You can also add the <param name="allowFullScreen" value="true"/> to the <object> tag, and allowFullScreen="true" to the <embed> tag for compatibility.

Next in your ActionScript code when the application has finished loading (when the stage isn't null) you can make your application full screen like this:

Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;

I found this out from the The Adobe Flex 3 Programming ActionScript 3 PDF on page 547.

Flex Amazon Image Search

Here's a sample application that queries the Amazon Web Services to retrieve images for CDs, DVDs, books, video games, software, etc. E.g. if you want to find the album cover for a music CD.

Here is my example - it lets you search for music, dvds, books, etc by title (and an artist for music cds, and an author for books) and then shows the resulting images ordered into 5 different image sizes. Double click an image to open the jpg in a new window.
** As Amazon keeps updating their web service this example will stop working. Please view the source code to see how it used to work!


Here are the steps to get it working in your Flex Builder:

1. Download the source code from the example above (Right click "View Source", then click the download link in the bottom left corner of the page)
2. Sign up for an Amazon Web Service Account
3. Copy your Access Key ID and put it in the services/AmazonItemSearch.as file
4. Full details and the API for the Amazon Web Services are located here

I found this website which helped me get started:
Finding cover art with Flex and Amazon WebServices.


** August 24th, 2009 Update **
As of August 15th Amazon now requires that all requests are signed. The example above has been updated to include this change, so you can View Source to see the code.

Here are some links that I found very useful in fixing the problem:

• Getting Started - submitting your first request
• Example REST Requests (steps on how to sign the request)
• Signed Request Helper:
  Use 00000000000000000000 for the access key and 1234567890 for the secret key.
  Then copy the following text into the Unsigned URL textbox:
  http://webservices.amazon.com/onca/xml?Service=AWSECommerceServic
  e&AWSAccessKeyId=00000000000000000000&Operation=ItemLookup&ItemId
  =0679722769&ResponseGroup=ItemAttributes,Offers,Images,Reviews&Ve
  rsion=2009-01-06&Timestamp=2009-01-01T12:00:00Z
  

** One final note
When signing the request, I tried using the com.adobe.crypto.HMAC and com.adobe.crypto.SHA256 classes that come with the as3corelib project to create the signature, but it didn't work because the signature needs to be Base64 encoded. So instead I modified those two classes very slightly to make it work.

I also included a TestSignature.mxml application which was useful to make sure that the signature matched what the Signed Request Helper output.

Repairing my Creative Zen Vision:M 60GB (not Flex related)

I've spent many hours this year trying to fix my Creative Zen Vision:M 60GB. It died in January after I connected it to my laptop to charge it up (using a cheap adapter that I bought on ebay). Ever since it wouldn't turn on, just had a solid blue light (or a blinking blue light when it was plugged in to the computer or wall charger). And it was not recognized by the computer either.

My first thought was that the motherboard had died (probably because of my cheap usb adapter cable), but motherboards are quite expensive to replace, so instead I bought a new battery (off ebay too!) just to make sure. When the battery arrived I installed it and nothing changed - exactly the same scenario. So then I went back on ebay and bought a motherboard (not as expensive as I thought - only $20 USD plus shipping). The motherboard arrived this week and I took the old one out and put the new one in. See below for links on how to disassemble the ZVM. It isn't that difficult as long as you have a tiny Phillips screw driver, and steady hands.

After the new motherboard was installed I first connected it to the computer with the real cables that came with the player and charged it up. The computer instantly recognized mp3 player, and installed the drivers for it. But when I went to the properties in Windows Explorer it said it was only 50mb (instead of 60gb!). After searching google it appears that many other people have had this scenario. The reason for it is the firmware isn't correctly loaded, or is out of date, or the hard drive is faulty.

When I turned on the mp3 player the screen then showed an error message saying incorrect firmware version (0.0.15) and gave me the option to clean , format, reload firmware, and reboot. Cleaning did nothing - the screen said "scan disk..." forever. So I tried to reload the firmware. I downloaded the latest version from the Creative support website (linked at the top) and ran the exe (version 1.21.02), but every time it said "Your player is not connected. Please connect your player." even though my player was connected AND was recognized by Windows Explorer. A few people mention that this error happens on Windows XP when you have Windows Media Player 11 installed, so I rolled back to Windows Media Player 10 and still the same problem.

So, next step was to find a way to get the firmware onto the player with out using Creative's default firmware updater. I came across a support forum on www.epizenter.net mentioning that some people had hacked/cracked the Zen Vision:M firmware and had been able to change the fonts, colors, themes etc. So after days of searching I finally found some tools which helped me fix my zen. I haven't been able to find an original version of my 60gb firmware, so instead I'm using a modified version that uses a different font (Comic Sans MS). It works, so I don't care :)

Here are the steps I followed:

1. Download the hacked Firmware Updater (it is for the ZVM 30gb but also works with the 60gb)
2. Download the modified firmware nk.bin and put it in this directory (on Windows) C:\CtJbFW\newbin
3. Connect your zen, and run the updater. All being well it will update the firmware and reboot your zen and it will work!

Links:

• Creative Zen Vision:M homepage
• anythingbutipod.com - an awesome website
• Epizenter.net - another amazing resource for Creative Zen products
• Rockbox - Creative ZVM Port
• anythingbutipod.com - Creative Zen Vision M Firmware Cracked
• Epizenter.net - ZVM Firmware Mod Thread
• Anythingbutipod - How to Disassemble the Creative Zen Vision:M

I've recently bought the new Creative Zen X-Fi2 mp3 player, with the touchscreen interface. At first it was a little sluggish (the touchscreen), but Creative has released a few patches that greatly improve the performance.