ngrinchenko

I have two seemingly identical files. Same stage size, same code, but position of ImageLoader and SWFLoader differs. On my test file where I did all the figuring out everything works fine. Name of the file is "SlideshowExampleA.fla"(RED stage) The loaders are in the middle of the stage, thumb ImageLoader works fine, but once I bring all the elements into the my main flash file suddenly the ImageLoader and SWFLoader are positioned with its upper left hand corner (Loaders 0,0 coordinates) in the center of the stage, "SlideshowExampleB.fla" (BLUE stage) I only copy/pasted the code and the elements but there is a change. I can not figure out why the position would be different with the same assigned coordinates for ImageLoader and SWFLoader?

I am customising an image thumb scroller. and trying to follow up previously developed code. All worked fine until the last moment when thumbnails bar is positioned as if its starting point is in the middle of the screen. I suppose it was developed for the flash screen layout with centered coordinates. My stage probably has them set to the upper left corner. I can not make the bar move. My stage size is 1024 x 768 Where do I do my math in the code so the thumbnails will be located in the middle of the screen rather than in its right hand. Here are the code snippets responsible for the thumbnails build up: const _THUMB_WIDTH:Number = 50; const _THUMB_HEIGHT:Number = 64; const _IMAGE_WIDTH:Number = 860;//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() _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, //x:260, y:320,//doesn't work here but works in line 69 scaleMode:"proportionalInside", bgColor:0x000000, estimatedBytes:13000, onFail:_imageFailHandler}), //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 = -234;//defines y position of the thumbnails row curX += _THUMB_WIDTH + _THUMB_GAP; } _minScrollX = _IMAGE_WIDTH - curX; if (_minScrollX > 0) { _minScrollX = 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}); } } } Just in case if something is missing here is the code in its entirety: 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 = 860;//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, //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, x:-420, y:-260, 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 = -234;//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; } } }

I run into an additional problem. Once I placed the code on my main timeline suddenly elements created by code are located in the lower right quadrant of the stage. I suppose it is because my 0 point specified at the center of the stage. I started to alter your code to move SWFLoader and thumbs loader to where I want them to be. I am afraid that by me adding new code I will cripple what was done before me. Please take a look at what I have done: _thumbnailsContainer = new Sprite(); addChild(_thumbnailsContainer); _thumbnailsContainer.x = -350; _thumbnailsContainer.y = _IMAGE_HEIGHT-55; _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. I added the line: _thumbnailsContainer.x = -350; to define the x position as it was not defined before. In this line I added "-55" value to move the y position: _thumbnailsContainer.y = _IMAGE_HEIGHT-55; Then in the ImageLoader and SWFLoader I added lines x:-260, y:-320, somehow it works for SWFLoader but not for ImageLoader Here is the complete code for both of them: 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, //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, x:-260, y:-320, scaleMode:"proportionalInside", bgColor:0x000000, estimatedBytes:820000, onFail:_imageFailHandler}) Then in the Slide.as file I have to move the text position and the grey bar position, by changing numbers to negative in this line: bgBar.graphics.drawRect(-11, -22, this.image.width, 24); and numbers in these lines: tf.x = 6;//text indent to the right tf.y = this.image.height - 20;//positions the text in the text background bar tf.width = this.image.width - 12;//positions the text in the text background bar Her is the full block of code from Slide.as: if (description != "") { var bgBar:Shape = new Shape(); bgBar.graphics.beginFill(0x000000, 0.3);//defines color and transparency of the text background bar bgBar.graphics.drawRect(0, 0, this.image.width, 24);//defines position and size of the text background bar. height =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;//text indent to the right tf.y = this.image.height - 20;//positions the text in the text background bar tf.width = this.image.width - 12;//positions the text in the text background bar 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); } Please let me know if what I have done somehow cripples the functionality of the code, and can be done significantly simpler then what I have come up with?

Just wanted to say great Thank You for your help. It all works now. My more complex Flash site is arranged with the code on the timeline. In the file with the thumbnails I stripped the code from the document class. As well deleting the "super();" I read up that even though it is useful it is optional. It seems to work. I now need to move my files around, I could not find where in the code the action script file Slide.as is referenced. I saw reference to data.xml file and understand how to write up a new route to it, but can not see anything for the Slide.as Could you please point out where the change has to happen so the code in Slide.as can be either incorporated in the main time line or properly referenced from the main timeline?

