Flex Community Blog Aggregator

August 07, 2008

Flex Examples

Toggling whether a user can select text in a TextArea control in Flex

The following examples show how you can control whether a user can select the text in a Flex TextArea control by setting the selectable property in MXML and ActionScript.

Full code after the jump.

(more…)

by peterd at August 07, 2008 05:02 AM

August 06, 2008

Doug McCune

Announcing SpatialKey - Geographic Information Without Limits

SpatialKey LogoToday I’m proud to announce the launch of SpatialKey, the geospatial information visualization product I’ve been working on with our fantastic team at Universal Mind. I’ll make a bold statement that I stick by: this is the best web-based mapping product in existence. Today we’re releasing a “technology preview” that gives you a little glimpse at what we’ve been working on (just to whet your appetite until we release the full product).

Quick links
Before I explain what SpatialKey is I wanted to give a few quick links because I know a lot of you are going to have your ADD act up before you read the rest of the post.

  • SpatialKey Gallery - lists a few dataset/template pairs that we think tell great stories. Read the descriptions of the datasets and then launch the app to play with the data yourself.
  • screenshot067.jpg
    San Antonio Prostitution hotspots

    San Antonio Prostitution Crimes - This link will jump you straight into exploring the prostitution crimes in San Antonio from Jan 2006 - July 2007. Check out how clearly the heatmap points out the corners that are the hotspots in the city.

  • Growth of Walmart - This link will load the Walmart dataset into a playback template that lets you click play and watch Walmart take over America.



Beyond points on a map

screenshot068.jpg
Overwhelmed with markers

We’ve been seeing the same tired approach to web-based mapping for years now. Everyone throws markers on a map. You want to track crime? Throw a bunch of markers on a map. Little pin markers work fine if you’re showing a few data points. Want to see the location of Starbucks within a 3 block radius of your house? Use markers. But what if you want to see the total sales of all Starbucks worldwide? Or all crimes for the past 10 years? For the whole country?

SpatialKey uses some of the most advanced visualization renderings for geospatial data that have ever been seen on the web. The focus here is on aggregate renderings: heatmaps, thematic grids, graduated circles. 1,000 markers all piled on top of each other doesn’t help anyone. What you want to see is density or sum total value. SpatialKey focuses on rendering aggregate data in meaningful ways. We can show you a heatmap of the entire country and let you visualize any number of data fields. You want to see the heatmap represent total sales of all stores in the region? No problem. You want to see average house price over the past 10 years? We can do that.

Heat Map Heat Grid
SpatialKey Heat Maps SpatialKey Heat Grids

We haven’t seen innovative technology in this industry since Google let you drag the map. (I actually vividly remember that moment when I first dragged a Google map and my mouth started to water). It’s time to move beyond points on a map.

Your data doesn’t have limits
Try adding 10,000 data points to a Google Map. I dare you. What happens? If you’re using the “My Maps” feature of Google Maps, you’re limited to only show 200 points at a time, then you have to page through your data. And to top it all off you’re limited to a whopping total of 1,000 data points in the entire data set. So you get to page through 5 pages of data and only see 1/10th of your total data set anyway. If you create your own application with the Google Maps AJAX API you’re going to have serious performance problems when you get up into a few hundred markers. We think that’s ridiculous.

SpatialKey breaks through the limits of previous mapping technology in two ways. First, we’re simply faster. Flash can process and render data far faster than JavaScript. We can render 10,000 data points in a matter of milliseconds. You simply can’t do that with any JavaScript API out there. Second, we’re smarter. We aggregate data to produce heatmaps instead of just trying to overlay markers one on top of the other. Fundamentally, a massive dataset is an information visualization problem, not a technical one. You need better renderings to convey massive amounts of data, and that’s what SpatialKey delivers.

This is just the beginning
This is a technology preview. That basically means we’re showing you some cool stuff, but we’ve got way more up our sleeve. We’re looking for feedback on what we’ve got, and we’re hoping to get you excited about what we’ll be rolling out. We’ll be releasing new versions of SpatialKey Personal that will let you easily import your own data (if you’ve got an Excel file with addresses you can drop it right in). We’re also going to be releasing SpatialKey Enterprise, which lets you load a data set of any size (millions and millions of points). And then we’ve got a third product that we’re launching called SpatialKey Law Enforcement Dashboard, which is an enterprise version of SpatialKey specifically targeted toward police departments (includes special law enforcement reporting templates). And in the meantime we’ll be rolling out some more example datasets for you to play with, so keep an eye on the SpatialKey blog.

So go check out the SpatialKey Gallery and play with some data. We’re looking for feedback during this phase, so if you have any suggestions or (god forbid!) you run across bugs, please let us know by emailing feedback.

by Doug at August 06, 2008 10:22 PM

Mike Chambers

What are your biggest issues with Adobe AIR?

What are your biggest issues, bugs and annoyances with Adobe AIR? I am specifically looking for input on both developers bugs, and end user bugs. I am not looking for input on features you would like added (Ill do that in another post).

We already have a pretty good idea of the main issues (based on the forums, bug reports, blogs, testing and twitter), but your comments here will be another useful data point.

As usual, you can always submit the issues directly to the AIR team here.

So, post your biggest Adobe AIR annoyances, bugs and issues in the comments. Keep comments on topic.

by mikechambers at August 06, 2008 04:12 PM

Flex Examples

Displaying all the properties of a component instance in Flex

The following example shows you how you can display all the getters/setters and their current values for a Flex TextArea control by using the describeType() method, some E4X filtering, and an XMLListCollection.

Full code after the jump.

(more…)

by peterd at August 06, 2008 05:38 AM

Doug McCune

August 05, 2008

Everything Flex

Congrats to Open Flex!

Congratulations to Open Flex for winning the InfoWorld Bossie for Rich Internet Applications.

by Rich Tretola at August 05, 2008 07:43 PM

Flex Daddy

Building desktop applications with HTML and JavaScript

This session at Adobe AIR Camp introduced traditional HTML and JavaScript developers to the AIR SDK and how to use the the various binaries (ADL and ADT) to develop, test, and package desktop applications. The session included a basic introduction to the AIRAliases.js file and it’s importance when coding against the AIR runtime with JS.

What I find really helpful is the Adobe AIR Language Reference for JavaScript developers. This is a subset of the ActionScript 3.0 Language Reference and includes all the AIR specific features that you as a JavaScript developer can access within the AIR runtime.

For the basic application seen below you can develop using your favorite text editor and the Adobe AIR SDK, download the Adobe AIR extension for Dreamweaver CS3, or even try developing with Aptana. I really like Aptana as it can be installed as a plugin for Eclipse and sit right beside my Flex development perspective.

For other AIR development tools click here.

Download the source code for the application below.

Your first desktop application with HTML and JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
 
<head>
<title>Our first HTML AIR application</title>
 
<script src="AIRAliases.js" ></script>
<script>
   function doLoad()
   {
      alert("Simple alert to show we can include regular JS scripting");
   }
 
   function writeFile()
   {
      var file = air.File.desktopDirectory.resolvePath("sample.txt");
	  var stream = new air.FileStream();
 
	  stream.open( file, air.FileMode.WRITE );
	  stream.writeMultiByte( document.getElementById('textInput').value , air.File.systemCharset );
	  stream.close();   
   }
 
</script>
 
</head>
 
<body onLoad="doLoad()">
   <h2>AIR HTML/JavaScript Sample</h2>
   <p>This sample application will take a simple text input entry and write this out to the contents of a file on the users desktop</p>
   <input type="text" id="textInput" value="www.flexdaddy.info"/>
   <input type="button" onClick="writeFile()" value="Save to desktop" />
</body>
 
</html>

And the application descriptor/manifest file

1
2
3
4
5
6
7
8
9
10
11
12
< ?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
    <id>com.flexdaddy.samples.htmlair</id>
    <version>v1</version>
    <filename>aircamp_sample</filename>
    <initialwindow>
        <content>airsample.html</content>
        <visible>true</visible>
        <width>400</width>
        <height>350</height>
    </initialwindow>
</application>

Download the source code for this application.

by Andrew Spaulding at August 05, 2008 02:10 AM

Build your first AIR application with Adobe Flex

Adobe Flex really is the development tool and platform of choice for developing desktop experiences on Adobe AIR. This slide deck was presented as part of a series of topics covered at Adobe AIR Camps throughout Australia and New Zealand. Take a look, download it, and share it! If anyone is interested in the demo files the Flex Builder project archive can be downloaded here.

