Jump to content
Search Community

not showing the first image

chefkeifer test
Moderator Tag

Recommended Posts

I am trying my first slideshow and taking baby steps to figure out how to use loaderMax. here is my code. no errors but nothing shows on the screen.

 

import com.greensock.loading.*;
import com.greensock.events.*;

LoaderMax.activate([imageLoader]); //only necessary once - allows XMLLoader to recognize ImageLoader nodes inside the XML   

var loader:XMLLoader = new XMLLoader("data.xml", {onComplete:completeHandler, estimatedBytes:50000}); loader.load();  

function completeHandler(event:LoaderEvent):void {     
var image1:Bitmap = LoaderMax.getLoader("image1").rawContent;    
var image2:Bitmap = LoaderMax.getLoader("image2").rawContent;
} 

 

what am i missing to get the images to show

Link to comment
Share on other sites

Oh, absolutely. I'm not quite sure how you set up your XML, but if you've got all ImageLoaders inside your LoaderMax, you could simply do this:

 

var loaders:Array = queue.getChildren();
for (var i:int = 0; i     addChild(loaders[i].content);
   TweenMax.fromTo(loaders[i].content, 1, {alpha:0}, {alpha:1});
}

 

You could even randomize the fade-in by putting delay:Math.random() in the "to" vars object of the TweenMax.

 

Does that give you what you need?

Link to comment
Share on other sites

i get this error

 

ypeError: Error #1034: Type Coercion failed: cannot convert com.greensock.loading::ImageLoader@25b3a061 to flash.display.DisplayObject.

with this code.


import com.greensock.events.*;

import com.greensock.loading.*;

import com.greensock.*;

 

 

LoaderMax.activate([imageLoader]); //only necessary once - allows XMLLoader to recognize ImageLoader nodes inside the XML

 

var loader:XMLLoader = new XMLLoader("data.xml", {onComplete:completeHandler, estimatedBytes:50000}); loader.load();

 

function completeHandler(event:LoaderEvent):void {

var image1:Bitmap = LoaderMax.getLoader("image1").rawContent;

var image2:Bitmap = LoaderMax.getLoader("image2").rawContent;

var loaders:Array = loader.getChildren();

for (var i:int = 0; i < loaders.length; i++) {

addChild(loaders);

TweenMax.fromTo(loaders, 1, {alpha:0}, {alpha:1});

}

}





Link to comment
Share on other sites

Wups, sorry about that. It was very late and my brain was foggy. Instead of the loaders themselves, you'd use their "content" property.

 

var loaders:Array = queue.getChildren();
for (var i:int = 0; i     addChild(loaders[i].content);
   TweenMax.fromTo(loaders[i].content, 1, {alpha:0}, {alpha:1});
}

 

But the way you set up your XML makes it slightly more difficult. I'd recommend wrapping your stuff in a tag so that you can just get that whole LoaderMax (with all of its children) by name and loop through its content like this:

 





 

The other benefit of that is you only need to have load="true" in one place - on the . Plus you could use prependURLs to add text to all the ImageLoader urls (totally optional). I just find that very convenient. Anyway, you can then get that xmlQueue LoaderMax after your XMLLoader is done by using getLoader(). Then, since the "content" of a LoaderMax instance is simply an array of all of the content of its children (in this case your ImageLoaders), you can just loop through that and do your addChild() and tweening:

 

function completeHandler(event:LoaderEvent):void {     
  var xmlQueue:LoaderMax = LoaderMax.getLoader("xmlQueue");
  var images:Array = xmlQueue.content;
   for (var i:int = 0; i         addChild(images[i]);
       TweenMax.fromTo(images[i], 1, {alpha:0}, {alpha:1});
   }
} 

 

Does that work better for you?

Link to comment
Share on other sites

  • 2 weeks later...

Hi,

 