Hi, Thanks for looking into this. Unfortunately when I try the code still gives me an error in the Slide.as Here are two messages I get: Slide.as, Line 34 1046: Type was not found or was not a compile-time constant: ImageLoader. public function Slide(name:String, description:String, thumbnailLoader:ImageLoader, imageLoader:SWFLoader) { Slide.as, Line 34 1046: Type was not found or was not a compile-time constant: SWFLoader. public function Slide(name:String, description:String, thumbnailLoader:ImageLoader, imageLoader:SWFLoader) { Is it easier if I make my small thumbs swf's as well?

I tried your suggestions, but still getting errors. I made one simplified zip file with all the assets included. I could not fit "com" folder in there and did not generate swfs. I assume it will be made automatically on your side. "com" folder goes into the main directory where the main .fla file is.

I hope it is not too much over my head as I would like to make it work. Some time ago I recieved help in constracting an interactive image thumb scroller using greensock features. My biggest problem at the moment is that I can not figure out how to change the code so the thumbs would bring up the swf files and not jpg files. In other words my small thumbnails are small jpg files (as they were intended to be), but my bigger visuals (the ones which are being brought by clicking on the small thumbnails) I would like to change to an swf file (as it contains its separate animation and additional set of buttons) Here is the original code I am trying to modify: package { import com.greensock.TweenLite; import com.greensock.events.LoaderEvent; import com.greensock.loading.ImageLoader; 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.TweenPlugin; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; public class SlideshowExample extends MovieClip { private static const _THUMB_WIDTH:Number = 100; private static const _THUMB_HEIGHT:Number = 64; private static const _IMAGE_WIDTH:Number = 550; private static const _IMAGE_HEIGHT:Number = 355; private static const _THUMB_GAP:Number = 4; private static const _SCROLL_SPEED:Number = 12; private static const _SCROLL_AREA:Number = 150; private var _progressBar:MovieClip; private var _arrowLeft:MovieClip; private var _arrowRight:MovieClip; private var _slides:Array; private var _curSlide:Slide; //Slide that is currently displaying private 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. private 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) private var _thumbnailsContainer:Sprite; //the Sprite into which the thumbnail images are placed. This also allows us to slide them all at the same time. private 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. private 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() public 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]); _progressBar = this.getChildByName("progress_mc") as MovieClip; _arrowLeft = this.getChildByName("arrowLeft_mc") as MovieClip; _arrowRight = this.getChildByName("arrowRight_mc") as MovieClip; _arrowLeft.visible = _arrowRight.visible = false; _imagesContainer = new Sprite(); this.addChildAt(_imagesContainer, 0); _thumbnailsContainer = new Sprite(); addChild(_thumbnailsContainer); _thumbnailsContainer.y = _IMAGE_HEIGHT; _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("assets/data.xml", {onComplete:_xmlCompleteHandler}); xmlLoader.load(); } private 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("assets/thumbnails/" + image.@name + ".jpg", {name:image.@name + "Thumb", width:_THUMB_WIDTH, height:_THUMB_HEIGHT, scaleMode:"proportionalInside", bgColor:0x000000, estimatedBytes:13000, onFail:_imageFailHandler}), new ImageLoader("assets/images/" + image.@name + ".jpg", {name:image.@name + "Image", width:_IMAGE_WIDTH, height:_IMAGE_HEIGHT, 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(); } private 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. private 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 = 4; curX += _THUMB_WIDTH + _THUMB_GAP; } _minScrollX = _IMAGE_WIDTH - curX; if (_minScrollX > 0) { _minScrollX = 0; } } private 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); } private 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]); } private 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]); } private 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. } private 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. } private 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; } private 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); } private function _progressHandler(event:LoaderEvent):void { _progressBar.progressBar_mc.scaleX = event.target.progress; } private function _clickThumbnailHandler(event:Event):void { _requestSlide(event.target as Slide); } private function _rollOverArrowHandler(event:Event):void { TweenLite.to(event.currentTarget, 0.5, {alpha:1}); } private function _rollOutArrowHandler(event:Event):void { TweenLite.to(event.currentTarget, 0.5, {alpha:0}); } private 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) { _destScrollX = 0; } 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. private 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; } } } } } I could figure out that I have to change the line new ImageLoader("assets/images/" + image.@name + ".jpg", {name:image.@name + "Image", width:_IMAGE_WIDTH, height:_IMAGE_HEIGHT, scaleMode:"proportionalInside", bgColor:0x000000, estimatedBytes:820000, onFail:_imageFailHandler} and instead of ".jpg" put ".swf" (making sure that the names of the files are identical except for their extensions) The problem is that I get an error message in the output that flash could not convert my swf file to the bitmap. I suspect that I have to change the hard coding to specify that Loader Max should treat loading bigger swf files as swf and not as image/jpg files. I don't have enough expertise to decipher all the lines where this has to be changed. It feels that I am close to accomplishing what I need. Is it possible to point out where this change has to take place? Here is my thought process: I don't need to specify SWFLoader as LoaderMax is already specified (line 5) I don't need to change anything in lines 31-34 as "Sprite" and "Slide" could be an .swf file (line31-34) I don't need to change anything in line 50 for the same reason (line 50) I don't need to change lines 66 and 68 as image list may contain swf files (line 66 and 68) I do need to change ".jpg" to ".swf" in line 72 (line 72) No sure if there are any changes in line 82 (line 82) LoaderMax has var as imagesQueue does that need to be changed into SFWLoader? (lines98-102) I don't think anything need to be changed in lines 138-173 as " Slide" can incorporate an SWF file (lines 138-173) Not sure if there has to be a change in lines 175-177 as it specifies that slide is an image (lines 175-177) Not sure if there has to be a change in lines 182-200 from imageLoager to SWFLoader (lines 182-200) Not sure if there has to be a change in lines 239-245 in specifying SWFLoader (lines 239-245) I am attaching the .xml and .as documents as well

Wow, that's impressive. You answer so many posts on this forum and still remember my particular layout from a while ago. I only suspect that I am trying to do something utterly unadvisable and thus it sticks out? I guess this is my last attempt to have this effect. I do like the idea of the entire background being animated. I believe I saw it on some websites. I think even on greensock.com SHOWCASE segment there was a site featured about water and its entire background was an underwater shot with flickering lights. Was it a low res mp3 video file looping? Is it better to have a low res video as a background rather than timelineMax tweens? After my experience with greensock platform I came to expect that it will solve any problems, which so far seems to be the case. (I understand that Flash player issues are unrelated). In order to find a solution I decided to limit the amount of tweens running on the page and got rid of the alpha and blur settings for all individual mc's. Now the whole animation seems to run much better or is it my altered imagination? So my last question is: If I keep the tweens to a minimum with changes in position and scale within the movie, and have only one setting of alpha and blur for the entire animation sequence (as one mc), will it significantly increase the performance? I understand that my problem comes from the fact that I keep on trying to animate and entire websites background as one giant mc. Perhaps this approach just should not be tried? You replied that "unfortunately what you are trying to achieve by blurring and fading multiple objects that are stacked on top of each other is pretty much the toughest thing for Flash to handle" I would like to confirm where the problem lies. The fact that I have multiple objects?(Then was it resolved by having one big mc as one object changing blurring and fading)? or The fact that I am trying to animate/tween and entire website background and there is no particular problems with Flash unable to handle these particular filters of blurring and fading, but with the size of the animated tween. I should stay altogether away from trying to animate a large area on the site? movingLights_minimzd.fla.zip

Thanks, it worked. The proper code as you said to put it after the tweens are build: my_timeLine.currentProgress=1;

I have two time lines which I would like to play simultaneously. First one plays forward and second one plays in reverse. I can not figure out how to reverse my time line. They both are playing forward. Here is the code I try to implement to reverse the timeline: var movingLights2_timeLine:TimelineMax = new TimelineMax({currentProgress:1 repeat:-1, yoyo:true, timeScale: .5, reverse:true});

I would like to have a soft blurred colorful moving lights background on my website. This animation is intended to take an entire screen. Is it something which can be accomplished or it will cause a very poor site performance as flash player will have to redraw an entire screen all the time? import com.greensock.*; import com.greensock.easing.*; anchors.visible=false; //var movingLights_timeLine:TimelineMax = new TimelineMax({timeScale: .2}); var movingLights_timeLine:TimelineMax = new TimelineMax({repeat:-1, yoyo:true, timeScale: .2}); ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// movingLights_timeLine.appendMultiple([TweenMax.to(shapeOne, 5, {bezierThrough:[{x:366, y:467, scaleX:1, scaleY:0.7, alpha:0.4}, {x:601, y:358, scaleX:0.8, scaleY:0.2, alpha:0.3}, {x:291, y:231, scaleX:0.9, scaleY:0.7, alpha:0.7}, {x:513, y:356, scaleX:0.9, scaleY:0.2, alpha:0.2}, {x:706, y:248, scaleX:0.1, scaleY:0.2, alpha:0.3}], orientToBezier:true, scaleX:0.7, scaleY:0.5, alpha:0.7, tint:0x33ff66, ease:Sine.easeOut}), TweenMax.fromTo(shapeOne, 5, {blurFilter:{blurX:460, blurY:20, quality:1}}, {blurFilter:{blurX:110, blurY:220, quality:3}}), ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// TweenMax.to(shapeTwo_A, 5, {bezierThrough:[{x:188, y:135, scaleX:0.1, scaleY:0.2, alpha:0.7}, {x:207, y:146, scaleX:0.5, scaleY:0.7, alpha:0.4}, {x:469, y:335, scaleX:0.3, scaleY:0.3, alpha:0.3}, {x:149, y:282, scaleX:0.5, scaleY:0.3, alpha:0.4}, {x:306, y:148, scaleX:0.1, scaleY:0.1, alpha:0.3}], orientToBezier:true, scaleX:0.7, scaleY:0.5, alpha:0.7, tint:0x99cc99, ease:Sine.easeOut}), TweenMax.to(shapeTwo_B, 5, {bezierThrough:[{x:188, y:135, scaleX:0.1, scaleY:0.2, alpha:0.2}, {x:207, y:146, scaleX:0.5, scaleY:0.7, alpha:0.7}, {x:469, y:335, scaleX:0.3, scaleY:0.3, alpha:0.5}, {x:149, y:282, scaleX:0.5, scaleY:0.3, alpha:0.3}, {x:306, y:148, scaleX:0.1, scaleY:0.1, alpha:0.7}], orientToBezier:true, scaleX:0.7, scaleY:0.5, alpha:0.5, tint:0x66ffcc, ease:Sine.easeOut}), TweenMax.fromTo(shapeTwo_A, 5, {blurFilter:{blurX:160, blurY:240, quality:3}}, {blurFilter:{blurX:110, blurY:370, quality:3}}), TweenMax.fromTo(shapeTwo_B, 5, {blurFilter:{blurX:60, blurY:140, quality:3}}, {blurFilter:{blurX:210, blurY:70, quality:3}}), ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// TweenMax.to(shapeThree, 5, {bezierThrough:[{x:652, y:54, scaleX:0.1, scaleY:0.2, alpha:0.7}, {x:162, y:345, scaleX:0.5, scaleY:0.2, alpha:0.3}, {x:513, y:578, scaleX:0.2, scaleY:0.5, alpha:0.4}, {x:306, y:648, scaleX:0.1, scaleY:0.2, alpha:0.7}, {x:706, y:648, scaleX:0.1, scaleY:0.2, alpha:0.3}], orientToBezier:true, scaleX:0.7, scaleY:0.5, alpha:0.5, tint:0xff0066, ease:Sine.easeOut}), TweenMax.fromTo(shapeThree, 5, {blurFilter:{blurX:160, blurY:240, quality:3}}, {blurFilter:{blurX:110, blurY:370, quality:3}}), ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// TweenMax.to(shapeFour_A, 5, {bezier:[{x:28, y:107, scaleX:0.7, scaleY:0.3, alpha:0.5}, {x:429, y:371, scaleX:1.1, scaleY:0.7, alpha:0.3}, {x:20, y:137, scaleX:0.1, scaleY:0.7, alpha:0.8}, {x:830, y:592, scaleX:0.3, scaleY:0.7, alpha:0.4}, {x:206, y:608, scaleX:0.1, scaleY:0.2, alpha:0.2}], orientToBezier:true, scaleX:1.2, scaleY:1.3, tint:0xff0000, ease:Sine.easeIn}), TweenMax.to(shapeFour_B, 5, {bezier:[{x:31, y:117, scaleX:0.7, scaleY:0.3, alpha:0.3}, {x:409, y:351, scaleX:1.1, scaleY:0.7, alpha:0.7}, {x:49, y:147, scaleX:0.1, scaleY:0.7, alpha:0.3}, {x:840, y:582, scaleX:0.3, scaleY:0.7, alpha:0.7}, {x:246, y:548, scaleX:0.1, scaleY:0.2, alpha:0.3}], orientToBezier:true, scaleX:0.6, scaleY:0.7, tint:0xff0000, ease:Sine.easeIn}), TweenMax.fromTo(shapeFour_A, 5, {blurFilter:{blurX:160, blurY:40, quality:3}}, {blurFilter:{blurX:110, blurY:70, quality:3}}), TweenMax.fromTo(shapeFour_B, 5, {blurFilter:{blurX:60, blurY:140, quality:3}}, {blurFilter:{blurX:110, blurY:370, quality:3}}), ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// TweenMax.to(shapeFive_A, 5, {bezierThrough:[{x:119, y:310, scaleX:0.2, scaleY:0.3, alpha:0.3}, {x:199, y:247, scaleX:0.1, scaleY:0.3, alpha:0.5}, {x:239, y:291, scaleX:0.8, scaleY:0.3, alpha:0.7}, {x:92, y:315}, {x:413, y:568, scaleX:0.6, scaleY:0.4, alpha:0.3}], orientToBezier:true, scaleX:0.3, scaleY:0.2, alpha:0.7, tint:0xffccff, ease:Sine.easeOut}), TweenMax.to(shapeFive_B, 5, {bezierThrough:[{x:139, y:310, scaleX:0.1, scaleY:0.3, alpha:0.5}, {x:199, y:247, scaleX:0.5, scaleY:0.8, alpha:0.8}, {x:239, y:291, scaleX:1.8, scaleY:1.3, alpha:0.5}, {x:92, y:315}, {x:413, y:568, scaleX:0.1, scaleY:0.3, alpha:0.5}], orientToBezier:true, scaleX:0.7, scaleY:0.5, alpha:0.5, tint:0xffff69, ease:Sine.easeOut}), TweenMax.fromTo(shapeFive_A, 5, {blurFilter:{blurX:260, blurY:40, quality:3}}, {blurFilter:{blurX:110, blurY:70, quality:3}}), TweenMax.fromTo(shapeFive_B, 5, {blurFilter:{blurX:60, blurY:240, quality:3}}, {blurFilter:{blurX:110, blurY:370, quality:3}}), ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// TweenMax.to(shapeSix_A, 5, {bezierThrough:[{x:230, y:136, scaleX:0.7, scaleY:0.3, alpha:0.7}, {x:430, y:530, scaleX:.1, scaleY:.1, alpha:0.4}, {x:356, y:552, scaleX:0.2, scaleY:0.3, alpha:0.8}, {x:450, y:414, scaleX:0.7, scaleY:0.3, alpha:0.4}, {x:880, y:130, scaleX:0.7, scaleY:0.3, alpha:.7}], orientToBezier:true, scaleX:.7, scaleY:.7, alpha:0.5, tint:0x33ffff, ease:Sine.easeOut}), TweenMax.to(shapeSix_B, 5, {bezierThrough:[{x:210, y:116, scaleX:0.1, scaleY:0.3, alpha:0.3}, {x:390, y:490, scaleX:.6, scaleY:.6, alpha:0.2}, {x:356, y:552, scaleX:0.2, scaleY:0.3, alpha:0.6}, {x:450, y:414, scaleX:0.7, scaleY:0.3, alpha:0.3}, {x:910, y:170, scaleX:0.7, scaleY:0.3, alpha:.5}], orientToBezier:true, scaleX:.3, scaleY:.7, alpha:0.4, tint:0x6600ff, ease:Sine.easeOut}), TweenMax.fromTo(shapeSix_A, 5, {blurFilter:{blurX:60, blurY:240, quality:3}}, {blurFilter:{blurX:210, blurY:170, quality:3}}), TweenMax.fromTo(shapeSix_B, 5, {blurFilter:{blurX:260, blurY:40, quality:3}}, {blurFilter:{blurX:110, blurY:270, quality:3}})], 0, //offset number, i.e. how long it waits before to start TweenAlign.START,//tweens start times are aligned, or TweenAlign.SEQUENCE so they start one after another 0);//staggers the TweenAlign.START time, //i.e. waits 0.2 seconds before each tween starts from the beginning of the append multiple, //so the overlap (almost like specifying a "-" value) //if TweenAlign.SEQUENCE then like "+" value as each tween waits 0.2 seconds before it starts

I am working with the bezier tween. I wanted my mc to have different scale and alpha at different locations. Rather than specifying additional TweenMax.to instances running alongside the bezier tween I added scale and alpha inside the location brackets. It seems to work but I am not sure if I will have problems down the road, like some bugs due to the code manipulation. I also tried to add tinting options in the same manner but that did not work. So here is how the original code looked: TweenMax.to(mc, 5, {bezier:[{x:208, y:107}, {x:129, y:371}, {x:20, y:137}, {x:310, y:362}], orientToBezier:true, scaleX:1.7, scaleY:1.3, tint:0x99ccff, ease:Sine.easeIn}); and this is my modified code: TweenMax.to(mc, 5, {bezier:[{x:231, y:117, scaleX:0.7, scaleY:0.3, alpha:0.2}, {x:109, y:351, scaleX:1.1, scaleY:0.7, alpha:0.9}, {x:49, y:147, scaleX:0.1, scaleY:0.7, alpha:0.2}, {x:840, y:582, scaleX:0.3, scaleY:0.7, alpha:0.9}], orientToBezier:true, scaleX:0.6, scaleY:0.7, tint:0xff0000, ease:Sine.easeIn}); Is it something I better not mess with or if it works - it works and will work without future bugs if it works now?

Thanks for looking into my code. I am relatively new to the coding part, so it is very important for me to know that I am on the right track and arrange things as they are supposed to be arranged. Best Regards, Nikolai

Hi, thanks for looking into my issue. It is definitely me, since I am not sure where I went wrong I can not present clearly where the problem is. Please take a look at the attached file.

I started to develop an animation sequence and it looks to me that the way the code played out is way to cumbersome. I would like to find out if it would be possible to do the same thing with more coherent coding. I need to have an items animating out of specified setting to the one present on the screen, i.e. out of the empty screen the animation is assembled. It is convenient to have the final look of assembled items on the screen. So I tried to used to animate "from" rather than "to" but somehow it did not work. I also tried to apply "fromTo" but that did not work either. I ended up specifying "autoAlpha:0" and time duration at "0", this made all my mc's invisible. I also wanted to have a 3 step animation to an mc. It comes out of the dart, brights up and gets bigger, and then goes to normal stat as present on the screen So presently I have 3 lines of code for that. Line 1: To make it invisible Line 2. To make it come up to the bigger and brighter setting Line 3: Come to the present settings on the stage. Could've it done differently? I am also not sure if append multiple was the best choice to handle my multiple buttons. I am attached the code and the file. Please let me know if what I did make sense? import com.greensock.*; import com.greensock.easing.*; ////////////////////////////// TweenMax.to(CrystalSparkle_mc, 0, {autoAlpha:0, colorMatrixFilter:{contrast:1.3, brightness: -.9, saturation: 0.2}}); TweenMax.to(prdctsInfo_mc.Title_mc, 0, {autoAlpha:0}); TweenMax.to(prdctsInfo_mc.line_mc, 0, {autoAlpha:0, scaleX:0, blurFilter:{blurX:5, blurY:2, quality:3}}); TweenMax.to(prdctsInfo_mc.featuredPrdcts_mc, 0, {autoAlpha:0, blurFilter:{blurX:15, blurY:12, quality:3}}); var CrystalSparkle_tl:TimelineMax = new TimelineMax({timeScale: 1}); CrystalSparkle_tl.append( TweenMax.to(CrystalSparkle_mc, 1.2, {autoAlpha:1, colorMatrixFilter:{contrast:1, brightness: -.1, saturation: 0.2}, ease:Sine.easeOut})); CrystalSparkle_tl.append( TweenMax.to(CrystalSparkle_mc, .6, {colorMatrixFilter:{brightness: 1}, ease:Sine.easeOut}), -.25); CrystalSparkle_tl.append( TweenMax.to(CrystalSparkle_mc, .6, {colorMatrixFilter:{saturation: 1}, ease:Sine.easeOut}), -.4); CrystalSparkle_tl.append( TweenMax.to(prdctsInfo_mc.Title_mc, .5, {autoAlpha:.5, scaleX:1.5, scaleY:1.5, blurFilter:{blurX:50, blurY:50, quality:3}, colorMatrixFiltert:{brightness:3}, ease:Sine.easeOut}), -1); CrystalSparkle_tl.append( TweenMax.to(prdctsInfo_mc.Title_mc, .5, {autoAlpha:1, scaleX:1 , scaleY:1 , blurFilter:{blurX:0, blurY:0, quality:3}, ease:Sine.easeOut}), -.3); CrystalSparkle_tl.append( TweenMax.to(prdctsInfo_mc.line_mc, .9, {autoAlpha:1, scaleX:1, blurFilter:{blurX:0, blurY:0, quality:3}, ease:Sine.easeOut}), -.7); CrystalSparkle_tl.append( TweenMax.to(prdctsInfo_mc.featuredPrdcts_mc, .7, {autoAlpha:1, blurFilter:{blurX:0, blurY:0, quality:3}, ease:Sine.easeOut}), -.5); CrystalSparkle_tl.appendMultiple([TweenMax.from(prdctsInfo_mc.btns_mc.Sumix28_btn, .25, {autoAlpha:0, blurFilter:{blurX:50, blurY:50, quality:3}, ease:Sine.easeOut}), TweenMax.from(prdctsInfo_mc.btns_mc.Sumix9_btn, .25, {autoAlpha:0, blurFilter:{blurX:50, blurY:50, quality:3}, ease:Sine.easeOut}), TweenMax.from(prdctsInfo_mc.btns_mc.Sumix9RGB_btn, .25, {autoAlpha:0, blurFilter:{blurX:50, blurY:50, quality:3}, ease:Sine.easeOut})], -.5, TweenAlign.START, 0.09);

Thank you, I appreciate your feedback. It sets me in a right direction.

I have issues on how Flash renders letterforms if I use them as a masking object/layer. I am not sure if I can use any of the GreenSock features to help me find a solution for this problem. So let me describe what I am struggling with and perhaps someone will point me in a right direction or say that this is Flash strictly problem. I created this effect that a type button is lit up as if with a spot light. It is brighter in the middle and darkens to the left and right and a little bit top and bottom. A bright spot is an oval shaped in the middle. On roll over this oval brightens up and grows in size. So I apply alpha and scale in AS3 with TweenMax. Everything worked fine until the button was on the black background as I covered a white text button with a black shape with a cut out oval in the middle. Please see right most button in on the bottom: http://www.888acolyte.com//loadingAssets/appimgCollageF1A.html(please open in FireFox, for some reason it works better there) Dark shade grows and fades, which makes the button look brighter. Black shape is undetectable as long as the background is black. Then I decided to put the button on a colorful background and obviously black shade can not be used anymore. So I used letterforms as a mask layer and masked the aforementioned black shade shape. So it looks like it grows and lightens inside the buttons letterforms. Technically it works as I intended. But it seems that masks doesn't masks letters precisely. It makes each lettershape slightly thinner, as if shaving off the stroke weight off the letterforms. Would not be an issue but I need to put the letter formed masked shape on top of unmasked letterform shape. They do not match. I see the white borders from underneath the masked dark shape lettershape. It creates an embossed like look. It looks like an application of Flash's mask thins out the lettershapes. This effect can be observed on a rollover of the middle button "ORIGINAL PRODUCTS". I thought it is a type issue and replaced Helvetica with Gill Sans but still the same effect I also tried to create a button in Photoshop and import it as a background transparent PNG. You can view this approach in the left most "ORIGINAL PRODUCTS" button. It does not really work either as lettershapes are much more distorted in the imported image(PNG) file. Flash does an excellent job of letter rendition on the screen ( well, as long as I don't apply a mask). Importing letterforms as images distorts them. I placed a larger masked PNG file at the bottom of the page, where only the upper parts of letterforms are visible. As you can see it does not import well and has a white jugged edges around the letterforms. ( I did use the "Allow Smoothing" in the Bitmap options). In my opinion if Flash would mask the letterforms as they are without thinning them it would be a perfect solution to my problem. Please let me know what would be a fix in my case? Perhaps it lies in a different method?

I would like to keep this giant blurred tween. If I were to rework it as TweenMax TimeLine animation will I still have performance issues as a full screen shape will have to be rendered on the full screen. Or issue lies in the fact that it is a SHAPE tween. Is it a rule not to have full screen continuous looping animation set as a background? Or they are better done as an imported low res flv file?

Thank you, it worked perfectly!

please try to open the second link in firefox, somehow it works there, my zipped files proved to be fine, no errors there?

It did not work out. I still see the green rectangular shape of the "holderMC_applications" May be it is not a reasonable request, but I figured that in months when I come back to look through what I have done on the site I might not remember I have used "holderMC_applications" If I have it present on the screen it allows me to know that it is there, plus if I have registration set to center I can just drag it on screen for the position. I am a novice and expect that my way if thinking what are useful and simple things is quite far away from what they really are. So if the method I seek to implement is not what people do please let me know. What are expected workarounds on this or there is none, other people just make it invisible and live with it?

I developed a TimeLine Max sequence with TweenMax transitions as an external SWF with intention to implement it in my larger flash site. Everything runs beautifully and smooth as long as I preview it directly. You can view its flauless performance at: http://www.888acolyt...CollageF1A.html Attached file name is "appimgCollageF1ATEST.fla.zip" However, as soon as I put it into my larger website via LoaderMax everything becomes jumpy. As if transition waits a little and then choppy jumps to its final state. Please view how it performs at: http://www.888acolyt...B_AppsTEST.html Attached file name is "acolyte32B_AppsTEST.fla.zip" Can it be that loader Max causes a problem or there is something else?

It was suggested to me that it is better to use a holder mc in the container rather than container:this SWF I am importing has a transparent background so I would like my holderMC to have a transparent background as well. But if I do this then I can not see on the screen and loose it in the layout for a future modification. I can not do it through code as it will affect the loading SWF. What is the smart way to still visually have it present on the stage in the Flash layout, yet be invisible when the movie renders. Is the only way would be to position it off the stage and manipulate the position of the loading SWF with x and y? var loader_appLoader:SWFLoader; if (loader_appLoader){ if(loader_appLoader.content){ loader_appLoader.unload(); } } loader_appLoader = new SWFLoader("loadingAssets/appimgCollageF.swf", { estimatedBytes:1500000, container:holderMC_applications,// more convinient and easier to manage if to place the LoaderMax into an empty mc (holderMovieClip) // if not will work as well. Then the line container:holderMovieClip, has to be replaced with container:this, // can be any size, can not be scaled as it distorts the content onProgress:progressHandler_appLoader, onComplete:completeHandler_appLoader, centerRegistration:true, alpha:1, scaleMode:"none" });

Thank you Carl, works perfectly. I did not realize it was not a Timeline issue, I will post more pertain topics in the future...

I have an animation separated into two labels in TimelineMax set up. There are two buttons which lead to animation's part A and animation part B. I set it up with addLabel/duration method. Each button has its rollover state done as var with TweenMax which I play and reverse on roll over and out. Is it possible to have a set up that once button A is clicked and leads a user to section A then the button A permanently have a rollOver state indicating that it should not be clicked as a user is in the section A already? And the same would go for button B?