The presentation introduces Flex Builder, the Flex framework and the AIR runtime by creating an application with a transparent window (thanks to Matt Voerman for providing the pretzel image!) that uses custom chrome and native window commands to move and close the application.

Take a look at the sample project, and if you have any questions feel free to leave a comment.

by Andrew Spaulding at August 05, 2008 12:53 AM

August 04, 2008

Flex Examples

Closing a pop up window using the keyboard in Flex

The following example shows how you can close a pop up window when a user presses the Escape key in Flex.

Full code after the jump.

(more…)

by peterd at August 04, 2008 03:46 PM

Displaying a video in a pop up window in Flex

The following example shows how you can use the PopUpManager class to display a VideoDisplay control in a TitleWindow container in Flex.

Full code after the jump.

(more…)

by peterd at August 04, 2008 03:14 PM

Using Google Maps in a Flex project

The following example shows how you can embed a Google map into a Flex/ActionScript 3.0 project.

Full code after the jump.

(more…)

by peterd at August 04, 2008 06:23 AM

Flex Daddy

AIR Camp keynote slides

Below are the keynote slides from the recent Adobe AIR Camps throughout Australia and New Zealand. Thanks to everyone who attended, and a special thanks to both Mark Blair and Matt Voerman who presented at the events as well, and to Mike Downey for presenting the keynote in Sydney while on his visit to WebDU 2008.

Over the next few days I’ll post slides and references to the rest of the content we covered at the AIR Camps.

Be sure to take a look at the following links to some great applications. A real nice showcase of what’s possible!

Adobe AIR Showcase
Adobe AIR Marketplace

by Andrew Spaulding at August 04, 2008 02:05 AM

Flex Examples

Using Yahoo! Maps in a Flex project

The following example shows how you can embed a Yahoo! map into a Flex/ActionScript 3.0 project.

Full code after the jump.

(more…)

by peterd at August 04, 2008 12:16 AM

August 03, 2008

Doug McCune

I just bought Flex 3 For Dummies!

I went to check the Amazon page for Flex for Dummies to grab a link to the page and I noticed that the book is shipping! I just bought two copies that will be delivered by Tuesday!

screenshot058.jpg

Adobe Flex 3 For Dummies

Go buy a copy! Buy 10! You already know Flex? Then buy it for the dude in the cube next to you who wants to learn!

by Doug at August 03, 2008 12:47 AM

August 02, 2008

Doug McCune

Why did I stop blogging?

I haven’t been blogging like I used to. It’s been a month since my last post (and that was just a silly cartoon). I’ve been thinking about why this is, and there are some typical expected reasons (busy work schedule, extra non-work commitments, a recent move, etc etc). This is all part of why I’ve fallen off the blogging wagon, but it’s not the whole story. This post is a bit of a dive into my psychology, trying to get at why I blog and where I’m trying to get to in my life. This isn’t a technical post and it’s not really even about Flex. It’s about me and my brain and my feelings. So if you don’t like mushy crap, you can stop reading.

First, the standard stuff:

  • Intense work
    I took a full-time gig with Universal Mind and we’re about to launch the product that I’ve been working on for a very long time. It’s one thing to work on a consulting gig where you walk in, do your shit, and get out. This is different. This product has so much of my time and energy invested in it. It’s my baby, and because I’m so invested, it consumes more of my mental time than any consulting project ever did. It’s not like I work 100 hour weeks for UM, I work normal hours. But my head doesn’t shut off when I commit my night’s changes and walk away from the computer. So that means I’m thinking about Flex for a huge portion of my non-work hours.
  • Writing Flex for Dummies
    Flex For Dummies basically took over my weekends for 7 months of my life. I wrote from Friday night to Sunday night (our deadlines were Monday and I usually turned in a chapter around 1 am). I didn’t go out, I didn’t go on weekend trips. And the last thing I wanted to do was blog. But that process is over and the book’s about to come out! I now have my weekends back, but I also have a new appreciation for my free time. I used to do a lot of blog posts over the weekends, now sitting in front of the computer is the last thing I want to do.
  • Moving in with my girlfriend
    It’s been about a month since I moved from San Francisco to Berkeley and moved in with my girlfriend. So I was dealing with the whole packing and moving thing, and also adjusting to the new living situation. Things have been fantastic since moving in, and this is another reason I’m not blogging as much. After a day of work I’d much rather go to dinner with my girlfriend and spend time hanging out with her instead of sitting in front of my monitor writing code.

