Using tweens on a timelinelite as buttons

[abk]

Warm greetings!

 

I'm a newbie...so please forgive me for my ignorance. I'm trying to learn!

• I'm using loadermax to load multiple images,
  
• adding these images to TimeineLight and
  
• tweening them using TweenLite to create an animation sequence.
  
• The sequence will be used in a web page.
  
• I want to make some of these images, after they are added to the timeline, clickable.
  
• This is the code
  

var myVar:ContentDisplay = LoaderMax.getContent("picname");
main_tl.append(TweenLite.to(myVar, 1, {alpha:1, y:15, ease:Bounce.easeInOut));
main_tl.append(TweenLite.to(another Pic, 1, {alpha:1}));

 

I want myVar to be clickable and on clicking the user should be navigated to another page.

 

How can I do this? All help on the matter is highly appreciated.

 

Many thanks in advance.

abk

[Carl]

First, congratulations on your success with LoaderMax and TimelineLite! Very cool that you got all that working. The next part is fairly straightforward. You can apply eventListeners directly to the content of your ImageLoaders like so:

 

 

myVar.addEventListener(MouseEvent.CLICK, myVarClick);

function myVarClick(e:MouseEvent):void{
navigateToURL(new URLRequest("http://www.greensock.com"));
}

 

More Advanced

You can also define the url each image should use on click when you create the ImageLoader. LoaderMax loaders allow you to add any properties you wish to any loader type. All non-LoaderMax related properties are automatically stored in a vars object attached to your loader, in your case an ImageLoader.

 

Consider the following clickURL property that I made up and assigned below:

 

 

var myImage:ImageLoader = new ImageLoader("images/crab.png", {
container:this,
name:"picname",
alpha:0,
onProgress:progressHandler,
onComplete:completeHandler,
scaleX:0,
scaleY:0,
centerRegistration:true,
x:320,
y:200,
clickURL:"http://www.greensock.com"
});

 

To make that image clickable and dynamically fetch its clickURL do this:

 

var myVar:ContentDisplay = LoaderMax.getContent("picname");

myVar.addEventListener(MouseEvent.CLICK, imageClick);

function imageClick(e:MouseEvent):void{
//dynamically asses the clickURL or the image that was clicked
trace(e.target.loader.vars.clickURL); //output http://www.greensock.com
navigateToURL(new URLRequest(e.target.loader.vars.clickURL))
}

 

Using this more advanced technique you can configure the content of ALL of your ImageLoaders to use the same imageClick handler function.

 

I have attached a working CS4 fla zip with images and greensock code for you to experiment with.

 

-carl

loadAndClick.zip

[abk]

Hey Carl...many many thanks for your kind words and a prompt help on the matter.

 

I tried the advanced code as it's way too efficient.

 

It's working but with two issues.

• There are in all 5 sequences in my movie each being called in a separate function.
  
• Each seq. contains 6 images each.
  
• I've used a loadermax to load all these images.
  
• onComplete function on loadermax calls first function.
  
• onComplete event on the last tween of each function calls next function and the last function's last tween calls first function to keep the movie looping.
  
• I added EventListener on one image in each function.
  
• When the movie gets loaded first time, the mouse-click action works only when movie reaches the last function towards the end of the movie. Then on-wards, it works every-time in loop play.
  
• Each of the pages being navigated to, also contain one animation seq. each
  
• All the animation seq., though have autoplay:true, do not start playing even the preloader shows 100% completion. They start playing only when the page is refreshed.
  

I'm clueless as regards to 1. why the movies do not play unless the page is refreshed and 2. why the links in the first movie do not start working till the last function is called.

 

Any thoughts on what I'm doing wrong?

 

Many thanks in advance,

abk.

[Carl]

When the movie gets loaded first time, the mouse-click action works only when movie reaches the last function towards the end of the movie. Then on-wards, it works every-time in loop play.

 

is it possible that the image is being obstructed by a transparent element? Also you should be able to assign all the event listeners for each image before the LoaderMax even starts loading. As soon as each ImageLoader is created, the ContentDisplay object (that holds the bitmap) is available for assigning listeners to.

 

I don't know why the first image won't be clickable until the animation completes one cycle.

 

----

 

I also don't know why a page refresh is necessary for auto:play true to kick in. Very strange. Can you provide a very simple example that contains fla files for a parent swf that loads a child swf that won't autoPlay when loaded unless the page refreshes? If you can save down to Flash CS4 that would be helpful as my work computer with CS6 is in the shop

 

---

I regret that I don't have clear and immediate solutions for these problems.

[abk]

Hi Carl,

 

Sorry for delayed reply. I was trying to debug this on my own.(Better way to learn I think)...

 

I finally added this line

addChild(myVar); after

var myVar:ContentDisplay = LoaderMax.getContent("picname");

And links are now working as expected.

 

the image is being obstructed by a transparent element?

 

No. Had it been so, links would not have worked in loop play.

 

As regards to second issue, I guess the issue is probably in connectivity. With problems in, bandwidth and speed, movies start playing upon page refresh.

 

Thanks a lot for your quick help...Much appreciated!

 

Best regards,

Abk