Apr 29 2008

Advanced Customizable AS3 Scrollbar Class for Adobe Flash CS3

Published by admin at 5:59 pm under Classes & Packages, Flash AS3, Projects

Why a Custom AS3 Scrollbar?

I’m sure this isn’t first nor will it be the last time you hear about the frustrations of dealing with Adobe’s pre-coded and pre-packaged components. Some complain about their design, their style, their customization, their size, and even (my personal experience) their functionality when embedded into pages with Facebook’s <fb:swf> tag. The simple solution to all of these problems is to simply code your own. However, scrollbars can be a nightmare and take hours to code, debug and customize. So, I’ve tried to save you all that hassle by building a fairly customizable scrollbar class.

Download the example files (includes the classes): AS3 Scrollbar Class and Example

In zip format: AS3 Scrollbar Class and Example

Quick Start Guide for the AS3 Scrollbar

For out of the box installation there are only a few lines of code you need once you place the files into the correct class path (default: com.kylebrekke.scrollbar – place “com” in the same root folder as your .fla). On whatever frame it is you’d like, place the following code:

import com.kylebrekke.scrollbar.scrollbar;
var viewableWidth:Number = 200;
var viewableHeight:Number = 100;

var hScroll:scrollbar = new scrollbar(stage, targetMC, scrollbar.HORIZONTAL, viewableWidth, viewableHeight);
hScroll.x = 40;
hScroll.y = 235;

var vScroll:scrollbar = new scrollbar(stage, targetMC, scrollbar.VERTICAL, viewableWidth, viewableHeight);
vScroll.x = 15;
vScroll.y = 20;

I’ll give you a quick break down of this code. First, you must import the proper classes. Make sure that the path follows wherever you decide to place the class file (default shown above). The next two variables are the viewable width and height of the target you want to scroll. So, you may have a movie clip that is 700×700, but you only have a place in your flash file to show a 300×400 square. Then, to use the scroll bars within this area simply set the viewable width and height to 300 and 400 respectively.

Next, you will notice that the vertical and horizontal instantiation code is practically the same, with the exception of “scrollbar.<direction>”. That is where you set which direction you’d like that instance to scroll. The “stage” is the default stage you’d like to add the scrollbars to. This should be the same stage that “targetMC” is on; “targetMC” is the movie clip you’d like to scroll. Finally, if you’d like, you can set different positions for the instances of the scrollbar. You’ll most likely have to do use the set and check method – make a guess and compile the movie quickly to see if they show up properly.

Advanced Customization of the AS3 Scrollbar

To customize or skin the scrollbar assets (the movie clips that make up the scrollbar) you can simply edit them from the library of the .fla. However, a couple of things to note (1) be sure to center both vertically and horizontally the graphics within the movieclip and (2) most of the assets have two frames so that their “buttonmode” can be set to true which gives them a rollover effect. Currently, the style is a poor attempt to copy Vista-style buttons. I’m sure many designers out there could do a better job, but since this is only an example, I expect most people to do some modifications.

The other points that can be edited include the speeds at which the content scrolls from an arrow click or a mouse wheel move. These numbers represent the amount of pixel movement on each mouse input and can be changed using the set and check method. The other constant is the transition speed which essentially determines if there is any lag between the time the user scrolls and content moves. I’ve chosen to use TweenLite because the size is much smaller than Caurina Tweener, though you can feel free to swap those out as well, it’s quite simple.

Feedback about the Scrollbar

I realize now, after the fact, that much of this scrollbar structure could be improved. I’ll attempt it again probably in the weeks to come, but if anyone would like to expand or alter this code and send me the updates it’d be much appreciated. As always, I’m only looking to provide the flash community with high quality with premade classes to save time and headaches. One requirement, however, is that the code is clean, concise and reusable. I feel that this code may not live up to the high expectations, but never fear, another version is on its way.

Popularity: unranked [?]