So that’s all the stuff that I’d tell you if you asked me why I haven’t been blogging. “Man, I’ve just been so busy, I can’t find the time.” There’s a lot of truth to that, I certainly don’t want it to sound like I haven’t been busy. But largely the “I’ve been busy” excuse is bullshit. So why haven’t I been blogging?

I’m not hungry anymore.

Now we’re getting to the meat of this. I’ve been thinking about what drives me to blog and reflecting on the past year and a half. I’ve had a crazy ride. I went from being an unknown kid learning ActionScript and Flex to being a semi-famous-within-a-very-specific-geek-circle, book-writing, highly-paid, influential expert (and yeah, clearly you can tell that it’s all gone to my head). And it all happened in a year. My salary multiplied, I was speaking at conferences, I had a book deal. That’s some seriously crazy shit. That wasn’t entirely my plan from day one, although as things started picking up steam I started aiming higher and higher. I wanted to be famous. I wanted people to think I was good. I wanted to be in demand, to be sought after.

And so now what? What’s the next step? I’ve got a stellar job, I make bank, my book’s about to come out, I’ve got a reputation I’m proud of, and I’m being flown halfway around the world to speak at a conference. The people that I thought were rockstars, that I learned so much from while I was getting started (and still do every day); they all know who I am now (some of them are even good friends).

I used to be so hungry to prove myself. If someone had a coding problem they couldn’t solve I wanted to be the guy who showed everyone how to do it. I wanted people to stop and say “woah, where the fuck did this guy come from?” And now that I got that I guess I feel a bit drained. That fire to be the best, to be known, is dampened. I’m not saying I’m the best, I’m just saying I no longer care like I used to.

The Tech
There’s also a technology aspect to this. I’m starting to feel like I’ve taken Flex as far as it will go. I started proving small things; how to make little components, or how to hack some piece of the Flex framework. And I rode that until I knew Flex inside and out. I hit every brick wall (I climbed over or busted through some). And it was all so challenging and rewarding. I was unlocking secrets, uncovering things people didn’t know. But in terms of intellectual curiosity I’ve exhausted Flex 2 and 3. Of course there’s always new stuff in Flash Player 10 and Flex 4 that is going to be really interesting. But my interest has been shifting. I don’t want to solve small problems with a component or with a framework. I want big problems. I want new problems. I want real problems. I want to solve something that’s not just a technical detail.

I’m not ditching Flex or ActionScript. On the contrary, I feel like I’ve gotten to the point with the technology that I’m supposed to be: Flex and ActionScript are just tools to solve problems, not problems in themselves. When I started blogging Flex was a problem I was chipping away at, hacking together examples and tweaking the framework to get it to serve my needs. Now I want to move beyond that, and take on problems that are information problems on their own, and Flex just happens to be the best tool I have at my disposal.

The Next Step
I’ve been reading a good bit about information visualization as a field of research and soaking in as much as I can. The product I’ve been working on for Universal Mind takes geographic information visualization to a level that nobody’s done yet on the web (I put the “on the web” qualifier there, but I hope we’re working on stuff that pushes limits for any software, online or offline). And that’s just scratching the surface. There’s a ton room for innovation in the geo space. It’s a field that has so much potential but is stifled by a few big players and their ideas about how things are supposed to work. So I’m hoping I can help shake that up a bit. But geospatial information is just one small piece of the whole pie. I want to visualize everything. I want to create new ways of seeing data. And this is a field without limits. There is no end to the possible innovation.

So in the months ahead I hope to use this blog as an experimental proving ground for my forays into data visualization. I’m doing a lot of this for work, which is awesome because that means I get paid to do interesting work, but it has the downside that I often can’t share code. I imagine there will be more posts that are examples of what we’ve done (videos or live apps) that don’t show exactly how we did it. That sucks, but I think there’s still a lot to be said for showing off inspirational stuff. I’m also going to be trying to refocus on blogging small experiments in data visualization.

So if you’ve made it this far I’m impressed you read through my psycho-babble ramblings (or maybe you just skipped to the end looking for something worthwhile). From here on out I’ll probably keep the “dive into Doug’s head” type of posts like this to a minimum, and get back to blogging cool tech.

