Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
funk247

Tweening loaded images

Recommended Posts

I'm using LoaderMax to parse an XML file and load images and information for a document library, I've got the images being loaded in and added to movieclips but am having issues working with them now they are on stage.

 

Basically I have an array of thumbnails and an array of Images, what I want to happen is when a thumbnail is clicked the full-size image tweens into place. I'm currently using the bog standard flash tweens rather than tweenlite, which might be the issue? Heres my import code.

function completeHandler(event:LoaderEvent):void {
	// Set vars
	// var mcthumb:Array = new Array;
	// var mcImg:MovieClip = new MovieClip();
	
	// Grab thumbnails
    var loadedThumbs = event.target.getChildren()[0].getChildren();
	var noThumbs:uint = loadedThumbs.length;
	
	// Display Thumbs
	for (i = 0; i < noThumbs; i++){
		loadedThumbs[i].content.name = i;
		loadedThumbs[i].content.x = 210*i;
		mc2.addChild(loadedThumbs[i].content);
	}
	// trace(loadedThumbs);
	
	// Grab images
    var loadedImg = event.target.getChildren()[1].getChildren();
	var noImages:uint = loadedImg.length;
	
	// Display images
	for (j = 0; j < noImages; j++){
		loadedImg[j].content.name = j;
		bigDocWrap.addChild(loadedImg[j].content);
	 }
}

And this is a edited version of the code I'm using to handle the tweens

function callFull(event:MouseEvent):void 
{
   var clicked:MovielClip = MovielClip(event.target); //This is the problem line

   if (isUp == true) {
    // Do some stuff
    fadeOut.addEventListener(TweenEvent.MOTION_FINISH, end);
       function end(event:TweenEvent) {
         // Some more stuff
         // Animate large image in
         mcDocIn = new Tween (clicked, "y", Strong.easeOut, clicked.y, -650, 1, true);
       }       
    }
}

And here is the error message

Type Coercion failed: cannot convert com.greensock.loading.display::ContentDisplay@39bc1241 to flash.display.MovieClip.at MethodInfo-312()

I'm probably missing something elementary, do I need to convert my loaded content to a movieclip in order to be able to get it tweening. 

Link to post
Share on other sites

I edited my code to this and now the thumbnail tweens instead of the intended image - but at least it's not kicking out errors :)

function callFull(event:MouseEvent):void 
{
   var clicked:ContentDisplay = ContentDisplay(event.target); // Targets object under mouse
 
   if (isUp == true) {
    // Do some stuff
    fadeOut.addEventListener(TweenEvent.MOTION_FINISH, end);
       function end(event:TweenEvent) {
         // Some more stuff
         // Animate large image in
         mcDocIn = new Tween (clicked, "y", Strong.easeOut, clicked.y, -650, 1, true);
       }       
    }
}
Link to post
Share on other sites

From looking at your code I'm really not sure what you have in place to associate a thumbnail with the large image. When you are looping through your thumbs you should be able to use the same index of the current thumbnail to find its respective large image.

 

if each thumb has a large image, I think you should combine both your loops.

 

As you loop through each thumb also figure out which large image it should load and set some property on each thumb that points to the large image

 

 var loadedThumbs = event.target.getChildren()[0].getChildren();
 var loadedImg = event.target.getChildren()[1].getChildren();
 var noThumbs:uint = loadedThumbs.length;
 
// Display Thumbs
for (i = 0; i < noThumbs; i++){
loadedThumbs.content.name = i;
loadedThumbs.content.x = 210*i;
 
loadedThumbs.content.bigImage = loadedImg.content
 
mc2.addChild(loadedThumbs.content);
}
 
and then when you click on the content of each thumbnail you do something along the lines of

TweenLite.to(this.bigImage, 1, {alpha:1});

or

TweenLite.to(clicked.bigImage, 1, {alpha:1})
This is just a rough, un-tested suggestion, hopefully you get the general idea.
Its tough to troubleshoot code in a post.
Feel free to post a very simple demo (only 2 or 3 images) if you need more help.
Link to post
Share on other sites

 

From looking at your code I'm really not sure what you have in place to associate a thumbnail with the large image. When you are looping through your thumbs you should be able to use the same index of the current thumbnail to find its respective large image.

 

if each thumb has a large image, I think you should combine both your loops.

 

