Jump to content
GreenSock

Zync

Members
  • Posts

    72
  • Joined

  • Last visited

Posts posted by Zync

  1. Sounds like you might just have to import the Greensock easing classes. Can you check to see if you have:

     

    import com.greensock.easing.*

     

    Somewhere near the top of your as file. Also if you could post some code it would be really helpful for troubleshooting.

  2. G'day mate,

     

    Here's what I'd probably do. This is just a rough example but when your creating your tweens, I'd probably push them all into an array. When you have that array, you have all tweens that are currently in your game. With a simple toggle pause function you could loop through all your tweens and either pause or resume them. Like I said it's really rough but it should do what your looking for.

     

    	private var aTweens:Array;
    
    	public function main() 
    	{
    		aTweens = new Array();
    
    		var t1:TweenMax = new TweenMax(obj1, 1, { x:100, y:100 } );
    		var t2:TweenMax = new TweenMax(obj2, 1, { x:200, y:250 } );
    
    		aTweens.push(t1)
    		aTweens.push(t2);
    
    		//To pause all tweens
    		togglePauseTweens(true)
    
    		//To resume all tweens
    		togglePauseTweens(false)
    
    	}
    
    	private function togglePauseTweens(bPaused:Boolean):void 
    	{
    		for (var i:int = 0; i < aTweens.length; i++) 
    		{
    			var item:TweenMax = aTweens[i];
    			if (bPaused)
    			{
    				item.pause();
    			} else
    			{
    				item.resume();
    			}
    
    		}
    	}
    

  3. G'day mate,

     

    First step in your XML is you might want to fix the end tag from to or your XML won't be well formed.

     

    And this should be what your looking for.

     

    	public function main() 
    	{
    		//Setup your XML Loader Var, listener and tell your XML object to load
    		var xLoader:XMLLoader = new XMLLoader("file.xml")
    		xLoader.addEventListener(LoaderEvent.COMPLETE, xmlLoaded)
    		xLoader.load();
    	}
    
    	private function xmlLoaded(e:LoaderEvent):void 
    	{
    		//When your XML is Loaded, trap it in a new XMLList variable, along with the first node name
    		//in this case, LoaderMax as it follows the  node
    		var xList:XMLList = new XMLList(e.target.content.LoaderMax)
    		//You can now navigate through the XMLList by calling the node name in your XML
    		//For eg. to get Q1 text you would use:
    		trace(xList.Q1);
    	}
    

  4. Hey ya mate,

     

    I don't know if the official docs have been updated but you can add properties to your imageLoader objects by using the prop attribute:

     

    var iLoad:ImageLoader = new ImageLoader("myImage",

    new ImageLoaderVars()

    .name(xImgList.@name)

    .prop("prop1", "Hello")

    )

     

    Then you can access those params on a click or complete event like so:

     

    var vars:Object = ImageLoader(e.currentTarget.loader).vars

    trace(vars.prop1);

  5. Hey mate,

     

    Try this:

    H:\Zync Interactive\test\main.as
    
    package  
    {
    import com.greensock.easing.Cubic;
    import com.greensock.easing.Sine;
    import com.greensock.events.LoaderEvent;
    import com.greensock.TimelineMax;
    import com.greensock.TweenMax;
    import flash.display.MovieClip;
    
    /**
     * ...
     * @author Zync
     */
    public class main extends MovieClip
    {
    	private var aItems:Array;
    
    	public function main() 
    	{
    		//Define all the clips you want to animate in an array
    		aItems = new Array(b1, b2, b3, b4, b5, b6);
    
    		//Setup TimelineMax Var and listners
    		var tl:TimelineMax = new TimelineMax( { repeat: -1 } );
    		tl.addEventListener(LoaderEvent.COMPLETE, delayOut)
    		tl.stop()
    
    		for (var i:int = 0; i < aItems.length; i++)
    		{
    			//Store reference to our clip in the loop
    			var mcClip:MovieClip = aItems[i];
    			//Append the tween to our timeline
    			tl.append(TweenMax.to(mcClip, 0.5, { y:"200", ease:Cubic.easeOut } ));
    		}
    		//Play the timeline after we've added the tweens to it
    		tl.play();
    	}
    
    	private function delayOut(e:LoaderEvent):void 
    	{
    		//When all clips have animated in, tween them out 1 by 1 in a loop
    		for (var i:int = 0; i < aItems.length; i++) 
    		{
    			//Get a reference tot he current clip in the loop
    			var mcClip:MovieClip = aItems[i];
    			//Stagger out the tween by using a delay
    			TweenMax.to(mcClip, 0.5, { x:"-800", ease:Sine.easeOut, delay:(0.2-(i * 0.05)) } );
    
    			//So:
    			//1st Clip tweens in 0.2 seconds
    			//2nd Clip tweens 0.15 seconds later
    			//3rd Clip tweens 0.1 seconds later etc...
    		}
    	}
    }
    }
    

  6. Hi Deshu,

     

    There are a couple of ways to add your loaded image from the image Loader to your displaylist. The easiest way is just to use the container var like so:

     

    var iLoad:ImageLoader = new ImageLoader("myFile.jpg", new ImageLoaderVars()
    .container(yourContainer)
    )
    iLoad.load();
    

     

    After the image has finished loading it will automatically add the ContentDisplay image to whatever container you specify.

    The other way is to listen to the COMPLETE method of the imageloader and then use addChild from there.

     

    public function test() {
    
    var iLoad:ImageLoader = new ImageLoader("myFile.jpg", new ImageLoaderVars()
    .name("myFile")
    )
    iLoad.addEventListener(LoaderEvent.COMPLETE, imgLoaded)
    
    iLoad.load();
    }
    
    private function imgLoaded(e:LoaderEvent):void 
    {
    addChild( LoaderMax.getContent("myFile") );
    }
    

     

    Note going this way, you should give a name var to the imageloader so you can easily access it later.

  7. ZOMG I'm a complete idiot sometimes. Sorry it just clicked then when you said can you leave the site in the upperleft corner. If I leave the view position fixed and not center it via the GAIA panel, I can just add the view to the liquidstage instance and let LS handle the positioning but its awesome self.

    So now my logo is fixed in the top right corner cos its not having to deal with GAIA's site positing and the content is always in the center thanks to liquid stage.

     

    	override protected function onAddedToStage(event:Event):void
    	{
    		stage.align = StageAlign.TOP_LEFT;
    		stage.scaleMode = StageScaleMode.NO_SCALE;
    		super.onAddedToStage(event);
    		ls = new LiquidStage(this.stage, this.stage.stageWidth, this.stage.stageHeight);
    
    		view.addEventListener(Event.ADDED_TO_STAGE, viewAdded);
    	}
    
    	private function viewAdded(e:Event):void 
    	{
    		removeEventListener(Event.ADDED_TO_STAGE, viewAdded);
    		ls.attach(view, ls.CENTER);
    	}
    

  8. I can leave the container in the upper left corner, but I do want the site positioned in the center (where the main content will be), I just want some elements outside of the flow and to be fixed to the liquidstage, eg the logo and nav bar.

    I've seen sites that use LiquidStage and Gaia so it's definitely possible. As from the other post I'm creating my LiquidStage instance on the main.swf file which holds the view holder. So technically the liquidstage should be outside of the holder and stretch to span the entire stage.

     

    		stage.align = StageAlign.TOP_LEFT;
    		stage.scaleMode = StageScaleMode.NO_SCALE;
    
    		super.onAddedToStage(event);
    
    		trace(this.stage.stageWidth, this.stage.stageHeight);
    		var ls:LiquidStage = new LiquidStage(this.stage, this.stage.stageWidth, this.stage.stageHeight);
    

     

    Then from main homepage.swf I attach a bluesquare movieclip to the liquidStage instance like so:

     

    private function init():void 
    	{
    		this.stage.addEventListener(Event.RESIZE, stageResize);
    
    		var ls:LiquidStage = LiquidStage.getByStage(this.stage)
    		ls.attach(blueSquare, ls.TOP_RIGHT);
    	}
    

     

    And this kinda works, except it doesnt stick to the top right. If I enlarge the stage along X, the square gets push out of the viewable area and if I enlarge the stage along Y, it stays at the top of the view container and not the top of the stage. I think its definitely something either with my structure of the elements on my page or the way I'm adding it to liquidstage. By itself liquidstage works flawlessly so thats definitely not the prob. Is there a way to trace how big the dimensions of liquidstage is at any given time?

  9. Yeah that's pretty much the setup that I have, but I don't think LiquidStage attaches itself to the top left corner of the main stage.

     

    How GAIA works, (in a nutshell) with positioning is that you define your site, say 900 x 600 for example. It goes and creates all the pages at 900x600 and (when called for) it loads them into a movieclip container called view.

    If you center the site using the gaia panel, it creates code so that when the stage is enlarged, it centers the site (in this case 900x600) to be exactly in the center of the screen. This is great and all except when it comes to pinning elements like a logo or nav bar. The top left of the view container gets shifted along x and y to center it up on the stage. I can get the amount shifted along x and y but I think I'm stuck with liquidStage. Although it should be possible with Liquid stage, I just can't wrap my head around how to update LiquidStage's dimensions when the stage re-sizes.

     

    Any help with that would be awesome. Will turn it into a video tutorial too.

  10. Hey all,

     

    OK so I know this isn't the GAIA support forums, but I've been trying to figure out how LiquidStage works exactly between SWF's now for about 4 days and I just cant seem to crack it. So heres a bit of background.

     

    I've setup a new site in the Gaia panel as 900x600.

    Its set to center horizontal and vertical.

    I've created a liquidstage object in the main.as and get the instance of it by using LiquidStage.defaultStage static var.

     

    The liquid stage object is there and I can attach clips to it fine. But I'm trying to achieve a couple of things:

     

    I want a logo up the top right cornor of my fullscreen flash site to always be there and move accordingly if the browser is resized.

    A Navigation bar pinned to the bottom of the screen that automatically adjusts its horozontal position to the midpoint of the stage.

     

    At the moment tho the site repositions itself to the center of the screen when i resize the browser and the logo doesnt stay up the top right. It kind of moves aroud.

     

    has anyone ever done this before with Gaia and could shed a bit of light on some positioning code?

     

    Thanks

  11. I got a weird error happening and I'm not sure if its my code or loadermax and the height of my objects.

    When i trace the height in the first loop on showThumbs() I'm getting 120 as the variable I set.

    But when i trace it in my second loop on thumbsLoaded, for the first 4 images I'm getting a height of 120 but then the next ones are 156.8. Maybe I botched something with my position code somewhere but shouldn't the height of each contentDisplay stay the same?

     

     

    	private function showThumbs():void 
    	{
    		var lmThumbs:LoaderMax = new LoaderMax( { name:"thumbLoader" } );
    		lmThumbs.addEventListener(LoaderEvent.COMPLETE, thumbsLoaded);
    
    		//Vars
    		var nImgWidth:Number = 210;
    		var nImgHeight:Number = 120;
    		var nMaxCols:Number = 4;
    		var nSpacing:Number = 19;
    
    		for (var i:int = 0; i < xList.length(); i++) 
    		{
    			var iLoad:ImageLoader = new ImageLoader(xList[i].@img, new ImageLoaderVars()
    			.name(xList[i].@name)
    			.width(nImgWidth)
    			.height(nImgHeight)
    			.scaleMode("proportionalOutside")
    			.crop(true)
    			.x((i % nMaxCols) * (nImgWidth + nSpacing))
    			.y(int(i / nMaxCols) * (nImgHeight + nSpacing))
    			.container(thumbHolder)
    			.smoothing(true)
    			.prop("title", xList[i].@title)
    			)
    
    			trace(int(i / nMaxCols) * (nImgHeight + nSpacing))
    			trace("height "+nImgHeight)
    
    			lmThumbs.append(iLoad)
    
    		}
    		lmThumbs.prependURLs("media/images/tvc/thumbs/");
    		lmThumbs.load();
    	}
    
    	private function thumbsLoaded(e:LoaderEvent):void 
    	{
    		trace("thumbsLoaded");
    
    		//Loop through attach event listeners and text fields with title
    		for (var i:int = 0; i < xList.length(); i++) 
    		{
    
    			var cdImg:ContentDisplay = LoaderMax.getContent(xList[i].@name)
    			var vars:Object = ImageLoader(cdImg.loader).vars;
    
    			var txTitle:TextField = new TextField();
    			//txTitle.text = vars.title;
    			txTitle.text = vars.title
    			txTitle.height = 20;
    			trace("height now " +cdImg.height);
    			cdImg.addChild(txTitle)
    
    			txTitle.y = 120
    
    		}
    	}
    

  12. Oh this would be a pretty cool feature for games and stuff although I reckon it should be possible to make a function that did this. Let me do some testing.

     

    Wish you could go like:

    TweenMax.to(obj, 5, {y:"500", steps:5})

     

    So it would take the amount of time / #steps and for only 5 updates 1 second apart it would jump the object 100pixels down y or step almost anything really, alpha, scale etc.

  13. You'd probably want to prependURLs to your LoaderMax object instead of each image Loader. Would be a bit more optimized that way. So after:

    mainLoader.append(iLoad)

    you can do

    mainLoader.prependURLs("http://www.yoururl/");

     

    Also the new ImageLoaderVars() is an inline object which gives code hinting for dot syntax. You still fine to use the old approach of including your vars in a generic object and skipping the new ImageLoaderVars() object instead

    etc {smoothing:true, container:true}

  14. G'day mate,

     

    Just quickly whipped up this for you. But you could define an array of images and then setup an ImageLoader inside a loop and append your loaderMax Object like so.

     

    	//Setup Array of Images
    	var aImages:Array = new Array("image1.jpg", "image2.jpg", "image3.gif", "image4.png");
    
    	//Setup LoaderMax for preloading images
    	var mainLoader:LoaderMax = new LoaderMax( { name:"mainloader" } );
    
    	//Loop through array and add images to loadermax object
    	for (var i:int = 0; i < aImages.length; i++) 
    	{
    		//Get filename from array
    		var imageFile:String = aImages[i];
    		//Setup Imageloader Object
    		var iLoad:ImageLoader = new ImageLoader(imageFile, new ImageLoaderVars()
    		.container(youContainerToAttachTo)
    		.smoothing(true)
    		);
    
    		//Append LoaderMax Object with the imageloader we just setup
    		mainLoader.append(iLoad)
    
    	}
    
    	//Finally load the loadermax object and all imageloaders attached to it
    	mainLoader.load();
    

  15. G'day mate,

     

    Dunno if this will help you, but heres some sample code from a banner I made with TimelineMax + Tweenlite. It's an infinite looping banner too. You basically just keep appending your tweens to a TimelineMax/lite object and remember in the init vars to set repeat value to -1 which will make it loop forever. The banner is made in AS2 but you should be able to see how the Greensock code works regardless.

     

    Cheers

     

    -Z

     

    import com.greensock.TimelineMax;
    import com.greensock.TweenAlign;
    import com.greensock.TweenLite;
    /**
    * ...
    * @author Zync
    */
    class ddBanner extends MovieClip
    {
    public var DarwinDeez:MovieClip;
    public var packshot1:MovieClip;
    
    public var specialEdition:MovieClip;
    public var bonusTracks:MovieClip;
    public var podLogo:MovieClip;
    public var xLogo:MovieClip;
    public var packshot2:MovieClip;
    
    public var clickHere:MovieClip;
    
    //public var darwinTouring:MovieClip;
    //public var withParklife:MovieClip;
    
    public var enterComp:MovieClip;
    public var directPhotoshoot:MovieClip;
    
    private var tl:TimelineMax;
    
    public function ddBanner() 
    {
    
    	tl = new TimelineMax( { repeat: -1, repeatDelay:1 } );
    	tl.timeScale = 0.6;
    
    	tl.append(TweenLite.from(DarwinDeez, 0.5, { _x:"-400" } ));
    	tl.append(TweenLite.from(packshot1, 0.5, { _x:450 } ));
    	tl.appendMultiple([
    	TweenLite.to(DarwinDeez, 0.3, { _y:"150" } ),
    	TweenLite.to(packshot1, 0.3, { _y:"-150" } )
    	], 2, TweenAlign.NORMAL, 0);
    
    	tl.append(TweenLite.from(specialEdition, 0.3, { _y:"-150" } ));
    	tl.append(TweenLite.from(bonusTracks, 0.3, { _y:"150" } ));
    	tl.append(TweenLite.from(podLogo, 0.3, { _x:450 } ));
    	tl.append(TweenLite.from(xLogo, 0.3, { _x:450 } ));
    	tl.append(TweenLite.from(packshot2, 0.3, { _x:450 } ));
    	tl.appendMultiple([
    	TweenLite.to(specialEdition, 0.3, { _y:"150" } ),
    	TweenLite.to(bonusTracks, 0.3, { _y:"-150" } ),
    	TweenLite.to(podLogo, 0.3, { _y:"-150" } ),
    	TweenLite.to(xLogo, 0.3, { _y:"150" } )
    	], 2, TweenAlign.NORMAL, 0);
    
    	tl.append(TweenLite.from(clickHere, 0.3, { _y:"-150" } ));
    	tl.appendMultiple([
    	TweenLite.to(clickHere, 0.3, { _y:"150" } ),
    	TweenLite.to(packshot2, 0.3, { _y:"-150" } )
    	], 2, TweenAlign.NORMAL, 0);
    
    /*		tl.append(TweenLite.from(darwinTouring, 0.3, { _y:"-150" } ));
    	tl.append(TweenLite.from(withParklife, 0.3, { _y:"150" } ));
    	tl.appendMultiple([
    	TweenLite.to(darwinTouring, 0.3, { _y:"150" } ),
    	TweenLite.to(withParklife, 0.3, { _y:"-150" } ),
    	TweenLite.to(packshot2, 0.3, { _y:"-150" } )
    	], 2, TweenAlign.NORMAL, 0);*/
    
    
    	tl.append(TweenLite.from(enterComp, 0.3, { _y:"-150" } ));
    	tl.append(TweenLite.from(directPhotoshoot, 0.3, { _y:"150" } ));
    	tl.appendMultiple([
    	TweenLite.to(enterComp, 0.3, { _y:"150" } ),
    	TweenLite.to(directPhotoshoot, 0.3, { _y:"-150" } )
    	], 2, TweenAlign.NORMAL, 0);
    
    
    }
    
    
    }
    

×