by Doug at August 02, 2008 11:20 PM

Description of my Flash on the Beach session: Decompiling Flex and Flash

speakerbadge_200_120_e.gifI’ve just posted the title and description of the session I’ll be giving at Flash on the Beach, which is happening September 28-Oct 1 in Brighton, England. My session is titled: Decompiling Flex and Flash. Here’s the full description (which you can also find on the FOTB site):

In this session we’ll learn how to decompile ActionScript 3 SWF files and peek inside other people’s code. Decompiling a SWF is often seen as an evil tactic that should be punishable by death, but regardless of your moral opinion, every SWF you create can be decompiled into often beautifully readable source code. If you’ve produced something cool, chances are someone has decompiled it (hell, chances are I’ve decompiled it myself).

In this session you’ll learn what you get when you decompile a SWF and what you don’t. We’ll cover how far you can get piecing a decompiled application back together and I’ll share a few real-world stories of how decompiling has proven invaluable in my development career.

This session will focus on ripping apart some large-scale Flex applications and diving into the source (we’ll see if I can get sued by the end of the session). I’ll cover some Flex-specifics that are important when you decompile a Flex app (Flex framework classes, generated MXML code, data binding code, etc). But decompiling AS3 SWFs is just as applicable for SWFs produced in Flash Authoring as well, so there should be plenty of information for everyone.

And for all the paranoid folks out there, in addition to decompiling code, I’ll also cover a few techniques to protect your source code to make it harder for people to steal.

I hope to see some of you in England!

by Doug at August 02, 2008 10:41 PM

Flex Examples

Rotating an image along its x-axis, y-axis, and z-axis in Flex and Flash Player 10

The following example shows how you can rotate a Flex Image control along its x-axis, y-axis, and z-axis using the new rotationX, rotationY, and rotationZ properties in Flash Player 10 and Flex “Gumbo”.

Full code after the jump.

(more…)

by peterd at August 02, 2008 05:59 PM

Viewing a Flex application’s generated source code

The following example shows how you can view a Flex application’s generated source code by adding the -keep compiler argument in Flex Builder.

To add a compiler argument in Flex Builder, launch the Project Properties dialog box by selecting Project > Properties from the main menu, select the Flex Compiler option from the left menu, and type “-keep” at the end of the Additional compiler arguments text input field (see Figure 1).

Flex Builder Project Properties dialog box
Figure 1. Flex Builder Project Properties dialog box.

Full code after the jump.

(more…)

by peterd at August 02, 2008 08:55 AM

Using the beta Gumbo SDK in Flex Builder 3

In a previous entry, “Downloading and installing Flex SDK builds from opensource.adobe.com”, we saw how to download and install nightly builds of the Flex 3 SDK into Flex Builder 3.
Setting up the beta Gumbo SDK has a couple little “gotchas” which can be a little tricky.

  1. Download the latest Gumbo SDK nightly build from opensource.adobe.com and extract the files in the .ZIP archive to your hard drive.
  2. Follow steps 4 through 6 in the “Downloading and installing Flex SDK builds from opensource.adobe.com” entry to add the Flex SDK build to Flex Builder.
  3. Create a new Flex project in Flex Builder 3.
  4. Select Project > Properties in Flex Builder’s main menu to launch the Project Properties dialog box. Select Flex Compiler from the left menu, click the Use a specific SDK radio button, and select the Gumbo SDK you added in the previous step.
  5. In the HTML wrapper section of the Flex Compiler settings dialog, set the required Flash Player version to 10.0.0 (see Figure 1). Click OK to close this dialog box.

Flex Builder Project Properties dialog box

Figure 1. Flex Builder Project Properties dialog box.

If you forget to change the Flash Player detection to Flash Player 10, you may see the following compiler errors in your Flex Builder Problems tab:
1046: Type was not found or was not a compile-time constant: ContentElement.
1046: Type was not found or was not a compile-time constant: ElementFormat.
1046: Type was not found or was not a compile-time constant: FontMetrics.
1046: Type was not found or was not a compile-time constant: GroupElement.
1046: Type was not found or was not a compile-time constant: TextElement.
1046: Type was not found or was not a compile-time constant: TextLine.

