Producing an Advanced Flash Website with ActionScript 3: The Catcher

Flash

Last time, we started our site with a preloader. Next, once the preloader is completed, I want to send it to the next frame of our site and animate our preloader away and load in our navigation. This is a precursor to a full tutorial I’m putting together, so at the moment I’m just posting what I have put together so far.

If you missed part 1, check it out here: Producing an Advanced Flash Website with ActionScript 3: The Preloader

Share on FacebookShare on Google+Tweet about this on TwitterPin on PinterestEmail this to someone


Last time, we started our site with a preloader. Next, once the preloader is completed, I want to send it to the next frame of our site and animate our preloader away and load in our navigation. This is a precursor to a full tutorial I’m putting together, so at the moment I’m just posting what I have put together so far.

If you missed part 1, check it out here: Producing an Advanced Flash Website with ActionScript 3: The Preloader

In the properties panel of the main.fla, set the Class: to “Main“. Click the pencil to Edit class definition; this will open a new ActionScript file, immediately save it out as Main.as.

Add the following code:

package {
    import flash.display.MovieClip;
    import flash.events.Event;
      public class Main extends MovieClip {
          public function Main() {
            // constructor code
            preloader.addEventListener(Event.COMPLETE, onPreloaderComplete);
            preloader.setLoaderInfo(loaderInfo);
        }
        private function onPreloaderComplete(e:Event):void {
            gotoAndStop(3);
        }
    }
}

This code will send us to frame 3, at which point we want to animate the preloader away before proceeding to frame 4. To do this, we need to create a preloader catcher. Create a new layer in our main.fla and create a keyframe on frame 3. Draw a small circle on the stage and set its fills alpha to 0. Select the fill and convert it into a MovieClip with the name “PreloaderCatcher”, under Advanced check on Export for ActionScript and click on Edit class definition pencil. Save the ActionScript file this generates as “PreloaderCatcher.as” and add the following code:

package {
   import flash.display.MovieClip;
   import com.greensock.TweenLite;
   import flash.display.Sprite;
   import flash.events.Event;
   import Preloader;
   public class PreloaderCatcher extends MovieClip {
      public function PreloaderCatcher() {
         // constructor code
         addEventListener(Event.ADDED_TO_STAGE, onAdded);
      }
      private function onAdded(e:Event):void {
         removeEventListener(Event.ADDED_TO_STAGE, onAdded);
         var preloader:Sprite = MovieClip(parent).getChildByName("preloader") as Sprite;
         TweenLite.to(preloader, 0.5, {alpha:0, y:0, onComplete:function():void{MovieClip(parent).nextFrame();}});
      }
   }
}

Once the our application hits frame 3, the PreloaderCatcher get the preloader MovieClip on the stage and use TweenLite to animate it off the stage.

 TweenLite.to(preloader, 0.5, {alpha:0, y:0, onComplete:function():void{MovieClip(parent).nextFrame();}});

Once this animation is complete, we are sent to the next frame. You can download the TweenLite library from http://www.greensock.com/tweenlite/.

Next week I will be posting my code for the application and navigation section, we’ll also add some sound effects to the intro, just for good measure.

Share on FacebookShare on Google+Tweet about this on TwitterPin on PinterestEmail this to someone