Jump to content
GreenSock

ngrinchenko

Image/SWF Loader double functionality?

Recommended Posts

This might be not a LoaderMax problem, but a general AS3 problem. If this is a case I understand and will try to look for help on other AS3 related forums.

 

I need to find out what would be a proper approach to resolve my logistic problem.

My website is broken into labeled sections.

One section is named "ApplicationsPopUps" - it has an image thumbnails scrolling bar at the bottom and an SWFLoader in the middle of the screen. I can click on any of the thumbnails and a new image would be loaded into SWFLoader.

I would like to add/expand to this funcionality. There is another section on my timeline named "Applications", and it has a collage of images animating into a position on the screen. Each image acts as a button. User can click on the image and be transferred into previoiusly described section labeled "ApplicationsPopUps".

The problem is that this section("ApplicationsPopUps") by default opens with the first image loaded from xml file. I need it to be that specific image which a user clicked on the collage in the previous section labeled "Applications".

Images are not the same. They represent the same thing, but small thumbnail images are square formatted jpg files (as I was not able to figure out the math to make them different lenghts with the same heights). They bring up bigger SWF files as these files have their own animation and additional buttons. Collage images are jpg files in a rectangular various shapes (not square as thumbnail images)

For visual reference please visit 888acolyte.com, go to "applications" and click on any of the images it will bring you to a section with a bigger image for that application. In that section you will be able to navigate from image to image.

This is an old version, which is accomplished by making a separated labeled section for each image.

Can it be resolved via code or I need to build additional labeled sections for each image to be loaded as before?

 

Just in case here a link to my code (named "Loader Coding"): http://pastebin.com/pWViE2U2

There is a package file named Slide.as. Here is a link to its code: (named "Slide as"): http://pastebin.com/m0MHT0Mi

 

Here is the same code pasted:

import com.greensock.*;
import com.greensock.loading.*;
//import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;

//import com.greensock.TweenLite;
import com.greensock.events.LoaderEvent;
//import com.greensock.loading.ImageLoader;
//import com.greensock.loading.SWFLoader;
//import com.greensock.loading.LoaderMax;
//import com.greensock.loading.XMLLoader;
import com.greensock.plugins.AutoAlphaPlugin;
import com.greensock.plugins.ColorTransformPlugin;
import com.greensock.plugins.GlowFilterPlugin;
import com.greensock.plugins.BlurFilterPlugin;//i added this filter to blur the progressBar
import com.greensock.plugins.TweenPlugin;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;