I've been trying to build an XML Photo Gallery and have followed this thread closely. However, with this code it seems TweenMax is applying a single fade in tween across the entire Array (versus, a fadeIn/fadeOut tween for each item in the Array). Please let me know how I can fix this as I'd really like to use TweenMax to control the animation of photos loaded from XML!

 

function completeHandler(event:LoaderEvent):void
{     
  var xmlQueue:LoaderMax = LoaderMax.getLoader("xmlQueue");
  var images:Array = xmlQueue.content;
   for (var i:uint = 0; i < images.length; i++)
{
	images[i].x = 250;
	images[i].y = 100;
       addChild(images[i]);
       TweenMax.fromTo(images[i], 1, {alpha:0}, {alpha:1});
   }
}

 

Thanks!

Link to comment
Share on other sites

...with this code it seems TweenMax is applying a single fade in tween across the entire Array (versus, a fadeIn/fadeOut tween for each item in the Array). Please let me know how I can fix this as I'd really like to use TweenMax to control the animation of photos loaded from XML!

Right, that code fades them all in - are you looking for a sequence of tweens or something? Please describe the effect you're looking for specifically. If you just want to sequence them, you can use a TimelineLite and append() each tween as you create them in the loop. Or use a TweenMax.allFromTo() with the stagger parameter, or there are other ways too. Just trying to understand your goal first though.

Link to comment
Share on other sites

Thanks for such a fast reply! I'd like to sequence the images according to button clicks (as in Next and Previous buttons) so I suppose using append() and TimelineLite, as you mentioned, is the way to go. I apologize in advance for the simplicity of this but I'm not quite sure how to move through the Array and apply the animation to each item in the Array...

 

This just dumps them all on the stage and shows the last item in the list.

var photoTimeline:TimelineLite = new TimelineLite();
   for (var i:uint = 0; i < images.length; i++)
{
images[i].x = 250;
images[i].y = 100;
       addChild(images[i]);
photoTimeline.append(new TweenLite.to(images[0], 5, {alpha:1}));
       photoTimeline.append(new TweenLite.to(images[1], 5, {alpha:1}));
   }

 

thanks again

Link to comment
Share on other sites

No no, if you want to have button clicks trigger crossfades, you wouldn't need TimelineLite. You just have the click trigger a function that does two tweens: 1 to fade the old one out and 1 to fade the new one in.

 

Have you seen the slideshow demo I created? It might give you some clues as to how to handle this, especially because ideally you should make sure you build it so that it can handle scenarios where the user clicks next/previous very quickly multiple times. You need to be able to prioritize the loading of the next image too.

 

http://www.greensock.com/as/LoaderMax/slideshow.zip

Link to comment
Share on other sites

Hey jack, i keep getting an error...i cant see where i may be duplicating the loader...

 

Symbol 'adSlideshow', Layer 'actions', Frame 1, Line 15	Warning: 3596: Duplicate variable definition.
Symbol 'adSlideshow', Layer 'actions', Frame 1, Line 15	1151: A conflict exists with definition loader in namespace internal.

 

 

import com.greensock.loading.*;
import com.greensock.events.*;
import com.greensock.*;

LoaderMax.activate([imageLoader]);  

var loader:XMLLoader = new XMLLoader("xml/adSlideshow.xml", {onComplete:completeHandler, estimatedBytes:50000}); loader.load();  

import com.greensock.loading.*;
import com.greensock.events.*;
import com.greensock.*;

LoaderMax.activate([imageLoader]);  

var loader:XMLLoader = new XMLLoader("xml/adSlideshow.xml", {onComplete:completeHandler, estimatedBytes:50000}); loader.load();  

function completeHandler(event:LoaderEvent):void {     
  var xmlQueue:LoaderMax = LoaderMax.getLoader("xmlQueue");
  var images:Array = xmlQueue.content;
   for (var i:int = 0; i < images.length; i++) {
       addChild(images[i]);
       TweenMax.fromTo(images[i], 1, {alpha:0}, {alpha:1});
   }
} 

Link to comment
Share on other sites