47 responses so far

47 Responses to “Advanced Customizable AS3 Scrollbar Class for Adobe Flash CS3”

  1. Andrewon 05 May 2008 at 7:13 am

    Sorry, I’m learning AS3.Is there a way that you could make a “simpler” scrollbar? Ya know, the kind that doesn’t include classes? Liiiiike…the kind that is all inside the swf. file? :-D Sorry for my “newbiness”! Otherwise this scrollbar’s awesome!

  2. adminon 05 May 2008 at 7:22 am

    Hey Andrew,

    Thats no problem, this blog is designed for both people who have extensive experience with AS3, and for those who have none :)

    So I’ll try to write one for you in a little bit – this is actually a hectic period for me while I am trying to finish up my thesis paper for school and I’m a bit short on time. You should subscribe to the RSS Feed or send me your email (via the contact page) so I can get in touch with you once I’ve written the code.

    In the mean time, check out some of the basic articles like “your first ever class” and “event listeners” to help expand your AS3 skills. It’d be great to get some feedback on them too, let me know what parts are confusing so I can clarify and expand them.

    No apologies for the newbiness :) we’ve all been there!

    -Kyle Brekke

  3. chris langon 05 May 2008 at 1:48 pm

    ok this is awesome, but i need just a little bit of help. i have a pretty complicated flash file with lots of movie clips. i have a movie clip thats embedded inside another movie clip inside another movie clip ect…

    i want to apply the scroll bar to the clip where the text is, not to the main stage. i tried to do this…

    var vScroll:scrollbar = new scrollbar(this, targetMC, scrollbar.VERTICAL, viewableWidth, viewableHeight);

    but that did not work. is there any way i can change where the scroll bar child is added? also can i register the 0 of the movie clip instead of the stage as my origin?

    any pointers would be sooooooo awesome. ill be your best friend! well your already in my good friend status for sharing this awesome class you wrote. great work!

  4. adminon 05 May 2008 at 2:31 pm

    Hey Chris,

    So if I understand you correctly, that you want to place the scrollbar WITHIN the same movieclip as the text as opposed to one layer outside it (meaning you’d be scrolling a movieclip instead of a text field) the trick will be to replace a certain piece of code within the scrollbar.as package. Every time you see “target:MovieClip” or “_target:MovieClip” simply replace it with “target:*” or “_target:*” respectively.

    If you still want to scroll a movie clip instead of a text field, then place your instantiation code one level away from text so that object you are passing is the movie clip. Then, you can use the code: var vScroll:scrollbar = new scrollbar(stage, targetMC, scrollbar.VERTICAL, viewableWidth, viewableHeight); and flash will automatically take the stage of the new clip (not root stage) and pass it to the class. “targetMC” in this case will be the movie clip that contains your text that you want to scroll.

    Hopefully that helped? Let me know how it works or if you need any other help with the class.

    Thanks,
    Kyle

  5. Eamonnon 13 May 2008 at 1:12 am

    Hey cool article and library to go with it!

    This may be going a little of topic, but you seem like the man for the question. I’ve done a fair bit of actionscript over the last couple of years, but nothing terribly indepth until now.

    So far I’m really liking AS3, but yeah my question is (which seems to be answered in your post pretty much) – is scrolling in flash is very much a manually done operation? Like there is still no CSS style property of “overflow:auto” (show scrollbars when the content of an element is taller than the height of the element) ?

    To do something like that we have todo it all manually, check the height of the container, check the height of the inner content etc.

    Am i correct in saying this? For now ill be playing around with your little library, thanks again!

  6. adminon 13 May 2008 at 8:01 am

    Hey Eamonn,

    Great question, actually yes there is an auto-scrollbar feature. This manual alternative I’ve presented here is just that, an alternative, and is actually more helpful in scrolling movie clips than text. In order to activate the built-in scrollbar feature of a textfield, make sure it is either dynamic text or input text as well as “multiline.” Then, after placing the textfield on the stage, right click on it and choose “scrollbar.” You’ll see it adds a checkbox next the word if you right click again – this means that the textfield will automatically add scrollbars if there is an overflow of text.

    Hope that answered your question!

    Kyle Brekke

  7. jimon 17 May 2008 at 2:51 pm

    Hey i really like this class of yours. Scrollbars are a real pain in the ass. But i do have a question. I have a website in witch i want to implement your scrollbar, the structure of my flash site is as follows : stage<content_mc<page1_mc<collection1_mc<collection1_thumbs_mc.
    I tried putting the scrollbar code in collection1_mc wich is above collection1_thumbs_mc, but it doesn’t seem to work. I then tried putting the scrollbar code on the stage(and target it all the way to the thumbs movieclip), but this also did nothing. I also tried modifying the class file with target:*, in the hope it would do something. Could you please help me?

    Thanks in advance.

    greets

  8. jimon 17 May 2008 at 3:04 pm

    This is the error btw that flash gives me when i try to target the collection1_thumbs_mc from the movieclip above it.

    TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Stage$ to flash.display.Stage.
    at collection1_mc/frame1()

  9. adminon 17 May 2008 at 3:20 pm

    Hey Jim,

    It’s tough for me to give you an exact answer for your problem without seeing the code. Is it possible to either send me the project files or maybe post your instantiation code?

    Also, the coercion error typically means that the type of object you are passing as a parameter does not match the type its expecting. Thus, your error lies in whatever value you are passing as the “stage”. Be sure that you don’t capitalize “Stage” (all lowercase) since that is passing a type, not the actual object that holds the stage.

    So send me some files or post the code, unless that tip helped.

    Kyle

  10. jimon 18 May 2008 at 8:31 am

    Cool, this is the code in the collection_1_mc :

    // THIRD PARTY
    import gs.TweenLite;
    import gs.TweenFilterLite;
    import br.com.stimuli.loading.BulkLoader;
    import com.kylebrekke.scrollbar.scrollbar;

    // ADOBE
    import flash.display.*;
    import flash.net.*;
    import flash.events.*;
    import fl.motion.easing.*;
    import flash.text.*;

    // CONTENT MASK
    var collections_mask2:Shape = new Shape();
    collections_mask2.graphics.beginFill(0xFFFFFF);
    collections_mask2.graphics.drawRect(0,156,800,640);
    collections_mask2.graphics.endFill();
    collections_mask2.alpha = 1;
    this.addChild(collections_mask2);

    // COLLECTION 1 NAME CONTAINER
    var collection_1_name:MovieClip = new collection_1_name_mc
    collection_1_name.x = 10;
    collection_1_name.y = 0;
    addChild(collection_1_name)

    // PRODUCT THUMBS MASK
    var white_canvas0:Shape = new Shape();
    white_canvas0.graphics.beginFill(0xFFFFFF);
    white_canvas0.graphics.drawRect(15,39,769,72);
    white_canvas0.graphics.endFill();
    white_canvas0.alpha = 0;
    this.addChild(white_canvas0);

    // PRODUCT THUMBS
    var col1_thumbs:MovieClip = new col1_thumbs_mc
    col1_thumbs.x = 15;
    col1_thumbs.y = 39;
    col1_thumbs.mask = white_canvas0;
    addChild(col1_thumbs)

    // PRODUCT THUMBS SCROLLBAR
    var HORIZ:scrollbar = new scrollbar(Stage, col1_thumbs, scrollbar.HORIZONTAL, 769, 72);
    HORIZ.x = 15;
    HORIZ.y = 111;

    // PRODUCT CONTAINER
    var col1_products:MovieClip = new col1_products_mc
    col1_products.x = 0;
    col1_products.y = 156;
    col1_products.mask = collections_mask2;
    addChild(col1_products)

    PS. If this doesn’t give you enough clarity about the structure i shall gladly send you the project files.

  11. jimon 18 May 2008 at 8:36 am

    btw the error did go away by using “stage” instead of “Stage”, but the scrollbar still isn’t apearing.

  12. adminon 18 May 2008 at 9:30 am

    Hey Jim,

    Right, I noticed right away that the change in “stage” would fix that. Also, in my class I automatically apply a mask to the movieclip you pass, in this case “col1_thumbs.” I’m not entirely positive, but that conflict may be part of the source of the scroller not appearing. Also, the mask that is auto-applied in the class is determined by the width/height you pass, in this case “769″ and “72″. So you may actually be able to delete your “white_canvas0″ movieclip if the structure allows for it.

    Has Flash been giving you any other errors? Or are the scrollbars just not showing up? Also, are you sure they aren’t showing up or maybe they are just hidden by another object on the stage?

    Anyway, try removing your own mask in favor for the one in my class (we can change that later if necessary). If that doesn’t work, send over the project files and I’ll take a closer look.

    Kyle

  13. kumaravelon 09 Jun 2008 at 6:03 am

    A helpful tutorial for me, i have tried to complete the full functionality like adobe scrollpane by adding Drag option and dynamic scrollbar size,

    but it seems very hard to add the drag option of the content, for my project it is very important feature,

    can you guide me to include the drag option with your code. (sorry for my poor English)

  14. adminon 09 Jun 2008 at 10:18 am

    hey kumaravel,

    by drag option do you mean the feature, say like in adobe pdf reader, where your cursor is a hand, and you can click drag on the text and the page scrolls automatically? if so, i believe i can help you out.

    The logic is that you’ll have to add some mouse events to the content MC: press down, move, and release. On the press down you’ll have to make a note of the mouse’s coordinates, and on release as well. The difference between these two points will help determine how much you are going to scroll the text and in which direction. Take that difference, feed it through the main scrolling function to create the scroll effect on the screen, and voila.

    I know that is just a basic overview, let me know how I can help you more specifically.

    -Kyle

  15. kumaravelon 09 Jun 2008 at 11:03 pm

    Thank you Kyle,

    i tried on that way, i have used startDrag & stopDrag methods on respectively MOUSE_DOWN & MOUSE_UP, the problem is i couldn’t control the dragging while the mc reach the start & end point, it should be stopped while it reach its boundaries

    i need to get the boundary points corresponding to mouse move direction please help me..

  16. ajitpal singhon 10 Jun 2008 at 1:53 am

    how can we find whether a layer is mask or not. well trying to find out which layer is mask by its name is there is any way….

  17. adminon 10 Jun 2008 at 8:56 am

    hi Ajitpal,

    It depends on if you are looking simply to acquire a handle for the mask used in the class above, or whether you simply want a way to find a mask.

    If you want the first, then the object I use in this scroll bar class as the mask can just be made “public” instead of private and then access it the typical way.

    If, however, you are looking for the later, then I suggest first determining which stage you want the mask from, and then looping that stage’s display list and check the “mask” property of every object. If it exists, add it to an array, then you’ll have an array of every mask on the stage. If you need one specifically you can further deduce it by looping that array using whatever filter criteria is best. Of course, this all assumes you don’t have a direct variable for this mask since just simply knowing the name ahead of time would save you a lot of trouble.

    Did that help?

    -Kyle

  18. adminon 10 Jun 2008 at 9:08 am

    Kumaravel-
    You don’t actually want to use “startDrag” and “stopDrag”. The class’s main movement function is called “startScroll” and “stopScroll” (at the bottom of the class file). What you want to do is calculate the difference between the two mouse positions using a correctly scoped point variable. You can capture this from the MouseEvent which throws the MouseEvent Object containing stageX/stageY (see help files). And actually, you’ll want to capture the “starting point” (the point at press down) and the current point (given by the “MouseMove” event). Then, using the distance between those two points, times the correct ratio (reverse the formula given in the startScroll function), make the change to the SCROLL BUTTON (NOT THE CONTENT). Then after making the change to the scroll button, call “startScroll()” and it’ll update the content automatically. Ya, its definitely a workaround, but it implements the architecture of the class properly. Let me know how that goes.
    Kyle

  19. fatheron 10 Jun 2008 at 1:26 pm

    I’d love to be able to use this with text that is imported and has CSS functionality, for some reason I can’t get the scrollbar to show up. Would you mind helping?

    This is the code I’m using. Text shows up just fine but I cannot scroll:

    import flash.text.*;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.text.StyleSheet;
    import flash.text.TextField;
    import com.kylebrekke.scrollbar.scrollbar;

    var loader:URLLoader;
    var external_txt:TextField;

    CSSFormattingExample();

    function CSSFormattingExample():void
    {
    dyntxt_mc.external_txt = new TextField();
    dyntxt_mc.external_txt.wordWrap = true;
    dyntxt_mc.external_txt.x = 0;
    dyntxt_mc.external_txt.y = 0;
    dyntxt_mc.external_txt.width = 450;
    dyntxt_mc.external_txt.height = 300;
    dyntxt_mc.external_txt.height = 300;
    dyntxt_mc.external_txt.selectable = true;

    var format:TextFormat = new TextFormat();
    format.font = “Verdana”;
    format.color = 0xFFFFFF;
    format.size = 10;

    dyntxt_mc.external_txt.defaultTextFormat = format;
    addChild(dyntxt_mc.external_txt);

    }

    var req:URLRequest = new URLRequest(“csstest.css”);

    loader = new URLLoader();
    loader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
    loader.load(req);

    function onCSSFileLoaded(event:Event):void
    {
    var sheet:StyleSheet = new StyleSheet();
    sheet.parseCSS(loader.data);
    dyntxt_mc.external_txt.styleSheet = sheet;
    dyntxt_mc.external_txt.htmlText = url;
    }
    var url:String = “infotext.txt”;
    var loadit:URLLoader = new URLLoader();
    loadit.addEventListener(Event.COMPLETE, completeHandler);
    loadit.load(new URLRequest(url));

    function completeHandler(event:Event):void
    {
    dyntxt_mc.external_txt.htmlText = event.target.data as String;
    var txtHeight:Number = dyntxt_mc.external_txt.textHeight+5;
    dyntxt_mc.external_txt.height = txtHeight;
    }

    //******* SCROLLBARS *******

    var vScroll:scrollbar = new scrollbar(stage, dyntxt_mc, scrollbar.VERTICAL, 480, 295);
    vScroll.x = 486;
    vScroll.y = 13;

  20. kumaravelon 10 Jun 2008 at 10:46 pm

    Thank you Kyle,

    i understood your point, but its really hard to do the changes in startscroll which drives from _get()..

    can u help me some code credits for this case, it will be very help full for my task…

    thanks in advance…

  21. adminon 11 Jun 2008 at 7:46 am

    hey kumaravel, normally i’d love to help you but I’m in Argentina right now (away from my personal computer) so I’m not going to be able to code anything, only give you the logic I would use while I were.

    if startScroll is giving you trouble, just make a copy of it (startScroll2) and make the changes there without fear of altering the rest of the class’s processes. That might help.

    Sorry I can’t help more,
    -Kyle

  22. kumaravelon 11 Jun 2008 at 10:32 pm

    Thank you Kyle,

    sorry for giving trouble u. im on the same way which u told, wil get back u once i have completed.

  23. Chrison 15 Jun 2008 at 3:26 am

    Hey Kyle,

    first of all thank you for sharing your code.

    just some clarifications about your scrollbar.

    1. scrollbar width and height are static or dynamic? if not, can be dynamic somehow?
    2. scrollbar width and height must be the same?

    and something else. when using the mouse-wheel the scrolling is diagonal. i don’t think that this is the right way. it should be vertical or horizontial only.

    (by the way the desing is pretty good comparing to other scrollbars over the net :) )

    thank you again for sharing! hope for an answer soon!

    Chris.

  24. kyleon 15 Jun 2008 at 5:42 pm

    hey chris, I’m glad you liked it. Those are some good pointers, thanks for letting me know. I’m out of the country right now but let me know if you need any help with the code and I’ll try to my best to respond.
    all the best,
    kyle

  25. Jay Woodon 23 Jun 2008 at 7:01 pm

    Hi Kyle, and thanx for posting your lovely scroll class. As a humble AS3 beginner may I beg some brief pointers about what to change about the class file so that it works when the swf that uses it is loaded by another ? Any ideas would be most appreciated…

    Thank you…

    Jay

  26. Donnoon 06 Jul 2008 at 1:43 am

    Thxz For The Code I Just Want To Know After Creating HORIZ Is There Any Way To Change The maskWidth and maskHeight at runtime ?

  27. adminon 11 Jul 2008 at 9:24 am

    Not currently.

    However, to do so wouldn’t be difficult. Simple expose the _maskWidth and _maskHeight variables outside of the class (with getter/setter or making them “public”) and then be sure to execute the “initMask” function after resetting them. I would also suggest doing something with the square that is being created everytime you execute that function (like cleaning it up) but that is probably not required.

    Hope that helps,
    Kyle

  28. adminon 11 Jul 2008 at 9:43 am

    Hey “father”
    I was thinking, maybe you should put the code that applies the scrollbar into the completeHandler function so that its only applied after all of the text has been set. Also, when you say that it doesn’t “scroll” do you mean the scroll bar doesn’t show up (throws an error) or it shows up but just doesn’t identify that the text takes up more than the allotted space and therefore needs to scroll?
    Kyle

  29. Heatheron 22 Jul 2008 at 10:29 am

    So you’re scrollbar class works great. My only question is how do you remove the object when you no longer need it? I did removeChild(stage.hscrollbar), which worked, and took the scrollbar off the stage, but I get and error that says:

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at com.kylebrekke.scrollbar::scrollbar/::stopScroll()

    stopScroll() is a private function so I can’t do much about it. Do you have a remove scrollbar function?

  30. chris langon 22 Jul 2008 at 10:41 am

    thanks so much for posting this class. it has helped me out sooooo much. if you dont mind im going to link to your tutorial from my flash tutorial page (www.flashsucks.net). just let me know!

    (ps – my tutorials suck compared to yours, but you have to start somewhere)

  31. adminon 22 Jul 2008 at 12:07 pm

    I’m glad you guys like the class!

    As for the removal of the code, well, garbage collection is a somewhat complex idea in Flash (complex = I don’t really understand it myself so I can’t explain it, lol). Removal from the stage by using removeChild does only that, it makes it visually disappear. However, it is still loged in memory and attempting to execute certain code. Your best bet is to use the “delete()” function on the instance of the scroll bar you have AFTER you’ve removed it from the stage. If that doesn’t work, you can try setting it to null. I’m not sure what the best practice is, but I think after doing that it should get cleaned up. Be sure to remove any event listeners you have attached to it as well.

    Hope that help,
    Kyle

  32. Zackon 11 Aug 2008 at 9:46 pm

    Hi Kyle,
    Great class. I had to make some changes though to make it work with my code:
    1) You assume that the scroller is attached to a MovieClip class. I changed the code to accept a sprite instead. It works fine excpet that sprite class is sealed so you cannot add startPoint dynamically to it. I made startPoint a private variable of scrollbar instead.
    2) Instead of the stage parameter as the first parameter, I changed it to accept a DisplayObjectContainer class instead, so it is not limited to the stage. Without this change I could not make it work for nested movie clips. When the target_mc is not a child of the stage, the mask cannot be a child of the stage. The mask and traget_mc need to be on the same display list as far as I know.

  33. adminon 16 Aug 2008 at 12:31 pm

    Hey Zack,
    Those seem like some great changes. I’ll be sure to make them to my own project and put them out in any other releases I do. Thanks!
    Kyle

  34. Dannyon 19 Aug 2008 at 7:43 am

    Hi. I’m dead knew to Flash and Actionscript so bare with me :)

    I’m getting a few errors coming from the scrollbar.as file. The errors are on lines 40, 41, 42 & 43. There is 3 errors on each line. Line 40s errors are as follows -

    1046: Type was not found or was not a compile-time constant: arrowProgress.
    1180: Call to a possibly undefined method arrowProgress.
    1180: Call to a possibly undefined method arrowProgress.

    The the same for line 41, 42 & 43 changing arrowProgress for arrowRegress, scrollTrack & scrollButton respectively.

    I tried repeating your steps a couple of times but with no luck. I think the error could be to do with the ’stage’ setting for the scrollbar because i don’t have a clue what ’stage’ my movieclip is on or how to find out. I can tell you that the movieclip is on frame 80 of my main timeline. I don’t really understand stages at the moment, so if that isn’t enough information then let me know.

    Thanks in advance.

  35. Kyleon 19 Aug 2008 at 8:28 am

    Hey Danny,
    Thats actually an easy fix (because I’ve gotten it myself a number of times, lol). So the way the class works is that it uses movie clips from the library (CTRL+L for windows) as the buttons that the users click on to move content up and down, etc. In order to do that the buttons must A) be in the library and B) set as “export for actionscript” which can be done by right clicking on them in the library and clicking linkage. Make sure that when you export them that you use the proper names expected by my class. That should solve the problem.

    Also, since you’re new to AS3, whenever you see a 1046: Type was not found or was not a compile-time constant… that typically means you haven’t properly added the import command at the top of the class, or the class doesn’t exist where the compiler thinks it should be (wrong folder or class path), or in this case, the class doesn’t exist in the library. So just an FYI because thats a common error, just so you don’t get stumped in the future.

    Hope that helps,
    Kyle

  36. Dannyon 20 Aug 2008 at 3:49 am

    Thanks Kyle, that got rid of the errors and i can see the scrollbar now. Only now my movieclip containing some static text seems to be invisible. I turned the redraw regions on and can see the shape of my movieclip moving up and down with the scrollbar. So it definetly knows what movieclip to latch on to, and is doing so, but with the scrollbar attatched my movieclip is invisible. Any idea what i’ve done to cause that?

    Another question now… Is there a simple bit of code that will remove the scrollbar whenever the user navigates to another page on the site (another frame in my fla file)?

  37. Dannyon 20 Aug 2008 at 6:41 am

    Some more info that may bel usefull…

    I took my movieclip and put it in the place of the movie clip in your example .fla and this resulted in the same thing, scroll bars visible but movieclip invisible. The size of my movie clip is bigger (pixels) but that shouldn’t matter as its being masked to the desired size anyway, right? Other than that i can’t see any differences. Its just static text inside a movie clip.

  38. Kyleon 20 Aug 2008 at 8:00 am

    Hey Danny,
    Stage visibility should probably be controlled with “addChild”and”removeChild” though movieclips have a visible property that you can use to make them invisible.

    As far as the rest of it goes, you’ll have to give me more info to help you out. Im not sure what your particular code looks like (i’m assuming you are starting with your own project and just my class attached).

    Kyle

  39. Uldison 22 Aug 2008 at 5:10 am

    Thank you very much for this script, it was very useful. My solution for removing the scroll bar was not the best but it works:

    vScroll.visible = false;

  40. Kyleon 22 Aug 2008 at 8:14 am

    Uldis,
    That is an option. The only thing to remember is that if you don’t remove all links to the clip (i.e. you only make it invisible and you don’t detach it from the stage) it will stay in the computer memory. One mc isn’t going to break the bank, but if you do this numerous times you’ll have a bloated flash movie. Just something to keep in mind :)
    Kyle

  41. Sineinon 01 Sep 2008 at 4:33 pm

    Hiho, I’m realy new to Flash AS3 and i wanted to try this Scrollbar but i get some Errors:

    TypeError: Error #1009: Der Zugriff auf eine Eigenschaft oder eine Methode eines null-Objektverweises ist nicht möglich.
    at com.kylebrekke.scrollbar::scrollbar/::initAssets()
    at com.kylebrekke.scrollbar::scrollbar$iinit()
    at pageEdelwildwuchs/::frame1()

    I tried to attach the scrollbar onto a MovieClip witch is in an MovieClip.
    I think thats one of the Problems Zack mentioned in his comment.
    I hope i solve the Problem myself but, a littel bit help would be nice :) .

    Sinein

  42. adminon 01 Sep 2008 at 10:20 pm

    Hey Sinein,
    Lol, making it tough on me by giving errors in German huh? Well I’m up to the challenge (and so is babelfish). It seems to me that the error (translated as: That access to a characteristic or a method of a zero-object reference is not possible) is most likely caused by not placing the assets located in the library of my example file into your new file and then changing their linkage to make them usable in actionscript. I don’t know what it’ll say in german, but it should be something to the effect of “export for actionscript”.

    Try that out, let me know if that solves your problem.
    Thanks,
    kyle

  43. Sineinon 02 Sep 2008 at 6:52 am

    Hi Kyle

    Thx for the fast anwser, but it didnt slove the problem. On the mainstage the Code does work, but when i attach the Scrollbar onto a MovieClip witch lies in a another MovieClip, i get the first mentioned Error massages.

    Quote form #Zack on 11 Aug 2008 at 9:46 pm

    “……Without this change I could not make it work for nested movie clips…….”

    Zack said that he changed the code, but I as a Noob does not realy understand where and how.

    Or should i only change the “stage” in:

    var hScroll:scrollbar = new scrollbar(stage, targetMC, scrollbar.HORIZONTAL, viewableWidth, viewableHeight);

    in somthing else ( but i also do not know in what else).

    Thx for the help

    Sinein

    P.S.: Sry for my bad english

  44. Kyleon 02 Sep 2008 at 9:10 am

    Hey Sinein,
    The way I read what he was saying was that the change is two fold. First, you’ll need to change the variables inside the class – both the private var at the top and the function argument to the constructor to be a DisplayObjectContainer. Then, instead of passing stage in the instantiation, you’ll probably just pass “this” – though Im not positive about that. But I think those three changes should make everything work. Let me know how it works out, I should maybe do a follow up class with this that fixes some of the known bugs.
    Kyle

  45. Sineinon 02 Sep 2008 at 2:51 pm

    Hiho Kyle

    Thx again for that fast anwser. I tried to get a clue with “DisplayObjectContainer”but i did not realy understand it, for the 1st week AS3 is my “know how” to lame . I changed some variables, but i got enormous number of errors. Maybe it would be a good idea to ask Zack, ( you should see the Mail as Admin ^^) hope he did not fake the mail.

    Thans in advanced

    Sinein

  46. Dannyon 03 Sep 2008 at 6:00 am

    Hi,

    Just thought i’d leave a public thankyou for your help in getting me going with this script. Kyle is a top geezer, thanks mate.

    Danny

  47. ulion 03 Oct 2008 at 2:59 pm

    hi admin,
    i really like your posts. this one and specially the amfphp wrapper class stuff. i only have the problem that i cannot open your .rar files (this is a PC compression, right?) would it be possible for you to add a zip file ? so i could join you all :(
    thanks in advance,
    uli

Trackback URI |