<Application>
<Global name="trackList" value="{['{{MEDIA_URL}}applications/track1.mp3', '{{MEDIA_URL}}applications/track2.mp3', '{{MEDIA_URL}}applications/track3.mp3']}" />
<Global name="trackNum" value="0" />
<Global name="track" value="{root.getElementById('track')}" />
<Global name="milliseconds" value="{globals.track.length - globals.track.position}" />
<Global name="minutes" value="{Math.floor(globals.milliseconds / 60000)}" />
<Global name="seconds" value="{Math.floor(globals.milliseconds / 1000 % 60)}" />
<Global name="duration" value="{globals.minutes + ':' + (globals.seconds > 9 ? globals.seconds : '0' + globals.seconds)}" />
<Script id="playPrevious">
<![CDATA[
globals.trackNum = globals.trackNum > 0 ? globals.trackNum - 1 : globals.trackList.length - 1;
globals.track.position = 0;
]]>
</Script>
<Script id="playNext">
<![CDATA[
globals.trackNum = globals.trackNum + 1 < globals.trackList.length ? globals.trackNum + 1 : 0;
globals.track.position = 0;
]]>
</Script>
<SoundFile id="track" url="{globals.trackList[globals.trackNum]}" volume=".75" >
<EventListener target="{parent}" type="playbackComplete">
<![CDATA[
root.getElementById("playNext").run();
globals.track.playing = true;
]]>
</EventListener>
</SoundFile>
<GlowFilter id="buttonGlow" blurX="2" blurY="2" alpha=".7" color="0x000000" />
<GlowFilter id="buttonGlowOver" blurX="1" blurY="1" alpha="1" color="0xbeff41" />
<GlowFilter id="blackGlow" blurX="4" blurY="4" alpha=".3" color="0x000000" />
<!-- BACKGROUND -->
<Shape>
<SolidFill color="0x222222">
<RoundedRectangle width="300" height="120" ellipseWidth="20" ellipseHeight="20" />
</SolidFill>
</Shape>
<Shape x="3" y="3">
<GradientFill rotation="90" width="294" height="114" colors="{[0x444444, 0x5A5A5A, 0x222222]}" alphas="{[1, 1, 1]}" ratios="{[0, 60, 255]}">
<RoundedRectangle width="294" height="114" ellipseWidth="15" ellipseHeight="15" />
</GradientFill>
</Shape>
<!-- DURATION -->
<Sprite x="10" y="10">
<Shape filters="{[root.getElementById('buttonGlow')]}">
<GradientFill rotation="90" width="100" height="40" colors="{[0x777777, 0xCCCCCC, 0x777777, 0x444444, 0x777777]}" alphas="{[.3, .3, .3, .3, .3]}" ratios="{[0, 63, 127, 128, 255]}">
<RoundedRectangle width="100" height="40" ellipseWidth="10" ellipseHeight="10" />
</GradientFill>
</Shape>
<TextField x="{Math.max(2, 50 - this.textWidth / 2)}" width="95" height="{this.textHeight}" size="32" color="0xbeff41" filters="{[root.getElementById('blackGlow')]}">{globals.duration}</TextField>
</Sprite>
<!-- TRACK META -->
<Shape x="120" y="10" filters="{[root.getElementById('buttonGlow')]}">
<GradientFill rotation="90" width="170" height="20" colors="{[0x777777, 0xCCCCCC, 0x777777, 0x444444, 0x777777]}" alphas="{[.3, .3, .3, .3, .3]}" ratios="{[0, 63, 127, 128, 255]}">
<RoundedRectangle width="170" height="20" ellipseWidth="5" ellipseHeight="5" />
</GradientFill>
</Shape>
<TextField x="122" y="10" width="165" height="{this.textHeight}" size="12" color="0xFFFFFF" filters="{[root.getElementById('blackGlow')]}" selectable="true">{globals.track.songName + " - " + globals.track.artist}</TextField>
<!-- MUTE -->
<Sprite x="120" y="35">
<Shape filters="{parent.hovered ? [root.getElementById('buttonGlowOver')] : [root.getElementById('buttonGlow')]}">
<GradientFill rotation="90" width="20" height="15" colors="{[0x777777, 0xCCCCCC, 0x777777, 0x444444, 0x777777]}" alphas="{[.3, .3, .3, .3, .3]}" ratios="{[0, 63, 127, 128, 255]}">
<RoundedRectangle width="20" height="15" ellipseWidth="5" ellipseHeight="5" />
</GradientFill>
</Shape>
<BitmapFile url="{{MEDIA_URL}}applications/unmute.png" visible="{globals.track.mute}" />
<BitmapFile url="{{MEDIA_URL}}applications/mute.png" visible="{!globals.track.mute}" />
<EventListener target="{parent}" type="click">
<![CDATA[
globals.track.mute = !globals.track.mute;
]]>
</EventListener>
</Sprite>
<!-- VOLUME -->
<Sprite x="145" y="38">
<Shape filters="{[root.getElementById('buttonGlow')]}">
<GradientFill rotation="90" width="145" height="9" colors="{[0x777777, 0xCCCCCC, 0x777777, 0x444444, 0x777777]}" alphas="{[.3, .3, .3, .3, .3]}" ratios="{[0, 63, 127, 128, 255]}">
<RoundedRectangle width="145" height="9" ellipseWidth="5" ellipseHeight="5" />
</GradientFill>
<GradientFill width="145" height="9" colors="{globals.track.mute ? [0xCCCCCC, 0xAAAAAA, 0x888888] : [0xbeff41, 0xfff200, 0xf7941d]}" alphas="{[.3, .3, .3]}" ratios="{[0, 127, 255]}">
<RoundedRectangle width="{145 * globals.track.volume}" height="9" ellipseWidth="5" ellipseHeight="5" />
</GradientFill>
</Shape>
<EventListener target="{parent}" type="drag">
<![CDATA[
globals.track.volume = e.localX / 145;
globals.track.mute = false;
]]>
</EventListener>
</Sprite>
<!-- PREVIOUS -->
<Sprite x="10" y="62">
<Shape filters="{parent.hovered ? [root.getElementById('buttonGlowOver')] : [root.getElementById('buttonGlow')]}">
<GradientFill rotation="90" width="30" height="25" colors="{[0x777777, 0xCCCCCC, 0x777777, 0x444444, 0x777777]}" alphas="{[.3, .3, .3, .3, .3]}" ratios="{[0, 63, 127, 128, 255]}">
<RoundedRectangle width="30" height="25" ellipseWidth="5" ellipseHeight="5" />
</GradientFill>
</Shape>
<BitmapFile url="{{MEDIA_URL}}applications/previous.png" />
<EventListener target="{parent}" type="click">
<![CDATA[
root.getElementById("playPrevious").run();
]]>
</EventListener>
</Sprite>
<!-- PLAY/PAUSE -->
<Sprite x="45" y="60">
<Shape filters="{parent.hovered ? [root.getElementById('buttonGlowOver')] : [root.getElementById('buttonGlow')]}">
<GradientFill rotation="90" width="30" height="30" colors="{[0x777777, 0xCCCCCC, 0x777777, 0x444444, 0x777777]}" alphas="{[.3, .3, .3, .3, .3]}" ratios="{[0, 63, 127, 128, 255]}">
<RoundedRectangle width="30" height="30" ellipseWidth="5" ellipseHeight="5" />
</GradientFill>
</Shape>
<BitmapFile url="{{MEDIA_URL}}applications/play.png" alpha="{globals.track.playing ? 0 : 1}" />
<BitmapFile url="{{MEDIA_URL}}applications/pause.png" alpha="{globals.track.playing ? 1 : 0}" />
<EventListener target="{parent}" type="click">
<![CDATA[
globals.track.playing = !globals.track.playing;
]]>
</EventListener>
</Sprite>
<!-- NEXT -->
<Sprite x="80" y="62">
<Shape filters="{parent.hovered ? [root.getElementById('buttonGlowOver')] : [root.getElementById('buttonGlow')]}">
<GradientFill rotation="90" width="30" height="25" colors="{[0x777777, 0xCCCCCC, 0x777777, 0x444444, 0x777777]}" alphas="{[.3, .3, .3, .3, .3]}" ratios="{[0, 63, 127, 128, 255]}">
<RoundedRectangle width="30" height="25" ellipseWidth="5" ellipseHeight="5" />
</GradientFill>
</Shape>
<BitmapFile url="{{MEDIA_URL}}applications/next.png" />
<EventListener target="{parent}" type="click">
<![CDATA[
root.getElementById("playNext").run();
]]>
</EventListener>
</Sprite>
<!-- SEEK -->
<Sprite x="10" y="100">
<Shape filters="{[root.getElementById('buttonGlow')]}">
<GradientFill rotation="90" width="280" height="8" colors="{[0x777777, 0xCCCCCC, 0x777777, 0x444444, 0x777777]}" alphas="{[.3, .3, .3, .3, .3]}" ratios="{[0, 63, 127, 128, 255]}">
<RoundedRectangle width="280" height="8" ellipseWidth="10" ellipseHeight="10" />
</GradientFill>
<GradientFill width="280" height="8" colors="{[0xFFFFFF, 0xbeff41]}" alphas="{[.3, .3]}" ratios="{[0, 127]}">
<RoundedRectangle width="{globals.track.length ? 280 * globals.track.position / globals.track.length : 0}" height="8" ellipseWidth="5" ellipseHeight="5" />
</GradientFill>
</Shape>
<EventListener target="{parent}" type="drag">
<![CDATA[
globals.track.position = globals.track.length * e.localX / 280;
]]>
</EventListener>
</Sprite>
</Application>© 2008 by — Valid XHTML