ukla

Here is a follow-up question. I have a full screen image gallery using bitmaps and scrollRect. In one example I tween the alpha (fading in on white background) and in another I tween the tint (using #ffffff). Based on CPU usage it seems like tweening the tint is getting better performance. Can someone verify this to be the case?

I'd like to help but I can't go save for CS3 using CS5.

I didn't mean to leave cacheAsBitmap set to true. I was working from one file and saving them out with various code changes. Overlooked that. I do see higher CPU usage via my Task Manager when rendering the vector versions. Thanks for the clarification.

Ok, I am now thoroughly confused. Just did performance tests: vector tween, vector tween using scrollrect, bitmap tween, bitmap tween using scroll rect. If the code for the tests was correctly written, the vector tweens use much less memory than the bitmap tweens. Am I wrong?

Haven't been checking frame rates. But I'll get that set up. Just dissatisfied with the jittery motion. Even without scrollRect setting it to whole pixels it is still jittery. I guess I expected better results than the vector version but I'm not seeing any difference. I'm running 32 -bit Windows 7 on a 27" iMac > Intel Core2 Dueo 3.06 GHz, 4 GB RAM. Certainly not the fastest computer in the world, but still fast. I'll keep plugging away.

Meh. Not seeing much difference.

I hear that ... but seems like a tall order considering that the elements in the land scape will have animation (ie. waves). I am referring to the "camera" idea ... not just creating a bitmap from the vector.

Yes, this helps. Too bad that vectors provide very manageable file size but suck when it comes to rendering.

I'm in the early stages of a project - a long, horizontal landscape scene that will ultimately serve as a highly animated history time line. Before making decisions on the logic and how to build the project, I needed to do some testing in order to determine how to get the best rendering performance. I figured it would be wise to see how the scene performs moving horizontally from one end to the other over the course of 10 seconds. The result is quite jittery and I'm not sure how to resolve the issue. This example uses scrollRect and I am fully aware that the landscape scene will be rendered on whole pixels. But even without scrollRect, performance doesn't change. Files are attached. PLEASE DO NOT LIFT ANY OF THE GRAPHICS / TEXTURES! While only a rough concept, please show respect for creative property.

That doesn't surprise me! You are always incredibly thorough! Which reminds me ... my membership expired a couple of weeks ago. Time to renew.

I've dealt with this before. I built an embeddable video player that needed to load fonts.swf from another domain. This code was written before I started using GreenSock loading. But it should point you in the right direction. Pay attention to the following: import flash.system.LoaderContext; import flash.system.SecurityDomain; import flash.system.ApplicationDomain; var context:LoaderContext = new LoaderContext(); context.checkPolicyFile = true; context.securityDomain = SecurityDomain.currentDomain; package com.blueion { import flash.display.Loader; import flash.display.MovieClip; import flash.display.Bitmap; import flash.text.Font; import flash.net.URLRequest; import flash.events.* import flash.system.LoaderContext; import flash.system.SecurityDomain; import flash.system.ApplicationDomain; public class LoadDisplayObject extends MovieClip { private var _loader :Loader = new Loader(); private var _path :String; private var _filetype :String; //- CONSTRUCTOR ------------------------------------------------------------------------------------------- public function LoadDisplayObject(path:String,type:String):void { _path = path; _filetype = type; addChild(_loader); addEventListener(Event.ADDED_TO_STAGE, onAddedToStage); addEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage); } //- PRIVATE METHODS --------------------------------------------------------------------------------------- private function init():void { removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteListener, false, 100); _loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,loadProgressListener, false, 100); _loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadIOErrorListener, false, 100); var _localmode = new RegExp("file://").test(loaderInfo.url); if (_localmode){ this._loader.load(new URLRequest(_path)); } else { var context:LoaderContext = new LoaderContext(); context.checkPolicyFile = true; context.securityDomain = SecurityDomain.currentDomain; _loader.load(new URLRequest(_path),context); } } private function loadProgressListener(e:ProgressEvent):void { this.dispatchEvent(e); } private function loadCompleteListener(e:Event):void { e.target.removeEventListener(Event.COMPLETE, loadCompleteListener); e.target.removeEventListener(ProgressEvent.PROGRESS,loadProgressListener); e.target.removeEventListener(IOErrorEvent.IO_ERROR,loadIOErrorListener); if (_filetype == "font"){ showEmbeddedFonts(); } if (_filetype == "image"){ var bitmap = Bitmap(_loader.content); bitmap.smoothing = true; } if (_filetype == "swf"){ } this.dispatchEvent(e); } private function showEmbeddedFonts():void { var fonts:Array = Font.enumerateFonts(); fonts.sortOn("fontName",Array.CASEINSENSITIVE); for (var i:int=0;i trace("Embedded fonts = " + fonts[i].fontName + ", " + fonts[i].fontStyle); } } private function loadIOErrorListener(e:IOErrorEvent):void { // Data did not load. trace("LoadDisplayObject: loadIOErrorListener > error"); this.dispatchEvent(e); this.destroy(); } private function onAddedToStage(e:Event):void { this.init(); } private function onRemovedFromStage(e:Event):void { this.destroy(); } private function destroy():void { this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); this.removeEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage); try{ removeChild(this._loader); _loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loadCompleteListener); _loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS,loadProgressListener); _loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR,loadIOErrorListener); _loader.close(); _loader = null; }catch(e:Error){ // Do nothing. _loader = null; } } //- PUBLIC METHODS ---------------------------------------------------------------------------------------- //- GETTERS & SETTERS ---------------------------------------------------------------------------------------- public function get filetype():String { return _filetype; } } }

Instead of doing it this way, you can simply write this for each font you use > "Font.registerFont(Georgia);" I attached any example of my fonts.swf file that I use regularly. Then I just load fonts.swf into any other swf that needs it.

Cool deal. Seems like this was strictly a way to help with file size rather than performance. I appreciate the info.

Thanks tripso. Makes perfect sense. Love that site. I remember when it won an FWA and I'm glad to see that it is still around. As a follow up, are you using ScrollRect? And in your experience, what is the best / most efficient way to detect if the tile is on the stage?

This is a bit off topic since I doesn't have anything to do with GreenSock. I was hoping that someone could point me in the right direction on how this is being done. In both of the sites below you will notice that there is some sort of "grid loading" going on. Similar to Google maps when you pan an area. http://www.capri-sonne.com/de/deu/kids.html http://pinocchioisonfire.org/#/experience/a_closer_look (zoom in on artwork and then pan - you will see that the image is blurry at first and then the high resolution pixels load in). Does anyone know how this is being done?

Ill get something to you in a bit ... have a client pitch at 11am.

You'll have to refresh my memory. Are you trying to scale an image (or map) up and then pan that image?

I use this bit of code after the fonts.swf loads ... just to trace all available fonts. Might be useful. var fonts:Array = Font.enumerateFonts(); fonts.sortOn("fontName",Array.CASEINSENSITIVE); for (var i:int=0;i{ trace("Embedded fonts = " + fonts[i].fontName + ", " + fonts[i].fontStyle); }

Yes, that makes sense. In my example I am doing it differently. I have a bitmap that resides below the loader (image). Each time a new image is loaded, I draw the current image data to the bitmap. So it appears as though images are loading on top of images.

Jack, My apologies for the poor example. Here is a full screen image site I did a few months ago - http://www.brennanwesley.com/. In that example, I created a full screen image class. Basically it is a single loader that loads content over and over and over. All of the images are the same size. So my objective in this case is to use your Loader package for future projects ... just trying to understand best practices. Thanks, Craig PS. I tend to over complicate things. Working on fixing that.

I have an instance of the ImageLoader. _loader = new ImageLoader("image.jpg", {name:"image1", x: stage.stageWidth * 0.5, y: stage.stageHeight * 0.5, width: 800, height: 600, container:this, scaleMode:"proportionalOutside", centerRegistration:true, onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler}); _loader.load(); Later I want to load an image into that same ImageLoader (_loader). _loader.unload(); _loader = new ImageLoader("image2.jpg", {name:"image2", container:this, scaleMode:"proportionalOutside", centerRegistration:false}); _loader.load(); Is that the best way to do it? I am wondering b/c I am creating another "new ImageLoader" ... figured it would be easier to write _loader.load(urlOrRequest:*, vars:Object = null).

Perfect. Thanks!

Regarding the nesting .... I thought you might explain how to create a mainqueue - then nest imagesqueue and logosqueue within mainqueue. Anyhow, that was my thinking when I orginally started the thread. Sorry if I am not being clear. I find it difficult to convey my thoughts in words when it comes to coding. I also find that I try to be TOO FLEXIBLE when I program. Maybe I just need to chill out.

I used XMLLoader to load the xml file but didn't show the code. It define loaders for "fonts.swf" and "style.css". I dig that and it worked out well. However, I NEVER see myself referencing xml images by name in my ActionScript code (as you show in your example). That really kills flexibility for me. I have producers editing xml files when clients request edits. If one of my producers changes the name of the image ... well ... I'd be screwed b/c my ActionScript would be calling an image (by name) that doesn't exist. mainqueue.append( new ImageLoader(image, {name: list[i].attribute("id"), estimatedBytes:2400, container:item, alpha:1, width:764, height:340}) ); I guess that I wasn't very clear. So let's look at it like this ... do I always need to specify a container? What if I want the image loaded but don't want to target a container?

Today was the first time that I've had a chance to dig in. So please forgive my ignorance. Right now I am trying to determine how useful these classes will be to me. Ok, so for my first test I created a simple xml document. It has three items like so: In the code below I parse through the xml and load all of the images ("myimage1.jpg", "myimage2.jpg", "myimage3.jpg") via LoaderMax into a new movie clips. So far so good. _mainqueue = new LoaderMax({name:"mainQueue", onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler}); var xpos = 0; for (var i:int=0;i var item:MovieClip = new MovieClip(); var image = _imagepath + list[i].attribute("image"); _mainqueue.append( new ImageLoader(image, {name: list[i].attribute("id"), estimatedBytes:2400, container:item, alpha:1, width:764, height:340}) ); item.x = xpos; _itemholder.addChild(item); _items.push(item); xpos = xpos + 50; } _mainqueue.load(); However, now I want to load ALL of the images at once (images and logos). I want three movie clips - each movie clip contains the image and the logo on top. So "myimage1.jpg" would have "mylogo1.png" on top. What would be the best practice for this? If I load everything together, there is a good chance that the logos will load before the images - resulting in the logos being covered by the images. Make sense? I don't normally LOAD UP everything like this. But I just wanted to give it a shot. It could work well for flash elements on a site.