Jump to content
GreenSock

kranke

Members
  • Posts

    17
  • Joined

  • Last visited

Posts posted by kranke

  1. Hey man! Thanks again.

     

    I am going to explore my options.

     

    Right now I think is working like I want it. Still some performance issues.

     

    I think on exploring gif. Can I control a gif with gsap?

     

    Also I feel Raphael a viable option, do you mean importing assets and animating or recreate the illustrator vector graphics in canvas?

     

    Is that better?

     

    You are so helpful in a crunch time. Appreciated

  2. Hi,

    Thanks for the reply. Ok I got the whole thing working (not with a loader).

     

    I am fading opacity to 1 for each div to simulate the image sequence. Problem is that fading in those in top of one another kills my memory. I am trying to figure out a way to fade back to 0 the previous frame.

     

    Here is a snippet of the code and the files are attached,

     

    function createATimeline () {
    var j = 0;
    var children = document.getElementById('chartHolder').childNodes;
    for (var j = 0; j < children.length; j++) {
    chartTimeline.append( TweenMax.to(children[j], 1, {css:{autoAlpha: 1}}) );
    }
    }
    

     

     

    What I'd like to do is fade the previous image... I hope it makes sense.

     

    See the example online

     

    http://clients.letsm...c/ri-chart.html

  3. Hi

     

    Thanks in advance for any responses.

     

    I am trying to figure out what is the best way to load a large image sequence (300 images representing a 3d movie) and control it using TimelineMax or simply staggerTo.

     

    I used to do these things super easy with Loadermax (loading the image list from XML) and tweening it.

     

    I have no idea how to do generate this array of images using javascript.

     

    Please help.

     

    Fernando.

  4. Hi I have the dynamic props plugin, will take a look into it now.

     

    However to explain myself better...

     

    I have this tween

     

    cameraZoomTween = new TweenMax(camera, 10, {z: 5000, ease: Linear.easeNone});

     

    on mouse move up the screen, I do

     

    cameraZoomTween.play()

     

    and mouse move down the screen

     

    cameraZoomTween.reverse()

     

     

    This works well

     

    but then I click in my nav to take the camera to a particular position animating also x, y and zoom.

     

    TweenMax.to(camera, 0.5, {zoom: selectedZoom, focus: selectedFocus, x: 300, y: 500, z: 1000, ease: Quint.easeOut});

     

    Then it just jumps suddenly...

     

    I tried

     

    cameraZoomTween.updateTo({zoom: selectedZoom, focus: selectedFocus, x: 300, y: 500, z: 1000})

     

    And it jumps to in addition too this I just don't know how to go back to the original tween.

     

    Because every time I click in a nav button it takes me to a whole different position. So basically i need to maintain original tween updated in mouse position and then when I clicked in a button it takes me out of that tween into a new one, then when I go back (or close that item) it should resume where it left off.

    Why not just create a new tween that incorporates the new position?

     

    So what does it mean, do I create a new Tween like this

     

    cameraZoomUpdate = new TweenMax (camera, 1, {zoom: selectedZoom, focus: selectedFocus, x: 300, y: 500, z: 1000})

     

    and if so can I switch back and forth between the

     

    cameraZoomTween and cameraZoomUpdate?

     

    Thanks for helping me out on this I almost got it working but this is the last bit that is missing.

  5. Hi

     

    I have the following

     

    camera.z = -800
    cameraZoomTween = new TweenMax(camera, 10, {z: (5000, ease: Linear.easeNone});
    cameraZoomTween.pause();
    

    on mouse move the TweenMax plays or reverses based on direction.

     

    switch (getVerticalDirection())
    		{
    			case "up":
    				if (!mouseOverInPlane)
    				{
    					TweenLite.to(cameraZoomTween, 1, {timeScale: 1, onStart: cameraZoomTween.play});
    				}
    				else
    				{
    					TweenLite.to(cameraZoomTween, 0.2, {timeScale: 0.01, onComplete: cameraZoomTween.pause});
    				}
    				break;
    
    			case "down":
    
    				if (!mouseOverInPlane)
    				{
    					//cameraZoomTween.reverse(true);
    					TweenLite.to(cameraZoomTween, 1, {timeScale: 1, onStart: cameraZoomTween.reverse});
    
    				}
    				else
    				{
    					TweenLite.to(cameraZoomTween, 0.2, {timeScale: 0.01, onComplete: cameraZoomTween.pause});
    
    				}
    
    				break;
    
    			case "none":
    
    				TweenLite.to(cameraZoomTween, 2, {timeScale: 0.01, onComplete: cameraZoomTween.pause});
    				break;
    		}
    

     

     

    This works great.

     

    However I also have buttons that take the camera out of that Tween position. My problem lies now that when I go back to the mouse movement the camera sort of jumps immediately to the previous position (from where the tween was interrupted), and what Id like if possible is sort of update that tween closer to the current position.

     

    So basically lets say, my tweening is playing and camera is at z: 1000, and a click a button to to send the camera at position 5000. When I resume the tween it goes back to position 1000 when instead I'd like it to resume from position 5000.

     

    I hope it makes sense, I have really tried my best without bothering you guys but I am pulling my hair on this one.

     

    Thanks

     

    Fernando

  6. Hi

     

    I have an alternate URL in case the image path I am supplying to the loader is invalid, however I am unsure how to detect it onChildOpen before it throws the error and use replaceURL to provide the backup path.

     

    So basically the error is detected using this.

    		imagesQueue = new LoaderMax({name: imagesQueue, requireWithRoot: this.root,
    										onChildOpen: initHandler,
    										onIOError: IOErrorHandler,
    										onChildComplete: childCompleteHandler,
    										autoDispose: true});
    
    		imagesQueue.append(new ImageLoader(imagePath, {name: nodes.title, container: imageHolder}));
    
    		function IOErrorHandler(event:LoaderEvent):void
    		{
    			trace("error occured with " + event.target + ": " + event.text);
    		}
    

     

    basically I'd like the IOErrorHandler to say, well If this URL stream is not valid and an image isn't found in here then try this other one.

    				if (image != null)
    				{
    					imagePath = String(nodes.collectionImageResizePath);
    				}
    				else
    				{
    					imagePath = String(nodes.collectionImagePath);
    				}
    
    

     

    So if the path I tried doesn't find an image then try the alternate path... I looked over at the skipFailed vars and set it to false, and I don't know how to supply an alternate.

     

    Thanks in advance for any help on this issue.

     

    All the best

     

    Fernando.

  7. Dear Jack!

     

    Yes this makes sense, but I also want to add to this LoaderMax the actual main.swf which is loading the child.swf.

     

    So far and thanks for your advice I can get the loading percentage of the child.swf + all images. I need to also count for the main.swf (which is the preloader swf in which I create the LoaderMax instance)

     

    to better explain myself, if you look at your demos.

     

    You have

     

    LoaderMax_subload_parent.swf

     

    LoaderMax_subload_child.swf

     

    ---- Images that load into this SWF.

     

    In this example you obtain the loading time of LoaderMax_subload_child.swf and he images that load into it. However you do not account (or at least where I can see the loading bytes of LoaderMax_subload_parent.swf)...

     

    Basically I want to add to my loadermax mainQueue the parent.swf bytes size and load time.

     

    I hope this makes sense.

     

    Thanks as always for a prompt response. You are the very best.

     

    Fernando.

  8. Thanks for this explanation, this answers a different question but the original one still stands.

     

    I already got what I needed from the SWFLoader and its nested loaders.

     

    What I need is actually a way to add some sort of preloading to the main swf in which the SWFLoader is being created with the purpose of loading the content.

     

    so

     

    I have

     

    main.swf (I create SWFLoader here to load "content.swf")

     

    content.swf (I create LoaderMax to load the images)

     

    I can get information with loaders for content.swf plus the LoaderMax queue with all images which is great but I also want to add to this the loading time for the actual main.swf (which is the initial swf)

  9. Hey Thanks for replying so soon.

     

    Here is what I mean

     

    MY setup

     

    Main.swf (this has a loadermax instance mainQueue)

     

    Content.swf (this is the SWF I load)

    --- Inside this SWF I have another loadermax instance (which loads images from an array) imageQueue which I append to mainQueue)

     

    So far I am able to track the total load (Content.swf + images) which is wonderful... But I will also like to add if possible the weight size of Main.swf and the time it takes to download).

     

    Does it make sense?

     

    Thanks!!!

  10. HI

     

    I successfully implementing your awesome loader in my app.

     

    I have a swf with a LoaderMAx instance and this loads another SWF which has a nested LoaderMAx.

     

    So far I am able to track the loaded swf and the images inside that swf as a whole, but what I cannot figure out is how to actually include the loading time for the actual swf in which the main instance of the LoaderMax is created.

     

    I hope I explained it well.

     

    Thanks

     

    Fernando.

  11. I guess to clarify my question, is that if anyone know of an easy way to yse tweenmax to zoom in and out using mouse position?

     

    I am using the tweenmax relative position z:"1000"... but that doesnt work?

  12. One more question if you will. The COMPLETE event itself will be fired after the whole queue is done... right? or will it be fired per image loader?

     

    Also I am creating my sprite and the array with my objects before the COMPLETE Event (see red), so your suggestions is to create it after? Also the way I know is all loaded is that in my complete function if all of the images loaded == the image count then go ahead and execute.

     

    Here is my whole class, please if you have a minute help me make sense of the LoaderMax....

     

    package com.letsmota.core
    {
    import flash.display.Sprite;
    import uk.co.richardleggett.drupal.model.Node;
    import com.letsmota.events.SGImageLoaderEvents;
    import com.letsmota.events.SGPreloadEvents;
    import com.letsmota.content.SGImageLoader;
    import com.letsmota.settings.SGSettings;
    
    public class SGImageStorage extends Sprite
    {
    	private var totalImagesCount:int = 0;
    	private var imagesLoaded:int;
    	private var imagePath:String;
    	private var planeLabels:SGPlaneLabel;
    
    	public function SGImageStorage()
    	{
    		loadAllCollectionImages();
    
    	}
    
    	private function loadAllCollectionImages():void
    	{
    
    		for each (var nodes:Node in SGSettings.drupalSiteMap.nodes)
    		{
    			if (nodes.type == "collections_image" || nodes.type == "contact_page" || nodes.type == "bio_page")
    			{
    				totalImagesCount++;
    				var imageHolder:Sprite = new Sprite();
    				imageHolder.name = nodes.title;[/color]
    
    				imagePath = String(SGSettings.baseSite + SGSettings.baseDrupal + nodes.collectionImagePath);
    
    				var imageLoader:SGImageLoader = new SGImageLoader(imagePath)
    				imageHolder.addChild(imageLoader);
    
    				imageHolder.addEventListener(SGImageLoaderEvents.IMAGE_LOADED, increaseImagesLoadedCount);
    
    				SGSettings.imageStore.push({parentId: nodes.parentNodeId,
    											   id: nodes.id,
    											   path: nodes.path,
    											   collection: nodes.collection,
    											   image: imageHolder});
    					//trace(SGSettings.imageStore.parentId);
    			}
    		}
    	}
    
    	private function increaseImagesLoadedCount(event:SGImageLoaderEvents):void
    	{
    		event.stopImmediatePropagation();
    		event.currentTarget.removeEventListener(SGImageLoaderEvents.IMAGE_LOADED, increaseImagesLoadedCount);
    
    		//trace("This is the amount of images loaded so far", imagesLoaded);
    		imagesLoaded++;
    
    		if (totalImagesCount == imagesLoaded)
    		{
    
    			trace("All Collections Images and Thumbs Loaded, proceed");
    			dispatchEvent(new SGPreloadEvents(SGPreloadEvents.ALL_COLLECTION_IMAGES_LOADED, imagesLoaded));
    
    		}
    
    	}
    
    }
    }
    

     

    And lastly, if I use the event raw content that's great but if not like I do not want to use the displaycontent... :)

     

    Thanks for taking the time to help.

     

    Fernando

  13. Hi

     

    I am using Twenmax and Papervision to zoom the camera in 3D space. I have a camera and 250 planes randomly place in Z space.

     

    I am using a function to detect mouse movement up and down the screen. Basically this works with the exception that if mouse stops moving then tweening stops after it completes the offset. and if I move up and down the animation can become jerky. This is specially troublesome if I want to muse over a 3D plane since moving the mouse zooms it fast and until i am on top of it. I have tried everything I can think of and I am sure there is a better way to do it but I just can figure out.

     

    function checkDirection(e:MouseEvent):void {
    //trace("X movement: " + getHorizontalDirection() + ", Y movement: " + getVerticalDirection());
    switch (getVerticalDirection()) {
    	case "up" :
    		if (camera.z > ((SGSettings.allPlanes.length * defaultZIncrement) - (defaultZIncrement * 3))) {
    			//TweenMax.killTweensOf(camera);
    			TweenMax.to(camera, 1, {z: ((SGSettings.allPlanes.length * defaultZIncrement) - (defaultZIncrement * 3)), ease: Linear.easeNone});
    		} else {
    			if (! mouseOverInPlane) {
    				TweenMax.killTweensOf(camera);
    				TweenMax.to(camera, 1, {z: "1700", ease: Linear.easeNone});
    			} else {
    				TweenMax.killTweensOf(camera);
    				TweenMax.to(camera, 1, {z: "50", ease: Linear.easeNone});
    			}
    		}
    		break;
    
    	case "down" :
    		if (camera.z < (defaultZIncrement * -1)) {
    			TweenMax.to(camera, 1, {z: (defaultZIncrement * -1), ease: Linear.easeNone});
    		} else {
    			if (! mouseOverInPlane) {
    				TweenMax.killTweensOf(camera);
    				TweenMax.to(camera, 1, {z: "-1700", ease: Linear.easeNone});
    			} else {
    				TweenMax.killTweensOf(camera);
    				TweenMax.to(camera, 1, {z: "-50", ease: Linear.easeNone});
    			}
    		}
    
    	case "none" :
    		//TweenMax.killTweensOf(camera);
    		break;
    }
    e.updateAfterEvent();
    }
    

     

    Here is the getVerticalDirection function

     

    	private function getVerticalDirection():String
    	{
    		prevY = curY;
    		curY = stage.mouseY;
    
    		if (prevY > curY)
    		{
    			dirY = "up";
    		}
    		else if (prevY < curY)
    		{
    			dirY = "down";
    		}
    		else
    		{
    			dirY = "none";
    		}
    
    		return dirY;
    	}
    

     

    So if you will be so kind and point me out in the right direction. Basically I want to zoom in and out in mouse move but be able to slow down when on rollover all smoothly. Please take a look at my site (I am also in the process of implementing loader max for better download) but bear with download time so you can see what I mean.

     

    http://clients.letsmota.com/synapse/sga/beta-01/

     

    ---- I also forgot to mention that in the function above a have a min - max z ...

    Thank you in advance!!!

  14. ImageLoader and SWFLoader now create a Sprite immediately into which the remote content will load.

     

    Ok I get that the ImageLoader class creates a sprite automatically for the remote content. But what if I am already making a sprite and want to use it instead. See I already built my app using this sprite and will want to use yours with minimal refactoring. Also I am loading about 250 images.

     

    
    
    for each (var nodes:Node in SGSettings.drupalSiteMap.nodes)
    {		
    
    var imageHolder:Sprite = new Sprite();
    imageHolder.name = nodes.title;			
    
    var imageLoader:SGImageLoader = new SGImageLoader(imagePath)
    imageHolder.addChild(imageLoader);
    
    
    imageHolder.addEventListener(SGImageLoaderEvents.IMAGE_LOADED, increaseImagesLoadedCount);
    
    SGSettings.imageStore.push({parentId: nodes.parentNodeId, id: nodes.id, path: nodes.path,collection: nodes.collection, image: imageHolder});
    }
    

     

    So as you can see, I am storing that sprite in an array for later use. So if you will be so kind to guide me as to how to set up for LoaderMAx, here is what I was thinking.

     

    
    var loaderQueue:LoaderMax = new LoaderMax({name:"loaderQueue", onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler});
    
    
    for each (var nodes:Node in SGSettings.drupalSiteMap.nodes)
    {		
    
    
    var imageHolder:Sprite = new Sprite();
    imageHolder.name = nodes.title;	
    
    loaderQueue.append( new ImageLoader("imagePath", {name:"nodes.title", estimatedBytes:2400, container: imageHolder}))
    
    SGSettings.imageStore.push({parentId: nodes.parentNodeId, id: nodes.id, path: nodes.path,collection: nodes.collection, image: imageHolder});
    }
    
    

     

    Thanks for an awesome piece of software and any help you can lend to my app!!!

     

    Fernando.

×