ActionScript 3 Content Scroller Class

The NpScrollingPanel is a ActionScript 3 Implementation of a scrolling panel. Pretty common place stuff. This is a reworking of an older version of the same file I posted a little while ago. Since then I’ve removed the scrollRect version, but may re do it at some stage, if time permits. Internally the class now uses the Adobe Tween engine to scroll all content.

The NpScrollingPanel Class is designed to create a scrolling pane of content. The Class itself does not handle any loading in of content. You must provide the class with DisplayObjects for it to scroll. I wanted it to be completely content independent.

Let me know if there are bugs etc..

Class Features

  • Scroll x and y
  • Fixed or stage width / height scrolling area
  • Create columns / rows of scrolling content
  • Scroll via mouse movement, panel edges, or via external sources
  • Control colour and alpha of scroller background
  • Toggle button mode for content
  • Scrolls any DisplayObject
  • Adjust content item padding on the fly
  • Remove content items on the fly
  • Use lots of cpu with a blur scroll mode :)
  • Simple internal easing engine
  • Control scroll speed and easing
  • Enable / Disable scrolling
  • Target individual content items
  • Enable Reflections on content
  • Drag N Drop content items, to change their order in the panel
  • Flexible event system to track clicks etc on content

View Example
Here is an example. It’s using external XML content and the vertical scroller is pulling in two bitmaps from the library; http://www.noponies.com/dev/as3_scrollingpanel/. Performance of the blurred and reflected content is pretty bad :) . I’ve been playing around with this class for a job, where I’ve built a basic CMS, that needed the ability to reorder the content. So, I’ve added in the ability to drag n drop the content items, changing their order, plus a whole lot of other bug fixes. The new version is not online yet, but will be by the end of the week. The online demo allows for dragging and dropping, its pretty beta!

Updates
Jan 03 2009: Small fix for a bug pointed out by Matt.

Source Files
Here is the relevant source file; Scrolling Panel Source Files (1942) - 352.72 KB
Here are the beta files, that allow for dragging content items. Be aware, that quite abit of the api has changed.
Scrolling Panel Source Files (Beta) (538) - 351.77 KB
Let me know how these new files work out.
By downloading, you agree to the terms of use, outlined here: http://www.blog.noponies.com/terms-and-conditions

Dependencies
The class uses the http://www.adobe.com/devnet/flash/articles/reflect_class_as3.html class to enable reflections on content.

35 Neighs about “ActionScript 3 Content Scroller Class”



Matt Przybylski Neighed:

Looks good, similar to a class I developed called MousePositionPanel.

I did notice however on the example where you click arrows to move left/right that when moving using the right arrow all the way to the end on the last image there is a bit of a glitch where it moves back but then realizes that its the last images and moves back into position. might want to take a look at that. nice work, nonetheless.

Dale Neighed:

Matt,

Yeah, right you are. I actually never noticed it doing that. I changed the ease time on that particular implementation from a short duration to a longer duration right before I uploaded it, and I’d say that the previous shorter tween time was masking that effect.

Thor Neighed:

Nice to see this available again. Good stuff :)

Dale Neighed:

No problem!

Burn Neighed:

I’ve got some problems with the class. For example when instead of BitmapData i try to add movie clips it becomes real mess…

I tried with a couple of MovieClip-s with about 5px between them and vertical scroling:

import noponies.scrollingpanel.events.NpScrollingPanelEvent;
import noponies.scrollingpanel.ui.NpScrollingPanel;
import caurina.transitions.Tweener;
import caurina.transitions.properties.TextShortcuts;

TextShortcuts.init();

var navig:NpScrollingPanel = new NpScrollingPanel(”vertical”);
navig.resizePanelMaskToStage = false;
navig.panelMaskWidth = 200;
navig.panelMaskHeight = 200;
navig.x =45 ;
navig.y =205 ;
navig.mouseScrolling = true;
navig.panelBgColour = 0xFFCCFF;
navig.scrollSpeed = 30;
navig.contentButtonMode = true;
navig.panelBgAlpha = 0;

addChild(navig);
navig.addContentItem(page1);
navig.addContentItem(page2);
navig.addContentItem(page3);
navig.addContentItem(page4);
navig.addContentItem(page5);
navig.enableScrolling();