As you loop through each thumb also figure out which large image it should load and set some property on each thumb that points to the large image

 

 var loadedThumbs = event.target.getChildren()[0].getChildren();
 var loadedImg = event.target.getChildren()[1].getChildren();
 var noThumbs:uint = loadedThumbs.length;
 
// Display Thumbs
for (i = 0; i < noThumbs; i++){
loadedThumbs.content.name = i;
loadedThumbs.content.x = 210*i;
 
loadedThumbs.content.bigImage = loadedImg.content
 
mc2.addChild(loadedThumbs.content);
}
 
and then when you click on the content of each thumbnail you do something along the lines of

TweenLite.to(this.bigImage, 1, {alpha:1});

or

TweenLite.to(clicked.bigImage, 1, {alpha:1})
This is just a rough, un-tested suggestion, hopefully you get the general idea.
Its tough to troubleshoot code in a post.
Feel free to post a very simple demo (only 2 or 3 images) if you need more help.

 

 

Hi thanks for offering to help, I've been stuck with this for 2 days now! I agree that I've not setup a link between the thumbs and large images, I tried implementing the code you sent over but it's failing on the line where we create the property bigImage

Error #1056: Cannot create property bigImage on com.greensock.loading.display.ContentDisplay.

I'll setup a quick example file and post it shortly.

Link to post
Share on other sites

Heres a quick demo file of my code so far, I can load the images in with no issues at all, but no matter what I do I can't seem to setup the link. Am supposed to be demo-ing on Monday - which is now looking unlikely - so any help would be GREATLY appreciated!

 

Linky

Link to post
Share on other sites

link isn't working for me.

 

Sorry, server security, forgot about that, try again please :)

Link to post
Share on other sites

Thanks for providing the files. Unfortunately it seems like you are using a script file:

include "_scripts/loadInfo.as";

that you didn't include in the zip.

 

In the interest of haste, I just wrote some code that can show you one way of making the thumbnails show the large images on click. Might not be the best way, but it works.

I did my best to stick close to what you were doing.

 

Here is the code

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.loading.display.ContentDisplay;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.*;


LoaderMax.activate([ImageLoader]);


var currentLarge:ContentDisplay;
var myXML:XMLLoader = new XMLLoader("imgLoad2.xml", {onComplete:everythingLoaded});


function everythingLoaded(event:LoaderEvent):void {
trace("everything loaded" + event.target.content); 
var loadedThumbs = event.target.getChildren()[0].getChildren(); 
var loadedImg = event.target.getChildren()[1].getChildren();
var noThumbs:uint = loadedThumbs.length;
trace(noThumbs);
// Display Thumbs
for (var i = 0; i < noThumbs; i++){
var currentThumb:ContentDisplay = loadedThumbs[i].content;
currentThumb.name = i;
currentThumb.x = 210*i;
//store a reference to the currentThumb's big image inside the thumb's ContentDisplay's data property
currentThumb.data  = {bigImage:loadedImg[i].content};
currentThumb.addEventListener(MouseEvent.CLICK, showImage)
mc2.addChild(currentThumb);


}


}


function showImage(e:MouseEvent):void {
   if(currentLarge) {
//if a large image is showing hide it.
TweenLite.to(currentLarge, 0.5, {alpha:0});
}
//store a reference to selected large image 
currentLarge =  e.target.data.bigImage
addChild(currentLarge); //place on top
//reveal large image
TweenLite.fromTo(e.target.data.bigImage, 1, {alpha:0}, {alpha:1});
}






myXML.load();

I've attached a zipped CS5 fla. Just place it in your demoFile folder and compile.

 

Uses latest GSAP v12:

 

demo_greensock.fla.zip

Link to post
Share on other sites

Sorry for not including the file, my 3 month old was screeching like a banshee whilst I was setting up the demo!

 

Thanks for the code, I'll try it out now and let you know. Nice to find a component with such friendly, helpful forums.

Link to post
Share on other sites

It does throw out an error:

Scene 1, Layer 'Layer 1', Frame 1, Line 56	1061: Call to a possibly undefined method fromTo through a reference with static type Class.

But what you've shown me is fantastically helpful, the link between the small and large images is working and I'm sure I can put what you've set out to good use. Thanks so much for the assist!

Link to post
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.

×