4 Replies Latest reply on Apr 13, 2010 3:08 AM by wantedt3

    using tween class , add scroll functions.... help please

    Wantedt2

      hi there i'm trying to make a website with sliding pages via clicking on the buttons, scrolling a mouse wheel and draging a scroller button just like in this wesite http://swfc-shanghai.com/#/office

       

      for a moment i have done navigation via buttons, it works perfectly but i'm strugling with adding scrollbar (just like in that website) that i want to make it scrolable via mousewheel and that drager on the right side.

       

      can anybody help me to add those functions for mouse wheel scroll and drager.

       

      thanx.

       

      P.S by the way i am using as3 there is a code i got for now.

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

       

      import fl.transitions.Tween;

      import fl.transitions.easing.*;

       

      var homeX:Number = -301;

      var homeY:Number = 110;

       

      var newsX:Number = -17;

      var newsY:Number = -777;

       

      var aboutX:Number = -1354;

      var aboutY:Number = -445;

       

      var xTween:Tween;

      var yTween:Tween;

       

      xTween = new Tween(main_mc,"x",Strong.easeInOut,main_mc.x,homeX,2,true);

      yTween = new Tween(main_mc,"y",Strong.easeInOut,main_mc.y,homeY,2,true);

       

      home_btn.addEventListener(MouseEvent.CLICK, navigate);

      news_btn.addEventListener(MouseEvent.CLICK, navigate);

      about_btn.addEventListener(MouseEvent.CLICK, navigate);

       

      function navigate(event:MouseEvent):void

      {

      if(event.target == home_btn)

      {

      setTween(homeX,homeY);

      }

      else if(event.target == news_btn)

      {

      setTween(newsX,newsY);

      }

      else

      {

      setTween(aboutX,aboutY);

      }

      }

       

      function setTween(tweenX:Number,tweenY:Number):void

      {

      xTween.begin = main_mc.x;

      yTween.begin = main_mc.y;

      xTween.finish = tweenX;

      yTween.finish = tweenY;

      xTween.start();

      yTween.start();

      }

       

      xTween.stop();

      yTween.stop();

       

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

        • 1. Re: using tween class , add scroll functions.... help please
          Ned Murphy Adobe Community Professional & MVP

          This is a general approach to a solution that you should be able to build on--try working with it and if you have trouble post the code that isn't working and someone should be able to help further.  It's more important for you to work it thru and learn than to be handed a solution.

           

          For the mouse wheel you use an event listener for the mouseWheel event and use its delta property to determine which way to go...

           

          stage.addEventListener(MouseEvent.MOUSE_WHEEL, moveIt);

          function moveIt(evt:MouseEvent):void {
                if(evt.delta > 0){
                      trace("tween down"); // move towards +y
                } else {
                      trace("tween up"); // move towards -y
                }
          }

           

          Each increment of moving the wheel triggers the moveIt function (each click you likely hear).  So you can just move the movieclip relative to the delta value--the delta value is set by the user's preferences.

           

          For the scroller bar as in the example you point to, that essentially works based on the position of the handle relative to a central point.  The further from that point, the larger the step it takes for each incremental move.  To move the handle you use startDrag and stopDrag methods.  When a mouseDown event occurs on the scroller handle, an enterFrame event listener is initiated who's event handler function calculates a step value based on the handle's distance from the center, and the movieclip is moved that incremental distance.  As you drag the handle further from the center you increase that step value so the movie appears to move faster (it's just taking larger steps).  When you release the handle, the enterFrame event listener is removed and the handle is tweened back to its central location.

          • 2. Re: using tween class , add scroll functions.... help please
            Wantedt2 Level 1

            this is code example of scrolling via scroller i talked before, it does work but not very well- sometimes it does scroll my mc_x  sometimes not.. strange i know... maybe its something wrong with this code?

             

            import fl.transitions.Tween;

            import fl.transitions.easing.*;

             

            mc_scroll.buttonMode = true;

            var scroll_start_pos:Number = stage.stageHeight/2 - mc_scroll.height/2//iscentruoja scrolla

            var scroll_tvynas = new Tween(mc_scroll, "y", Strong.easeOut, mc_scroll.y, scroll_start_pos, 16, false);

            var slider:Rectangle = new Rectangle(512,0,0,stage.stageHeight);

             

            function drag(event:MouseEvent):void

            {

            event.target.startDrag(false, slider);

            }

             

            function dragStop(event:MouseEvent):void

            {

             

            mc_scroll.stopDrag();

            scroll_tvynas.begin = mc_scroll.y;

            scroll_tvynas.finish = scroll_start_pos;

            scroll_tvynas.start();

            }

             

            mc_scroll.addEventListener(MouseEvent.MOUSE_DOWN, drag);

            this.addEventListener(MouseEvent.MOUSE_UP, dragStop);

            • 3. Re: using tween class , add scroll functions.... help please
              Ned Murphy Adobe Community Professional & MVP

              As I explained, the site does not appear to use tweening for the scrolling, but instead uses an enterframe event listener/handler pair to gradually move the content in increments defined by the distance of the scroller from its center point.  It probably uses a tween to get the scroller back in place when you release it, but that's about it.  You can keep the enterframe active until the scroller tween completes, which will give the effect of the content slowing to a stop.

              • 4. Re: using tween class , add scroll functions.... help please
                wantedt3

                it seems it does work but i can't understand one strange thing about scroller. All drag functions works but , if i go with my mouse  pointer to right side ( while draging scroller) (just out of the area of scroller ,x), scroller stuck's and folow's the mouse even the mouse button is not clicked and to release the scroller i have to click on the screen again.. maybe anyone can help me with that.? there is a code:

                 

                import fl.transitions.Tween;

                import fl.transitions.easing.*;




                mc_scroll.buttonMode = true;


                var scroll_start_pos:Number = stage.stageHeight/2 - mc_scroll.height/2


                var slider:Rectangle = new Rectangle(900,0,0,stage.stageHeight-mc_scroll.height);



                var limit_top:Number = 0;

                var limit_bottom:Number = -mc_content.height + stage.stageHeight;

                //



                mc_scroll.x = 900;

                mc_content.x = 200;

                mc_content.y = 0;

                var mouse_daugiklis:int = new int(100);


                var daugiklis:int = new int(2);

                //****************************************************************


                 

                var scroll_tvynas = new Tween(mc_scroll, "y", Strong.easeOut, mc_scroll.y, scroll_start_pos, 16, false);

                var twynas:Tween = new Tween(mc_content, "y", Strong.easeOut, mc_content.y, stage.y, 3,true);


                function drag(event:MouseEvent):void

                {

                this.addEventListener(MouseEvent.MOUSE_UP, dragStop);

                event.target.addEventListener(Event.ENTER_FRAME, sukames);

                event.target.startDrag(false, slider);

                }


                function dragStop(event:MouseEvent):void

                {

                this.removeEventListener(MouseEvent.MOUSE_UP, dragStop);

                mc_scroll.removeEventListener(Event.ENTER_FRAME, sukames);

                mc_scroll.stopDrag();

                scroll_tvynas.begin = mc_scroll.y;

                scroll_tvynas.finish = scroll_start_pos;

                scroll_tvynas.start();

                }


                function sukames(event:Event):void

                {

                trace(mc_scroll.y);

                var increment_by:Number = scroll_start_pos - event.target.y;

                if(mc_content.y + increment_by<limit_top && mc_content.y + increment_by > limit_bottom)

                {

                twynas.begin = mc_content.y;

                twynas.finish = mc_content.y + increment_by*daugiklis;

                twynas.start();

                }

                }


                //buttons

                function judam(event:MouseEvent):void

                {

                if(event.target == btn_one)

                {

                jump(-300);

                }

                else if(event.target == btn_two)

                {

                jump(-600);

                }

                else

                {

                jump(-900);

                }

                }


                function jump(jumpY)

                {

                if(jumpY>limit_top)

                {

                jumpY = limit_top;

                }

                else if(jumpY<limit_bottom)

                {

                jumpY = limit_bottom;

                }

                twynas.begin = mc_content.y;

                twynas.finish = jumpY;

                twynas.start();

                }


                function mouseScroll(event:MouseEvent):void

                {

                if(event.delta > 0)

                {

                jump(mc_content.y + mouse_daugiklis);

                }

                else

                {

                jump(mc_content.y - mouse_daugiklis);

                }

                }


                mc_scroll.addEventListener(MouseEvent.MOUSE_DOWN, drag);

                btn_one.addEventListener(MouseEvent.CLICK, judam);

                btn_two.addEventListener(MouseEvent.CLICK, judam);

                btn_three.addEventListener(MouseEvent.CLICK, judam);

                stage.addEventListener(MouseEvent.MOUSE_WHEEL,  mouseScroll);