Here is some code. The problem is that the movie clips differ each other a lot. If between then there was 5 px for example, after adding them to the panel they got 50-60 pixels between then. Tried to adjuts it with
adjustPadding and 10 px, but got the error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at noponies.scrollingpanel.ui::NpScrollingPanel/adjustPadding()
at website_fla::MainTimeline/frame2()

Dale Neighed:

What do you mean by they differ each other? Are they different sizes? AdjustPadding only works once all the content is loaded in. If you want to change the padding as the content loads in, use the contentPadding property.

Burn Neighed:

Hi;

Here is the fla:

http://burnandbass.com/experiments/exp-np-panel.fla

Just want the movie clips to stay like if they’re on the screen.

Btw while experimenting with your classes I did the effect of http://www.selftitled.ca/ , but only If I use images (not movie clips or text)

Dale Neighed:

Your fla does not contain all the other classes it links to. If you want me to look at it, at least make a zip archive or something that contains stuff like Tweener.

T Neighed:

I have downloaded the pack, and run the .swf file, but when i test move, i get the exception errors saying something like “failed to load XML file” and on one occasion “Failed to laod CSS file”

I am running Adobe CS3 with AS3.. any ideas what may be wrong?

T Neighed:

is there also a way of changing it so that it is a vertical scroller, and adding something so that u can close the larger image when click on it?
what about just having one gallery?

thanks.

Dale Neighed:

I think you are posting under the wrong file, I think you mean Simple ActionScript 3 Gallery.

The files are all contained within the package, so they should be loading in.

Caio Neighed:

Hey! Great class dude!
Btw, I’m having some issues trying to load MovieClips instead of bitmaps aswell…is there any way i can load them from library?
Sorry I’m not that pro at as3 =P

Dale Neighed:

@Caio

Something like;
slidingConentInstance.addContentItem(new libraryAsset())

caio Neighed:

Oh tx a lot!

Brian Neighed:

Hey Dale, great class btw!

Question…do you have a parameter that I can modify to adjust the easing when you roll out of the edges that will slide the content a bit smoother or longer. Check this example to see what I mean:

http://www.endcommunications.com/

When you move the mouse outside of the left and right edges the content doesn’t just stop, it eases to a stop. I sort of see what you have going on in the NpScrollingPanel.as file but wanted to check with you for some insight before trying to move forward.

Thanks!
Brian

Dale Neighed:

Have you tried setting the scrollSpeed property?

Brian Neighed:

I did actually. If I slow it down it slows the edge scrolling too much. Basically I would like to figure out a way when the user mouses out of the ‘hot zones’ on the edges that the sliding can ease more like the above example. thoughts?

thanks!
Brian

Ed Neighed:

Thank you for your work so far. Have you ever tried implementing this class with Papervision3d? I am trying to combine your class with PP3d. The mouse scrolling does not work when I use both and if I resize the stage, the scrolling content gets moved down half way. I imagine this is due to PP centering the stage’s registration point. If you have any insight please let me know or if you need a look at my files, I’ll foward those on. Thanks !

Ed

Ed Neighed:

I uploaded a sample file i created; http://edwardschopler.com/pp3d/ to illustrate what I posted. also I’m using your full browser resize class too :) thank you so much for your work, I’ve enjoyed reading your posts!

Ed

Dale Neighed:

I’ve got zero papervision experience, so I cant help you there.

Ed Neighed:

Thanks Dale for answering back, i guess ill see what i can dig up my self.

links for 2009-03-19 « JUS IN BELLO Neighed:

[...] noponies ?Ǭª ActionScript 3 Content Scroller Class (tags: flash) Posted in Uncategorized | [...]

Louisa Neighed:

Hi Dale,
Your class seems to be very good. Exactly what I wanted to do. However, what I already have developed is loading many animations in like a grid. I do that by using the flash.display.Loader to load the swf files in a flash.diaply.Sprite.
I’m wondering if it is possible to just create a new instance of your scrollbar and i want to do exactly those button click and it scrolls.
I tried to play around with ur example class and modified the createNewBitContent() .. I wondered if I coudl just pass in the Sprite into the libScroller2.addContentItem but it doesn’t work. So I tried the following as well…

