Several people have asked how the glossy panels on the Flex Style Explorer were done, and while I’ve attempted to explain it in the comments, I thought I’d go a step further and include source code for such a design, rather than attempting to explain it again in words.
So, included is an mxml file showing a styled panel with the appropriate asset for the reflection.
Click here to download the mxml and asset
While it’s nothing ground-breaking, I wanted to show a quick example of how to create a Yahoo Map with dynamic markers using coldfusion and LoadVars() in Flash. The coldfusion script pulls the data from an SQL database and passes it on to the flash app to plot as many markers as there are data entries. It may not be the cleanest, but it’s a quick solution.
I’ve also included a text file, in case you don’t have coldfusion and a database set up, that would be similar to what might be passed on to the flash app. So, you can also play around with the text file if you don’t want to set up a database and coldfusion.
UPDATE: I’ve included another swf for those without Flash authoring. This swf points to the cfm file for everything, including the app-ID. Also, the map auto-centers inself based on the first address in the events.
Click here to download the file..
Click here to download the .fla-less swf and cfm. (no flash authoring required)
We’re looking for a few great designers and developers to join our teams in both Boston and San Francisco. In addition to working for a great company using the greatest technologies, as part of the consulting team, you’ll also get to work with some of the best clients, and be “ahead of the curve” on Rich Internet Application design and development.
When not working on mapping projects, I spend a great deal of time skiing and windsurfing. This mashup demonstrates how to integrate live webcam pictures with the Yahoo! Maps 4.0 developer API.
You can view the application here.
Note: You really want to use the app only when the sun is above the horizon.
Yahoo! recently updated their maps product and also released a developer API. I’ve created a simple mashup which incorporates video. (Unfortunately the data is static and is hard coded in the HTML page.)
You can view the mashup here.
If you’d like, you can download the files here. Due to size I have not included the FLVs.
While you can go pretty far in visual design of Flex components using straight CSS, there are some limitations. It an attempt to address those limitations, I’ve created a programmatic skin set for Flex that can be easily customized with CSS for effects such as the screenshot below:
This issue has come up with a few clients, which is, how do you round the corners on a container. Of course, by default, the container itself is invisible, but in these instances the client has given a box, an hbox, or a vbox a different background color in order to use it as a graphical element, as in the example below. Many have found, with some frustration, that if you simply set cornerRadius to a value other than 0, the corners are still squared off.
The reason this is happening is that cornerRadius is actually a property of the container border, and by default containers have no border. In order to use the cornerRadius property on a container, you need to set the borderStyle to solid. Note in the example below how changing the borderStyle automatically reflects the cornerRadius property on the container. Want the cornerRadius, but you don’t want a border? simply set the borderThickness to zero, and as long as the borderStyle is set to solid, the corners will still be rounded. Similarly, applying a drop shadow to the container also requires the borderStyle be set to “solid”. Hope that helps.
One of the great things about Flex is the “mouseOver” event that pretty much any component, including containers, has available. What this means is that we can trigger almost any event without requiring a mouse click. Why and when would you want to do such a thing? Imagine, for example, a list with details, as shown in the flex application below.
This is a nice step into the idea of configuring your digital environment. If only I could burn 300 calories while running through here. Kudos!
If anyone knows who designed this experience, I would love to know.
Just a quick note that we’ve recently published an article on the Macromedia Developer Center (DevNet) related to the Flex Style Explorer. In addition to the things that have already been mentioned here, there’s also an analysis of the Designer-Developer workflow, and how the Flex Style Explorer can help to bridge that gap. To view the full article, go to http://www.macromedia.com/devnet/flex/articles/style_explorer.html