1 2 Previous Next 56 Replies Latest reply on Jul 21, 2014 7:40 AM by Ian750

    Tutorial On How Make a Custom Scrollbar

    Zaxist Level 4

      well, First of all sorry for my bad english, i wanted to share my knowlege on this and i tried my best to say it in easyest way, So let's begin:

       

      1- Download Custom Scrollbar File.

          This file have all JS files with a CSS file that makes or Scrollbar custom and CustomScrollbar.an file as an example

       

      2- you just put these files in your project folder like pictures below

      image.jpg

       

      3- then goto stage > compositionReady and write these codes without any changes :

          ( i don't know why but any changes would make your project freez !! )

          

               yepnope({nope:[ 'jquery.mCustomScrollbar.css',

                                            'jquery.mousewheel.min.js',

                                            'jquery.mCustomScrollbar.js',

                                            'jquery-ui-1.8.21.custom.min.js',

                                            'jquery-1.8.3.min.js',

                                         ],complete: init});

                     function init (){ }

       

      4- well now this is the code that would make your scrollbar custom :

       

                sym.$("Your Symbol Name Here").mCustomScrollbar({

                                                                                          scrollInertia:500,

                                                                                          scrollEasing:"easeOutCirc",

                                                                                          scrollButtons:{

                                                                                                   enable:false

                                                                                             }

                                                                                      });

       

      5- Now go to you project and for example make a Text and write in it several lines,

          then set overflow properties to auto and thats it...

       

      you have your Customized Scrollbar in your Edge Project just hit ctrl+Enter to enjoy it

       

      I Tested on Safari Browser for iPad and iPhone with iOS 6.0.1 and Mac OSx 10.8 Mountain Lion

      On the Desktop on Maxthon v4.0.3.1000, Firefox 18.0.1, Chrome Canary 26.0.1397.0, Internet Explorer 9.0.8112.16421

       

      i got CSS and JS file from http://manos.malihu.gr/jquery-custom-content-scroller/ and figure it out by my self to make it works on Edge Animate, i also put a example edge file in download file.

       

      Note : you can read jQuery Custom Content Scroller.doc file to know how change style for your own use.

       

      Note : any Changes on Part 3 would make you browser freez, you can try it by your self

       

      Note: you can Change CSS file for your own style with Dreamveaver, some times after change CSS file wouldn't load on Chrome, Safari and Maxthon, to fix just change a number on that CSS file and save it again, ( like changing opacity from 1 to 0.99)

       

      Note : you can use codes on part 4 anywhere you wanted to have your scrollbar, i make an example in the file

       

       

      feel free to ask any question you have about Customize Scrollbar.

       

      Zaxist.

        • 1. Re: Tutorial On How Make a Custom Scrollbar
          Ian750 Level 1

          Hi Zaxist,

          Thank you this very helpful post on Custom Scrollbars.

          I found that applying the Scrollbar to a single textblock in Edge worked well. 

           

          However, if I create a symbol of several different text layers (with different formatting for example), the Custom Scrollbar will not work with this symbol.

           

          Do you know if there is a way to apply the Custom Scroller to symbols?

          Thanks, Ian

          • 2. Re: Tutorial On How Make a Custom Scrollbar
            Zaxist Level 4

            Hi lan

             

            i'm glad that you liked my Tutorial, anyway your answer is yes

            here is a way that you can create an custom scrollbar and apply it to your stage and all other diffrent text layers and diffrent formating and etc...

             

            this would affect on all symbols and div and text that you Set their Overflow to scroll or auto !!

            but you can have your text scroll style by First tutorial and all others with this tutorial looks like Multi Scrollbars in the end

             

            you just have to Open your Project Name.html file with Dreamweaver or Notepad and add these codes inside of body style tag like below :

             

            <body style="margin:0;padding:0;">

                      <div id="Stage" class="EDGE-XXXXXXXX">

                      </div>

             

            <style scoped contenteditable>/* For the "inset" look only */

            /* Let's get this party started */

            ::-webkit-scrollbar {

                width: 12px;

            }

             

            /* Track */

            ::-webkit-scrollbar-track {

                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

                -webkit-border-radius: 10px;

                border-radius: 10px;

            }

             

            /* Handle */

            ::-webkit-scrollbar-thumb {

                -webkit-border-radius: 10px;

                border-radius: 10px;

                background: rgba(255,0,0,0.8);

                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

            }

            ::-webkit-scrollbar-thumb:window-inactive {

                      background: rgba(255,0,0,0.4);

            }

            </style>

             

            </body>

             

             

            Note :  This just Work on  (Maxthon, Google Chrome and Safari) Browsers and also with new Apple Devices...

            it Won't Work with IE and Firefox

             

            Zaxist.

            • 3. Re: Tutorial On How Make a Custom Scrollbar
              Zaxist Level 4

              There are a variety of scrollbar properties to choose from, all which must be -webkit prefixed:

               

              • scrollbar
              • scrollbar-button
              • scrollbar-track
              • scrollbar-track-piece
              • scrollbar-thumb
              • scrollbar-corner
              • resizer

               

              Even better is that there are a number of pseudo classes which can be used.  From the WebKit blog post:

              ==================================================================================

               

              :horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.

               

               

              :vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.

               

               

              :decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).

               

               

              :increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).

               

               

              :start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.

               

               

              :end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.

               

               

              :double-button – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.

               

               

              :single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.

               

               

              :no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.

               

               

              :corner-present – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.

               

               

              :window-inactive – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)

               

               

              In addition the :enabled, :disabled, :hover and :active pseudo-classes also work with scrollbar pieces.

               

              ==================================================================================

               

              Source : http://davidwalsh.name/custom-scrollbars

               

              Zaxist

              • 4. Re: Tutorial On How Make a Custom Scrollbar
                Ian750 Level 1

                Hi Zaxist,

                Thx for the prompt reply :-)

                I had a look at your suggestion, but I'm not sure that will apply to my problem.

                 

                My question is really one about formatting text in a single scrolling textbox.  I can add a text box with the Custom Scrollbars quite nicely,

                but all the text is formatted in the textbox exactly the same way. 

                 

                As far as I can tell, I can't add paragraph tags <p>, or Header tags or even bold <strong> tags to the text inside of an Edge textbox. 

                 

                If I could do that it would solve my problem.  I really just need a way to format the text inside of a Custom Scrolling Textbox.

                 

                As far as my testing has shown, I can't apply a Custom Scroll bar to a Text Symbol (made up of multiple text layers, each formatted differently).

                (If that was possible then I need to learn how it can be done... :-)

                 

                However, if that isn't possible, and you happen to know how formatting can be applied to text in a single textbox, that would solve my problem as well.

                Also, Firefox is my primary browser. I am looking for a solution that will work with it.

                 

                Thanks again very much,

                Ian

                • 5. Re: Tutorial On How Make a Custom Scrollbar
                  Zaxist Level 4

                  if you can see Scrollbar right now in your project that would apply to it

                   

                  but you can have your text style by adding tags like this :

                   

                  if you have a text box in the stage with a text like Test then you can change it with tags like this :

                   

                  Write in Stage>compositionReady:

                   

                   

                  sym.$("Text").html("Good and evil, beauty and beast, angels and demons...<p>And a person can be good or be evil, be an angel or live like a monster.</p><p>Are we obliged to choose between these two...? Or is it just a question of restoring equilibrium...?</p> <p>How can humanity embrace the long forgotten angelic beauty of wisdom and tenderness in this world of monstrous greed, ignorance, and bigotry? </p><p>This is the inner conflict of mankind whose nature and world is based on duality and paradox...</p> <p>And our world is a manifestation of our inner conflict...</p><p>Have demons overcome the angels?</p>");

                   

                                                sym.$("Text").mCustomScrollbar({

                                                          scrollInertia:500,

                                                          scrollEasing:"easeOutCirc",

                                                          scrollButtons:{

                                                                    enable:false

                                                                              }

                                                          });

                   

                  Note: you shoud write like this without any Enter  !! if you have  a larg text then it would be a large line in edge...

                   

                  Zaxist

                  • 6. Re: Tutorial On How Make a Custom Scrollbar
                    Zaxist Level 4

                    i Made a Sample for you with Symbol..

                    http://www.mediafire.com/download.php?x8ai8bikci2ajls

                     

                    image.jpg

                     

                    this way Won't Work with IE and Firefox

                    • 7. Re: Tutorial On How Make a Custom Scrollbar
                      Ian750 Level 1

                      Hi Zaxist,

                      That was a very interesting test.  The "Text" file you made shows nicely how different formatting can be applied to a text symbol. It even displayed in Firefox.

                       

                      However,  when I applied the Custom Scrollbar css and js files, the scrolling text would not display at all. (Actually, the text would appear briefly, and then disappear.) This may have been the behaviour you were referring to when you said it wouldn`t work in Firefox.

                       

                      However, next I tried the .html method. This showed a lot of promise, since the text displayed properly in Edge.

                      But at first  the Custom Scrollbar did not appear beside the text... So then I switched the order in compositionReady

                      and put the .html method first, and it worked!!!!   The Custom Scrollbar also works as well!!!

                      I was even able to add css to the text. Quite amazing... I believe this is the solution, and best of all, it *works* in Firefox!

                       

                      Thank you very much, especially for your timely response.

                      You have been a great help,

                      Ian

                       

                      -------------

                      On the Stage, I used the following:

                      compositionReady

                       

                      // insert code to be run when the composition is fully loaded here

                      yepnope({nope:[

                           'css/jquery.mCustomScrollbar.css',

                           'css/myStyles.css',

                           'js/jquery.mousewheel.min.js',

                           'js/jquery.mCustomScrollbar.js',

                           'js/jquery-ui-1.8.21.custom.min.js',

                           'js/jquery-1.8.3.min.js',],complete: init});

                       

                      function init (){

                           sym.$("text2").html("<h3>Title</h3><p>My very long text goes here....</p>");               

                           sym.$("text2").mCustomScrollbar({

                                          autoDraggerLength:true,

                                          scrollInertia:800,

                                          scrollEasing:"easeOutCirc",                    

                                          scrollButtons:{

                                                  enable:false,

                                                  scrollType:"continuous",

                                                  scrollSpeed:20,

                                          }

                          });

                      }

                      • 8. Re: Tutorial On How Make a Custom Scrollbar
                        Zaxist Level 4

                        yes lan, your code is right in the end, and i'm glad that i could help you...

                         

                         

                        Note :  the Sample i made at last is only for Symbols and will not work with mcustomscrollbar method, and will shows only on Google Chrome, Safari and Maxthon browsers, and if you tried that as you said it would dissappear after run....

                         

                        Note :  the symbol that i made could be Only with normal Scrollbar in Firefox, and if i said wont work with IE and Firefox i said for Scrollbar not the text style

                         

                        Note : if you want your text in Stage then you shoud allways put your text and your style inside of function init(), otherwise will not work at all !! like you did already..

                         

                        Zaxist.

                        • 9. Re: Tutorial On How Make a Custom Scrollbar
                          Ian750 Level 1

                          Hi Zaxist,

                          I have made some good progress, but I did run into a snag. I can't tell if it is a quirk with my code

                          or something else I've missed in Edge.

                           

                          But what I've discovered is that if I have more than one textbox defined (with different symbol names),

                          only *one* of them will work at a time. The textboxes are at different parts of the timeline, and reached by a click event.

                          I compared this code with your example that has two working Custom Scrollbars but I can`t see anything different in the

                          code to explain the behaviour.

                          Anyways, if you know what might be amiss, I`d be pleased to hear from you,

                          Thanks again,

                          Ian

                           

                          Here is the code I`m using on the Stage:

                           

                          // insert code to be run when the composition is fully loaded here

                          yepnope({nope:[ 'css/jquery.mCustomScrollbar.css',

                                   'css/mural_scrolltext.css',

                                   'js/jquery.mousewheel.min.js',

                                   'js/jquery.mCustomScrollbar.js',

                                   'js/jquery-ui-1.8.21.custom.min.js',

                                   'js/jquery-1.8.3.min.js',

                                  ],complete: init});

                           

                              function init (){

                                  sym.$("text1_sym").html("<h3>Title 1</h3><p>much more text</p>");

                                  sym.$("text2_sym").html("<h3>Title 2</h3><p>much More text</p>");

                                  sym.$("text3_sym").html("<h3>Title 3</h3><p>much more text</p>");

                           

                                  sym.$("text1_sym").mCustomScrollbar({

                                          autoDraggerLength:true,

                                          scrollInertia:800,

                                          scrollEasing:"easeOutCirc",                    

                                          mousewheel:true,

                                          mouseWheelPixels:40,

                                          scrollButtons:{

                                              enable:false,

                                              scrollType:"continuous",

                                          }

                                      });

                                  sym.$("text2_sym").mCustomScrollbar({

                                          autoDraggerLength:true,

                                          scrollInertia:800,

                                          scrollEasing:"easeOutCirc",                    

                                          mousewheel:true,

                                          mouseWheelPixels:40,

                                          scrollButtons:{

                                              enable:false,

                                              scrollType:"continuous",

                                          }

                                      });

                                  sym.$("text3_sym").mCustomScrollbar({

                                          autoDraggerLength:true,

                                          scrollInertia:800,

                                          scrollEasing:"easeOutCirc",                    

                                          mousewheel:true,

                                          mouseWheelPixels:40,

                                          scrollButtons:{

                                              enable:false,

                                              scrollType:"continuous",

                                          }

                                      });

                              }

                          • 10. Re: Tutorial On How Make a Custom Scrollbar
                            Zaxist Level 4

                            Hi lan

                            your code is right and i'm sure your problem is not your code...

                            i think maybe your Problem is your files that you are using, i see 'css/mural_scrolltext.css', in yepnope, i dont know what is it and how you wanted to use it but remove this file would help you, any way i copy paste your codes in a project and everything works very well you can get it from here :

                            http://www.mediafire.com/download.php?bgflqmbd0bkuzz0

                            • 11. Re: Tutorial On How Make a Custom Scrollbar
                              Zaxist Level 4

                              in the end if you couldn't get succeed, send me your project so i can help you better...

                              • 12. Re: Tutorial On How Make a Custom Scrollbar
                                Ian750 Level 1

                                Hi Zaxist,

                                Thanks for your offer.  I have included a link to the test project. 

                                The project is incomplete but will illustrate the issue.

                                If you open /publish/web/m154.html and click on Next some text links will show up on the right side. Each one will display different text.

                                In Firefox, the first two links show the custom scroll bar, but they don`t scroll.

                                The third link `Market Garden` shows a working scrollbar.  This is curious, since the code for all three

                                appears to be the same.

                                https://www.dropbox.com/sh/z1fohewhqy4oshu/v6_02SozEc

                                Thanks in advance,

                                Ian

                                • 13. Re: Tutorial On How Make a Custom Scrollbar
                                  Zaxist Level 4

                                  Hi lan

                                   

                                  i made some correction in your project...

                                   

                                  1 - renamed jquery.mCustomScrollbar.css to mCustomScrollbar.css ( Just for make name clear )

                                   

                                  2 - deleted (sicily_text_sym  & text2b_training_sym) and renamed ( market_text_sym to Content )

                                   

                                  3 - removed your codes in Stage and made some changes in your timeline and applied codes there and changed your button's Click action

                                   

                                  Here is your currect project : http://www.mediafire.com/download.php?bf9sj0p8agbgp8i 

                                   

                                  Problem in your project was for :

                                  you used too many text in over each other and when you called Lower layer ( for example sicily_text_sym by click on sicily_btn_sym ) you coudn't have click on it because of Upper layer  ( market_text_sym was on over it ), this ability Called z-index in Edge and similar Programs that works with layers..

                                   

                                  i removed them for you and left just One layer there and made changes to that layer only and now you can have your Scrollbar working for all of them...

                                   

                                  Note: your Scrollbar is already work now with your project right now but you have to remove the upper layer to figure it out by your self that is working currectly and it doesn't have to do anything with multiple text and text formating

                                   

                                  Enjoy your project

                                   

                                   

                                  Zaxist

                                  • 14. Re: Tutorial On How Make a Custom Scrollbar
                                    Zaxist Level 4

                                    i have suggestion for you that can help you to make your project easier..

                                     

                                    i see you used timeline and 2 diffrent text symbol and convert those into one symbol just to make an mouse over and mouse out action !!

                                     

                                    you can make it very easy by using code !! try these steps and you will see it by yourself

                                     

                                    in this Example you made Korean War again with just using programming

                                     

                                    A - Create a Text and write Korean War inside of it and make it like what you made already in your Project with name : korean_btn

                                     

                                    B - Now Open text Action and

                                         add Mouse Over and write :

                                         sym.$("Text").css({"color":"#ffffff"});

                                     

                                         add Mouse Out and write :

                                         sym.$("Text").css({"color":"#ffefa5"});

                                     

                                         add Click and write :

                                         sym.play("Korean");

                                     

                                    Now you're done !

                                     

                                    Note : you have these hex codes of color when you wanna choose color for your symbol

                                     

                                    Zaxist

                                    • 15. Re: Tutorial On How Make a Custom Scrollbar
                                      Ian750 Level 1

                                      Hi Zaxist,

                                      I read your note on Saturday and realized immediately you were right

                                      that it was a layers issue with the page. I was away this weekend so I only

                                      got to work on the project Sunday night.

                                       

                                      I very much liked your solution to different scrolling textboxes, it is very clean and elegant.

                                      It was such a relief to get your reply with a solution so quickly.

                                       

                                      I am very grateful for your help, and also for the suggestion on the mouseover color change!

                                      I got the project working last night and it is already posted today.

                                       

                                      You have already helped me so much I almost don't know how to thank you enough.

                                      I did however think of one more feature I hadn't been able to implement yet in Edge I would like to ask you about.

                                       

                                      You would have noticed the slideshow in the project.

                                      I haven`t been able to get Pause/Play controls to work.

                                       

                                      Would you happen to know of method to implement these controls for a slideshow? 

                                      I was able to get Forward, Back buttons working but not the Pause/Play.

                                       

                                      Anyways, thank you again for your help. It is very much appreciated.

                                      Ian

                                      • 16. Re: Tutorial On How Make a Custom Scrollbar
                                        Zaxist Level 4

                                        Hi lan

                                         

                                        it's good to read your comment, i'm glad that i could help you

                                         

                                        Making Pause and Play button isn't so difficult, you just need some experience on programming language, i made a simple sample for you like what you had in your project, just images has been changed

                                         

                                        here is a link to Slideshow project :  http://www.mediafire.com/download.php?sj96ucmcdo4g0rt

                                         

                                        i hope you like this one too

                                         

                                        anyway i liked your project, actually i liked the story and images, please leave your complete project link here if it's now on the web, i like to visit it and read the stories

                                         

                                        Zaxist

                                        • 17. Re: Tutorial On How Make a Custom Scrollbar
                                          Ian750 Level 1

                                          Hi Zaxist,

                                          Once I get this project tidied up I will certainly send you the link to it.

                                          btw, I tried the slideshow link on your previous message and for some reason I got an error message.

                                           

                                          Could you repost that link for me, and I'll try it again?

                                          Thanks very much,

                                          Ian

                                          • 19. Re: Tutorial On How Make a Custom Scrollbar
                                            Ian750 Level 1

                                            Hi Zaxist,

                                            I enjoyed looking over your code to see how you made the button interactions.

                                            It was also interesting to see how you used sprites.  It helped me appreciate how useful they could be.

                                            I've not used them before. I also think it would be possible to build a pause/play button that toggled in the same location.

                                            Fading in sprites should be useful too. I've started to experiment with them in the slideshow.

                                            As for the project link, I've included it below. Almost all of the 'panels' are built with flash. Only a few including the one you helped me with are developed with Edge. It is an ongoing effort.

                                            Thanks again for your help.

                                            Regards,

                                            Ian

                                            https://www.dropbox.com/s/06wfdh5wi6034ib/mural_url.txt

                                            • 20. Re: Tutorial On How Make a Custom Scrollbar
                                              Zaxist Level 4

                                              Hi Ian

                                               

                                              you're welcome, i liked to help you on your project, it was always pleasure to read your comment after..

                                               

                                              i visited the site and of course i straight look forward to Project #154 and it was beautiful as i expected, i enjoyed pictures very much, also the stories was lovely...

                                              just One thing you missed to do on the Project was you forgot to make thumb point for Back button.. !! making that change will makes it perfect...

                                              also i liked to see play and pause buttons for pictures but they was missed !! i hope you add them too.. those would make your Project Professional

                                               

                                              i'm glad that you liked the way i used codes in Slide Show... and yes, it is possible to make buttons over each other and just some lines needed to be add to make it looks good..

                                               

                                              at any time you needed help you can count on me, it's my pleasure to help you...

                                               

                                              With best reguards

                                               

                                              Zaxist

                                              • 21. Re: Tutorial On How Make a Custom Scrollbar
                                                Ian750 Level 1

                                                Hi Zaxist,

                                                Thanks for your comments.  I fixed the thumb cursor on the Back button.

                                                I am still working on the slideshow pause/play buttons.  I still have some minor bugs to work out.

                                                If I cannot fix them I may have to ask your help again.  

                                                 

                                                Regards,

                                                Ian

                                                • 22. Re: Tutorial On How Make a Custom Scrollbar
                                                  Zaxist Level 4

                                                  Hi Ian

                                                   

                                                  Don't worry about Slide Show, if you couldn't fix bugs i'll help you

                                                   

                                                  Reguards

                                                  Zaxist

                                                  • 23. Re: Tutorial On How Make a Custom Scrollbar
                                                    Ian750 Level 1

                                                    Hi Zaxist,

                                                    I got some things working on the slideshow, but not everything, so I'll gladly take you up on your offer.

                                                    I got the sprite sheet working, but in a different way (since I had trouble getting the css.clip method to work).

                                                     

                                                    However, as you will see in the example, the pause only stops the slideshow after the current slide fades out and the next image fades in.

                                                    The Play button doesn't restart the slideshow at all.  I wanted to see if I could get it to work without absolute references in ms to the timeline.

                                                    Maybe it's not that easy this way, but perhaps you can see what it might need to work.

                                                    Thanks again,

                                                    Ian

                                                    https://www.dropbox.com/sh/z1fohewhqy4oshu/7vx1vUX7m4/slideshow_test2a.zip

                                                    • 24. Re: Tutorial On How Make a Custom Scrollbar
                                                      Zaxist Level 4

                                                      Hi Ian

                                                       

                                                      there is no way that you can make play and pause button work in edge animate without absolute references in ms !!

                                                      and even i cant undrestand why you want to make something like that ?

                                                      for example if i press pause button when the pic is in 90% fade out what would be intersting in it ?

                                                      i just missed the pic and have to press play button to play from that moment to going to next pic !

                                                       

                                                      but don't worry, i add some trick in action to make it work in the way you wanted

                                                       

                                                      i also made the play and pause button in diffrent way without clipping, so i think this way would be easiest for you to undrestand

                                                       

                                                      Here is The Slideshow Link : http://www.mediafire.com/?vbp0u3imbgc5guq

                                                       

                                                      Note : the way you write action wouldn't work, you should know the tricks and how can use them...

                                                      i suggest you these links :

                                                      http://www.w3schools.com/  > look at HTML4 and HTML5 and CSS3 to undrestanding how can program in Edge for them

                                                       

                                                      and also : http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html > this would help you to undrestanding how can program in Edge with Scripts..

                                                       

                                                      Reguards

                                                      Zaxist

                                                      • 25. Re: Tutorial On How Make a Custom Scrollbar
                                                        Zaxist Level 4

                                                        i just Forgot to add Flag on the Start lable in time line

                                                        you add this line in there

                                                         

                                                        Flag = 1000;

                                                         

                                                        Zaxist

                                                        • 26. Re: Tutorial On How Make a Custom Scrollbar
                                                          Ian750 Level 1

                                                          Hi Zaxist,

                                                          Thank you for the revised code. I realize the references to the timeline in ms works the best for the slideshow.  Your code works very nicely. I agree that I am still getting familiar with coding in the Edge API.

                                                           

                                                          I got the slideshow to work, with one exception I hope you can help me with.

                                                          The Pause/Play function works very well, but I've also added a Back and Forward buttons.

                                                           

                                                          The Back and Forward btns do work, but *only* when the Slideshow is Paused first ("Play" btn showing).

                                                           

                                                          What I wanted to implement was that if the Slideshow was Playing (the "Pause" btn showing), that when either the Back or Forward btns were clicked, the Slideshow would get paused, and then the Pause/Play button would change to "Play" (showing it was Paused).

                                                           

                                                          Then the slideshow would go backward or advance based on what button was clicked.

                                                           

                                                          There are two issues.  When the slideshow is Playing ("Pause" btn showing)

                                                          1. both Back and Forward btns play "twice" before slideshow pauses. Then they work okay.

                                                          2. the Pause/Play button .css moves the button to the upper-left corner on the stage,

                                                          rather than changing the sprite sheet background to "Play". (the symbol isn't accessed correctly)

                                                           

                                                          I'm hoping you can see where I went wrong with the coding.

                                                           

                                                          Thanks again,

                                                          Ian

                                                           

                                                          https://www.dropbox.com/s/c062phuuiva5tud/slideshow_test6a.zip

                                                          • 27. Re: Tutorial On How Make a Custom Scrollbar
                                                            Zaxist Level 4

                                                            Hi Ian

                                                            i made your button currect and i made action in the way you wanted, and it was so easy, you could also do that, i think you just need to change the way you are looking into actions !!

                                                             

                                                            also i made a Note in Play/Pause button for you to undrestanding better how it works

                                                             

                                                            Here is the link : http://www.mediafire.com/?eks31cp7w4j0bbb

                                                             

                                                            if you had any Question Ask me

                                                             

                                                            Reguards

                                                             

                                                            Zaxist

                                                            • 28. Re: Tutorial On How Make a Custom Scrollbar
                                                              Ian750 Level 1

                                                              Hi Zaxist,

                                                              It has been awhile since my last message, I wanted to say I found your sample file very useful.

                                                              It was very interesting to study your methods. I made some minor changes to customize the slideshow and overall it works very well.

                                                               

                                                              I wanted to let you know again how grateful I am for your help. I learned a lot from your examples.

                                                              Thanks again,

                                                              Ian

                                                              • 29. Re: Tutorial On How Make a Custom Scrollbar
                                                                talented-and-curious

                                                                Hi Zaxist,

                                                                 

                                                                thank you a lot for this Tutorial! I was trying to include that extension before, but I could't because of lack of knoledge...

                                                                 

                                                                It works great for me with vertical scrolling - but what about horizontal scroll bars?

                                                                I tried to change that line: "horizontalScroll:false, /*scroll horizontally: boolean*/" from false into boolean (with dreamweaver in "jquery.mCustomScrollbar.js"),

                                                                but it simply doesn't work.

                                                                 

                                                                In my animation, there is only a horizontal scrollbar needed, no vertical one. If I set the "false" to "true", the animation doesn't work at all.

                                                                 

                                                                Can you please help me?

                                                                 

                                                                I really want this thing to work!

                                                                 

                                                                Thanks a lot,

                                                                 

                                                                Kat

                                                                • 30. Re: Tutorial On How Make a Custom Scrollbar
                                                                  Zaxist Level 4

                                                                  hi

                                                                   

                                                                  change to true not boolean !!, boolean is a type of value not a value !!

                                                                   

                                                                  horizontalScroll: true;

                                                                   

                                                                  Zaxist

                                                                  • 31. Re: Tutorial On How Make a Custom Scrollbar
                                                                    yulbri_65

                                                                    hi, Zaxist:

                                                                    sorry i'am not an expert. ¿can i use this custom scrollbar in another type of container (not text)? i'm trying to use it, but it only works with text containers. if i use a rectangle as container, it does not show any scrollbar in the browser.

                                                                     

                                                                    Thanks for all your help.

                                                                    • 32. Re: Tutorial On How Make a Custom Scrollbar
                                                                      Zaxist Level 4

                                                                      if you want to use scroll for a symbol or div you should use NiceScroll plugin

                                                                       

                                                                      Download it from Here : http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js

                                                                       

                                                                      yepnope({nope:[ 'jquery.nicescroll.min.js',

                                                                                             ],complete: init});

                                                                      function init (){

                                                                                           sym.$("Your Symbol/Element Name").niceScroll();

                                                                      }

                                                                       

                                                                      for more detail on how to customize it go here :

                                                                      http://areaaperta.com/nicescroll/

                                                                       

                                                                      Reguards

                                                                       

                                                                      Zaxist

                                                                      • 33. Re: Tutorial On How Make a Custom Scrollbar
                                                                        yulbri_65 Level 1

                                                                        thanks, i'll try it... when i have time. thanks again for your help

                                                                        • 35. Re: Tutorial On How Make a Custom Scrollbar
                                                                          Zaxist Level 4

                                                                          i'm glad that i could help you

                                                                           

                                                                          Zaxist

                                                                          • 36. Re: Tutorial On How Make a Custom Scrollbar
                                                                            ladobeugm Level 1

                                                                            This is a great tutorial but I'm having an JS error issue with the code. I had to insert the code inside of a symbol on a click event. If I had it in compositionReady, the scrollbar would not appear.

                                                                             

                                                                            I now get the scrollbar but I also receive a JS error in console.

                                                                             

                                                                            This is my code.

                                                                            var stage = sym.getComposition().getStage()

                                                                            stage.$("content").show();

                                                                            sym.getComposition().getStage().getSymbol('content').$('head').html('Individuality');

                                                                            sym.getComposition().getStage().getSymbol('content').$('copy').html('<p>Copy goes here.</p>')

                                                                            sym.getComposition().getStage().getSymbol('ribbon').css({display: none});

                                                                            sym.getComposition().getStage().getSymbol('contentBot').$('copy').mCustomScrollbar({

                                                                                            scrollInertia:500,

                                                                                            scrollEasing:"easeOutCirc",                    

                                                                                            scrollButtons:{

                                                                                                enable:true

                                                                                                    }

                                                                                            });

                                                                            And if I click on the button that runs this code, I get this:

                                                                             

                                                                            Javascript error in event handler! Event Type = element

                                                                             

                                                                            Any idea how to correct it?

                                                                            • 37. Re: Tutorial On How Make a Custom Scrollbar
                                                                              Zaxist Level 4

                                                                              Hi

                                                                              sorry for my late,

                                                                               

                                                                              we have great samples in this topic, did you tried them to see where is your problem ?

                                                                               

                                                                              if you did this just sent me your  project file so i can tell you where is your problem, cause your code is right

                                                                               

                                                                              Zaxist

                                                                              • 38. Re: Tutorial On How Make a Custom Scrollbar
                                                                                ladobeugm Level 1

                                                                                Zaxist,

                                                                                 

                                                                                No problem with the delay. I can't post the files online due to NDA. I could email them to you but I don't have your email address. Can you provide that somehow?

                                                                                • 39. Re: Tutorial On How Make a Custom Scrollbar
                                                                                  resdesign Adobe Community Professional & MVP

                                                                                  You can PM a link to your file to members by clicking on the user name or icon on the left and then click on private message (the right of the screen.)

                                                                                  When you post your files to your Adobe cloud account or any other cloud storage account, you will have the option to copy the link to your files.

                                                                                  1 2 Previous Next