function createNewBitContent():void {

//var example:Sprite = new Sprite(); (wondering if I can just put the Sprite in)
var thumb:String = “as3-speedracer.swf”;
var laoder:Loader = new Loader();
var request:URLRequest = new URLRequest(thumb);
loader.load(request);
//example.addChild(example);
loader.addEventListener(Event.COMPLETE, completeHandler);
addChild(loader);

// }
//enable scrolling once the content has loaded

}

function completeHandler(event:Event):void {
libScroller2.addContentItem(event.currentTarget.loader.content);
libScroller2.enableScrolling();
}

But this throws me an excetpion
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.

I’m a beginner in AS3, so any help will be greatly appreciated.

AESOP Neighed:

hi dale,

love your work. just 1 query.. when i utilise this class and successfully publish an SWF it works perfectly. but if i was to load said SWF as an external swf into another ?¢‚Ǩ‚Äú i come across an Error #1009.

noponies.scrollingpanel.ui::NpScrollingPanel/addContentItem()

any pointers to navigate around this?

nfoo Neighed:

Hey!
Great class.
Thank you so much for doing this. I’m a design student and you make the life of people like me so much easier, because I’m not a programmer primarily and this helps so much to spend as few time as possible on programming.

But I’ve come up to a problem:
I created a custom class to throw an xml file at and let it create an npScrollingPanel automaticly. It all works fine, but then I tried to modify the mask size at runtime – yes, I turned scaling to stage off – and I simply doesn’t work.

I wanted to have a stage resize listener to resize the mask, so I can have a margin at the left and right of the Panel to the borders of the browser window.

Or is there some kind of “refresh” function I have to fire so it changes the mask?

Thanks for help in advance … and thanks again for your work!

Emilio Vacca Neighed:

Hi. I needed to create, starting from an XML file, ‘n’ panels, so i wrote this piece of code that i’d like to share with you. Maybe somebody could enhance performances and code ’style’ (i’m not so good with Arrays).
I have also included panel dragging to scroll content.

Hope it helps

Link to code (fla, xml, thumbs, icons)
http://www.nextopening.it/MultiScrollPanel_XML.zip

Thank you for your faboulous work!

Emilio (Rome, Italy)

Neil Fisher Neighed:

I’ve got the horizontal scroller setup using movie clips, but i can’t for the life of me figure out a way to use more than two movie clips. Any help would be sweet :)

i’ve got this some far.

function createNewPanel():void {
for (var i:int = 0; i< 2; i++) {
var n:int=i%2;
if (n==0) {
var secondPData:secondP = new secondP;
libraryItem = new secondP;
} else {
var firstPData:firstP = new firstP;
libraryItem = new firstP;
}
libScroller.addContentItem(libraryItem);
}
//enable scrolling once the content has loaded
libScroller.enableScrolling();
}

Dale Neighed:

Your loop will only run two times. So, it’s only adding in two clips.

Neil Fisher Neighed:

Even after changing the loop number; it will load three movie clips, two of which are the same.

firstP
secondP
secondP

I just can’t figure out where to add a third ‘var’ ?

Dale Neighed:

That loop uses a modulus operator, which swaps between even and odd numbers, so you only get two variations. Are you trying to repeat 3 different clips?

Neil Fisher Neighed:

Yeah three would be sweet!

Neil Fisher Neighed:

but removing the loop and opening it up to an unlimited number of movie clips would be crazy!!

Emilio Vacca Neighed:

@NEIL
I have created unlimited Scrolling Panels using Arrays…you can check my code in my previous post

stowns Neighed:

I’m getting an “Error loading XML” error when I attempt to load a NpScrollingPanel into you’re NpAccordian. My only guess is a scope problem but I’ve tried many diff. paths for the ScrollingPanel xml and it doesn’t seem to help. The Panel works fine when I test it on its own…and so does the Accordian. I know the According is at least loading the Panel because it display graphics I added to the Panel swf….just not the external images from the panel’s xml. Any ideas? Thanks in advance!

stowns Neighed:

another piece of info is that I am getting the error from the Accordian’s LoadXml.as not the Panel’s LoadXml.as….which is strange to me because the accordian is loading the swf…..Just not the scrolling panel on the swf…

Leave a neigh?