If you haven’t already installed the Flash Player 10 beta yet, you can find the various installers in the downloaded SDK’s /runtimes/player/10/{OS}/ directory.

Now that you have the Gumbo SDK and Flash Player 10 installed, now it’s time to write a simple test file using the latest Flex SDK.

Full code after the jump.

(more…)

by peterd at August 02, 2008 08:26 AM

Downloading and installing Flex SDK builds from opensource.adobe.com

The Flex SDK is constantly changing and improving. Every day bugs are getting fixed, features are being added or improved. If you want to use the latest code, you’ll need to know where to download the Flex SDK from and how to add the new SDK to Flex Builder.

New builds of the Flex SDK can be downloaded from the Flex SDK Downloads page on the opensource.adobe.com site. Currently, this page gives you links to download the latest Gumbo nightly build, the latest Flex 3 nightly build, or the various Flex 3 Compiler Modules. There are three main SDK build types:

  • Latest Milestone Release Builds — Releases are builds that have been declared major releases by the development team - Releases are the right builds for people who want to be on a stable, tested release, and don’t need the latest greatest features and improvements. There are generally a few milestone releases on a given branch and will be signified by incrementing the first minor number (e.g., 3.1).

    The Flex team creates signed versions of the major RSLs for every milestone release.

  • Stable Builds — Stable builds have been found to be stable enough for most people to use. They are promoted from nightly build by the architecture team after they have been used for a few days and deemed reasonable. The latest stable build is the right build for people who want to stay up to date with what is going on in the latest development stream, and don’t mind putting up with a few problems in order to get the latest and greatest features and bug fixes. The latest stable build is the one the development team likes people to be using because of the valuable and timely feedback; however it should be understood that the only fully supported versions are milestones (e.g., Adobe technical support supports milestones, though may point to fixes in stable builds) . The development team attempts to put out a stable build on active branches within 60 days of each other. Stable builds are signified by incrementing the second minor number (e.g., 3.0.1).

    The Flex team dos not currently create signed versions of the major RSLs for stable builds as it would begin negating the value of the framework cache (that said, we’ll be keeping an eye on things and re-evaluating as necessary).

  • Nightly Builds — Nightly builds are produced every night from whatever has been released into the HEAD of the SVN repository. They are untested and may have problems. Some possibly will not work at all. These drops are normally only useful to developers actually working on the Flex Project, but may be used to monitor how a given feature is progressing. Nightly builds follow the numbering of the last stable build, with only the third minor number incrementing (and matching the last revision number from Subversion).

[source opensource.adobe.com: SDK Build Types]

The next important thing to understand is the different types of Flex SDKs available:

  • Free Adobe Flex SDK — An official Adobe product, with released versions found at http://www.adobe.com/go/flex3_sdk. The Adobe Flex SDK contains everything you will need to build and deploy Flex RIAs. It is licensed under the Adobe Flex SDK license because it contains a mixture of open and closed source components (see license info above). The Flex framework source code included in this package is called out explicitly as licensed under the MPL. However, if you want just the open source stuff, you should look at the Open Source Flex SDK.
  • Open Source Flex SDK — For users who want a package that contains only open source code, we offer the Open Source Flex SDK, which is available from this site. This package is entirely under the MPL, including its binaries. It contains the majority of the Flex SDK (compilers, framework, debugger) but does not include anything that is not open source like the Adobe Flash Player, Adobe AIR, or the advanced font encoding libraries. This SDK is capable of creating Flex applications and can be used in whatever fashion the MPL allows. If you have questions regarding the use of code licensed under the MPL, you should consult with an attorney.
  • Adobe Add-ons for Open Source Flex SDK — This package contains all of the items that are in the Adobe Flex SDK and not in the Open Source Flex SDK. Downloading this file will allow you to bring the Open Source Flex SDK to parity with the Adobe Flex SDK. This package includes the Adobe Flash Player, Adobe AIR, the advanced font encoding libraries, and the code that allows licensing of things like the Data Visualization components. All of these elements are licensed under the Adobe Flex SDK license.

[source opensource.adobe.com: Flex SDK Downloads]

