no thumb in scrollbar and space after text

[sandra21]

i am a newbie flash designer. a client has asked me to make modifications in a flash file used on his website. it is flash 8 actionscript. i am currently working on the same and would appreciate your help. the client has given me 'mediacenter.swf' file which i decompiled using sothink decompiler 4.5 build 90120 to '~mediacenter.fla'. it also creates ~mediacenter.flp and the mx folder. the xml folder resides in the same folder as ~mediacenter.fla. it contains mediacenter.xml and news.xml from where the data is read. you can download these files at http://rapidshare.com/files/257237626/scrollbar_thumb_missing_and_space_after_scrolling.zip

i discovered a problem - if you view 'mediacenter.swf' - when you click on 'awards'and scroll to the bottom, you can see that there is no space after the text. the end of the text aligns with the end of the scrollbar. this is correct. but when you click on press releases and scroll to the bottom, you can see that there is space after the text which is incorrect. the end of the text does not align with the end of the scrollbar.
also when you click on awards, the scrollbar has a thumb, which is correct. when you click on press releases, the scrollbar has no thumb, which is incorrect

please help me to resolve this problem.

my additional questions are:
has the creator of the swf file used some unique scrollbar code or is this scrollbar provided in flash itself. in this case, i can read a tutorial to understand it better.

i have given 'correct - scrollbar has thumb and no space.jpg' and 'incorrect - scrollbar has no thumb and space.jpg' to further explain my query.

please tell me if i have explained my problem properly or further clarifications are needed.

[JasonHippy]

From what I can see it looks as if the original developer used two different methods to load the XML data.

In frame 9 (frame label "txt_b"), there is an example of the familiar scrollbar in layer 108.
The actionscript at the top of this frame loads the mediacenter.xml into an instance of a Dynamic text field on layer 107. The scrollbar has been set up to target the instance of the text field. All very familiar.

But in frame 1 (labelled "txt_a"), Sprite 67 (layer 107) loads the news.xml into itself and uses a scrollbar with only arrows to scroll. There is no thumb. Sprite 67 is a completely different custom control to the custom scrollbar component that you've seen elsewhere.

So that explains why mediacenter.xml scrolls with the thumb and news.xml does not.

On closer inspection, it would appear that sprite67 and the code it contains are creating a masked area, the XML is parsed and individual objects are being created for each news item and added to the masked area.
The scrolling is controlled by two arrows which scroll the news objects up and down.
It looks to me like the scrolling code is a bit dodgy, which is why you can scroll down way past the bottom of the list of news items.
To fix this you'll need to fix the code in fScrollUp() and fScrollDown() to properly constrain the distance that the objects can scroll. If you want to add a sliding thumb to this component, you're going to have to create one yourself and add supporting code for it.

Your best bet would probably be to analyse the custom scroller in frame 9. Take a look at each layer and each bit of code in it and try to work out how the component works as a whole.

Next have a good look at Sprite 67 in frame 1, again look at each layer and each bit of code and work out exactly what it's currently doing and then figure out what it needs to be doing to work correctly and then make the necessary changes.

As long as you're methodical, you should be able to customise sprite 67 to include a thumb and fix the scrolling issues you're experiencing without too many problems!

Note: I would've made the changes myself, but you wouldn't learn anything if I did that. Plus you're getting paid for this, so I think I'll leave it in your hands to work out and implement the final changes for this one! :)

Anyway, I hope my analysis of this has been of some use to you.
Cheers for now,
Jas.

[sandra21]

you are absolutely right in your analysis. i have studied the code in detail.

the original developer has used different methods to load the xml data and make a scrollbar. the usual (correct) method he has used in all the flash files is the one in frame 9 which loads the mediacenter.xml into an instance of a dynamic text field and the scrollbar is setup to target the instance of the text field.

as per your suggestion, i have tried to modify the code in sprite67 to solve the problems of space after the text and the scrollbar thumb problem. i simply cannot figure out what to modify in fScrollUp() and fScrollDown() to properly constrain the distance that the objects can scroll. also, i have no idea how to add a sliding thumb and write supporting code for it.

i think the best thing for me to do is to duplicate the method used in frame 9. (whats your opinion?) i.e. load the news.xml into an instance of a dynamic text field and the scrollbar is setup to target the instance of the text field. i am working on this currently and would appreciate you pointing me in the right direction. i.e. what steps are needed to do this. i assume solving this should not be too difficult for me, but as i mentioned, i am a newbie in flash and may get stuck

many thanks for your kind efforts. you have really helped me a lot.

