Skip navigation
Currently Being Moderated

Custom Scroll in Flash (working on mouse wheel)

Nov 4, 2011 6:45 AM

I am searching the web for a good working vertical scroll in Flash and don't seem to find a good solution. I will use it for the product page layout with all the images. So I suppose it means no text scroll but an MC scroll.

My main design issue is that I would like a user to be able to scroll it with the mouse whell (same way like frames in HTML).

I don't like than the entire site layout scrolls up, I would much rather designate a section in the site layout where the info can be scrolled. This way the logo of the site and all the main navigation on the top will always be visible.

Main issue is that I can not find a scroll which would work on mouse wheel scroll, a user is always have to grab the bar or click on the up/down arrows in order for  the scroll to work.

Is it possible to make a scroll work on a mouse wheel in flash?

 
Replies
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 4, 2011 10:41 AM   in reply to nikolaig

    Try ScrollPane component. It's basically a MovieClip container with vertical and horizontal Scrollbars attached. You can assign it content using source property. After manipulating source, you should call update() method to update scrollbars to new content.

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 4, 2011 10:43 AM   in reply to nikolaig

    You can find ScrollPane component in Components panel: Main Menu -> Window -> Components Panel (Ctrl+F7) -> User Interface -> ScrollPane

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 4, 2011 11:50 AM   in reply to nikolaig

    It scrolls on wheel event by default. Just make sure to have mouse over the component - that's the default behaviour. Take a look at my example: http://dev.flashlabs.eu/examples/scroll-pane/

    You can download the source and take a look: http://dev.flashlabs.eu/examples/scroll-pane/source.zip

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 4, 2011 11:56 AM   in reply to nikolaig

    I updated the example and added the MouseEvent.MOUSE_WHEEL listener so you don't have to hover the component anymore (delete cache and hit refresh). In the mouseWheelHandler I then modify ScrollPane::verticalScrollPosition to move the content.

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 4, 2011 11:58 AM   in reply to nikolaig

    Just doubleclick on the ScrollPane instance, then on the Scrollbar next to ScrollBar Skins and you can modify the Scrollbar;

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 4, 2011 12:05 PM   in reply to nikolaig

    Allright, delete browser cache (temporary files) and hit refresh again. I updated the example so the scrollbars are edited - a bit funky but illustrates the point.

    Any more wishes?

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 11, 2011 3:53 PM   in reply to nikolaig

    Strange. I clicked them right now and it worked. Try again.. Maybe some local ISP troubles.

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 13, 2011 3:16 AM   in reply to nikolaig

    Sorry I always forget to do that.. try downloading again (maybe delete browser cache). It's CS4 now.

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 16, 2011 2:24 AM   in reply to nikolaig

    No problem

    Good luck!

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 24, 2011 11:19 AM   in reply to nikolaig

    In update() method, ScrollPane measures total width and total height of its content. The content should have its orientation points set to TOP_LEFT. If you  have some graphics occasionally reaching further left, you should mask your content so it doesn't reach out of its intended bounds. Also, it's important to have your content at its full size when you do the update() call because it is being measured then. If your content only starts to animate in in this time, you'll get unexpected results unless you create some solid (transparent) backgound of intended size for your content MovieClip.

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Nov 30, 2011 10:43 AM   in reply to nikolaig

    Hi, stage scaling and alignment isn't relevant in the scrollpane sample and you can delete them.

     
    |
    Mark as:
  • Peter Celuch
    505 posts
    Nov 17, 2005
    Currently Being Moderated
    Dec 1, 2011 9:40 AM   in reply to nikolaig

    I was not able to access the mc inside the scroll pane with the code:

     

    TweenLite.to(mc_pane2.content.scrollpaneBckgrnd_mc.FloraLytell_btn, 1,

    );

     

     

    I had to explicitly specify that it is the mc I am accessing inside the

    scroll pane, otherwise I was getting errors:

     

    TweenLite.to(MovieClip(mc_pane2.content).scrollpaneBckgrnd_mc.FloraLyt ell_btn,

    1, );

    That's OK. It's because ScrollPane::content is of a type DisplayObject. DisplayObject does not contain property named scrollpaneBckgrnd. MovieClip, however, is a dynamic class and enables you to (try to) access virtually any property you can imagine. If it doesn't exist in your particular instance of a MovieClip, you'll get an runtime error.

     

    P.S. If you have time can you briefly tell me why is there  a line of code

    in your sample:

     

    mc_pane2.update();

    ScrollPane::update() measures your content and sets scrollbars accordingly, if needed.

     

    Can it be changed with the size specified for the mc_pane2:

    mc_pane2.setSize(556, 300);

     

    what would be the major difference between them?

    They definitelly don't do the same. ScrollPane::setSize() sets size of your scrollpane If you get same results using one or the other function, it's because your content is smaller than 556x300px and you don't need scrollbars so in this particular case ScrollPane::update() would "do nothing".

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points