//public class SlideshowExample extends MovieClip {
const _THUMB_WIDTH:Number = 50;
const _THUMB_HEIGHT:Number = 64;
const _IMAGE_WIDTH:Number = 1024;//550;original #
const _IMAGE_HEIGHT:Number = 500;//355;original #
const _THUMB_GAP:Number = 2;
const _SCROLL_SPEED:Number = 12;
const _SCROLL_AREA:Number = 150;

  var _progressBar:MovieClip;
  var _arrowLeft:MovieClip;
  var _arrowRight:MovieClip;

  var _slides:Array;
  var _curSlide:Slide; //Slide that is currently displaying
  var _loadingSlide:Slide; //only used when a Slide is supposed to show but hasn't been fully loaded yet (like if the user clicks "next" many times before all the images have loaded). We keep track of the one that's in the process of loading and should be shown as soon as it finishes, then we set _loadingSlide back to null.
  var _imagesContainer:Sprite; //the Sprite into which the full-size images are placed (this helps manage the stacking order so that the images can always be behind everything else and yet we can addChild() each image so that it shows up on top of the previous one)
  var _thumbnailsContainer:Sprite; //the Sprite into which the thumbnail images are placed. This also allows us to slide them all at the same time.
  var _destScrollX:Number = 0; //destination x value for the _thumbnailsContainer which is used for scrolling it across the bottom. We don't want to use _thumbnailsContainer.x because it could be in the process of tweening, so we keep track of the end/destination value and add/subtract from it when creating our tweens.
  var _minScrollX:Number; //we know the maximum x value for _thumbnailsContainer is 0, but the mimimum value will depend on how many thumbnail images it contains (the total width). We calculate it in the _setupThumbnails() method and store it here for easier/faster scrolling calculations in the _enterFrameHandler()

  //function SlideshowExample() {
  //super();

  //activate the plugins that we'll be using so that TweenLite can tween special properties like filters, colorTransform, and do autoAlpha fades.
  TweenPlugin.activate([AutoAlphaPlugin, ColorTransformPlugin, GlowFilterPlugin, BlurFilterPlugin]);//i added BlurFilterPlugin at the end

  _progressBar = this.getChildByName("progress_mc") as MovieClip;
  _arrowLeft = this.getChildByName("arrowLeft_mc") as MovieClip;
  _arrowRight = this.getChildByName("arrowRight_mc") as MovieClip;

  //////////my additions to make progress bay blurry
  TweenLite.to(progress_mc.progressBar_mc.gradientbar_appLoader_mcPopUp_mc, 0, {blurFilter:{blurX:21, blurY:8}});//i added this line to make ProgressBar_mc to blur
  TweenLite.to(progress_mc.rectangleGray, 0, {blurFilter:{blurX:21, blurY:8}});//i added this line to make ProgressBar_mc to blur

  _arrowLeft.visible = _arrowRight.visible = false;
  _imagesContainer = new Sprite();
  this.addChildAt(_imagesContainer, 0);

  _thumbnailsContainer = new Sprite();
  addChild(_thumbnailsContainer);
  //_thumbnailsContainer.x = -550;//moves x position of thumbnails, instead done in line 273 thumbnail.x = curX - 590;
  _thumbnailsContainer.y = _IMAGE_HEIGHT;//moves y position of thumbnails
  _thumbnailsContainer.alpha = 0; //we want alpha 0 initially because we'll fade it in later when the thumbnails load.
  _thumbnailsContainer.visible = false; //ensures nothing is clickable.

  var xmlLoader:XMLLoader = new XMLLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/data.xml", {onComplete:_xmlCompleteHandler});
  xmlLoader.load();
 //}

  function _xmlCompleteHandler(event:LoaderEvent):void {
  _slides = [];
  var xml:XML = event.target.content; //the XMLLoader's "content" is the XML that was loaded.
  var imageList:XMLList = xml.image; //In the XML, we have <image /> nodes with all the info we need.
  //loop through each <image /> node and create a Slide object for each.
  for each (var image:XML in imageList) {
_slides.push( new Slide(image.@name,
	  image.@description,
	  new ImageLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/thumbnails/appThmb_imgs/" + image.@name + ".jpg",
		  {
		   name:image.@name + "Thumb",
		   width:_THUMB_WIDTH,
		   height:_THUMB_HEIGHT,
		   //centerRegistration:true,//messes up the code as places SWFLoader in the upper left corner which is 0,0 coordinates
		   //x:260, y:320,//doesn't work here but works in line 69
		   scaleMode:"proportionalInside",
		   bgColor:0x000000,
		   estimatedBytes:13000,
		   onFail:_imageFailHandler}),
	  new SWFLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/images/" + image.@name + ".swf",
		   {
			name:image.@name + "Image",
			width:_IMAGE_WIDTH,
			height:_IMAGE_HEIGHT,
			//centerRegistration:true,//messes up the code as places SWFLoader in the upper left corner which is 0,0 coordinates
			x:0, y:144,
			scaleMode:"proportionalInside",
			bgColor:0x000000,
			estimatedBytes:820000,
			onFail:_imageFailHandler})
	  )
   );
  }

  //now create a LoaderMax queue and populate it with all the thumbnail ImageLoaders as well as the very first full-size ImageLoader. We don't want to show anything until the thumbnails are done loading as well as the first full-size one. After that, we'll create another LoaderMax queue containing the rest of the full-size images that will load silently in the background.
  var initialLoadQueue:LoaderMax = new LoaderMax({onComplete:_initialLoadComplete, onProgress:_progressHandler});
  for (var i:int = 0; i < _slides.length; i++) {
initialLoadQueue.append( _slides[i].thumbnailLoader );
  }
  initialLoadQueue.append(_slides[0].imageLoader); //make sure the very first full-sized image is loaded initially too.
  initialLoadQueue.load();

  _setupThumbnails();
 }

  function _initialLoadComplete(event:LoaderEvent):void {
  //now that the initial load is complete, fade out the progressBar. autoAlpha will automatically set visible to false once alpha hits 0.
  TweenLite.to(_progressBar, 0.5, {autoAlpha:0});
  //fade in the thumbnails container
  TweenLite.to(_thumbnailsContainer, 1, {autoAlpha:1});
  _setupArrows();
  //setup the ENTER_FRAME listeners that controls the thumbnail scrolling behavior at the bottom
  this.stage.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true);

  //now put all the remaining images into a LoaderMax queue that will load them one-at-a-time in the background in the proper order. This can greatly improve the user's experience compared to loading them on demand which forces the user to wait while the next image loads.
  var imagesQueue:LoaderMax = new LoaderMax({maxConnections:1});
  for (var i:int = 1; i < _slides.length; i++) {
imagesQueue.append( _slides[i].imageLoader );
  }
  imagesQueue.load();

  //now start the slideshow
  _showNext(null);
 }

 //loops through all the thumbnail images and places them in the proper order across the bottom of the screen and adds CLICK_THUMBNAIL listeners.
  function _setupThumbnails():void {  
  var l:int = _slides.length;
  var curX:Number = _THUMB_GAP;
  for (var i:int = 0; i < l; i++) {
var thumbnail:Sprite = _slides[i].thumbnail;
_thumbnailsContainer.addChild(thumbnail);
TweenLite.to(thumbnail, 0, {colorTransform:{brightness:0.5}});
_slides[i].addEventListener(Slide.CLICK_THUMBNAIL, _clickThumbnailHandler, false, 0, true);
thumbnail.x = curX;
thumbnail.y = 176;//defines y position of the thumbnails row
curX += _THUMB_WIDTH + _THUMB_GAP;
  }
  _minScrollX = _IMAGE_WIDTH - curX;
  if (_minScrollX > 0) {
_minScrollX = 0;
  }
 }

  function _setupArrows():void {
  _arrowLeft.alpha = _arrowRight.alpha = 0;
  _arrowLeft.visible = _arrowRight.visible = true;
  _arrowLeft.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler, false, 0, true);
  _arrowLeft.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler, false, 0, true);
  _arrowLeft.addEventListener(MouseEvent.CLICK, _showPrevious, false, 0, true);
  _arrowRight.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler, false, 0, true);
  _arrowRight.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler, false, 0, true);
  _arrowRight.addEventListener(MouseEvent.CLICK, _showNext, false, 0, true);
 }

  function _showNext(event:Event=null):void {
  //if there's a _loadingSlide we should assume that the next Slide would be AFTER that one. Otherwise just get the one after the _curSlide.
  var next:int = (_loadingSlide != null) ? _slides.indexOf(_loadingSlide) + 1 : _slides.indexOf(_curSlide) + 1;
  if (next >= _slides.length) {
next = 0;
  }
  _requestSlide(_slides[next]);
 }

  function _showPrevious(event:Event=null):void {
  //if there's a _loadingSlide we should assume that the previous Slide would be BEFORE that one. Otherwise just get the one before the _curSlide.
  var prev:int = (_loadingSlide != null) ? _slides.indexOf(_loadingSlide) - 1 : _slides.indexOf(_curSlide) - 1;
  if (prev < 0) {
prev = _slides.length - 1;
  }
  _requestSlide(_slides[prev]);
 }

  function _requestSlide(slide:Slide):void {
  if (slide == _curSlide) {
return;
  }
  //kill the delayed calls to _showNext so that we start over again with a 5-second wait time.
  TweenLite.killTweensOf(_showNext);
  if (_loadingSlide != null) {
_cancelPrioritizedSlide(); //the user must have skipped to another Slide and didn't want to wait for the one that was loading.
  }
  //if the requested Slide's full-sized image hasn't loaded yet, we need to show the progress bar and wait for it to load.
  if (slide.imageLoader.progress != 1) {
_prioritizeSlide(slide);
return;
  }
  //fade the old Slide and make sure it's not highlighted anymore as the current Slide.
  if (_curSlide != null) {
TweenLite.to(_curSlide.image, 0.5, {autoAlpha:0});
_curSlide.setShowingStatus(false);
  }
  _curSlide = slide;
  _imagesContainer.addChild(_curSlide.image); //ensures the image is at the top of the stacking order inside the _imagesContainer
  TweenLite.to(_curSlide.image, 0.5, {autoAlpha:1}); //fade the image in and make sure visible is true.
  _curSlide.setShowingStatus(true); //adds an outline to the image indicating that it's the currently showing Slide.
  TweenLite.delayedCall(5, _showNext); //create a delayedCall that will call _showNext in 5 seconds.
 }

  function _prioritizeSlide(slide:Slide):void {
  TweenLite.to(_progressBar, 0.5, {autoAlpha:1}); //show the progress bar
  _loadingSlide = slide;
  _loadingSlide.imageLoader.addEventListener(LoaderEvent.PROGRESS, _progressHandler);
  _loadingSlide.imageLoader.addEventListener(LoaderEvent.COMPLETE, _completePrioritizedHandler);
  _loadingSlide.imageLoader.prioritize(true); //when the loader is prioritized, it will jump to the top of any LoaderMax queues that it belongs to, so if another loader is in the process of loading in that queue, it will be canceled and this new one will take over which maximizes bandwidth utilization. Once the _loadingSlide is done loading, the LoaderMax queue(s) will continue loading the rest of their images normally.
 }

  function _cancelPrioritizedSlide():void {
  TweenLite.to(_progressBar, 0.5, {autoAlpha:0}); //hide the progress bar
  _loadingSlide.imageLoader.removeEventListener(LoaderEvent.PROGRESS, _progressHandler);
  _loadingSlide.imageLoader.removeEventListener(LoaderEvent.COMPLETE, _completePrioritizedHandler);
  _loadingSlide = null;
 }

  function _completePrioritizedHandler(event:LoaderEvent):void {
  var next:Slide = _loadingSlide; //store it in a local variable first because _cancelPrioritizedSlide() will set _loadingSlide to null.
  _cancelPrioritizedSlide();
  _requestSlide(next);
 }

  function _progressHandler(event:LoaderEvent):void {
  _progressBar.progressBar_mc.scaleX = event.target.progress;
 }

  function _clickThumbnailHandler(event:Event):void {
  _requestSlide(event.target as Slide);
 }

  function _rollOverArrowHandler(event:Event):void {
  TweenLite.to(event.currentTarget, 0.5, {alpha:1});
 }

  function _rollOutArrowHandler(event:Event):void {
  TweenLite.to(event.currentTarget, 0.5, {alpha:0});
 }

  function _enterFrameHandler(event:Event):void {
  if (_thumbnailsContainer.hitTestPoint(this.stage.mouseX, this.stage.mouseY, false)) {
if (this.mouseX < _SCROLL_AREA) {
 _destScrollX += ((_SCROLL_AREA - this.mouseX) / _SCROLL_AREA) * _SCROLL_SPEED;
 if (_destScrollX > 0) {  //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number below
  _destScrollX = 0;	//this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number above
 }
 TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});
} else if (this.mouseX > _IMAGE_WIDTH - _SCROLL_AREA) {
 _destScrollX -= ((this.mouseX - (_IMAGE_WIDTH - _SCROLL_AREA)) / _SCROLL_AREA) * _SCROLL_SPEED;
 if (_destScrollX < _minScrollX) {
  _destScrollX = _minScrollX;
 }
 TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});
}
  }
 }

 //if an image fails to load properly, remove it from the slideshow completely including its thumbnail at the bottom.
  function _imageFailHandler(event:LoaderEvent):void {
  var slide:Slide;
  var i:int = _slides.length;
  while (--i > -1) {
slide = _slides[i];
if (event.target == slide.thumbnailLoader || event.target == slide.imageLoader) {
 slide.dispose();
 _slides.splice(i, 1);
 _setupThumbnails();
 return;
}
  }
 }

 

