dcsimg
A Flash Developer Resource Site

Results 1 to 9 of 9

Thread: Modify GoToAndLearn.com Click and Zoom 3D Carousel - make it rotate by itself

  1. #1
    Junior Member
    Join Date
    Feb 2006
    Posts
    8

    Modify GoToAndLearn.com Click and Zoom 3D Carousel - make it rotate by itself

    I trying to make a modification to Lee Brimelow's "Click and Zoom 3D Carousel". What I want to do is make it rotate about every three seconds to the next image (without any mouse interaction). I tried using the timer but didnt really get all that close.

    Even just a push in the right direction would be great as I have wasted so much time already. Here is Lee's original code:


    Code:
    package 
    {
       import com.gskinner.motion.GTween;
       import com.leebrimelow.utils.Math2;
       import com.theflashblog.fp10.SimpleZSorter;
       
       import fl.motion.easing.Exponential;
       
       import flash.display.Loader;
       import flash.display.Sprite;
       import flash.events.Event;
       import flash.events.MouseEvent;
       import flash.net.URLLoader;
       import flash.net.URLRequest;
    
       public class Carousel extends Sprite
       {
          private var container:Sprite;
          private var loader:URLLoader;
          private var anglePer:Number;
                
          public function Carousel()
          {
             init();
             loadXML();
          }
          
          private function loadXML():void
          {
             loader = new URLLoader(new URLRequest("images.xml"));
             loader.addEventListener(Event.COMPLETE, createCarousel);
          }
          
          private function createCarousel(e:Event):void
          {
             var xml:XML = new XML(e.target.data);
             var list:XMLList = xml.image;
             anglePer = (Math.PI*2) / list.length();
             
             for(var i:int=0; i<list.length(); i++)
             {
                var imc:imCon = new imCon();
                imc.buttonMode = true;
                imc.addEventListener(MouseEvent.CLICK, onClick);
                
                var l:Loader = new Loader();
                l.x = -250;
                l.y = -167;
                l.load(new URLRequest(list[i].@src));
                imc.addChild(l);
                imc.scaleX = imc.scaleY = 0.5;
                imc.angle = (i*anglePer) - Math.PI/2;
                imc.x = Math.cos(imc.angle) * 450;
                imc.z = Math.sin(imc.angle) * 450;
                imc.rotationY = 36 * -i;
                container.addChild(imc);
             }
          }
          
          private function onClick(e:MouseEvent):void
          {
             var tw:GTween = new GTween(container, 0.8, {rotationY:Math2.toDeg(e.currentTarget.angle+Math.PI/2), z:100},
                                              {ease:Exponential.easeInOut});
          }
          
          private function init():void
          {
             container = new Sprite();
             container.x = 350;
             container.y = 250;
             container.z = 400;
             addChild(container);
             
             cover.addEventListener(MouseEvent.CLICK, stageClick);
             this.addEventListener(Event.ENTER_FRAME, loop);
          }
          
          private function stageClick(e:MouseEvent):void
          {
             var tw:GTween = new GTween(container, 0.8, {z:400}, {ease:Exponential.easeInOut});
          }
          
          private function loop(e:Event):void
          {
             container.rotationX = mouseY - 250;
             SimpleZSorter.sortClips(container);
          }
       }
    }


    Thank you

    Greg

  2. #2
    rabid_Delineator AttackRabbit's Avatar
    Join Date
    Dec 2003
    Location
    Orlando, Florida
    Posts
    481
    the simplest way to do this , although kinda hackish , would be to call the click event for the desired target. but to do this you have to know what the current target is.

    declare a private var

    private var currTarg : Number = 0;
    private var userInterAct : Timer;

    then set up your timer :


    userInterAct = new Timer( 3000 , 0 );
    timer.addEventListener( TimerEvent.TIMER , forceCarousel );
    timer.start();

    make sure you have your event handler declared in the package :

    private function forceCarousel ( e : TimerEvent ) : void {
    ( currTarg < yourImageListTotal ) ? currTarg++ : currTarg = 0;
    var targItem : imCon = imCon( container.getChildAt( currTarg ) );
    targItem.click();
    }

  3. #3
    Junior Member
    Join Date
    Feb 2006
    Posts
    8
    Hi AttachRabbit. Thanks for the reply. I tried what you said but I think I am missing something. When I implement the code you suggested, I get an error every time the timer runs saying ".click is not a function". Here is the new code with your suggestions applied.

    Code:
    package 
    {
    	import com.gskinner.motion.GTween;
    	import com.leebrimelow.utils.Math2;
    	import com.theflashblog.fp10.SimpleZSorter;
    	
    	import fl.motion.easing.Exponential;
    	
    	import flash.display.Loader;
    	import flash.display.Sprite;
    	import flash.events.Event;
    	import flash.events.MouseEvent;
    	import flash.net.URLLoader;
    	import flash.net.URLRequest;
    	import flash.events.TimerEvent;
        import flash.utils.Timer;
    
    	public class Carousel_orig extends Sprite
    	{
    		private var container:Sprite;
    		private var loader:URLLoader;
    		private var anglePer:Number;
    		
    		private var currTarg : Number = 0;
    		private var userInterAct : Timer;
    		
    		public function Carousel_orig()
    		{
    			init();
    			loadXML();
    			
    			userInterAct = new Timer( 3000 , 0 );
    			userInterAct.addEventListener( TimerEvent.TIMER , forceCarousel );
    			userInterAct.start();
    		}
    		
    		
    		private function forceCarousel ( e : TimerEvent ) : void {
    		( currTarg < 8 ) ? currTarg++ : currTarg = 0;
    		var targItem : imCon = imCon( container.getChildAt( currTarg ) );
    		targItem.click();
    		} 
    		
    		
    		
    		private function loadXML():void
    		{
    			loader = new URLLoader(new URLRequest("images.xml"));
    			loader.addEventListener(Event.COMPLETE, createCarousel);
    		}
    		
    		private function createCarousel(e:Event):void
    		{
    			var xml:XML = new XML(e.target.data);
    			var list:XMLList = xml.image;
    			anglePer = (Math.PI*2) / list.length();
    			
    			for(var i:int=0; i<list.length(); i++)
    			{
    				var imc:imCon = new imCon();
    				imc.buttonMode = true;
    				imc.addEventListener(MouseEvent.CLICK, onClick);
    				
    				var l:Loader = new Loader();
    				l.x = -250;
    				l.y = -167;
    				l.load(new URLRequest(list[i].@src));
    				imc.addChild(l);
    				imc.scaleX = imc.scaleY = 0.5;
    				imc.angle = (i*anglePer) - Math.PI/2;
    				imc.x = Math.cos(imc.angle) * 450;
    				imc.z = Math.sin(imc.angle) * 450;
    				imc.rotationY = 36 * -i;
    				container.addChild(imc);
    			}
    		}
    		
    		private function onClick(e:MouseEvent):void
    		{
    			var tw:GTween = new GTween(container, 0.8, {rotationY:Math2.toDeg(e.currentTarget.angle+Math.PI/2), z:100},
    														{ease:Exponential.easeInOut});
    		}
    		
    		private function init():void
    		{
    			container = new Sprite();
    			container.x = 350;
    			container.y = 250;
    			container.z = 400;
    			addChild(container);
    			
    			cover.addEventListener(MouseEvent.CLICK, stageClick);
    			this.addEventListener(Event.ENTER_FRAME, loop);
    		}
    		
    		private function stageClick(e:MouseEvent):void
    		{
    			var tw:GTween = new GTween(container, 0.8, {z:400}, {ease:Exponential.easeInOut});
    		}
    		
    		private function loop(e:Event):void
    		{
    			//container.rotationX = mouseY - 250;
    			SimpleZSorter.sortClips(container);
    		}
    	}
    }
    Thanks again!

  4. #4
    lemon juice hurts your eyes florianvanthuyn's Avatar
    Join Date
    Jul 2005
    Location
    Merelbeke, Belgium
    Posts
    546
    try using:
    PHP Code:
    targItem.dispatchEvent(new Event(MouseEvent.CLICK)); 
    rather than .click().

    But is is hackish too
    Florian Vanthuyne

    WAR AGAINST SOLVED THREADS
    mark yours as Resolved under Thread Tools!

  5. #5
    rabid_Delineator AttackRabbit's Avatar
    Join Date
    Dec 2003
    Location
    Orlando, Florida
    Posts
    481
    yes my bad. I made the assumption that , imCon was a custom class either you or the original author wrote , and not a default class created by the compiler. In that case that , method , would be private. Another solution would be to write a custom class called IMCon , have it extend movieclip , and write your own event handlers for the desired mouse events. Just declare them as public.

  6. #6
    Junior Member
    Join Date
    Feb 2006
    Posts
    8
    Hi florianvanthuyn. I tried using your suggestion but I now get this error.

    TypeError: Error #1034: Type Coercion failed: cannot convert flash.events::Event@1eaf9521 to flash.events.MouseEvent.

    AttackRabbit: Thanks for that. If I cant get it to work, I will try that although it may or may not be beyond my capabilities.

    Greg

  7. #7
    lemon juice hurts your eyes florianvanthuyn's Avatar
    Join Date
    Jul 2005
    Location
    Merelbeke, Belgium
    Posts
    546
    Oh, my bad:
    PHP Code:
    targItem.dispatchEvent(new MouseEvent(MouseEvent.CLICK)); 
    A MouseEvent public constant can't be called from an Event, not being a MouseEvent
    Florian Vanthuyne

    WAR AGAINST SOLVED THREADS
    mark yours as Resolved under Thread Tools!

  8. #8
    Junior Member
    Join Date
    Feb 2006
    Posts
    8
    Well I got some Joy now. It does rotate but not to the next one. It rotates all over the place and not in a random pattern either and not to every photo.

    Here is the latest code:

    Code:
    package 
    {
    	import com.gskinner.motion.GTween;
    	import com.leebrimelow.utils.Math2;
    	import com.theflashblog.fp10.SimpleZSorter;
    	
    	import fl.motion.easing.Exponential;
    	
    	import flash.display.Loader;
    	import flash.display.Sprite;
    	import flash.events.Event;
    	import flash.events.MouseEvent;
    	import flash.net.URLLoader;
    	import flash.net.URLRequest;
    	import flash.events.TimerEvent;
        import flash.utils.Timer;
    
    	public class Carousel_orig extends Sprite
    	{
    		private var container:Sprite;
    		private var loader:URLLoader;
    		private var anglePer:Number;
    		
    		private var currTarg : Number = 0;
    		private var userInterAct : Timer;
    		
    		public function Carousel_orig()
    		{
    			init();
    			loadXML();
    			
    			userInterAct = new Timer( 1000 , 0 );
    			userInterAct.addEventListener( TimerEvent.TIMER , forceCarousel );
    			userInterAct.start();
    		}
    		
    		
    		private function forceCarousel ( e : TimerEvent ) : void {
    		( currTarg < 10 ) ? currTarg++ : currTarg = 0;
    		var targItem : imCon = imCon( container.getChildAt( currTarg ) );
    		//targItem.click();
    		targItem.dispatchEvent(new MouseEvent(MouseEvent.CLICK)); 
    
    		} 
    		
    		
    		
    		private function loadXML():void
    		{
    			loader = new URLLoader(new URLRequest("images.xml"));
    			loader.addEventListener(Event.COMPLETE, createCarousel);
    		}
    		
    		private function createCarousel(e:Event):void
    		{
    			var xml:XML = new XML(e.target.data);
    			var list:XMLList = xml.image;
    			anglePer = (Math.PI*2) / list.length();
    			
    			for(var i:int=0; i<list.length(); i++)
    			{
    				var imc:imCon = new imCon();
    				imc.buttonMode = true;
    				imc.addEventListener(MouseEvent.CLICK, onClick);
    				
    				var l:Loader = new Loader();
    				l.x = -250;
    				l.y = -167;
    				l.load(new URLRequest(list[i].@src));
    				imc.addChild(l);
    				imc.scaleX = imc.scaleY = 0.5;
    				imc.angle = (i*anglePer) - Math.PI/2;
    				imc.x = Math.cos(imc.angle) * 450;
    				imc.z = Math.sin(imc.angle) * 450;
    				imc.rotationY = 36 * -i;
    				container.addChild(imc);
    			}
    		}
    		
    		private function onClick(e:MouseEvent):void
    		{
    			var tw:GTween = new GTween(container, 0.8, {rotationY:Math2.toDeg(e.currentTarget.angle+Math.PI/2), z:100},
    														{ease:Exponential.easeInOut});
    				tw.autoRotation = true;
    		}
    		
    		private function init():void
    		{
    			container = new Sprite();
    			container.x = 350;
    			container.y = 250;
    			container.z = 400;
    			addChild(container);
    			
    			cover.addEventListener(MouseEvent.CLICK, stageClick);
    			this.addEventListener(Event.ENTER_FRAME, loop);
    		}
    		
    		private function stageClick(e:MouseEvent):void
    		{
    			var tw:GTween = new GTween(container, 0.8, {z:400}, {ease:Exponential.easeInOut});
    		}
    		
    		private function loop(e:Event):void
    		{
    			//container.rotationX = mouseY - 250;
    			SimpleZSorter.sortClips(container);
    		}
    	}
    }
    Thanks for all the help.

  9. #9
    rabid_Delineator AttackRabbit's Avatar
    Join Date
    Dec 2003
    Location
    Orlando, Florida
    Posts
    481
    try tracing out targItem , and see if its the one you think it is. Meaning is it really the next one , some logic might have to be adjusted.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center