A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 21

Thread: section transitions

  1. #1
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595

    section transitions

    I am trying to make transitions between loaded swfs. Below is my code. I know I need to add to one of the functions to make it play the "out" transition before the new swf is loaded. Each swf has a timeline with a stop frame and a frame labeled "out". The below script allows me to press buttons and load the coresponding swf to the stage.

    Code:
    package
    {
        import flash.display.MovieClip;
        import flash.display.SimpleButton;
        import flash.display.Loader;
        import flash.net.URLRequest;
    	import flash.events.MouseEvent;
        import flash.events.*;
        
        public class V2 extends MovieClip
        {
            private var sections_array:Array;
            private var section_buttons_array:Array;
            
            private var loader:Loader;
          
            private var sectionHolder  : MovieClip;
            
            private var swf:String;
    		
    		private var currentSection:int=0;
    		private var nextSection:int;
            
            private var id:int=0;
    		private var homeLoc = "./swfs/home.swf";
            
            public function V2()
            {
                init();
            }
            
            private function init():void
            {
                stop();
                stage.frameRate=31;
                
                preloader_mc.visible=false;
                preloader_mc.fill_mc.width=0;
                //Create the movieclip//
                sectionHolder = new MovieClip();
                sectionHolder.x = 37;
                sectionHolder.y = 42;
                //Add it as a child of Main movieclip//
                addChild( sectionHolder );
                //Create the movieclip//
                
                sections_array = new Array('./swfs/section1.swf',
                './swfs/section2.swf',
                './swfs/section3.swf',
                './swfs/section4.swf',
                './swfs/section5.swf');
                section_buttons_array = new Array(btn1,btn2,btn3,btn4,btn5);
    			
    			addMenuListener();
    			addMenuEvents();
    			loadHome();
    		}
    	
            private function addMenuListener():void
            {
                for(var i:int=0;i < section_buttons_array.length;i++)
                {
                    section_buttons_array[i].id=i;
    				//previously  section_buttons_array[i].addEventListener(MouseEvent.MOUSE_DOWN,loadSection);
    				
                    section_buttons_array[i].addEventListener(MouseEvent.MOUSE_DOWN,loadSectionHandler);
                }
            }
          
          
            private function loadHome():void
            {
                swf=homeLoc;//sections_array[0];
                var request:URLRequest=new URLRequest(swf);
                loader=new Loader();
                initListeners(loader.contentLoaderInfo);
                loader.load(request);
                id=0;
            }
            
            private function changeSection(m:MouseEvent):void
            {
                id=m.currentTarget.id+1;
                loader.unload();
                //
                sectionHolder.removeChild(loader);
                removeListeners(loader.contentLoaderInfo);
                loadSection(m.target.parent.id+1);
            }
            
    		
    		private function loadSectionHandler(evt:MouseEvent)
    		{
    			id = evt.currentTarget.id;
    			loadSection(id);
    			
    		}
    		
            private function loadSection(n:int):void
            {
                swf=sections_array[id];
                var request:URLRequest=new URLRequest(swf);
                //loader=new Loader();
                initListeners(loader.contentLoaderInfo);
                loader.load(request);
    			
    			
            }
            
            private function initListeners(dispatcher:IEventDispatcher):void 
            {
                dispatcher.addEventListener(Event.OPEN,start);
                dispatcher.addEventListener(ProgressEvent.PROGRESS,atLoading);
                dispatcher.addEventListener(Event.COMPLETE,completed);
            }
            
            private function removeListeners(dispatcher:IEventDispatcher):void 
            {
                dispatcher.removeEventListener(Event.OPEN,start);
                dispatcher.removeEventListener(ProgressEvent.PROGRESS,atLoading);
                dispatcher.removeEventListener(Event.COMPLETE,completed);
            }
            
            private function start(event:Event):void 
            {
                preloader_mc.visible=true;
            }
    		
            private function atLoading(event:ProgressEvent):void 
            {
                var n:uint=(event.bytesLoaded/event.bytesTotal)*100;
                preloader_mc.fill_mc.width=n;
            }
    		
           	private function completed(event:Event):void 
            {
                sectionHolder.addChild(loader);   
                preloader_mc.visible=false;
            }
            
    		private function stopAll():void
    		{
    			for(var i:int=0;i < section_buttons_array.length;i++)
    			{
    				section_buttons_array[i].stop();
    				sections_array[i].stop();
    			}
    		}
    		
    		private function addMenuEvents():void
    		{
    			for(var i:int=0;i < section_buttons_array.length;i++)
    			{
    				section_buttons_array[i].mouseChildren=false;
    				section_buttons_array[i].buttonMode=true;
    				
    				section_buttons_array[i].id=i;
    				section_buttons_array[i].isPressed=false;
    				
    				section_buttons_array[i].addEventListener(MouseEvent.MOUSE_OVER,setOver);
    				section_buttons_array[i].addEventListener(MouseEvent.MOUSE_OUT,setOut);
    				section_buttons_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
    				section_buttons_array[i].addEventListener(MouseEvent.MOUSE_UP,setUp);
    			}
    		}
    		
    		private function setOver(evt:MouseEvent):void
    		{
    			if(evt.target.isPressed==false)
    				evt.target.gotoAndStop(2);
    		}
    		
    		private function setOut(evt:MouseEvent):void
    		{
    			if(evt.target.isPressed==false)
    				evt.target.gotoAndStop(1);
    		}
    		
    		private function setDown(evt:MouseEvent):void
    		{
    			nextSection=evt.target.id;
    			checkState(evt.target.id);
    			
    			evt.target.gotoAndStop(3);
    			//hideCurrentSection();
    			loadSection(1);
    			
    			currentSection=evt.target.id;
    		}
    		private function setUp(evt:MouseEvent):void
    		{
    			if(evt.target.isPressed==false)
    				evt.target.gotoAndStop(1);
    		}
    		
    		private function checkState(n:int):void
    		{
    			for(var i:int=0;i < section_buttons_array.length;i++)
    			{
    				if(i==n)
    					section_buttons_array[i].isPressed=true;
    				else
    				{
    					section_buttons_array[i].isPressed=false;
    					section_buttons_array[i].gotoAndStop(1);
    				}
    			}
    		}
    		
    	
    
    
    	}
    }

  2. #2
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    I guess what I can't figure out, is how to indicate something previously loaded. I know I can indicate "pressed" and loaded.

  3. #3
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    Or maybe I need a way to find out what is currently loaded, then tell it to play "out" when the new button is pressed?

    I had a version of this in AS2 and on the time line of the loaded swf on the last frame I had something like "next movie=" and play the out transition. But I don't see this working in A3S. Can anyone point me in the right direction?

  4. #4
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    Anyone? This is difficult. I have searched all over for an answer to this. All I can find is how to load external swfs. I know how to do that.

  5. #5
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    Ok I got a suggestion and I am trying to work it into my code.

    Code:
    this.addEventListener("removeMe", removeSWF);
        		MovieClip(loader.content).play();
    		
    		and a function....................
    		
    		private function removeSWF(e:Event):void
    		{
        		loader.unload();
        		this.removeEventListener("removeMe", removeSWF);
    The loaded swf have a stop() an intro animation and on the last frame have.
    dispatchEvent(new Event("removeMe", true));

    Can anyone help me fix this please?

  6. #6
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    I still haven't been able to get this to work. I am surprised because its a standard way to build sites. I did this AS2.

    Maybe something like this on the end of the time line of the loaded swf:

    if loaded swf id = 1 movie1.swf play "out"
    if loaded swf id = 2 movie2.swf play "out"
    if loaded swf id = 3 movie3.swf play "out"
    etc ?

  7. #7
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    Anyone help? 128 views so far.

  8. #8
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    156 views. Can anyone help me with this?

  9. #9
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    I'm having a little trouble following your code and I dont have anything set up to test right now so this may require a little tinkering to integrate. You need to load the new swf at the same time you're ending the old one -- to do that you need to start the loader for the next section and set up a set of dependencies to track the playback of the old movie and the loading of the new one - and only advance when both have finished:

    PHP Code:
    private var currentSection:MovieClip;
    private var 
    playingOutro:Boolean false;
    private var 
    nextSectionIsLoaded:Boolean false;
    private var 
    lastSectionIsOver:Boolean false;

    private function 
    changeSection(m:MouseEvent):void{
        if(!
    playingOutro){
            
    playingOutro true;
            
    currentSection.gotoAndPlay('out');
            
    currentSection.addEventListener('removeMe'outroFinished);
            
    preloadSection(m.target.parent.id 1);
        }
    }

    private function 
    outroFinished(e:Event):void{
        
    lastSectionIsOver true;
        
    playNextSection();
    }

    private function 
    preloadSection(id:int):void{
        
    oldLoader newLoader;
        
    newLoader = new Loader();
        
    newLoader.contentLoaderInfo.addEventListener(Event.COMPLETEpreloaded);
        
    newLoader.load(new URLRequest(sections_array[id]));
    }

    private function 
    preloaded(e:Event):void{
        
    nextSectionIsLoaded true;
        
    playNextSection();
    }

    private function 
    playNextSection():void{
        if(
    lastSectionIsOver && nextSectionIsLoaded){
            
    sectionHolder.removeChild(currentSection);
            
    oldLoader.unload();
            
    currentSection MovieClip(newLoader.content);
            
    sectionHolder.addChild(currentSection);
            
    currentSection.gotoAndPlay(1);
            
    lastSectionIsOver nextSectionIsLoaded playingOutro false;
        }

    Please use [php] or [code] tags, and mark your threads resolved 8)

  10. #10
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    Code:
    package
    {
        import flash.display.MovieClip;
        import flash.display.SimpleButton;
        import flash.display.Loader;
        import flash.net.URLRequest;
    	import flash.events.MouseEvent;
        import flash.events.*;
        
        public class V2 extends MovieClip
        {
            private var sections_array:Array;
            private var section_buttons_array:Array;
            
            private var loader:Loader;
           
            private var sectionHolder  : MovieClip;
            
            private var swf:String;
    		
    		//private var currentSection:int=0;
    		private var nextSection:int;
            
            private var id:int=0;
    		private var homeLoc = "./swfs/home.swf";
    		
    		private var currentSection:MovieClip;
    		private var playingOutro:Boolean = false;
    		private var nextSectionIsLoaded:Boolean = false;
    		private var lastSectionIsOver:Boolean = false;
            
            public function V2()
            {
                init();
            }
            
            private function init():void
            {
                stop();
                stage.frameRate=31;
                
                preloader_mc.visible=false;
                preloader_mc.fill_mc.width=0;
                
                sectionHolder = new MovieClip();
                sectionHolder.x = 37;
                sectionHolder.y = 42;
               
                addChild( sectionHolder );
               
                
                sections_array = new Array('./swfs/section1.swf',
                './swfs/section2.swf',
                './swfs/section3.swf',
                './swfs/section4.swf',
                './swfs/section5.swf');
                section_buttons_array = new Array(btn1,btn2,btn3,btn4,btn5);
    			
    			addMenuListener();
    			addMenuEvents();
    			loadHome();
    			
    		}
    	
            private function addMenuListener():void
            {
                for(var i:int=0;i < section_buttons_array.length;i++)
                {
                    section_buttons_array[i].id=i;
                    section_buttons_array[i].addEventListener(MouseEvent.MOUSE_DOWN,loadSectionHandler);
                }
            }
          
          
            private function loadHome():void
            {
                swf=homeLoc;//sections_array[0];
                var request:URLRequest=new URLRequest(swf);
                loader=new Loader();
                initListeners(loader.contentLoaderInfo);
                loader.load(request);
                id=0;
    			
            }
            
           /* private function changeSection(m:MouseEvent):void
            {
                id=m.currentTarget.id+1;
                loader.unload();
                //
                sectionHolder.removeChild(loader);
                removeListeners(loader.contentLoaderInfo);
                loadSection(m.target.parent.id+1);
    			
            }
           */ 
    		private function loadSectionHandler(evt:MouseEvent)
    		{
    			id = evt.currentTarget.id;
    			loadSection(id);
    			
    		}
    		
    		
            private function loadSection(n:int):void
            {
                swf=sections_array[id];
                var request:URLRequest=new URLRequest(swf);
                initListeners(loader.contentLoaderInfo);
                loader.load(request);
    			
    			
            }
            
            private function initListeners(dispatcher:IEventDispatcher):void 
            {
                dispatcher.addEventListener(Event.OPEN,start);
                dispatcher.addEventListener(ProgressEvent.PROGRESS,atLoading);
                dispatcher.addEventListener(Event.COMPLETE,completed);
            }
            
            private function removeListeners(dispatcher:IEventDispatcher):void 
            {
                dispatcher.removeEventListener(Event.OPEN,start);
                dispatcher.removeEventListener(ProgressEvent.PROGRESS,atLoading);
                dispatcher.removeEventListener(Event.COMPLETE,completed);
            }
            
            private function start(event:Event):void 
            {
                preloader_mc.visible=true;
            }
    		
            private function atLoading(event:ProgressEvent):void 
            {
                var n:uint=(event.bytesLoaded/event.bytesTotal)*100;
                preloader_mc.fill_mc.width=n;
            }
    		
           	private function completed(event:Event):void 
            {
                sectionHolder.addChild(loader);   
                preloader_mc.visible=false;
            }
            
    		private function stopAll():void
    		{
    			for(var i:int=0;i < section_buttons_array.length;i++)
    			{
    				section_buttons_array[i].stop();
    				sections_array[i].stop();
    				
    			}
    		}
    		
    		private function addMenuEvents():void
    		{
    			for(var i:int=0;i < section_buttons_array.length;i++)
    			{
    				section_buttons_array[i].mouseChildren=false;
    				section_buttons_array[i].buttonMode=true;
    				
    				section_buttons_array[i].id=i;
    				section_buttons_array[i].isPressed=false;
    				
    				section_buttons_array[i].addEventListener(MouseEvent.MOUSE_OVER,setOver);
    				section_buttons_array[i].addEventListener(MouseEvent.MOUSE_OUT,setOut);
    				section_buttons_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
    				section_buttons_array[i].addEventListener(MouseEvent.MOUSE_UP,setUp);
    			}
    		}
    		
    		private function setOver(evt:MouseEvent):void
    		{
    			if(evt.target.isPressed==false)
    				evt.target.gotoAndStop(2);
    		}
    		
    		private function setOut(evt:MouseEvent):void
    		{
    			if(evt.target.isPressed==false)
    				evt.target.gotoAndStop(1);
    		}
    		
    		private function setDown(evt:MouseEvent):void
    		{
    			nextSection=evt.target.id;
    			checkState(evt.target.id);
    			
    			evt.target.gotoAndStop(3);
    			loadSection(1);
    			currentSection=evt.target.id;
    			
    		}
    		private function setUp(evt:MouseEvent):void
    		{
    			if(evt.target.isPressed==false)
    				evt.target.gotoAndStop(1);
    		}
    		
    		private function checkState(n:int):void
    		{
    			for(var i:int=0;i < section_buttons_array.length;i++)
    			{
    				if(i==n)
    					section_buttons_array[i].isPressed=true;
    				else
    				{
    					section_buttons_array[i].isPressed=false;
    					section_buttons_array[i].gotoAndStop(1);
    					
    				}
    			}
    		}
    		
    		
    		
    
    		private function changeSection(m:MouseEvent):void{
        		if(!playingOutro){
            	playingOutro = true;
            	currentSection.gotoAndPlay('out');
            	currentSection.addEventListener('removeMe', outroFinished);
            	preloadSection(m.target.parent.id + 1);
        		}
    		}
    
    		private function outroFinished(e:Event):void{
        		lastSectionIsOver = true;
        		playNextSection();
    		}
    
    		private function preloadSection(id:int):void{
        		oldLoader = newLoader;
        		newLoader = newLoader();
        		newLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, preloaded);
        		newLoader.load(new URLRequest(sections_array[id]));
    		}
    
    		private function preloaded(e:Event):void{
       			nextSectionIsLoaded = true;
        		playNextSection();
    		}
    
    		private function playNextSection():void{
        		if(lastSectionIsOver && nextSectionIsLoaded){
           		sectionHolder.removeChild(currentSection);
            	oldLoader.unload();
            	currentSection = MovieClip(newLoader.content);
            	sectionHolder.addChild(currentSection);
            	currentSection.gotoAndPlay(1);
            	lastSectionIsOver = nextSectionIsLoaded = playingOutro = false;
        		}
    		} 
    
    
    
    	}
    }
    I entered your code into mine. I had a duplicate function error for the changeSection. So I commented it out. Now I am getting 1120: Access of undefined property for oldLoader and newLoader.

  11. #11
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    I placed this at the top and it fixed most of the errors:

    private var oldLoader:Loader;
    private var newLoader:Loader;


    I took out: newLoader = newLoader();

    Said it was undefined method.

    Now I get this error:

    TypeError: Error #1034: Type Coercion failed: cannot convert 2 to flash.display.MovieClip.
    at V2/setDown()

  12. #12
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    Try this in setDown():

    PHP Code:
                nextSection evt.target;
                
    checkState(evt.target.id);
                
    nextSection.gotoAndStop(3);
                
    loadSection(1);
                
    currentSection evt.target
    Please use [php] or [code] tags, and mark your threads resolved 8)

  13. #13
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    Code:
    private function setDown(evt:MouseEvent):void
    		{
    			nextSection=evt.target.id;
    			checkState(evt.target.id);
    			
    			evt.target.gotoAndStop(3);
    			loadSection(1);
    			//currentSection=evt.target.id;
    			
    		}
    On each loaded swf I have a short time line. In the middle of the timeline is a stop() The next frame is labled "out". the the last frame is:
    dispatchEvent(new Event("removeMe", true));

    I commented out the last line and it plays. The "out" transitions still won't play. But if I change the setDown function to the code you just posted it throws alot of errors.
    Last edited by mallen; 11-07-2009 at 04:33 PM.

  14. #14
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    I don't think its getting to the "out" frame because I place a trace on the last frame of time line of the loaded swf.

    trace("test1");

    dispatchEvent(new Event("removeMe", true));

  15. #15
    rabid_Delineator AttackRabbit's Avatar
    Join Date
    Dec 2003
    Location
    Orlando, Florida
    Posts
    481
    Maybe this is already your event flow , its hard to piece together whats going on up there,but its seems like you should be loading the swf that is to show first. Don't do anything else. Once that swf is completely loaded , set the loaders alpha or visibility off and add it as a child. Add a listener for that childs , ADDED_TO_STAGE event, which when triggered will tell your the old child , to play its timeline. You dispatched event from the child swf should totally work as it should bubble up to the parent , toggling the visibility of the new swf, removing the old child , setting its references and loader to null , and then playing your new swf.

    try setting cancellable to false

    Code:
    dispatchEvent(new Event("removeMe", true , false ));
    add maybe add a trace to see what frame your child swf is on , in an enter frame event so you can confirm the child itself is arriving to your last frame.

  16. #16
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    I am totally confused with all those instructions. I did make the change to the
    dispatchEvent(new Event("removeMe", true, false))

    But I know its not playing the last half of the timeline with the "out" transition. First becuase I don't see it playing. Also becuase I have a trace on that frame and it never reaches it.

  17. #17
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    Maybe I have some duplicate functionality in there? Can someone help please? This is driving me crazy getting this to work. I have been trying for a couple months. Writing and re-writing it. Changing one part then changing another.

  18. #18
    rabid_Delineator AttackRabbit's Avatar
    Join Date
    Dec 2003
    Location
    Orlando, Florida
    Posts
    481
    It wasn't so much instructions as it was a suggestion. I was trying to confirm your event flow. It seems like you have a lot of event , time based dependencies , and these are always problematic when trying to use code and the timeline. My main suggestion was to trace out the currentframe of your child swf on an enterframe , if you dont know how to do that i can post example code. Because i dont know what YOU are seeing. I've built several applications that have sub swfs transition out internally and dispatch an event to the a parent in the eventphase for removal , and have never had a problem before. Its a rudimentary process. However ,there are serious downsides in relying on the timeline , so now i dont rely on it. I manage transitions with a transitions manager so the child swfs have no responsibility in the event chain.

    Just looking through the code i can see all sort of problems , mainly you are not waiting for anything , you just call procedures with sub procedures in straight succession, so its difficult to determine , where exactly your code is breaking down. your loading one thing , unloading another , thing , not waiting for things to finish before you start something else. I would try to get rid of everything you can. Start but just loading your child swf , and seeing if you can just play the thing to the end. Once you have done that try reinserting your dispatch and see if you can get the parent to hear it , then try adding more code back in , eventually you should find the bug. Either that or post your source.

  19. #19
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    Thanks for your reply. I have removed everything and it does load the external swfs as I want. It also moves the buttons to their proper frame. The problem I am having is adding this new functionality with the transitions. The transitions are just the end of the time line of the loaded swfs. I can send you a link to the files so you can see what its doing. A description of what its doing is simple It loads each swf when you press a button and then loads the next one. It skips the last half of the time line. Send me a private message and I will send you a link to the files.

  20. #20
    Senior Member
    Join Date
    May 2001
    Location
    USA
    Posts
    595
    Would the order of the functions make a difference? If not then I think the problem would be in this function.
    Code:
    private function playNextSection():void{
        		if(lastSectionIsOver && nextSectionIsLoaded){
           		sectionHolder.removeChild(currentSection);
            	oldLoader.unload();
            	currentSection = MovieClip(newLoader.content);
            	sectionHolder.addChild(currentSection);
            	currentSection.gotoAndPlay(1);
            	lastSectionIsOver = nextSectionIsLoaded = playingOutro = false;
    			
        		}
    		}

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