• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1039
  • Last Modified:

Flex Traffic Light component

I was wondering if someone could point me in the direction of a tutorial of traffic light component built in flex. If the tutorial is not available, can someone please point me to an example and source code? I'd like to be able to flash either red, yellow, or green glowing light inside of the traffic light component based on conditions met in the application. Thank you.  
0
jrwalker2
Asked:
jrwalker2
  • 4
  • 3
1 Solution
 
Gary BenadeCommented:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
	<local:TrafficLights id="tl" x="10" y="10" state="{TrafficLights.red}"/>
	<mx:Button x="236" y="61" label="Red" click="tl.state=TrafficLights.red"/>
	<mx:Button x="236" y="121" label="Green" click="tl.state=TrafficLights.green"/>
	<mx:Button x="236" y="91" label="Orange" click="tl.state=TrafficLights.orange"/>
</mx:Application>
 
// save as TrafficLights.as
 
package
{
	import mx.core.UIComponent;
 
	public class TrafficLights extends UIComponent
	{
		public static const red:String = "red";
		public static const orange:String = "orange";
		public static const green:String = "green";
		
		private var _state:String = TrafficLights.green;
		
		public function TrafficLights()
		{
			super();
		}
		
		public function set state( s:String):void
		{
			this._state = s;
			this.invalidateDisplayList();
		}
		
		public function get state():String
		{
			return this._state;
		}
		
		override protected function measure():void
		{
			this.measuredWidth = 100;
			this.measuredHeight = 300;
		}
		
		override protected function updateDisplayList(uw:Number, uh:Number):void
		{
			this.graphics.clear();
			this.graphics.beginFill(0x222222);
			this.graphics.drawRoundRect(0,0,uw,uh,10);
			this.graphics.endFill();
 
			if( this._state == TrafficLights.red)
				this.graphics.beginFill(0xFF0000);
			else
				this.graphics.beginFill(0x8a0101);
			this.graphics.drawCircle( uw/2, uh/4, uw/3);
			this.graphics.endFill();
			
			if( this._state == TrafficLights.orange)
				this.graphics.beginFill(0xff4e00);
			else
				this.graphics.beginFill(0xad3601);
			this.graphics.drawCircle( uw/2, (uh/4)*2, uw/3);
			this.graphics.endFill();
 
			if( this._state == TrafficLights.green)
				this.graphics.beginFill(0x00FF00);
			else
				this.graphics.beginFill(0x056b00);
			this.graphics.drawCircle( uw/2, (uh/4)*3, uw/3);
			this.graphics.endFill();			
		}		
	}
}

Open in new window

0
 
jrwalker2Author Commented:
Hi hobbit72,

Thanks so much for answering my question. I am having a small problem however. I get the following error when trying to compile:

Cannot resolve attribute 'state' for component type TrafficLights.

I'm not sure how to fix this, because I see the public set function for "state" in the TrafficLights.as class.

Please help.
 
0
 
Gary BenadeCommented:
Very strange..
On what line is it giving that error?

try changing this line:
<local:TrafficLights id="tl" x="10" y="10" state="{TrafficLights.red}"/>
to
<local:TrafficLights id="tl" x="10" y="10"/>

try a clean
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
jrwalker2Author Commented:
Thanks hobbit72!!! The original solution worked great (I solved a problem I was having on my side). Last question, is there a way to make the image of the traffic light 3D? Thanks
0
 
jrwalker2Author Commented:
Also, how can I make this into a mxml component that I can drag and drop onto a canvas? Thanks
0
 
Gary BenadeCommented:
You could use a photo of a real traffic light and place opaque circles over the real lights that glow when on. feed me some more points and I'll show you how :)
0
 
jrwalker2Author Commented:
Of course hobbit72 :)

I posted a new question here for you:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_24137777.html

Thanks
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now