3 Replies Latest reply on Apr 12, 2017 1:56 PM by kglad

    How to create navigation code where each button goes to specific frame?

    derekh45143110

      Hi I'm new to animate and was looking for help regarding the navigation section. Please see images below for reference. I would like to have it so from the homepage you see below there is a navigation system and when you click on a certain button it takes you to that particular frame of the app. I managed to get it going to the gallery page and back to the home however once I add more code in it doesn't work and I'm not 100% how to write the code out for this. For example my gallery last 10 frames roughly so I wanted to start the music page on frame 12 and video frame 13. Also when on these page then the navigation must remain consistent so when I am on the video page the home and gallery buttons must go back to the relevant pages.

       

      Hope you can understand this and thank you for your help

      (ps- sorry if you don't like Celtic FC)

      Capture.PNGcode1.PNGcode2.PNG

       

       

       

      [Moved from non-technical Lounge to Adobe Animate forum by moderator]

       

      Message was edited by: Jane Edwards

        • 2. Re: How to create navigation code where each button goes to specific frame?
          derekh45143110 Level 1

          Hi I have since fixed this however I am now running into another issue perhaps you can help me on. screenshot1.PNGscreenshot2.PNG

           

          The first image you see here is my home gallery page which is fine and the second image you see is what happens when you click the next player button. However on the second image there should be a previous button that is sitting on frame 3 that allows you to scroll back and forward through the players, showing an image of each player and a description. I have added my code below from frames 2 and 3.

           

          code3.PNGcode4.PNG

           

          This particular part is where I think the problem lies but not sure on that

           

          scroll_bar.visible = false;

          previous_btn.addEventListener(MouseEvent.CLICK,ldContent);

          next_btn.addEventListener(MouseEvent.CLICK,ldContent1);

          function ldContent1(e:MouseEvent):void {

            img.source=("images/armstrong.png");

            textLoad("armstrong.txt");

          }

           

          I have taking two images of a screenshot to show the desired outcome below that I am after. As you can see each separate image will sit in the UILoader and the text on the right but the next and previous buttons are not showing this. Only the first initial click of next player plays the first image.

           

          outcome.PNG

          Thanks for your help

          • 3. Re: How to create navigation code where each button goes to specific frame?
            kglad Adobe Community Professional & MVP

            you should be using an array of image names and text file names (or just one array when you're ready to get fancier):

             

            var index:int = -1;

            var sourceA:Array = ['armstrong.png','player2.png',etc...];

            var textA:Array = ['armstrong.txt','player2.txt',etc..];

             

            previous_btn.addEventListener(MouseEvent.CLICK,prevF);

            next_btn.addEventListener(MouseEvent.CLICK,nextF);

            deactviateF(previous_btn);

             

             

            function prevF(e:MouseEvent):void {

            index--;

            if(index==0){

            deactivateF(previous_btn);

            }

            activateF(next_btn);

              img.source=("images/"+sourceA[index]);

              textLoad(textA[index]);

            }

            function nextF(e:MouseEvent):void {

            index++;

            if(index==sourceA.length){

            deactivateF(next_btn);

            }

            activateF(previous_btn);

              img.source=("images/"+sourceA[index]);

              textLoad(textA[index]);

            }

            function deactivateF(btn):void{

            btn.alpha = .3;

            btn.mouseEnabled=false;

            }

            function activateF(btn):void{

            btn.alpha = 1;

            btn.mouseEnabled=true;

            }

            1 person found this helpful