We help IT Professionals succeed at work.

Flex Traffic Light component

jrwalker2
jrwalker2 asked
on
Medium Priority
1,057 Views
Last Modified: 2013-11-11
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.  
Comment
Watch Question


<?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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

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.
 
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

Author

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

Author

Commented:
Also, how can I make this into a mxml component that I can drag and drop onto a canvas? Thanks
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 :)

Author

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
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.