LoaderMax - Pagination - Many External Loaders

[souzadavi]

Hi, i´ve been trying to search a free open source application for android magazine, and i couldn´t find nothing, so this project will be to build a open source code for magazine to use in google play for android apk with adobe air. the project is at github https://github.com/souzadavi/dsmagazine

 

I want to use LoaderMax for this project.

 

I would like to load at same time only 3 pages, so will be the current page, last page and next page.

 

When an user swipe the page to left or right the magazine pre load the page, this should work by this way because this magazine will run on tablet, so we don´t have too much memory avalaible. Any other ideia will be appreciate also.

 

I`m using this http://www.greensock.com/as/zip/PanelScrollExample.zip but i´m loading all pages and added in stage, this is taking a lot of memory. I would like to load 3 by 3.... Any help will be very appreciate.

 

 

MY XML IS:

<?xml version="1.0" encoding="utf-8"?>
<data>
<configs load="false">
 <screen height="1232" width="800" aspectioRatio="portrait" />
 <book name="Demo" />
 <chapters quantity="1" />
</configs>
<book>
 <chapter name="Demo Parte 1" load="true">
  <page file="1/page_1.jpg" type="image" />
  <page file="1/page_2.jpg" type="image" />
  <page file="1/page_3.jpg" type="image" />
  <page file="1/page_4.jpg" type="image" />
 </chapter>
 <chapter name="Demo Parte 2" load="false">
  <page file="1/page_1.jpg" type="image" />
  <page file="1/page_2.jpg" type="image" />
  <page file="1/page_3.jpg" type="image" />
  <page file="1/page_4.jpg" type="image" />
 </chapter>
</book>
</data>

 

AS3 CODE:

package com.core{
import com.greensock.events.LoaderEvent;
import com.greensock.loading.*;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.utils.getTimer;
import flash.events.Event;
import flash.geom.Rectangle;
import com.greensock.TweenLite;
import com.greensock.easing.Strong;

public class Magazine extends Sprite {
 private var _pageBounds:Rectangle;
 private var _container:Sprite;
 private var _currentPageIndex:int = 0;
 private var _pageCount:int;
 private var _x1:Number;
 private var _x2:Number;
 private var _t1:uint;
 private var _t2:uint;
 public function Magazine(){
  this.init();
 }

 private function init():void {
  var xmlLoader:XMLLoader = new XMLLoader("configs/book.xml", {onComplete:_xmlCompleteHandler});
  xmlLoader.load();
 }
 private function _xmlCompleteHandler(event:LoaderEvent):void {
  var configs:XMLList = event.target.content.configs;
  var chapters:XMLList = event.target.content.book.chapter;
  _pageBounds = new Rectangle(0, 0, Number(configs.screen.@width), Number(configs.screen.@height));
  _container = new Sprite();

  _container.x = _pageBounds.x;
  _container.y = _pageBounds.y;
  addChildAt(_container, 0);
  _container.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDownHandler, false, 0, true);
  _pageCount = chapters.page.length();
  var queue:LoaderMax = new LoaderMax();
  for (var i:int = 0; i < _pageCount; i++) {
   //trace("PAGINAS CONTADAS:"+ chapters.page[i].@type);
   switch (String(chapters.page[i].@type)){
   case "image" :
   queue.append( new ImageLoader("assets/" + chapters.page[i].@file, {x:i * _pageBounds.width, width:_pageBounds.width, height:_pageBounds.height, container:_container}) );
   break;

   case "swf" :
   queue.append( new SWFLoader("assets/" + chapters.page[i].@file, {x:i * _pageBounds.width, width:_pageBounds.width, height:_pageBounds.height, container:_container}) );
   break;
   }
  }
  //feel free to add a PROGRESS event listener to the LoaderMax instance to show a loading progress bar.
  queue.load();
 }

 private function _mouseDownHandler(event:MouseEvent):void {
  TweenLite.killTweensOf(_container);
  _x1 = _x2 = this.mouseX;
  _t1 = _t2 = getTimer();
  _container.startDrag(false, new Rectangle(_pageBounds.x - 9999, _pageBounds.y, 9999999, 0));
  this.stage.addEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler, false, 0, true);
  this.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true);
 }

 private function _enterFrameHandler(event:Event):void {
  _x2 = _x1;
  _t2 = _t1;
  _x1 = this.mouseX;
  _t1 = getTimer();
 }

 private function _mouseUpHandler(event:MouseEvent):void {
  _container.stopDrag();
  this.removeEventListener(Event.ENTER_FRAME, _enterFrameHandler);
  this.stage.removeEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler);
  var elapsedTime:Number = (getTimer() - _t2) / 1000;
  var xVelocity:Number = (this.mouseX - _x2) / elapsedTime;
  //we make sure that the velocity is at least 20 pixels per second in either direction in order to advance. Otherwise, look at the position of the _container and if it's more than halfway into the next/previous panel, tween there.
  if (_currentPageIndex > 0 && (xVelocity > 20 || _container.x > (_currentPageIndex - 0.5) * -_pageBounds.width + _pageBounds.x)) {
   _currentPageIndex--;
  } else if (_currentPageIndex < _pageCount - 1 && (xVelocity < -20 || _container.x < (_currentPageIndex + 0.5) * -_pageBounds.width + _pageBounds.x)) {
   _currentPageIndex++;
  }
  TweenLite.to(_container, 0.7, {x:_currentPageIndex * -_pageBounds.width + _pageBounds.x, ease:Strong.easeOut});
 }
}
}

 

thanks

DS

[Carl]

Hi and Welcome to the GreenSock Forums.

 

That sounds like an interesting and ambitious project you are building. Very cool.

 

Architecting complex load management routines is not exactly the type of support that we offer here but we are very pleased that you chose LoaderMax for the job.

 

It sounds like you have a very firm understanding of what you need to do in terms of loading only the immediately accessible assets. Keep in mind that unloading the assets that are no longer necessary to have in memory can be equally important.

 

With you current xml structure you list a variety of url's of various page jpgs. At some point you are going to have to parse all those urls and create individual ImageLoaders.

I would suggest that you take a look at the XMLLoader Docs http://www.greensock.com/as/docs/tween/com/greensock/loading/XMLLoader.html and read up on how you can format your xml data as LoaderMax and ImageLoader nodes.

 

Virtually as soon as the xml loads your loaders will be created and you will be able to load or unload exactly the ones that you need.

 

From that point, as the use rflicks you just have to keep track of the current index of the current loader inside LoaderMax.

 

You can than use getChildAt() http://www.greensock.com/as/docs/tween/com/greensock/loading/LoaderMax.html#getChildAt() to find the next and previous loaders and tell them to load:

 

getChildAt(currentIndex-1)
getChildAt(currentIndex)
getChildAt(currentIndex+1)

 

Likewise you could create a loop that unloads all the pages that are no longer within a reasonable range of the ImageLoader at currentIndex.

 

Basically, once your xml is loaded you will have access to a massive array of all the loaders. As you step through the loaders, it should be fairly straight-forward to load and unload them as needed.

 

This is only 1 of many ways to approach this project. LoaderMax us chock-full of features to make this easier and more reliable than any other tool.

 

If you have specific questions about a particular method, property or feature of LoaderMax please don't hesitate to ask.

 

Carl

[souzadavi]

Thanks... I´´m working around and soon i will post the news back here again.. thanks for the direction....

[souzadavi]

HI, there is anybody knows how could i get the number of loader i already got loaded?

 

Like i want to make sure that i´m unload all things that i used to... I just need hold only 3 external files.

 

i´m loading the files:

LoaderMax.activate([imageLoader, SWFLoader, XMLLoader]);
  loader = LoaderMax.parse("assets/" + chapters.page[pageId].@file, { name:+pageId, x:pageId * _pageBounds.width, width:_pageBounds.width, height:_pageBounds.height, container:_container } );

  loader.load();

 

I want to know how many child is in loader... Something like:

 

trace(loader.numChildren);

 

 

Or other way to check if loader is unload already.... thanks...

DS

[GreenSock]

There is a numChildren property, but that reports all children, not just the loaded ones. It sounds like you're looking for the getChildrenByStatus() method which returns an array of the loaders that match a given status (in your case, LoaderStatus.COMPLETED).

 

var loaded:Array = yourLoaderMax.getChildrenByStatus(LoaderStatus.COMPLETED);
trace(loaded.length + " loaders have completed");

 

http://greensock.com/as/docs/tween/com/greensock/loading/LoaderMax.html#getChildrenByStatus()

[souzadavi]

not working..

 

ERROR:

 

1061: Call to a possibly undefined method getChildrenByStatus through a reference with static type com.greensock.loading.core:LoaderCore.

 

 

thanks

DS

[GreenSock]

You're calling it on a LoaderMax instance, right? That error indicates that you're either calling it on a regular loader (like a SWFLoader, ImageLoader, VideoLoader, etc.) or you set the wrong data type for your variable.

 

Would you post your FLA or sample code that clearly demonstrates the issue? The tidbit of code you posted previously didn't show important aspects like what data type your loader variable is or where/how you're calling the getChildrenByStatus() method, etc.

[souzadavi]

 private function _pageLoad(pageId:int):void {

  LoaderMax.activate([imageLoader, SWFLoader, XMLLoader]);
  queue = LoaderMax.parse("assets/" + chapters.page[pageId].@file, { name:+pageId, x:pageId * _pageBounds.width, width:_pageBounds.width, height:_pageBounds.height, container:_container, autoDispose:true});

  queue.load();

  var loaded:Array = queue.getChildrenByStatus(LoaderStatus.COMPLETED);
  trace(loaded.length + " loaders have completed");
}

[GreenSock]

I'm confused - that code is just creating a single loader. I thought you said you wanted to find out how many loaders had finished loading in a LoaderMax group. What am I missing?

 

If you just want to find out if a particular loader has finished, you can check its "status", like:

 

if (loader.status == LoaderStatus.COMPLETED) {
   trace("done!");
}

 

Does that help?

[souzadavi]

i did this to load the files one by one... this function call _pageLoad().....

 

 private function _pageCurrent(page:int):void {
  this._pageUnload(page);

  var i:int = -1;

  /// KEEP 3 PAGES LOADED.
  for (i; i < 3; i++) {
   var paginaLoad:int = page + i;
   if (_container.getChildByName(String(paginaLoad)) == null) {
 //trace("NOT LOADED");
 if (page == 0) {
  this._pageLoad(0);
  this._pageLoad(1);
  this._pageLoad(2);
 }
 if (page != 0) {
  this._pageLoad(paginaLoad);
 }
   }else {
   //trace("ALREADY LOADED");
   }
  }
 }

[GreenSock]

That's fine if you prefer to handle it individually like that - you'd just need to keep your own references to the loaders (or at least their names/urls so that you could use LoaderMax.getLoader() to get their references) and check their status as you please. I think it'd probably be easier, though, to group them into a LoaderMax instance which can give you a nice sum total of their progress, and/or you can use the getChildrenByStatus() to figure out how many have loaded, etc. Totally up to you.

 

You could even have your _pageLoad() method return the loader instance that it creates so that you could append() it to a LoaderMax instance.

[souzadavi]

Do you think that way i´m going is the best way? or do I should do this from other way??

 

thanks

DS

[Carl]

Hi its really tough to say what is best for you. There have been a number of options suggested and its a little difficult to ascertain where you are with them in your current implementation. The LoaderMax tools offer a vast array of methods to track and respond to the loading progress of any number of assets and as such it is difficult to really say what is best.

 

I've had people tell me a number of times what the best way to do something is, but if I don't understand it it really isn't a very good way at all. Often you have to compromise between what is best and what you are capable of managing.

 

It appears you have a good amount of this figured out. I would either proceed in the direction you are currently in OR step back from this larger project and create some standalone files that just focus on one or 2 of the areas that you still need help with.

 

For instance if you want to load 10 items and at any given point assess which ones are loaded and not loaded, just work on that. Take the xml and navigation out of the equation entirely. As you get familiar with the syntax and features in a more controlled setting, you will have a much more enjoyable time implementing them in more complex situations.

 

In addition it will be much easier for us to assist you in figuring out what might be wrong in your code or can be improved.