How to recreate Apple's WWDC site Calendar?

programming flash
1

I think apple’s calendar function on their wwdc site is a really slick way to show their data.

Anyway to do something like this in AS3… tutorial or something :

http://developer.apple.com/wwdc/schedules/#day=thursday&time=morning&tab=lab

It’s so smooth… if it’s not flash how do they do it? Thanks for any info.

2

[QUOTE=ahmednuaman;2339542]It’s prototype and script.aculo.us: http://script.aculo.us[/QUOTE]

login name and password?

Cannot see anything.

3

[QUOTE=ahmednuaman;2340209]eh?[/QUOTE]

nevermind… went through that time… site must have been down for a second…

4

Here’s a quick’n’dirty method that does the basic navigation trick.
example:[COLOR=“Blue”][U]http://www.byrographics.com/AS3/calendar/calendar.html[/U][/COLOR]
Generating the graphics in a loop would probably be a better approach, though.

The popups could be easily be done using a single movieclip linked to a set of external text files or XML file.
The popup, (which would be located within the schedule movieclip to use the local coordinates for the event targets) would simply move to coordinates relative to the event.target on click.
ie: popup.x = event.target.x

stop();
import gs.TweenMax;
import fl.motion.easing.*;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;

stage.scaleMode = StageScaleMode.NO_SCALE;

buttonGroup.mouseEnabled = false;
buttonGroup.buttonMode = true;

buttonGroup.addEventListener(MouseEvent.CLICK, action, false, 0, true);
buttonGroup.addEventListener(MouseEvent.MOUSE_OVER, action, false, 0, true);
buttonGroup.addEventListener(MouseEvent.MOUSE_OUT, action, false, 0, true);

var button:String = "";

function action(event:MouseEvent):void {
	button = event.target.name;
	switch (event.type) {
		case MouseEvent.MOUSE_OVER :
			buttonGroup.setChildIndex(event.target as MovieClip, buttonGroup.numChildren-1);
			TweenMax.to(event.target, .8, {scaleX:1.2, scaleY:1.2, dropShadowFilter:{color:0x000000, alpha:0.5, blurX:8, blurY:8, angle:45, distance:0}, ease:Elastic.easeOut});
			break;
		case MouseEvent.MOUSE_OUT :
			TweenMax.to(event.target, .4, {scaleX:1, scaleY:1, dropShadowFilter:{color:0x000000, alpha:0, blurX:0, blurY:0, angle:45, distance:0}, ease:Cubic.easeOut});
			break;
		case MouseEvent.CLICK :
			switch (button) {
				case "btn1" :
					TweenMax.to(schedule, 1, {x:150, ease:Cubic.easeInOut});
					break;
				case "btn2" :
					TweenMax.to(schedule, 1, {x:-310, ease:Cubic.easeInOut});
					break;
				case "btn3" :
					TweenMax.to(schedule, 1, {x:-770, ease:Cubic.easeInOut});
					break;
				case "btn4" :
					TweenMax.to(schedule, 1, {x:-1230, ease:Cubic.easeInOut});
					break;
				case "btn5" :
					TweenMax.to(schedule, 1, {x:-1690, ease:Cubic.easeInOut});
					break;
			}
			break;
	}
}
5

I have to say the individuals on this forum are simply amazing. Thank you for this It is… well. truly appreciated! Thank you!

Exactly what I was looking for.

6

snickelfritz,

When i try to test the FLA you sent me I get the following errors:

1172: Definition gs:TweenMax could not be found.

7

Install [COLOR=“Blue”][U]TweenMax[/U][/COLOR].
You’ll be glad you did; I guarantee it.

8

OK I got it working… just needed the GS folder in the same location as the FLA… not I need to really read how to use it… and start to dive into AS3.

One last annoying question… all the buttons at the top share the same movie clip. “btn” If I want a different icon for each one… how would I go about that? I realize they have different instance names, but when I change one of them they all change.

Would I have to create a separate MC for each button in this case? Let me know. Thanks for all your help. This is great!

9

The example file uses shared instances of three base symbols, [COLOR=“Blue”]“slot1”[/COLOR], [COLOR=“orange”]“slot2”[/COLOR] and [COLOR=“grey”]“slot3”[/COLOR].
These are the base artwork symbols shared by multiple symbols on the stage.

To create unique new symbols (“slot4”, for example), right-click-duplicate these base artwork symbols within the library panel, and give them new symbol names, such as “slot4” etc…
You can then modify this duplicate without affecting existing symbols on the stage, since none of them share it yet.
You can assign any of these base symbols to symbols on the stage in the propeties pane.
Select the symbol on stage, click the properties “swap” button and choose a new base symbol.

The advantage of this system becomes obvious if you want to change blue to purple, and there are hundreds of blue symbols in the project(!)
Since the blue symbols all share the same base artwork, changing the base artwork affects all of them at once.
There are other runtime benefits as well.:slight_smile: