I was working on a new DP for MSN, when i read this challenge, so though i might as well make more outta the image than just a DP that will be used for a couple of days.
Pretty much just a simple digital clock, created in Flex 3 SDK, nothing to special.
Yerp, as you can see its 2am, and yea my system Date is wrong, so for now ill though up the source, and tomorrow ill put up the files, and PSD's that i created for the UI.
Clock.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="250" height="250" creationComplete="onCreationComplete();">
<mx:Script source="ActionScript.as"/>
<mx:Style>
@font-face{
fontFamily:quartz;
src:url("../assets/quartz.ttf");
font-style:normal;
font-weight:normal;
}
.quartzLarge {
fontFamily:quartz;
fontSize: 77.75pt;
}
.quartzSmall {
fontFamily:quartz;
fontSize: 21.5pt;
color: #0b333c;
}
.quartzSmallred {
fontFamily:quartz;
fontSize: 21.5pt;
color: #9B0000;
}
</mx:Style>
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Image x="0" y="0" id="img_backGround" source="@Embed(source='../images/Alarm-Clock-Orb.png')"/>
<mx:Image x="18" y="19" id="img_alert" source="@Embed(source='../images/alert.png')" visible="false"/>
<mx:Label x="35" y="60" text="88:88" id="txt_timeClock" styleName="quartzLarge" textAlign="right"/>
<mx:Label x="110" y="140" text="88-8-8888" id="txt_timeDate" styleName="quartzSmall" textAlign="right"/>
<mx:Label x="198" y="115" id="txt_timeSec" text="88" styleName="quartzSmall" textAlign="right"/>
<mx:Button id="btn_alarmActive" icon="@Embed(source='../images/alarm.png')" width="0" height="0" click="showAlarm(true);" x="213" y="111" alpha="0.3"/>
<mx:Button x="62.5" y="170" label="Deactivate" id="btn_deactivate" styleName="quartzSmall" click="alarmDeactivate();" visible="false"/>
<mx:Image x="9" y="62" id="img_plate" source="@Embed(source='../images/plate.png')" hideEffect="{fadeOut}" showEffect="{fadeIn}" visible="false"/>
<mx:Label x="27" y="68" text="00" id="txt_alarmHour" styleName="quartzLarge" textAlign="right" hideEffect="{fadeOut}" showEffect="{fadeIn}" visible="false"/>
<mx:Label x="112" y="60" text=":" id="txt_dots" styleName="quartzLarge" textAlign="right" width="18" hideEffect="{fadeOut}" showEffect="{fadeIn}" visible="false"/>
<mx:Label x="135" y="68" text="00" id="txt_alarmMinute" styleName="quartzLarge" textAlign="right" hideEffect="{fadeOut}" showEffect="{fadeIn}" visible="false"/>
<mx:Button id="btn_upHour" icon="@Embed(source='../images/plus.png')" width="0" height="0" click="alarmChange('hour', 'up')" x="49" y="162" hideEffect="{fadeOut}" showEffect="{fadeIn}" visible="false"/>
<mx:Button id="btn_downHour" icon="@Embed(source='../images/negative.png')" width="0" height="0" click="alarmChange('hour', 'down')" x="88" y="162" hideEffect="{fadeOut}" showEffect="{fadeIn}" visible="false"/>
<mx:Button id="btn_upMin" icon="@Embed(source='../images/plus.png')" width="0" height="0" click="alarmChange('minute', 'up')" x="157" y="162" hideEffect="{fadeOut}" showEffect="{fadeIn}" visible="false"/>
<mx:Button id="btn_downMin" icon="@Embed(source='../images/negative.png')" width="0" height="0" click="alarmChange('minute', 'down')" x="197" y="162" hideEffect="{fadeOut}" showEffect="{fadeIn}" visible="false"/>
<mx:Button id="btn_alarmNo" icon="@Embed(source='../images/no.png')" width="0" height="0" click="alarmSetup(false);" x="123" y="151" hideEffect="{fadeOut}" showEffect="{fadeIn}" visible="false"/>
<mx:Button id="btn_alarmYes" icon="@Embed(source='../images/yes.png')" width="0" height="0" click="alarmSetup(true);" x="123" y="168" hideEffect="{fadeOut}" showEffect="{fadeIn}" visible="false"/>
<mx:Button id="btn_copy" icon="@Embed(source='../images/copyright.png')" width="0" height="0" click="showCopy();" x="205" y="208"/>
</mx:Application>
ActionScript.as
// ActionScript file
import mx.controls.Alert;
import mx.core.SoundAsset;
private var ticker:Timer;
private var currentTime = new Date();
public var alertActive:Boolean = false;
public var alarmSet:Boolean = false;
public var timeHours:Number;
public var timeMinutes:Number;
public var timeSeconds:Number;
public var timeYear:Number;
public var timeMonth:Number;
public var timeDay:Number;
public var alertHours:Number = 0;
public var alertMinutes:Number = 0;
[Embed(source="../assets/loop.mp3")]
[Bindable]
public var Song:Class
public var mySong:SoundAsset = new Song() as SoundAsset;
public var channel:SoundChannel;
public function onCreationComplete():void
{
findTime()
findDate()
updateTime();
updateDate();
ticker = new Timer(1000);
ticker.addEventListener(TimerEvent.TIMER, onTick);
ticker.start();
}
public function updateTime():void
{
txt_timeClock.text = doubleUp(timeHours) + ":" + doubleUp(timeMinutes);
txt_timeSec.text = doubleUp(timeSeconds)
if (alarmSet == true) {checkAlert();}
}
public function updateDate():void
{
txt_timeDate.text = doubleUp(timeDay) + "-" + doubleUp(timeMonth) + "-" + timeYear;
}
public function doubleUp(single:Number):String
{
if (single <= 9)
{
var double:String = "0" + String(single);
return String(double);
} else {
return String(single);
}
}
public function onTick(evt:TimerEvent):void
{
timeSeconds += 1;
if (timeSeconds >= 60) {timeSeconds = 0; timeMinutes +=1;}
if (timeMinutes >= 60) {timeMinutes = 0; timeHours +=1;}
if (timeHours >= 24) {timeHours = 0; findDate(); updateDate();}
if (alertActive == true) {madMonkey();}
updateTime();
}
public function findDate():void
{
currentTime = new Date();
timeYear = currentTime.getFullYear();
timeMonth = currentTime.getMonth();
timeDay = currentTime.getDay();
}
public function findTime():void
{
currentTime = new Date();
timeHours = currentTime.getHours();
timeMinutes = currentTime.getMinutes();
timeSeconds = currentTime.getSeconds();
}
public function checkAlert():void
{
if (timeHours == alertHours && timeMinutes == alertMinutes)
{
alertActive = true;
btn_deactivate.visible = true;
}
}
public function madMonkey():void
{
if (channel == null) {channel = mySong.play();}
if (img_alert.visible == true)
{
img_alert.visible = false
btn_deactivate.styleName="quartzSmall";
btn_alarmActive.alpha=0.3;
} else {
img_alert.visible = true
btn_deactivate.styleName="quartzSmallred";
btn_alarmActive.alpha=1;
}
}
public function alarmDeactivate():void
{
channel.stop();
channel = null;
img_alert.visible = false;
btn_deactivate.visible = false;
alarmSet = false;
alertActive = false;
alertHours = 0;
alertMinutes = 0;
btn_alarmActive.alpha=0.3;
txt_alarmHour.text = doubleUp(alertHours);
txt_alarmMinute.text = doubleUp(alertMinutes);
}
public function alarmChange(time:String, direction:String):void
{
if (time == 'hour') {
if (direction == 'up') {
if (alertHours != 24) {
alertHours += 1;
} else {
alertHours = 0;
}
} else {
if (alertHours != 0) {
alertHours -= 1;
} else {
alertHours = 24;
}
}
} else {
if (direction == 'up') {
if (alertMinutes != 59) {
alertMinutes += 1;
} else {
alertMinutes = 0;
}
} else {
if (alertMinutes != 0) {
alertMinutes -= 1;
} else {
alertMinutes = 59;
}
}
}
txt_alarmHour.text = doubleUp(alertHours);
txt_alarmMinute.text = doubleUp(alertMinutes);
}
public function alarmSetup(Setup:Boolean):void
{
if (Setup == true) {
alarmSet = true;
showAlarm(false);
btn_alarmActive.alpha=1;
} else {
alarmSet = false;
showAlarm(false);
btn_alarmActive.alpha=0.3;
}
}
public function showAlarm(Set:Boolean):void
{
img_plate.visible = Set;
txt_alarmHour.visible = Set;
txt_dots.visible = Set;
txt_alarmMinute.visible = Set;
btn_upHour.visible = Set;
btn_downHour.visible = Set;
btn_upMin.visible = Set;
btn_downMin.visible = Set;
btn_alarmNo.visible = Set;
btn_alarmYes.visible = Set;
}
public function showCopy():void
{
Alert.show("Auther: David Stevenson \n Version: 1.0.0 \n Release: 19-06-08 \n Ste03_aus@hotmail.com",'Mad Monkey Alarm Clock');
}
And finaly, the link to the working file: http://img502.imageshack.us/img502/4190/clockei4.swf