Article
Funky Flickr Flex Widgets
Building the Pop-up Version
Some small changes are required to implement the drop-down menu transition phase. We’ll do this by creating two states for the Flex application. The first is the bar state where just the horizontal list of images is shown. The second is the detail state where both the image list and the image detail windows are shown.
The two states are defined in <mx:State> tags, and the transition between the two states is defined in <mx:Transition> tags. An initial state is defined in the <mx:Application> tag. In this case I’m going to fade-in the detail window, but you can use any effect you like to bring the application to life.
You can see the completed code in flickrtag3.mxml.
Here’s the addition we’ll make to the mx:Application element:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="onStartup()" width="660"
height="400" backgroundAlpha="0" horizontalScrollPolicy="off"
verticalScrollPolicy="off" currentState="bar">
And here’s how we change the onImageClick function within the <mx:Script> element:
private function onImageClick( event:Event ) : void {
var clkImg:Image = event.currentTarget as Image;
imgSelected.data = clkImg.data;
imgSelected.source = clkImg.data.bigSource;
imgTitle.text = clkImg.data.title;
if ( mapArea.getChildren().length == 0 ) {
createMap();
} else {
centerMap();
}
currentState = 'detail';
}
Our states and transitions are defined as follows:
<mx:states>
<mx:State name="bar">
<mx:SetProperty target="{hbDetail}" name="visible" value="false" />
</mx:State>
<mx:State name="detail">
<mx:SetProperty target="{hbDetail}" name="visible" value="true" />
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="bar" toState="detail">
<mx:Sequence>
<mx:SetPropertyAction target="{hbDetail}" name="visible" />
<mx:Fade target="{hbDetail}" alphaFrom="0" alphaTo="1"
duration="200" />
</mx:Sequence>
</mx:Transition>
<mx:Transition fromState="detail" toState="bar">
<mx:Sequence>
<mx:Fade target="{hbDetail}" alphaFrom="1" alphaTo="0"
duration="200" />
<mx:SetPropertyAction target="{hbDetail}" name="visible" />
</mx:Sequence>
</mx:Transition>
</mx:transitions>
To avoid a big gray rectangle we should adjust the index.template.html file to set the wmode parameter of the widget to transparent so that the widget background is transparent:
AC_FL_RunContent(
"src", "${swf}?text=dog&lat=37.57228&lon=-122.0747",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"wmode", "transparent",
"name", "${application}",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
Other than the states and transitions, the code for the rest of the application remains exactly the same.
Now the tricky part starts: how can we place the control precisely on the HTML page in such a way as to let the rest of the content flow around the Flex application? The secret is to absolutely position a div element in the HTML with the width and height of the bar.
To demonstrate the technique we can make a few changes to the index.html.template file. Just after the opening <body> tag, add the following content:
<p>Add a paragraph of text here...</p>
<div id="widget"><div>
Then just before the closing <body> tag, add the following content:
</div></div>
<p>Add a paragraph of text here...</p>
<p>Add a paragraph of text here...</p>
<p>Add a paragraph of text here...</p>
That will surround our widget with content. Notice the widget is now inside a div element, which is nested within a parent div element with the ID of inner.
We then need to add some CSS:
#widget {
height:100px;
width:660px;
position:relative;
}
#widget div {
position:absolute;
top:0;
left:0;
}
We restrict the height of the outer div to 100px so it can contain the widget in bar mode, but not obscure the page content. Absolutely positioning the div that contains the widget will allow it to pop out over the page content when an image is clicked.
Launch this from Flex Builder 3 and you'll see a similar screen to that shown below.
This shows the widget in its bar mode. From here, I can click on one of the images and the detail portion of the application fades in over the rest of the HTML page. You can see here:
The nice thing about this approach is that you can have a Flash application on your page that takes up minimal space until the user wants to click on it. From there you can expand the application to take up a bunch of space and really show its value.
Where to Go from Here
This article is really just a starting point. You can take what you learned here—about accessing web services, mapping, and creating an expanding Flash application—and use it in your own work. But beyond that, you should start to see the potential of using Flex as a way of building Flash widgets quicker, as well as offering better maintainability than you’d have using Flash alone.