Share Posted August 31, 2014 hi there I am new to GreenSock and have made a gallery with the LoaderMax & Queue's. well the gallery works great but I cant figure out this ..... [10 pics loading inside a container] how do I put a loader bar under each picture that is loading rather than using the same loader bar for all the pictures loaded....here is my as3 code so far ... import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.display.*; import flash.events.MouseEvent; import flash.display.MovieClip; var i:Number = 1; var t:Number; var dir:String = ""; var cont:MovieClip; var queue:LoaderMax = new LoaderMax({maxConnections:1, onChildProgress:imageProgressHandler, onChildComplete:imageCompleteHanlder, onProgress:queueProgressHandler, onComplete:queueCompleteHandler, onError:errorHandler }); dir = "images/"+i; pageNum.text = ""+i; cont = cont_A; displayQueue(); nextBtn.addEventListener(MouseEvent.CLICK, nextPic); prevBtn.addEventListener(MouseEvent.CLICK, prevPic); ////////////////////////////////////////////////////////////////////////////// // DISPLAY QUEUE ////////////////////////////////////////////////////////////////////////////// function displayQueue():void { queue.append(new ImageLoader(dir+"/001.jpg", {container:cont, alpha:0, x:17, y:15, estimatedBytes:90000})); queue.append(new ImageLoader(dir+"/002.jpg", {container:cont, alpha:0, x:166, y:15, estimatedBytes:90000})); queue.append(new ImageLoader(dir+"/003.jpg", {container:cont, alpha:0, x:315, y:15, estimatedBytes:90000})); queue.append(new ImageLoader(dir+"/004.jpg", {container:cont, alpha:0, x:464, y:15, estimatedBytes:90000})); queue.append(new ImageLoader(dir+"/005.jpg", {container:cont, alpha:0, x:613, y:15, estimatedBytes:90000})); queue.append(new ImageLoader(dir+"/006.jpg", {container:cont, alpha:0, x:17, y:180, estimatedBytes:90000})); queue.append(new ImageLoader(dir+"/007.jpg", {container:cont, alpha:0, x:166, y:180, estimatedBytes:90000})); queue.append(new ImageLoader(dir+"/008.jpg", {container:cont, alpha:0, x:315, y:180, estimatedBytes:90000})); queue.append(new ImageLoader(dir+"/009.jpg", {container:cont, alpha:0, x:464, y:180, estimatedBytes:90000})); queue.append(new ImageLoader(dir+"/010.jpg", {container:cont, alpha:0, x:613, y:180, estimatedBytes:90000})); queue.load(); } ////////////////////////////////////////////////////////////////////////////// // QUEUE PROGRESS HANDLER ////////////////////////////////////////////////////////////////////////////// function queueProgressHandler(event:LoaderEvent):void { totalProgressBar_mc.bar_mc.scaleX = event.target.progress; } ////////////////////////////////////////////////////////////////////////////// // QUEUE COMPLETE HANDLER ////////////////////////////////////////////////////////////////////////////// function queueCompleteHandler(event:LoaderEvent):void { //trace("all images have loaded."); } ////////////////////////////////////////////////////////////////////////////// // ERROR HANDLER ////////////////////////////////////////////////////////////////////////////// function errorHandler(event:LoaderEvent):void { trace("error occured with " + event.target + ": " + event.text); } ////////////////////////////////////////////////////////////////////////////// // IMAGE COMPLETE HANDLER ////////////////////////////////////////////////////////////////////////////// function imageCompleteHanlder(event:LoaderEvent):void { var loadedImage:ContentDisplay = event.target.content; loadedImage.alpha = 0; TweenLite.to(loadedImage, .5, {alpha:1}); } ////////////////////////////////////////////////////////////////////////////// // IMAGE PROGRESS HANDLER ////////////////////////////////////////////////////////////////////////////// function imageProgressHandler(event:LoaderEvent):void { progressBar_mc.bar_mc.scaleX = event.target.progress; } ////////////////////////////////////////////////////////////////////////////// // CHECK [i] ////////////////////////////////////////////////////////////////////////////// function check_i():void { if (i>10){i=1}; if (i<1){i=10}; } ////////////////////////////////////////////////////////////////////////////// // NEXT PICTURE ////////////////////////////////////////////////////////////////////////////// function nextPic(event:MouseEvent):void { check_i(); cont_A.x = 0; cont_A.y = 0; cont_A.width = 760; TweenMax.to(cont_A, 1, {x:0, y:0, width:0}); cont_B.x = 760; cont_B.y = 0; cont_B.width = 0; i++ check_i(); pageNum.text = ""+i; TweenMax.to(cont_B, 1, {x:0, y:0, width:760}); dir = "images/"+i; cont = cont_B; displayQueue(); } ////////////////////////////////////////////////////////////////////////////// // PREVIOUS PICTURE ////////////////////////////////////////////////////////////////////////////// function prevPic(event:MouseEvent):void { check_i(); cont_A.x = 0; cont_A.y = 0; cont_A.width = 760; TweenMax.to(cont_A, 1, {x:760, y:0, width:0}); cont_B.x = 0; cont_B.y = 0; cont_B.width = 0; i-- check_i(); pageNum.text = ""+i; TweenMax.to(cont_B, 1, {x:0, y:0, width:760}); dir = "images/"+i; cont = cont_B; displayQueue(); } ////////////////////////////////////////////////////////////////////////////// // WAIT ////////////////////////////////////////////////////////////////////////////// function wait(t){ stop(); var timer:Timer=new Timer(t,1); timer.addEventListener(TimerEvent.TIMER,waitdone); timer.start(); } ////////////////////////////////////////////////////////////////////////////// // WAIT DONE ////////////////////////////////////////////////////////////////////////////// function waitdone(e:TimerEvent){ e.currentTarget.removeEventListener(TimerEvent.TIMER,waitdone); play(); } //////////////////////////////////////////////////////////////////////////////would I need 10 individual progress bars ? hope someone can help thanks Steven Link to comment Share on other sites More sharing options...
Share Posted September 1, 2014 Hi and welcome to the GreenSock forums. If you want 1 progress bar to show totalProgress and 1 other to show the progress of the currently loading image, then you only need 2 progress bars as shown in this tutorial and example: http://www.snorkl.tv/2011/08/loading-images-with-loadermax-load-and-track-the-progress-of-multiple-images/ If you want to show 10 images loading at the same time with their own unique progress, then yes, you will need 10 progress bars. What is nice is that you already have your onChildProgress event hooked up to an event listener (good job) Your imageProgress handler is also being passed an event. That event has lots of juicy info attached to it. For instance event.target is the loader that is being loaded. You can use this info from the event to figure out which progress bar to update. I modified the example from the tutorial above so that there are 4 progress bars on the stage with the instance names crab, lobster, whale and bird. I gave each ImageLoader these respective names: notice the name property in each ImageLoader queue.append(new ImageLoader("images/whale.png", {container:this, name:"whale", alpha:0, x:0, y:0, estimatedBytes:60000})); queue.append(new ImageLoader("images/crab.png", {container:this, name:"crab", alpha:0, x:320, y:0,estimatedBytes:90000})); queue.append(new ImageLoader("images/lobster.png", {container:this, name:"lobster", alpha:0, x:0, y:200, estimatedBytes:90000})); queue.append(new ImageLoader("images/bird.png", {container:this, name:"bird", alpha:0, x:320, y:200, estimatedBytes:60000})); and then in my imageProgres handler I use the name of the target of the event to find the right progress bar function imageProgressHandler(event:LoaderEvent):void { //use the name of the ImageLoaer to find the progress bar on stage this[event.target.name].scaleX = event.target.progress; } I have attached some cs6 files to better illustrate how this works uniqueProgress_CS6.zip Link to comment Share on other sites More sharing options...
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