Downloading and installing Flex SDK builds into Flex Builder 3

  1. To download the Flex 3 SDK, navigate to the following URL:
    http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3/
  2. Download the latest nightly build. You can download either of the available SDK types (Adobe Flex SDK, Open Source Flex SDK, or Adobe Add-ons — see the previous list for explanations between the differnt types). For this example I am downloading the latest nightly build of the Adobe Flex SDK.
  3. Save the nightly build to your hard drive and extract the files from the .ZIP file
  4. In Flex Builder 3, select Window > Preferences from the main menu to open the Flex Builder Preferences dialog box. To add, edit, or remove a Flex SDK, select Flex > Installed Flex SDKs.
  5. Click the Add button to launch the Add Flex SDK dialog box and click the Browse button to navigate to the directory where you extracted the nightly SDK build in a previous step.
  6. Click OK to apply your changes and add the new Flex SDK. If you want to set the newly downloaded SDK as your default SDK, click the check box to the left of the SDK name. Click OK to dismiss this dialog.

That’s it! You’ve successfully downloaded and installed the latest and greatest version of the Flex SDK into Flex Builder.

If you want to compile your code against this new SDK you can select Project > Properties from the main menu, select Flex Compiler from the menu on the left, and select your new SDK from the dropdown menu in the Flex SDK version section.

Also worth mentioning is that you can manage your installed SDKs via the Project Properties dialog menu by clicking the Configure Flex SDKs link, which takes you to the Installed Flex SDKs preferences.

Happy Flexing!

by peterd at August 02, 2008 06:57 AM

August 01, 2008

Everything Flex

AIR Update Framework



I have been using the new AIR Update Framework in all of my new AIR applications in place of my UpdateManager that was originally written to handle application updates before the Adobe version was released.

The simplest way integrate this framework into your application is to setup your local configuration file with the checkForUpdate property set to false and all others set to true. This property is not telling the framework to never check for updates, it is simply telling the framework to hide the check for update dialog from the user so they will only see a dialog if an update actually exists.

In the sample below notice that the only other property that is necessary is the address of the remote update file. This local configuration file will ship with your application.

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  <configuration xmlns="http://ns.adobe.com/air/framework/update/configuration/1.0" >
  3.    <url>http://www.mydomain.com/AIR/Test/update.xml</url>
  4.    <delay>1</delay>
  5.    <defaultUI>
  6.        <dialog name="checkForUpdate" visible="false" />
  7.        <dialog name="downloadUpdate" visible="true" />
  8.        <dialog name="downloadProgress" visible="true" />
  9.        <dialog name="installUpdate" visible="true" />
  10.    </defaultUI>
  11. </configuration>

The remote file contains only a few properties. Notice the sample below where I have set a version property, url to the newest application file, and a small description which will display in the release notes section of the updater dialog.

  1. <update>
  2. <version>.2</version>
  3. <url>
  4. http://www.mydomain.com/AIR/Test/myApp.air
  5. </url>
  6. <description>
  7. Added new image rotation feature.
  8. </description>
  9. </update>

Finally, within the application do the following:

Create an instance of the updater on line 8

After the application completes, I set the path to the local configuration file within the init function.

Next, I add an eventListener to listen for when the updater is initialized.

Within the eventListener function, I then call the checkNow() function.

Since, we hid the first dialog, the updater will now check for the update and only show the user a dialog when an update exists (see image below). If so, it will then walk them through the rest of the update process.

Here is the full application code:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  3.     applicationComplete="init()">
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import air.update.events.UpdateEvent;
  7.             import air.update.ApplicationUpdaterUI;
  8.             private var updater:ApplicationUpdaterUI = new ApplicationUpdaterUI();
  9.  
  10.             private function init():void{
  11.                 updater.configurationFile = new File("app:/config/updaterConfig.xml");
  12.                 updater.addEventListener(UpdateEvent.INITIALIZED, updaterInitialized);
  13.                 updater.initialize();
  14.             }
  15.  
  16.             private function updaterInitialized(event:UpdateEvent):void{
  17.                 updater.checkNow();
  18.             }
  19.         ]]>
  20.     </mx:Script>
  21. </mx:WindowedApplication>

air updater

by Rich Tretola at August 01, 2008 01:58 PM

Matt Voerman

Olympics + NBC + Silverlight + Mac = Poor UX

Poor User Experience

The battle for Olympic gold in the global video streaming event is well and truly under way. With Microsoft having a head start in partnering (*ahem paying*) with NBC to deliver 2,200 hours of live, interactive video, plus integrated broadcast coverage. Their NBCOlympics site will have massive spikes of traffic based on the hotly contended events, as well as peak viewing periods.