and for Slide.as

 

package {
import com.greensock.TweenLite;
import com.greensock.loading.ImageLoader;
import com.greensock.loading.SWFLoader;
import com.greensock.loading.display.ContentDisplay;

import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;
import flash.text.AntiAliasType;
import flash.text.TextField;
import flash.text.TextFormat;

public class Slide extends EventDispatcher {
 public static const CLICK_THUMBNAIL:String = "clickThumbnail";

 public var name:String;
 public var thumbnailLoader:ImageLoader;
 public var imageLoader:SWFLoader;
 public var thumbnail:ContentDisplay;
 public var image:Sprite;

 public function Slide(name:String, description:String, thumbnailLoader:ImageLoader, imageLoader:SWFLoader) {
  this.name = name;
  this.thumbnailLoader = thumbnailLoader;
  this.imageLoader = imageLoader;

  this.thumbnail = thumbnailLoader.content;
  this.thumbnail.addEventListener(MouseEvent.ROLL_OVER, _rollOverThumbnailHandler);
  this.thumbnail.addEventListener(MouseEvent.ROLL_OUT, _rollOutThumbnailHandler);
  this.thumbnail.addEventListener(MouseEvent.CLICK, _clickThumbnailHandler);

  _buildImage(description);
 }

 //The image is actually a Sprite that contains some description text at the bottom. If it has descriptive text, we put a 30% opaque black bar behind the white text to make it more readable too.
 private function _buildImage(description:String):void {
  this.image = new Sprite();
  this.image.addChild(this.imageLoader.content);
  this.image.alpha = 0;

  if (description != "") {
var bgBar:Shape = new Shape();
bgBar.graphics.beginFill(0x000000, 0.3);
bgBar.graphics.drawRect(0, 0, this.image.width, 24);
bgBar.graphics.endFill();
bgBar.y = this.image.height - bgBar.height;
this.image.addChild(bgBar);

var tf:TextField = new TextField();
tf.defaultTextFormat = new TextFormat("Arial", 12, 0xFFFFFF);
tf.x = 6;
tf.y = this.image.height - 20;
tf.width = this.image.width - 12;
tf.text = description;
tf.selectable = false;
tf.embedFonts = true;
tf.multiline = false;
tf.antiAliasType = AntiAliasType.ADVANCED;
tf.filters = [new GlowFilter(0x000000, 0.8, 8, 8, 2, 2)];
this.image.addChild(tf);
  }
 }

 public function dispose():void {
  this.thumbnail.removeEventListener(MouseEvent.ROLL_OVER, _rollOverThumbnailHandler);
  this.thumbnail.removeEventListener(MouseEvent.ROLL_OUT, _rollOutThumbnailHandler);
  this.thumbnail.removeEventListener(MouseEvent.CLICK, _clickThumbnailHandler);
  this.thumbnailLoader.dispose(true);
  this.imageLoader.dispose(true);
 }

 public function setShowingStatus(showing:Boolean):void {
  if (showing) {
TweenLite.to(this.thumbnail, 0.3, {glowFilter:{alpha:1, strength:4, blurX:3, blurY:4, color:0xFFFFFF, quality:1, inner:true}});
  } else {
TweenLite.to(this.thumbnail, 0.3, {glowFilter:{alpha:0, strength:0, remove:true}});
  }
 }


 private function _rollOverThumbnailHandler(event:MouseEvent):void {
  TweenLite.to(this.thumbnail, 0.3, {colorTransform:{brightness:1}});
 }

 private function _rollOutThumbnailHandler(event:MouseEvent):void {
  TweenLite.to(this.thumbnail, 0.5, {colorTransform:{brightness:0.5}});
 }

 private function _clickThumbnailHandler(event:MouseEvent):void {
  dispatchEvent(new Event(CLICK_THUMBNAIL));
 }

}
}
Link to comment
Share on other sites

You can almost certainly accomplish that through code, yes. In fact, in general I'd stay away from building things in MovieClip timelines inside Flash as much as possible because it can complicate things and/or limit flexibility (there are a few exceptions, of course).

 

Unfortunately, your question exceeds the scope of the help we typically provide here in the GreenSock forums. It takes quite a while to read through all the code, wrap our head around what exactly is going on, identify problems, and craft better solutions. These forums are for very specific questions about GreenSock tools; they're not really for general ActionScript advice related to architecting applications. You might want to try the forums at actionscript.org or kirupa.com for that sort of thing. I really wish I had more time to devote to helping you on this.

  • Like 1
Link to comment
Share on other sites

Thank you for your suggestion.

If it is not MovieClip timelines what would be a better way to build the site in Flash?

Link to comment
Share on other sites

Could you maybe narrow your question down a bit? "How do I build an app with code" is really broad and entire books are written about it :) Did you have a specific question about a GreenSock tool?

 

It might be good to check out a few books about object oriented programming or download the source code for some simple Flash applications to study them. There are some other learning resources linked to from http://www.greensock.com/learning/

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