funk247 Posted February 14, 2014 Posted February 14, 2014 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.
funk247 Posted February 14, 2014 Author Posted February 14, 2014 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); } } }
Carl Posted February 14, 2014 Posted February 14, 2014 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.
funk247 Posted February 15, 2014 Author Posted February 15, 2014 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.
funk247 Posted February 15, 2014 Author Posted February 15, 2014 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
funk247 Posted February 15, 2014 Author Posted February 15, 2014 link isn't working for me. Sorry, server security, forgot about that, try again please
Carl Posted February 15, 2014 Posted February 15, 2014 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
funk247 Posted February 16, 2014 Author Posted February 16, 2014 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.
funk247 Posted February 16, 2014 Author Posted February 16, 2014 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!
Carl Posted February 16, 2014 Posted February 16, 2014 It seems like you are using an older version of GSAP. in v12 fromTo() was added to TweenLite. Export with v12 and that error will go away. http://www.greensock.com/v12/?download=GSAP-AS3 Glad you have things working. Good luck with the presentation.
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now