With the eyes of the world closely scrutinising their offering. It goes without saying, that what ever is produced needs to be designed for performance and deliver a brilliant user experience. This being the case, NBC and Microsoft have teamed up with UX glitterati Schematic to design the Silveright based NBCOlympics Player application. The application will offer users the ability to switch between multiple live streams (i.e. cameras), and multiple events simultaneously, as well as offer enhanced picture-in-picture, and interactive features for all users watching at any given time.

Whilst it has been widely reported that NBC will be forcing users to download Microsoft’s Silverlight player in order to see live and on-demand video. This is not necessarily the case. Of course Microsoft would prefer users to download Silverlight in order to get the best user experience, but users who don’t have the plug-in, or choose not to use it, will still be able to get stand alone video streams if they have the Windows Media player. Having said that, given that the market penetration of Silverlight is still pretty low, Microsoft are obviously hoping that the Olympics will be the face to launch a million downloads. In theory, this isn’t such a bad plan, so long as the technology actually delivers on the promises from from an end UX perspective (which unfortunately it didn’t in my small focus group).

Despite having Silverlight installed on our Macs, when we attempted to view/test any streaming content via the NBCOlympics Player our browser(s) continually crashed. Additionally, if you’re not running Windows Media Centre, or are on a Mac, you won’t be able to access NBC’s online Olympic video centre (NBC Olympics On The Go) either. According to TVTonics’ site if you don’t have the following system requirements (below) you can forget about any streaming (or on-demand) video.

System Requirements

  • operating system — Windows Vista Home Premium or Windows Vista Ultimate (64-bit currently not supported)
  • Windows Media Center required — included with Windows Vista Home Premium and Ultimate
  • processor — 1GHz 32-bit processor minimum
  • memory — 1GB mininum RAM (2GB recommended)
  • disk space — minimum of .5GB per subscribed channel + 1GB add’l
  • video — 1024×768 minimum resolution; support for DirectX 9 graphics, minimum 128MB VRAM, WDDM Driver, Pixel Shader 2.0 in hardware, 32 bits per pixel

*Update* according to comments left over at TechCrunch - Comcast, Cox and others users whose ISPs throttle their downloads, or users on Timewarner and others who have metered bandwidth charges won’t be able to tune in either.

All-in-all, the fact that NBC, and Microsoft have seen fit to restrict the availability of a global sporting event in this manner is pretty disappointing from an end user perspective. Personal annoyances/disappointment aside, as an advocate of rich internet applications, and the genuine benefits they bring end users, I wish NBC/Microsoft every success with this endeavor - and honestly hope we don’t see a repeat of the Microsoft/Mosiac strike out earlier this year with the US Major League Baseball site.

The bottom line is that if users are required to make the effort to download/install a new run-time (regardless of flavour) to support the viewing of rich/digital media - anything less than a stellar end-user experience will do way more damage to the overall benefits of RIAs (as a whole) regardless of which platform they’re built on.

by Matt Voerman at August 01, 2008 02:15 AM

July 31, 2008

RIAPedia

Easily Create 3D Photo Galleries

FotoViewer is a Flex based application that allows you to easily create 3D photo galleries of your photos stores on Flickr or SmugMug.
Its super easy to set one up - you simply pick the style for your photo gallery, then enter in your username for Flickr or Smugmug. The system connects to those photo sites and pulls down your albums or collections. Pick the one you want and you're done.
Here's one that I made of some photos I took in Ottawa a few weeks ago:

FotoViewr - Create your 3D photo gallery

There are a number of different templates that you can use to create the gallery. The one above is the "Wall" layout - they've got 6 in total - Flow, Horizon, Carousel, Floor and Pile are the others.
Once you've created the gallery, there's embed code for you to take an embed in your blog or social networking page, or a link that you can use to email them to your friends. Check it out - its a nicely done Flex app.

by mikepotter at July 31, 2008 09:30 PM

Flex Examples

Displaying different fonts in a dropdown menu on a ComboBox control in Flex

The following example shows how you can set different fonts for different items in a Flex ComboBox control’s dropdown menu by using a custom item renderer.

Full code after the jump.

(more…)

by peterd at July 31, 2008 02:56 PM