11 Replies Latest reply on Oct 29, 2010 3:19 PM by Ned Murphy

    Fade In/Out - Gallery - Document Class

    Jonas Philippon

      Hi.

       

      I have a gallery swf, with a document class. The gallery gets its information from a XML file. It all works just fine, but i want it to fade in and out when you go to the next or the previous "image/information".

       

      Is it possible, if yes, how?

       

      Thank you in advance.

       

      The document class:

      package {

      import flash.display.*;

      import flash.events.*;

      import flash.text.*;

      import flash.net.*;

      import com.greensock.TweenLite

       

      public class webdesign extends MovieClip {

      public var currentimg:Number;

      public var lastimg:Number;

      public var xml:XML;

      public var loader:Loader;

      public var xmlLoader:URLLoader;

       

      public function webdesign() {

      loader = new Loader();

      addChild(loader);

       

      xmlLoader = new URLLoader(new URLRequest("webdesign.xml"));

      xmlLoader.addEventListener(Event.COMPLETE, parseXML);

       

      NextButton.stop();

      PreviousButton.stop();

      }

       

      protected function parseXML(event:Event):void {

      NextButton.addEventListener(MouseEvent.MOUSE_UP, nextimg);

      PreviousButton.addEventListener(MouseEvent.MOUSE_UP, previmg);

       

       

      xml = new XML(event.currentTarget.data);

      lastimg = xml.img.length() - 1;

      currentimg = 0;

      loadimg();

      }

       

      protected function loadimg():void {

      loader.x = 80;

      loader.y = 60;

      loader.load(new URLRequest(xml.img[currentimg].@image));

      loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadFin);

      }

       

      protected function loadFin(event:Event):void {

      WebdesignTitle.text = xml.img[currentimg].title;

      WebdesignClient.text = xml.img[currentimg].client;

      WebdesignProject.text = xml.img[currentimg].project;

      WebdesignURL.text = xml.img[currentimg].link;

      WebdesignComment.text = xml.img[currentimg].content;

      }

       

      protected function nextimg(event:MouseEvent):void {

      loader.unload();

      currentimg = (currentimg < lastimg)? currentimg + 1 : 0;

      loadimg();

      }

       

      protected function previmg(event:MouseEvent):void {

      loader.unload();

      currentimg = (currentimg > 0)? currentimg - 1 : lastimg;

      loadimg();

      }

      }

      }

        • 1. Re: Fade In/Out - Gallery - Document Class
          Jonas Philippon Level 1

          Anyone?

           

          The gallery can be seen at: philippondesign.com/#/Featured%20Work.

          • 2. Re: Fade In/Out - Gallery - Document Class
            Ned Murphy Adobe Community Professional & MVP

            For the way you have designed things, when you click you next/prev button, the first thing you want to do is start a tween to fade out the Loader.  And you need to monitor for the completion of the tween so that once it completes you can unload the current file and start loading the new file.  You need to monitor for the loading completion so that you can then initiate another tween to fade the Loader back into view.

            • 3. Re: Fade In/Out - Gallery - Document Class
              Jonas Philippon Level 1

              okay, thats understandable. I'm new to Flash, so I dont know how to do that. I have tried fading it in and out with Tweenlite - But I keep getting errors.

               

              By the way, is this a stupid way to make this kind of gallery (Can be seen by following the link i posted earlier)? I don't think it works "optimally".

               

              Philippon

              • 4. Re: Fade In/Out - Gallery - Document Class
                Ned Murphy Adobe Community Professional & MVP

                I don't have any hands on experience using TweenLite, so I can't offer you code to use.  But if you could try to implement what I described using it, then I could probably try to help you work out the bugs.  I try to learn as much as I try to help around here.  And if you can show your attempt, maybe someone with TweenLite experience can provide a quick end to any suffering.

                 

                I won't lay judgement on your design approach.  Anything you try to do is worth the effort and the learning that comes with it.  If the images are optimized for the web, then I would probably consider loading them all up front and managing them as objects, but what you are doing is not a bad idea... definitely not a stupid one.

                1 person found this helpful
                • 5. Re: Fade In/Out - Gallery - Document Class
                  Jonas Philippon Level 1

                  Can i do it without TweenLite?

                  • 6. Re: Fade In/Out - Gallery - Document Class
                    Ned Murphy Adobe Community Professional & MVP

                    There are a few ways you could do it, but all involve using code, and the tweening engines are designed to help minimize the coding effort.  You can do it using the built-in Tween class, but's no reason to shy away from trying to solve it with TweenLite, especially if you have no experience with that either.  Whenever I want to learn how to use something in Flash I turn first to the help documentation and then to Google... between the two of them I rarely fail to find a solution.

                    1 person found this helpful
                    • 7. Re: Fade In/Out - Gallery - Document Class
                      Jonas Philippon Level 1

                      I'll try again, and write you back.

                      • 8. Re: Fade In/Out - Gallery - Document Class
                        Ned Murphy Adobe Community Professional & MVP

                        It is not difficult and shouldn't require too many changes/additions to your current code.  You just need to find some examples of how TweenLite is used, including how to incorporate a completion event handler with it.  If you're lucky, you'll find both in the same reference material.

                        1 person found this helpful
                        • 9. Re: Fade In/Out - Gallery - Document Class
                          Jonas Philippon Level 1

                          I think I already knew how to do it, but I was too tired to see it. It was really simpel, i just needed to rearrange what i tried to do the last time.

                           

                          My code:

                          package {

                          import flash.display.*;

                          import flash.events.*;

                          import flash.text.*;

                          import flash.net.*;

                          import com.greensock.TweenLite

                           

                          public class webdesign extends MovieClip {

                          public var CurrentImg:Number;

                          public var LastImg:Number;

                          public var xml:XML;

                          public var loader:Loader;

                          public var XMLLoader:URLLoader;

                           

                          public function webdesign() {

                          loader = new Loader();

                          addChild(loader);

                           

                          XMLLoader = new URLLoader(new URLRequest("webdesign.xml"));

                          XMLLoader.addEventListener(Event.COMPLETE, ParseXML);

                           

                          NextButton.stop();

                          PreviousButton.stop();

                          }

                           

                          protected function ParseXML(event:Event):void {

                          NextButton.addEventListener(MouseEvent.MOUSE_UP, NextImg);

                          PreviousButton.addEventListener(MouseEvent.MOUSE_UP, PreviousImg);

                           

                           

                          xml = new XML(event.currentTarget.data);

                          LastImg = xml.img.length() - 1;

                          CurrentImg = 0;

                          LoadImg();

                          }

                           

                          protected function LoadImg():void {

                          loader.x = 80;

                          loader.y = 60;

                          loader.load(new URLRequest(xml.img[CurrentImg].@image));

                          loader.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadFinish);

                          }

                           

                          protected function LoadFinish(event:Event):void {

                          TitleText.text = xml.img[CurrentImg].title;

                          ClientXML.text = xml.img[CurrentImg].client;

                          ProjectXML.text = xml.img[CurrentImg].project;

                          URLXML.text = xml.img[CurrentImg].link;

                          CommentXML.text = xml.img[CurrentImg].content;

                          }

                           

                          protected function NextImg(event:MouseEvent):void {

                          TweenLite.to(loader, 1, { alpha:0, onComplete:NextUnload});

                           

                          TweenLite.to(TitleText, 1, { alpha:0});

                          TweenLite.to(ClientText, 1, { alpha:0});

                          TweenLite.to(ProjectText, 1, { alpha:0});

                          TweenLite.to(URLText, 1, { alpha:0});

                           

                          TweenLite.to(ClientXML, 1, { alpha:0});

                          TweenLite.to(ProjectXML, 1, { alpha:0});

                          TweenLite.to(URLXML, 1, { alpha:0});

                          TweenLite.to(CommentXML, 1, { alpha:0});

                           

                          TweenLite.to(Background, 1, { alpha:0});

                          }

                           

                          protected function NextUnload():void {

                          loader.unload();

                           

                          TweenLite.to(loader, 1, { alpha:1, onStart:NextLoad});

                           

                          TweenLite.to(TitleText, 1, { alpha:1});

                          TweenLite.to(ClientText, 1, { alpha:1});

                          TweenLite.to(ProjectText, 1, { alpha:1});

                          TweenLite.to(URLText, 1, { alpha:1});

                           

                          TweenLite.to(ClientXML, 1, { alpha:1});

                          TweenLite.to(ProjectXML, 1, { alpha:1});

                          TweenLite.to(URLXML, 1, { alpha:1});

                          TweenLite.to(CommentXML, 1, { alpha:1});

                           

                          TweenLite.to(Background, 1, { alpha:1});

                          }

                           

                          protected function NextLoad():void {

                          CurrentImg = (CurrentImg < LastImg)? CurrentImg + 1 : 0;

                          LoadImg();

                          }

                           

                           

                          protected function PreviousImg(event:MouseEvent):void {

                          TweenLite.to(loader, 1, { alpha:0, onComplete:PreviousUnload});

                           

                          TweenLite.to(TitleText, 1, { alpha:0});

                          TweenLite.to(ClientText, 1, { alpha:0});

                          TweenLite.to(ProjectText, 1, { alpha:0});

                          TweenLite.to(URLText, 1, { alpha:0});

                           

                          TweenLite.to(ClientXML, 1, { alpha:0});

                          TweenLite.to(ProjectXML, 1, { alpha:0});

                          TweenLite.to(URLXML, 1, { alpha:0});

                          TweenLite.to(CommentXML, 1, { alpha:0});

                           

                          TweenLite.to(Background, 1, { alpha:0});

                          }

                           

                          protected function PreviousUnload():void {

                          loader.unload();

                           

                          TweenLite.to(loader, 1, { alpha:1, onStart:PreviousLoad});

                           

                          TweenLite.to(TitleText, 1, { alpha:1});

                          TweenLite.to(ClientText, 1, { alpha:1});

                          TweenLite.to(ProjectText, 1, { alpha:1});

                          TweenLite.to(URLText, 1, { alpha:1});

                           

                          TweenLite.to(ClientXML, 1, { alpha:1});

                          TweenLite.to(ProjectXML, 1, { alpha:1});

                          TweenLite.to(URLXML, 1, { alpha:1});

                          TweenLite.to(CommentXML, 1, { alpha:1});

                           

                          TweenLite.to(Background, 1, { alpha:1});

                          }

                           

                          protected function PreviousLoad():void {

                          CurrentImg = (CurrentImg > 0)? CurrentImg - 1 : LastImg;

                          LoadImg();

                          }

                          }

                          }

                           

                           

                          Do you think this is the most efficient way?

                           

                          I just have one more problem, i think you can help me with. I use this "gallery" 3 times on my website (all in the same submenu). I have set the submenu to tween between the sections in the submenu (this works fine with normal MovieClips, all the content is removed from the stage, and the new content is being brought up). But when i implement the gallery, the submenu can't seem to remove the old content. So when you navigate between the 3 galleries, the old galleries isn't being removed from the stage.

                           

                          I implement the swf's with:

                          // WEB DESIGN SWF

                          var loaderswf:Loader = new Loader();

                          var url:String = "webdesign.swf";

                          var urlReq:URLRequest = new URLRequest(url);

                          loaderswf.load(urlReq);

                          addChild(loaderswf);

                           

                          stop();

                           

                          Philippon

                          • 10. Re: Fade In/Out - Gallery - Document Class
                            Ned Murphy Adobe Community Professional & MVP

                            I wouldn't say that's an efficient solution in terms of coding.  You can probably combine all of that tweening activity into a single function that you call, passing a couple of argments to, such as the alpha value to tween to and some boolean to choose between using the onComplete vs the onStart call.

                             

                            For your next problem I'll suggest you start a new posting.  I don't know if I can help, and this one has gone too far to get much of anyone else's attention.  At least for now I can say I don't have time to look into it.

                            1 person found this helpful
                            • 11. Re: Fade In/Out - Gallery - Document Class
                              Jonas Philippon Level 1

                              Okay,thank you. I'll try.