18 Replies Latest reply: Aug 10, 2013 6:49 AM by kglad RSS

    Please help me with Local Connection & TweenLite

    SeanPercy42 Community Member

      I'll quickly explain what I'm trying to do because I just wrote this out once and accidently hit the back button on my browser and it cleared everything that I just typed..... ever done that?! One of the most frustrating things I've experienced on a PC, ever! (On a side note any good developers reading this, please include an auto-save every 5 minutes on thes input boxes...).

       

      Anyway, back to my original problem. I'm trying to setup a floating (flash) navigation bar on top of my main (flash) page and have the .swf files communicate variables over using the Local Connection method. After much reading it's the only way I've heard of doing this. If you have a better method to make this work, I'm all ears. The goal of this is to have various pages (tween) open and closed according to the button the user clicks (eg. click on the services page button, tween open the services page, click on the portfolio page button , tween out the services page and in the portfolio page, and so on). I found an excellent tutorial that shows how to accomplish this BUT the buttons and pages are all in the same .swf file so it's much easier that what I'm trying to do. I'm pretty new to AS as a whole but use to code in Basic (fluently) and currently code a little in HTML & CSS so I understand most of the AS3 code already.

       

      A lot of the code is probably done correctly, as I modified it from the excellent tutorial I watched (here) on using TweenLite to fade between pages regardless of the page I'm currently on (although I know there are probably several issues). What's different between that tutorial and my website are that my navigation bar is in a seperate file; I need any page that's currently open to fade out when you click on a hide button (located on the main pages); and the pages do need to hide if you click on the button for the page you're currently on. In the tutorial the guy uses the AS to make sure the pages doesn't fade in again. I also believe because the pages and the buttons are in in different files that I'm going to need to send the variables (through the local connection) to the other file and visa-versa because some of the code references variables on the other page.

       

      If you happen to have 15-30 minutes to skim through the tutorial and help me I would appreciate it more than you could ever know, as I'm planning to use this same method on most websites I create in the future.

       

      NavBar Code:

       

      // Establish incoming local connection

      var receiving_lc:LocalConnection;

      receiving_lc = new LocalConnection();

      receiving_lc.connect("my_lc2_as3");

      receiving_lc.client = this;

       

      // Establish an outgoing local connection

      var sending_lc:LocalConnection;

      sending_lc = new LocalConnection();

       

      // Gives NavBar Buttons IDs

      navBar.servicesBtn.ID = 0;

      navBar.portfolioBtn.ID = 1;

      navBar.aboutBtn.ID = 2;

      navBar.contactBtn.ID = 3;

       

      navBar.addEventListener(MouseEvent.CLICK, crossFade);

       

      // Stors a reference to the currently visible clip

      var currentClip:MovieClip = pages_arr[0]

       

       

      // Function to send the fade command or hide command to the main .swf

      function crossFade(e:MouseEvent):void{

          // Creates a reference to the movieclip related to the button you just clicked

          var thisBtnsMovie:MovieClip = pages_arr[e.target.ID]

          if(currentClip != thisBtnsMovie){

              sending_lc.send("my_lc_as3","crossFadeFunc");

              currentClip = thisBtnsMovie;

          }

          if(currentClip == thisBtnsMovie){

              sending_lc.send("my_lc_as3","hidePages");

          }

      addChild(currentClip);

      }

       

      // Function to reset the pages_arr number if someone clicks the hide button

      function resetCounter(e:MouseEvent):void{

      import flash.display.MovieClip;

          var currentClip:MovieClip = pages_arr[5]

      }

       

      Main Page Code:

       

      // Establish incoming local connection

      var receiving_lc:LocalConnection;

      receiving_lc = new LocalConnection();

      receiving_lc.connect("my_lc_as3");

      receiving_lc.client = this;

       

      // Establish an outgoing local connection

      var sending_lc:LocalConnection;

      sending_lc = new LocalConnection();

       

      // Import GreenSock

      import com.greensock.*;

      import com.greensock.easing.*;

      import com.greensock.plugins.*;

      import flash.events.MouseEvent;

       

      TweenPlugin.activate([ScalePlugin]);

       

      // Creates an array for all the pages

      var pages_arr:Array = [servicesPage, portfolioPage, aboutPage, contactPage];

       

      // Sets all pages to invisible

      TweenMax.allTo(pages_arr, 0, {autoAlpha:0});

       

      // Sends the currentClip variable to the NavBar??? (Not sure if this is the right method)

      sending_lc.send("my_lc2_as3", "", currentClip);

      // Sends the pages_array to the NavBar??? (Not sure if this is right either)

      sending_lc.send("my_lc2_as3", "", pages_arr);

       

      // Function to fade in and out pages

      function crossFadeFunc(e:MouseEvent):void{

          // Fades out the current clip

          TweenLite.to(currentClip, 1, {autoAlpha:0, scale:1.2, ease:Quad.easeIn});

          // Fades in the new clip

          TweenMax.fromTo(thisBtnsMovie, 1.2, {scale:0}, {autoAlpha:1, scale:1, delay: .2});

      }

       

      // Function to hide pages if the user clicks on one of the hide buttons on the pages

      function hideAllPages(e:MouseEvent):void{

          // Fades out the current clip

          TweenLite.to(currentClip, 1, {autoAlpha:0, scale:1.2, ease:Quad.easeIn});

          // Tells the navbar code to reset the pages_arr counter

          sending_lc.send("my_lc2_as3","resetCounter");

      }

       

      // Adds event listeners to hide buttons located on each page

      servicesPage.hideBtn.addEventListener(MouseEvent.CLICK, hidePages);

      portfolioPage.hideBtn.addEventListener(MouseEvent.CLICK, hidePages);

      aboutPage.hideBtn.addEventListener(MouseEvent.CLICK, hidePages);

      contactPage.hideBtn.addEventListener(MouseEvent.CLICK, hidePages);

       

      P.S. If you have a program like FlashDevelop (that you can just copy/paste this code), the syntax and comments will be much easier to differentiate between.

        • 1. Re: Please help me with Local Connection & TweenLite
          kglad CommunityMVP

          to start, why aren't you using a main swf to load your navigation and your other pages?

          • 2. Re: Please help me with Local Connection & TweenLite
            SeanPercy42 Community Member

            This would be SO much simpler, I know but... I am floating the navigation bar icons at the bottom right corner of the page and couldn't figure out how to do that in Flash (only HTML using div tags & CSS). Like I said, if you have a better method that can bypass the local connection method, I am all ears. I would probably need very little help modifying the code to my needs if you know how to float the MC containing my icons using flash instead of div tags.

             

            Here is a screenshot of my website and I think you'll immediately see what I'm trying to do. The icons and my logo need to float left and right on the transparent navbar accoding to the page width and the whole bar (with the icons and logos on it) needs to float up and down according to the height of the window.

             

            The-Design-Hut-Website-(Night).jpg

            That's like a glass shelf under all the icons (you can barely see it).

            • 3. Re: Please help me with Local Connection & TweenLite
              kglad CommunityMVP

              use one main swf.

               

              create two loaders.  one that loads your pages (eg, page_loader) and one that loads your navigation (eg, nav_loader).

               

              use:

               

              addChild(page_loader);

              addChild(nav_loader);

               

              and load your nav swf with nav_loader and your all your other pages using page_loader.

              • 4. Re: Please help me with Local Connection & TweenLite
                SeanPercy42 Community Member

                How am I able to float my icons using a loader? From what I've briefly read about them is that they're mainly used for creating load screens. I've read how you can position something on the stage at certain coordinates (like a progress bar, image, or button) but not how to float the navbar icons to be 20 pixels from the right side of the window and 80 pixels from the bottom of it so they're always in the same location regardless of the users window size. If you look at the picture of my website, I need my logo to always be visible on the left side of the navbar and the icons to always be visible on the right side. The effect is that they're going to be sliding across the top of the glass shelf so users will never have to scroll left or right to access one of my buttons (unless they're viewing the site in less than a 800px wide window).

                • 5. Re: Please help me with Local Connection & TweenLite
                  kglad CommunityMVP

                  if you publish your main.html for 100%x100%, after your nav loads, you would use:

                   

                  stage.addEventListener(Event.RESIZE,resizeF);

                   

                  function resizeF(e:Event):void{

                  nav_loader.x=stage.stageWidth-nav_loader.width-20;

                  nav_loader.y=stage.stageHeight-nav_loader.height-80;

                  }

                   

                  if you have a fixed html size, you would use javascript (and flash'es ExternalInterval.call) to return the browser size and scroll position to position nav_loader.

                  • 6. Re: Please help me with Local Connection & TweenLite
                    SeanPercy42 Community Member

                    I tried using two loaders and my code must be wrong because nothing is showing up in the output window. Here is the code and perhaps you can let me know why it's not working:

                     

                    var main_night:Loader = new Loader();

                    var url:URLRequest = new URLRequest("Main_Night.swf");

                    main_night.load(url);

                    addChild(main_night);

                     

                    var navBar:Loader = new Loader();

                    var url:URLRequest = new URLRequest("navbar.swf");

                    navBar.load(url);

                    addChild(navBar);

                     

                    stage.addEventListener(Event.RESIZE,resizeF);

                     

                    function resizeF(e:Event):void{

                    navBar.x=stage.stageWidth-navBar.width-20;

                    navBar.y=stage.stageHeight-navBar.height-80;

                    }

                    • 7. Re: Please help me with Local Connection & TweenLite
                      kglad CommunityMVP

                      you wouldn't expect anything in the output panel unless its an error message. you should see both swfs (on-stage) if you see no error message.

                      • 8. Re: Please help me with Local Connection & TweenLite
                        SeanPercy42 Community Member

                        Sorry, meant the stage... I was able to get the main page and the navbar on the stage but the navbar is sliding very funny using the code you provided for resizeF. It starts out in roughly the right position but as I resize the window it slides to nearly the center of it (nearly 350 px away from the right side of the window) by the time the windows around 900px wide.

                        • 9. Re: Please help me with Local Connection & TweenLite
                          SeanPercy42 Community Member

                          Also, it the icons start out at the top-left corner of the screen and don't move to the correct location until I start to resize the window for the first time.

                          • 10. Re: Please help me with Local Connection & TweenLite
                            kglad CommunityMVP

                            are you publishing for 100%x100%?

                             

                            you need to use a complete listener to call resizeF() for initial positioning of your navBar.

                             

                            the position of the navBar is relative to the swf's top-left corner.  if that swf is not roughly the size of the 4 icons, there will be a problem.

                            • 11. Re: Please help me with Local Connection & TweenLite
                              SeanPercy42 Community Member

                              I guess I don't know what you mean by publishing for 100%x100%. When all is said and done I'm planning to export the swf, import it into a html file, and put a border around it (so anyone with a resolution higher than 1920x1080 will see a nice border and solid bg color instead of just a plain white background). I am still having trouble with positioning though. When I preview the file in flash the icons and logo are in the right locations if the window is full screened, but if I resize the window the logo slides off the screen to the left and the icons start to slide towards the middle of the window instead of staying on the right side of the glass shelf (my navbar). Then when I preview it in a browser the navigation bar isn't always on the screen and you have to scroll down to see it (which is not what I want). It would probably be easier if you open the file yourself to see what I mean. I just uploaded it and shared it on dropbox. Here is the link for the html and here is the link for the swf. If you download them both and then open the html in your browser, you can see how the navbar doesn't float for instance 10px from the bottom of the window (if you resize the window), and really doesn't move at all. If you download the complete project (here) you can see the icons and logo do move but the navbar does not. Thanks for all your help btw. I really appreciate it. I've been working on the design for about 6 months now and it's frustrating when I can't get one thing I thought would be incredibly simple (like floating the nav bar) figured out.

                               

                              P.S. I was able to get the complete event setup correctly so the items load (somewhat) in the correct location on the stage, but they still don't float correctly.

                              • 12. Re: Please help me with Local Connection & TweenLite
                                kglad CommunityMVP

                                click file>publish settings>html and publish for 100%x100%.

                                 

                                then publish your swf and html and open the html in your web browser to see if that's what you want.

                                • 13. Re: Please help me with Local Connection & TweenLite
                                  SeanPercy42 Community Member

                                  Nope, it just shrinks the whole swf to the fit the window. I just need the icons and logo to relocate/float if the window resizes. I need the main_night.swf to always be 1920x1080 regardless of the size of the users window. None of the swfs will need to resize, ever; just move. If you download and open the "complete.rar" (the 3rd link in my previous post). That's basically the right layout but the logo slides left off the screen if you resize the window (when it should stay in the same location) and the icons slide left (when they should also stay in the same location). When I then publish that file (using match movie dimensions under the HTML tab of publish settings, instead of 100%) everything is the right size but the navigation bar doesn't "float" and I need it to always be visible at the bottom of the window with the icons and logo on it (and also always on the screen).

                                   

                                  Also, when you preview the file in flash the logo and icons do float, but if you publish it nothing does.

                                  • 14. Re: Please help me with Local Connection & TweenLite
                                    kglad CommunityMVP

                                    then you'll need to use javascript to detect browser resizing and call actionscript to position your navBar.  use the ExternalInterface class addCallBack to call actionscript from javascript.

                                     

                                    use the sample html code in the help files (or use swfobject) to embed your main swf.

                                    • 15. Re: Please help me with Local Connection & TweenLite
                                      SeanPercy42 Community Member

                                      Then I'm back to where I started needing to control one swf from another over a local connection. I can setup div tags for the positioning of the navbar. I've done it before and it works okay. If you have experience with LCs (and have the time) feel free to look at the code from my 1st posting and see if you notice anything that looks incorrect. I haven't even tried running it yet because it's complex and I'm sure I made a couple mistakes (and wanted to do a little more reading before I did).

                                       

                                      Trying to control the TweenLite over the Local Connection seems to be the confusing part. I'm sure I could figure out how to launch an event (like going to a certain frame label) over the LC, but the TweenLite code uses a few new methods (giving buttons IDs and arrays) that I'm not too familiar with yet. Trying to pass variables/arrays over the LC (so the navbar knows if I clicked on the hide pages button on the main swf) is what's really confusing to me.

                                      • 16. Re: Please help me with Local Connection & TweenLite
                                        kglad CommunityMVP

                                        no, you can (and should) use one swf.

                                        • 17. Re: Please help me with Local Connection & TweenLite
                                          SeanPercy42 Community Member

                                          Why would I use one swf with two others imported into it. It makes it confusing when it doesn't need to be. I've created a site before doing exactly what I'm trying to do now but my computer crashed and I don't have the code to look at how I did it. I know for a fact that I used CSS to position one .swf file on top of another (in a div tag) and it worked perfectly. I don't know currently know javascript and would prefer to avoid it whenever possible, and know that I can in this situation.

                                           

                                          Positioning things using AS3 isn't as easy as positioning it on the stage either. I have always positioned things on the stage where I want them to be on site and it's a lot easier than trying to change the x/y coordinates in the AS any time I need to move something. I've noticed developers try to get you to do nearly everything possible using code, even when it's completely unnecessary. I use AS3 only when absolutely necessary while a lot of other "developers" are using it whenever possible.

                                           

                                          PLUS when using one swf to import two others, then you still have to worry about passing command from one swf to another. I wouldn't even know where to start, and it's not like you're giving me real detailed instructions. Please use actual code in your responses to help people.

                                           

                                          The fact is, I'm already trying to use tweenlite and a localconnection (two things I have very little experience with), so the navigation bar knows which page of my service book the user is currently on or if the book is even open so it knows when to fade it in or not.

                                           

                                          I feel like you're going completely off the map and recommending a method that hasn't provided any positive results in nearly two weeks. You say to "use one swf" for the whole project (which isn't a method I'm comfortable with), "use javascript to detect browser resizing and call actionscript to position your navBar", and "use the ExternalInterface class addCallBack to call actionscript from javascript" but don't explain specifically how to do any of this.

                                           

                                          Any chance you could just say "import these couple lines code in your html file which will activate javascript and position the navbar"; "import these couple of lines in your navbar.swf so it will know what page is currently open on the service menu (if any)"; and "import this into your main.swf so that your services book tweens in using tweenlite when you click on the specific button on the navbar.swf".

                                           

                                          The positioning and alignment of the navbar icons and background is nearly complete (using div tags, which works at least, even if it's not the complicated way that you would use to do it). So, all I really need to know now is how to tween to the right page in my book when you click on one of the icons on the navbar (over a LocalConnection and using TweenLite); how to not make it tween in again if it's currently open; and how to tween it out if you click on a hide button that's on the book. The book needs to slide in from the top of the page and then slide back up when it's "close" button is clicked. I'll keep working on the code but any advise that's not over complicated would be appreciated.

                                           

                                          I'm imagining (from my QBasic expierience) that the AS3 if/then/else statement needs to resemble "if bookVar == up then tweenin, if bookVar == down do nothing", and then set the bookVar variable at the end of a bookTweenDown function to == down. I'm just new to declaring variables and using arrays in AS3. It also needs to tween down with the right page open if you click on a different navbar icon. For instance clicking on the portfolio icon would bring down the book with the portfolio section open. Anything you don't understand about what I'm trying to accomplish please let me know.