Jump to content
Search Community

fade in thumbnails using TweenMax

kbat test
Moderator Tag

Recommended Posts

Hi..I have an Xml gallery built with thumbnails

 

I would like to use the tween Max or the tween Lite class to fade my images in as the gallery loads and when the thumbnail is clicked for the main image to fade in also.

 

 

I know you have to import the files at the top of the .fla

 

 
import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.TweenLite;

 

And apply target, a duration, and an object.

 

but i dont where or how to apply these to my code.

 

Any suggestions would be greatly appreciated.

 

Thanks in advance.

 


import flash.display.MovieClip;

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.TweenMax;
import flash.events.MouseEvent;
import fl.transitions.*;
import fl.transitions.easing.*;




var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();

var numClips:int=6;
var columns:int=2;

xmlLoader.load(new URLRequest("data/images.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void {
xml=XML(event.target.data);
xmlList=xml.children();
for (var i:int = 0; i < xmlList.length(); i++) {

	imageLoader = new Loader();
	imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
	imageLoader.x = 6 +( i % columns )*600;
	imageLoader.y = 6 +(Math.floor(i/columns)*106);
	imageLoader.name=xmlList[i].attribute("source");
	addChild(imageLoader);
	imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
}


}


function showPicture(event:MouseEvent):void {

imageLoader = new Loader();
imageLoader.load(new URLRequest(event.target.name));
imageLoader.x=158;
imageLoader.y=6;
addChild(imageLoader);



}

Link to comment
Share on other sites

hello kbat,

 

In order for TweenLite/Max to work in your gallery you are missing a very important component and that is an eventListener that will run when the images complete loading.

You can read about event.COMPLETE here: http://www.republicofcode.com/tutorials ... as3loader/

 

if you tween the imageLoader before the content loads, it won't work very well. So you will need to add an evenListener to each imageLoader.

 

I'm reluctant to provide a complete code solution as it isn't possible for me to test your existing code.

If you post a zip of your gallery working I can take a look at it. Please try to keep it small with just a few images.

 

Carl

Link to comment
Share on other sites

hi guys thanks very much for the replys

 

Karl

I tried to add an eventListener that will run when the images complete loading but i couldn't get it to work :-(

 

I would very much appreciate if you would take a look at this If i post a zip of my gallery so you can take a look at it.

 

How can i get this file to you ? I tried to pm you but there is no place to attach a file ?

Link to comment
Share on other sites

fixed fla attached

 

here is the code

 

import flash.display.MovieClip;

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.TweenMax;
import flash.events.MouseEvent;
import fl.transitions.*;
import fl.transitions.easing.*;




var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();

var numClips:int=6;
var columns:int=2;

xmlLoader.load(new URLRequest("data/images.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void {
xml=XML(event.target.data);
xmlList=xml.children();
for (var i:int = 0; i 
	imageLoader = new Loader();
	imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
	imageLoader.x = 6 +( i % columns )*600;
	imageLoader.y = 6 +(Math.floor(i/columns)*106);
	imageLoader.name=xmlList[i].attribute("source");



	imageLoader.addEventListener(MouseEvent.CLICK, showPicture);


	//Carl did this:
	imageLoader.alpha=0;
	imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, startListener)
	//addChild(imageLoader);
}


}





function showPicture(event:MouseEvent):void {

imageLoader = new Loader();
imageLoader.load(new URLRequest(event.target.name));


imageLoader.x=165
imageLoader.y=6;


       //Carl did this
imageLoader.alpha=0;
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, startListener)
//addChild(imageLoader);



}

//this is where the fade happens
function startListener(e:Event):void{
trace("loaded"+ e.target);
var thisClip = e.target.loader;
addChild(thisClip);
TweenMax.to(thisClip, 1, {alpha:1})
}

 

 

each imageLoader now has the ON_COMPLETE listener added to its contentLoaderInfo.

 

one thing to watch out for in the future... you are literally re-creating A NEW loader over and over each time you click on a thumbnail and adding it to the stage.

if you click the first thumb 10 times... the large image will load 10 times and you will have 10 instances of that image on the stage. in a larger gallery this could become problematic.

 

for now, it works

 

Carl

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...