Skip to main content
A
Anonymous
March 5, 2009
Question

50 different buttons with 50 different movie clips

  • March 5, 2009
  • 3 replies
  • 587 views
I'm creating a timeline of events with about 50 different points to click on. When each event is clicked on, a movie clip needs to appear (or tween onto) the screen. Then, when another event is clicked on, the previous content needs to go away so that the new content can appear.

A prefect example of what I'm talking about can be seen here: http://www.thechieftains.com/timeline/

I've created a custom class of "TimePoint" that has a public property of date, so that I can assign a date to each individual instance of my TimePoint class.

In my fla, he timeline itself is a movie clip that needs to scroll back and forth as the mouse is moved. It contains the nested instances of my TimePoint class. I already have the scrolling movement taken care of, and I also have a tooltip date appearing over each point in time. Now I just need to figure out how to manage 50 different movie clips, each with and without graphics, bitmaps, etc.

I'm just wondering if there is any way to do this without having to create 50 different event listeners and 50 different classes just so that I can add/remove children. I'm thinking I need to use an array, but I don't know how I would implement it. I'm also not very familiar with XML.

My progress so far can bee seen here: Timeline version 2

Any help with this is much appreciated!
This topic has been closed for replies.

3 replies

A
Anonymous
March 6, 2009
Excellent; that worked like a charm! I also copied and modified that code to control my tooltip date display:

bg_mc.timepointContainer.addEventListener(MouseEvent.MOUSE_OVER, revealDate);

function revealDate(event:MouseEvent):void
{
var eventDate:String = event.target.eventDate;
event.target.addEventListener(MouseEvent.MOUSE_OUT, hideDate);
tooltip_mc.alpha=1;
tooltip_mc.date_txt.text=event.target.eventDate;
}

function hideDate(event:MouseEvent):void
{
event.target.addEventListener(MouseEvent.MOUSE_OVER, revealDate);
tooltip_mc.alpha=0;
}

Thanks again so much; this saves me a ton of time and code. Cheers...
F
fredingston
Inspiring
March 5, 2009
No if you put all of your timepoint-buttons into a container-DisplayObject (MovieClip propably) you can use Event Propagation and add it only once like:

timepointContainer.addEventListener(MouseEvent.CLICK, loadContent);

The loadContent-function (as described above) will then "find out" which button you clicked by looking for "e.target" (the target of the click event) and then retrieving its date property. This can be quite tricky if you nest stuff in different depths but in your case I do not see any problems (yet :D).

Hope it helps!
F
fredingston
Inspiring
March 5, 2009
If your timepoint already has a date property then why don't you just access this property on click and then use it to load the corresponding content? Something like:

function loadContent(e:Event):void{
var date:String = e.target.date;
contentContainer.gotoAndStop(date);
}

assuming that your contentContainer-MovieClip contains a timeline with the according frame labels. You could create this in the authoring enviroment so you don't need to mess with XML.
A
Anonymous
March 5, 2009
That's actually very helpful. I did think about having my main content as one big movie clip with a timeline and frame labels, but I thought I was still going to have to define a separate function for each time point.

Now, with this technique, would I still have to add an event listener to each TimePoint instance? I'm also assuming I can make my event listener a MouseEvent.CLICK, right?

Thank you so much for your help! This is just slightly above my flash expertise...
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices