-
1. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Nov 4, 2011 10:41 AM (in response 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.
-
2. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Nov 4, 2011 10:43 AM (in response to nikolaig)You can find ScrollPane component in Components panel: Main Menu -> Window -> Components Panel (Ctrl+F7) -> User Interface -> ScrollPane
-
3. Re: Custom Scroll in Flash (working on mouse wheel)
nikolaig Nov 4, 2011 11:20 AM (in response to Peter Celuch)thanks for answering the post,
Somehow I noticed that this method does not work if a user tried to move
the content with the mouse wheel (you know as in frames in HTML)
A user has to grab the bar or click on the scroll buttons in order to move
the content. Do you know anything about it?
-
4. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Nov 4, 2011 11:50 AM (in response 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
-
5. Re: Custom Scroll in Flash (working on mouse wheel)
nikolaig Nov 4, 2011 11:54 AM (in response to Peter Celuch)Thanks, this one works perfectly.
However my problem is that I want to make it a custom one. I want to make
the bar my own design, as well as as scroll buttons.
Do you know how to change those?
-
6. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Nov 4, 2011 11:56 AM (in response 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.
-
7. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Nov 4, 2011 11:58 AM (in response to nikolaig)Just doubleclick on the ScrollPane instance, then on the Scrollbar next to ScrollBar Skins and you can modify the Scrollbar;
-
8. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Nov 4, 2011 12:05 PM (in response 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?
-
9. Re: Custom Scroll in Flash (working on mouse wheel)
nikolaig Nov 4, 2011 12:05 PM (in response to Peter Celuch)Thanks I appreciate your help
-
10. Re: Custom Scroll in Flash (working on mouse wheel)
nikolaig Nov 4, 2011 12:07 PM (in response to nikolaig)No more wishes, you are awesome, I wish you would answer my every post
I will play with the bar and all my components over the weekend.
Thanks for your help
-
11. Re: Custom Scroll in Flash (working on mouse wheel)
nikolaig Nov 11, 2011 11:48 AM (in response to Peter Celuch)Hi Peter,
I tried to download your source file, but it does not open anymore, I can not look at it. Could you please reload?
-
12. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Nov 11, 2011 3:53 PM (in response to nikolaig)Strange. I clicked them right now and it worked. Try again.. Maybe some local ISP troubles.
-
13. Re: Custom Scroll in Flash (working on mouse wheel)
nikolaig Nov 12, 2011 6:00 PM (in response to Peter Celuch)Hi Peter,
Thanks for looking into this. I was able to download it, but it seems that
you are working in the latest version.
I have SC5 and you saved it in CS5.5 Could you please resave it as version
5 or 4?
Thanks,
Nikolai
-
14. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Nov 13, 2011 3:16 AM (in response to nikolaig)Sorry I always forget to do that.. try downloading again (maybe delete browser cache). It's CS4 now.
-
15. Re: Custom Scroll in Flash (working on mouse wheel)
nikolaig Nov 14, 2011 8:13 AM (in response to Peter Celuch)Thanks, Appreciate you are following up.
I was able to download and open your file.
I will be trying to apply it into my site environment
Thanks,
Nikolai
-
16. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Nov 16, 2011 2:24 AM (in response to nikolaig)No problem
Good luck!
-
17. Re: Custom Scroll in Flash (working on mouse wheel)
nikolaig Nov 22, 2011 10:34 AM (in response to Peter Celuch)Hi Peter,
I started to have a problem once I started to change the content of "MyContent". What I did I combined all the product images mc's (which act as buttons as well) into one mc named "MyContent"
As soon as I did that the scroll pane treats "MyContent" as a very, very long mc and repositiones it half way to the left of the scroll pane.
I need to accomplish to things.
One is to make sure that the position of the "MyContent" is exactly where I want. Its upper left corner has to be in the same position as upper left corner of the scroll pane. Now it seems that the top is properly aligned, but the center of "MyContent" mc is aligned with the left margin of the scroll pane.
Two is make sure that scroll bar of the scroll pane recognizes the true height of the "MyContent" mc.
mc_pane2.source = MyContent;
mc_pane2.horizontalScrollPolicy = "off";
mc_pane2.update();
stage.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
function mouseWheelHandler(event:MouseEvent):void {
mc_pane2.verticalScrollPosition -= event.delta;
}
-
18. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Nov 24, 2011 11:19 AM (in response 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.
-
19. Re: Custom Scroll in Flash (working on mouse wheel)
nikolaig Nov 29, 2011 8:42 AM (in response to Peter Celuch)Peter,
Thanks for keeping up the correspondence.
I noticed something new happening with my site in the section where I have applied your code for the scroll pane.
My entire site is set to be scaled to fit on screen, however in the section where I used your code for scroll pane it is suddenly jumps to its ture 100% scale.
I understand it is because of the lines:
import flash.display.StageScaleMode;
stage.scaleMode = StageScaleMode.NO_SCALE;
Can I block them out, or only the last one? Are they imperative for your code to work?
Here is how the code is presently looks like:
import flash.display.StageScaleMode;
import flash.events.MouseEvent;
stage.scaleMode = StageScaleMode.NO_SCALE;
mc_pane2.source = MyContent;
mc_pane2.horizontalScrollPolicy = "off";
mc_pane2.update();
stage.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
function mouseWheelHandler(event:MouseEvent):void {
mc_pane2.verticalScrollPosition -= event.delta;
}
-
20. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Nov 30, 2011 10:43 AM (in response to nikolaig)Hi, stage scaling and alignment isn't relevant in the scrollpane sample and you can delete them.
-
21. Re: Custom Scroll in Flash (working on mouse wheel)
nikolaig Dec 1, 2011 8:15 AM (in response to Peter Celuch)Thank you, I appreciate that you follow up on my questions.
I did not expect that a seemingly simple implementation of a scroll pane
will bring so many additional questions.
FYI, Maybe you will find it interesting or useful in the future.
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.FloraLytell_btn,
1, );
P.S. If you have time can you briefly tell me why is there a line of code
in your sample:
mc_pane2.update();
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?
-
22. Re: Custom Scroll in Flash (working on mouse wheel)
Peter Celuch Dec 1, 2011 9:40 AM (in response 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".