[JasonHippy]

you are absolutely right in your analysis. i have studied the code in detail.

the original developer has used different methods to load the xml data and make a scrollbar. the usual (correct) method he has used in all the flash files is the one in frame 9 which loads the mediacenter.xml into an instance of a dynamic text field and the scrollbar is setup to target the instance of the text field.

as per your suggestion, i have tried to modify the code in sprite67 to solve the problems of space after the text and the scrollbar thumb problem. i simply cannot figure out what to modify in fScrollUp() and fScrollDown() to properly constrain the distance that the objects can scroll. also, i have no idea how to add a sliding thumb and write supporting code for it.

i think the best thing for me to do is to duplicate the method used in frame 9. (whats your opinion?) i.e. load the news.xml into an instance of a dynamic text field and the scrollbar is setup to target the instance of the text field. i am working on this currently and would appreciate you pointing me in the right direction. i.e. what steps are needed to do this. i assume solving this should not be too difficult for me, but as i mentioned, i am a newbie in flash and may get stuck

many thanks for your kind efforts. you have really helped me a lot.

The developer wasn't doing anything incorrectly in frame 1, he just needed to do things differently at frame 1 because the manner in which the data is being displayed is different.

Consider this:
In frame 9 the scrollbar he used is the best choice for the job because it's just loading text from an xml file into a text field. The scrollbar is set up to scroll the text-field...Job done!

However, in frame 1, the scrollbar he usually uses is not appropriate because it's not just scrolling text in a text field.

In frame 1, sprite67 loads the news.xml file, separates each news item and dynamically creates movieclips to put the news items into.
The area the news clips are put into has been masked (so you'll only see the news items under the masked area, items outside that area are not visible).
Using the two arrows, you can scroll the news items up and down.

So there is absolutely nothing wrong with the solution at frame 1.
The original developer has created a component which does it's job. It just appears that the component hasn't been fully developed.

I don't know if the original developer deliberately left the thumb out of the component (perhaps they had a deadline and had to submit the .swf ASAP or maybe they thought they didn't need to use it) or perhaps they simply forgot to add it in. Either way it does look a bit inconsistent not having the thumb, so if your client has asked for this to be added, it's a fair request!

The component at frame 1 is appropriate for the job, but as mentioned, it seems obvious that it is incomplete. The scrolling code is buggy, and for whatever reason the thumb has not been implemented.

So this should just be a case of modifying sprite67 to fix the scrolling and to add the thumb to the scrollbar.

I don't think that replicating the method used at frame 9 is a good idea for reasons already mentioned!
You should also note that each news item highlights on the mouse over event...Clicking on one doesn't seem to do anything at the moment, but I would assume that it should do something (open up a web page with the full news item, or load the full news item into another movieclip). But I guess you'd have to check that with your boss or your client.

I don't have your file open at the moment, but if memory serves correctly there is a "news container" movieclip which has the instances of the news objects in it. It is this "news container" which is in the masked area.

So the scrollers arrows should do something like perhaps, take into account the height of the container and the Y distance of the container from its original Y position to determine how to limit the scrolling. If it is appropriate to scroll, The height of the news item clips will also determine how far to scroll upwards or downwards.
(To ensure that you're scrolling far enough to display the whole of the next/previous item)

Things to bear in mind:
The height of the news container could potentially vary (for example if news items were added to or removed from the xml file), so you'll need to use the height property of the news container and not a fixed value.
Also I think the news items are all the same size, so you should only need to look at the height of one of those and take into account the spacing between them to determine how far to scroll the container.

In case you need any help visualising any of this I've attached a little pic...see scroller.png

For the thumb, you've already got a graphic to represent the actual bar.
When creating the thumb, you could create a simple vector graphic of a rectangle and place it above the bar.

When setting up the code for the thumb part of the component you'll probably need to do something like:
Subtract the height of the thumb graphic from the height of the bar, which gives you the number of pixels that thumb will be able to move along the bar, this value can be used to constrain the thumb along the bar and has further uses (see below).

Next divide the height of the container by the height of the result from the above calculation and that will give you a proportion.
So every time the thumb is moved by n pixels, your movieclip should be moved by n*proportion pixels.

And that's pretty much it. So it's not particularly complicated.
Keep plugging at it and I'm sure you'll get there in the end!

Cheers for now,
Jas.

[sandra21]

i am working on your solution. thanks for the detailed explanation. you have really helped me a lot. i wish there were more helpfull people like you in this world. it would be a better place to live in.