ActionScript 3

The Spotlight Effect (Dimming the unselected)

Saturday, May 16th, 2009 | ActionScript 3, examples | Comments

Sorry for the long bout of blogging silence. I’m still trying to get used to my new traveling schedule.


source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.utils.Dictionary;
 
	import gs.TweenMax;
	import gs.plugins.ColorMatrixFilterPlugin;
	import gs.plugins.RemoveTintPlugin;
	import gs.plugins.TintPlugin;
	import gs.plugins.TweenPlugin;
 
	[SWF(width="400", height="400", backgroundColor="0x000000", frameRate="30")]
	public class Spotlight extends Sprite
	{
		private static const CIRCLE_RADIUS:Number = 10;
 
		private static const COLUMN_MAX:uint = 10;
		private static const ROW_MAX:uint = 10;
 
		private static const COLUMN_SPACING:Number = 20;
		private static const ROW_SPACING:Number = 20;
 
		private static const PADDING_X:Number = 110;
		private static const PADDING_Y:Number = 110;
 
		private var spotlightDict:Dictionary = new Dictionary();
		private var sprites:Array = [];
 
		private var isSpotlit:Boolean = false;
 
		public function Spotlight()
		{
			//@see http://blog.greensock.com/v11Beta/
			TweenPlugin.activate([ColorMatrixFilterPlugin]);
 
			var total:uint = COLUMN_MAX * ROW_MAX;
			for(var i:int = 0; i < total; i++)
			{
				var sprite:Sprite = new Sprite();
				with(sprite.graphics)
				{
					beginFill(0xcc0000);
					drawCircle(0, 0, CIRCLE_RADIUS);
					endFill();
				}
 
				sprite.x = COLUMN_SPACING * (i % COLUMN_MAX) + PADDING_X;
				sprite.y = ROW_SPACING * Math.floor(i / ROW_MAX) + PADDING_Y;
 
				addChild(sprite);
 
				sprites.push(sprite);
 
				sprite.addEventListener(MouseEvent.MOUSE_OVER, sprite_mouseOverHandler);
			}
 
			stage.addEventListener(MouseEvent.CLICK, stage_clickHandler);
		}
 
		protected function sprite_mouseOverHandler(event:MouseEvent):void
		{
			var sprite:Sprite = event.target as Sprite;
			var highlight:TweenMax = new TweenMax(sprite, 0, {colorMatrixFilter:{colorize:0xffffff, brightness: 5}});
			spotlightDict[sprite] = true;
		}
 
		protected function stage_clickHandler(event:MouseEvent):void
		{
			if(isSpotlit)
			{
				clear();
			}
			else
			{
				dimUnselected();
			}
 
			isSpotlit = !isSpotlit;
		}
 
		protected function clear():void
		{
			for each(var sprite:Sprite in sprites)
			{
				TweenMax.to(sprite, 0, {colorMatrixFilter:{colorize:0x000000, amount:0}});
				delete spotlightDict[sprite];
			}
		}
 
		protected function dimUnselected():void
		{
			for each(var sprite:Sprite in sprites)
			{
				if(!spotlightDict[sprite])
				{
					TweenMax.to(sprite, .5, {colorMatrixFilter:{colorize:0x000000, amount:0.7}});
				}
			}
		}
	}
}

Tags:

ActionScript 3 – Command Pattern and Interfaces

Friday, February 20th, 2009 | ActionScript 3, tutorials, videos | Comments

Click to view the video in a pop-up. Right-click and “save as” to download the video to your hard drive.

Watch Video Tutorial on Command Pattern and Interfaces

Tags:

ActionScript 3 – Model View Controller (MVC)

Wednesday, February 11th, 2009 | ActionScript 3, tutorials, videos | Comments

Click to view the video in a pop-up. Right-click and “save as” to download the video to your hard drive.

Watch Video Tutorial on Model View Controller

Tags:

ActionScript 3 – Namespaces

Friday, January 30th, 2009 | ActionScript 3, videos | Comments

Click to view the video in a pop-up. Right-click and “save as” to download the video to your hard drive.

Watch Video Tutorial on Namespaces in ActionScript 3

Tags:

Search

Recommended Books

Speaking at FITC Toronto

 

February 2012
M T W T F S S
« May    
 12345
6789101112
13141516171819
20212223242526
272829  

Preferred Video Tutorial Resolution

  • 1024x768 (53%, 85 Votes)
  • 1280x1024 (15%, 24 Votes)
  • 1920x1080 (15%, 24 Votes)
  • 800x600 (13%, 20 Votes)
  • 480x320 (4%, 6 Votes)
  • 640x480 (0%, 2 Votes)

Total Voters: 160

Loading ... Loading ...