i guess i do have a question. with to fromTo method. doesnt each image fade in and then fade out through the loop. for some reason it just shows shows image5 which is the last one in the xml file. how do you just get it image1 to fade in and then fade out and then image2 fade in and then fade out and so on. i do not want any buttons to control this just a continous loop of images...

 

thanks

Link to comment
Share on other sites

There are lots of options for sequencing. Here are a few:

 

1) Just use the "delay" special property for each tween based on its position in the array, like this:

 

for (var i:int = 0; i      addChild(images[i]);
    TweenMax.fromTo(images[i], 1, {alpha:0}, {alpha:1, delay:i * 1});
}

 

2) Use TweenMax.allTo() or TweenMax.allFromTo() with a stagger, like:

 

TweenMax.allFromTo(images, 1, {alpha:0}, {alpha:1}, 1);

 

3) Use TimelineLite or TimelineMax to build a sequence of tweens and then control them as a whole:

 

var tl:TimelineLite = new TimelineLite();
for (var i:int = 0; i      addChild(images[i]);
    tl.append( TweenMax.fromTo(images[i], 1, {alpha:0}, {alpha:1}) );
}

 

See the video about TimelineLite at http://www.greensock.com/timeline-basics/

 

Have fun!

Link to comment
Share on other sites

You were doing an allTo() inside your loop, so you were creating way too many tweens :) for every element in your array, it was creating tweens for all of the elements. So if there were 10, there would end up being 100 tweens. And there were some other problems with your code, but I just went ahead and created a working version for you that is looped and everything. I added comments to it so that things are a little more clear. Since it seemed like you wanted to loop things, I just created a TimelineMax to make it simple.

 

import com.greensock.loading.*;
import com.greensock.events.*;
import com.greensock.*;
import flash.display.Sprite;

LoaderMax.activate([imageLoader]);  

var loader:XMLLoader = new XMLLoader("adSlideshow.xml", {onComplete:completeHandler, estimatedBytes:50000}); 
loader.load();

function completeHandler(event:LoaderEvent):void {     
var imageSeconds:Number = 2;
var transitionSeconds:Number = 1;

  var xmlQueue:LoaderMax = LoaderMax.getLoader("xmlQueue");
  var images:Array = xmlQueue.content;

  //hide all the images (make them all alpha:0 and visible:false) immediately
  TweenMax.allTo(images, 0, {autoAlpha:0});

  //add the first image to the display list
  addChild(images[0]);

  //do the first fade-in on its own because it shouldn't be part of the looped sequence
  TweenMax.to(images[0], transitionSeconds, {autoAlpha:1});

  //create a TimelineMax to build our sequence. This makes looping simple.
  var sequence:TimelineMax = new TimelineMax({delay:transitionSeconds, repeat:-1});

  //loop through all the images except the first one and create the tweens.
  for (var i:int = 1; i         addChild(images[i]);
	sequence.append( new TweenMax(images[i], transitionSeconds, {autoAlpha:1}), imageSeconds);

	//to improve rendering performance, make sure the last image (that's behind the one that just faded in) is taken out of the rendering queue by setting visible:false which autoAlpha:0 does.
	sequence.append( new TweenMax(images[i - 1], 0.01, {autoAlpha:0}) );
  }

  //now to make things loop cleanly, do the final fade-in/out between the first and last image.
  sequence.append( new TweenMax(images[0], 0.01, {autoAlpha:1}), imageSeconds);
  sequence.append( new TweenMax(images[images.length - 1], transitionSeconds, {autoAlpha:0}) );
} 

 

Does that help?

Link to comment
Share on other sites

Jack you are awesome..like you have done for me for the past couple of years... you have helped me through some difficult times. I am one of those that if i see a working example i can figure things out. I am not the best coder and i know that some out there its a first language. me, its greek and i am learning..so seeing it first hand and making it work for me is a great help in my learning process..once again thanks for sticking with me....happy holidays...

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...