Yahoo! Developer Network - Flash Developer Center - Badge Kit

ASTRA Badge Kit Examples

The Badge Kit comes with a set of examples that ease you into using it, introducing data services, and show you how to extend the Badge Kit.

Simple Badge
Simple Badge with Overlay
Simple Badge with URL Service
Flickr Badge
WTH Badge with custom Service and Element

Simple Badge with Overlay Example

After looking at the Simple Badge example, let's take it one notch up and add a bit of user interactivity to it.

First, let's take a look at the config.xml file:

<?xml version="1.0" encoding="utf-8" ?> <config> <contentpath path="content.xml" /> <paths> <path shorthand="SWF" path="swf" /> <path shorthand="IMG" path="images" /> </paths> <animations> <animation id="fadeIn" property="alpha" startvalue="0" endvalue="1" duration="2" /> <animation id="fadeOut" property="alpha" startvalue="1" endvalue="0" duration="2" /> </animations> </config>

Note that in addition to the contentpath and paths section, we also added an animations section, where we define transitions that can be performed on elements when they are shown or hidden. Each animation node has an id that allows us to refer to it, the name of the property it modifies, the startvalue for that property, as well as the endvalue, and duration in seconds for performing the animation. In this particular case, the two animations are fadeIn and fadeOut -- each modifies the alpha property from 0 to 1 and vice versa in 2 seconds.

In content.xml, we have the following markup:

<?xml version="1.0" encoding="utf-8" ?> <badge id="simpleoverlaybadge"> <resources> <swf filename="%SWF%/base_components.swf" /> </resources> <elements>  <com.yahoo.astra.badgekit.controls.Image onShow="fadeIn" id="background" source="%IMG%/image.png" width="200" height="300" />  <fl.controls.Label id="mytextfield" x="23" y="15" width="200" height="150" onShow="fadeIn" htmlText="<font size="14" color="#ffffff">My First Badge</font>" /> <com.yahoo.astra.badgekit.controls.Image id="avatar" onShow="fadeIn" source="%IMG%/avatar.jpg" x="23" y="40" width="152" height="227" />  <fl.controls.Button onShow="fadeIn" id="mybutton" x="28" y="45" width="40" height="20" label="info" click="overlay.visible = true"/>  <container id="overlay" onShow="fadeIn" onHide="fadeOut" visible="false" click="overlay.visible = false" x="25" y="43" > <com.yahoo.astra.badgekit.controls.Image id="overlayBackground" source="%IMG%/overlay.png" width="144" height="200" /> <com.yahoo.astra.badgekit.controls.Image id="icon" source="%IMG%/icon.gif" x="15" y="10" width="69" height="69" /> <fl.controls.Label id="myOverlayTextfield" x="15" y="80" width="200" height="150" htmlText="<font color="#ffffff">My Description: </font>" /> </container> </elements> </badge>

In the elements section, we have a background Image, a Label and another Image, just like before. Note, however, that the avatar Image now has an onShow property which is set to fadeIn, an animation defined in config.xml.

We also added a Button element, which has a click event associated with it. When clicked, the button sets the visibility of the overlay element to true. But what is the overlay element?

Overlay is a special kind of element called container. It allows you to group several elements together. The properties of the container propagate down to its children: so, for example, if you scale the container down, change its opacity, or position -- all of its children will be affected. This is precisely what happens in this case: overlay is initially set to being invisible, and when the button mybutton is clicked, its visible property is set to true. The overlay container has a couple more images and a label, and when appearing, they all gently fade in, because the overlay container has both an onShow and onHide properties set to specific animations.