Solved

How do you create a dynamic text scrollbar that has a custom image instead of an expanding bar?

Posted on 2008-06-09
12
1,159 Views
Last Modified: 2013-11-11
Hi there!

I would like to make an XML driven textbox scrollbar that has a dragable image instead of a standart bar. I don't need up/down arrows. I can create the textbox and the XML part but I would like to know how you make the dragable bar to be a custom image.

Any help from out there.
Thank you in advance!!!
Randy
0
Comment
Question by:rgroft
  • 4
  • 4
  • 2
  • +1
12 Comments
 
LVL 13

Expert Comment

by:ET0000
ID: 21762896
This won't score any points, but... why? Why would you want to provide a control that every user in the world has never seen and has to work to understand and use, when you could more easily provide a control that they recognize and already know how to use?

User interface standards and conventions exist largely for the benefit of the users. Interfaces will evolve and improve, but any difference from the standard should have a very good usability reason for existing, and the benefits must outweigh the user learning curve for most users.
0
 
LVL 40

Expert Comment

by:RQuadling
ID: 21764240
I don't know anywhere near enough about Flash.

But I do remember seeing something like this for various skins in the good old WinAmp.

In fact, I've seen many scroll-bars which use an image as a thumb.

Ok. See if this logic works.

1 - Create a normal scrollbar, but set the thickness to as small as it can go.
2 - Turn off the arrows.
3 - Create an image.
4 - Allow the image to be clicked and dragged.
5 - Limit movement in the same direction as the scrollbar.
6 - Position the scrollbar's thumb in the same place as the image as it moves.

This effectively joins the image to the thumb.

I don't know if you can do anything like this in Flash.

0
 

Author Comment

by:rgroft
ID: 21775134
Hi there!

Let me explain better what I'm trying to do.

My dynamic text field is a MovieClip with the instance name of "text". It's Var is "textbox".
Here's the code for the dynamic text field:
     onClipEvent (load) {
           loadVariables ("text.txt", "");  //------the XML text file
     }
     onClipEvent (enterFrame) {
           textbox.scroll = _root.slider.b;
     }


Here 's the code for the hat scrollbar image.
     onClipEvent (load) {
           setProperty(this, _x, int(_x));
     }
     onClipEvent (enterFrame) {
           a = new Object();
           a.y = this._y;
           a.x = this._x;
           _root.path.globalToLocal(a);
           b = int(a.y/(100/_root.text.textbox.maxscroll));
     }

Here is the code for the path:
     onClipEvent (load) {
           setProperty(this, _x, _root.slider._x);
      setProperty(this, _y, _root.slider._y);
}

I've attached a jpg image of the swf file. As you will see, the hat image doesn't go to the bottom of the text window, it stops short of halfway, BUT, it does scroll to see all the text.

My question was really, how do you get the hat to scroll down to the bottom. I'm not that good with code and I'm sure this is probably clumsy. I have a small FLA file but can't attach it here.

Please help if you can!!!
Picture-2.png
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 21775208
I might be able to help you with this one, first:

- add .txt to your fla file
- zip it up

now you should be able to attach it here.

to get the scrollbar all the way to the bottom will hopefully be a tweak working out the height of the movieclip
0
 
LVL 13

Expert Comment

by:ET0000
ID: 21777545
Most scrollbars have 2 signifiant thumb attributes -- how far up/down it is positioned (showing the position in the document), and how big it is in the slider area (showing the relative size of the displayed content versus the whole content). You are probably either not calculating the vertical position of the hat, or you are not taking the size of the thumb into account. (And BTW, that's a defect of your hat versus the standard scrollbar -- the hat doesn't reflect the relative size of the displayed content -- so it may be cute, but it's not obvious to the user and it obscures information, making it a less desirable user interface convention).

If this line is supposed to be figuring out the relative vertical position as a percentage, shouldn't it be 100*y/maxscroll?
   b = int(a.y/(100/_root.text.textbox.maxscroll));
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:rgroft
ID: 21785722
Here is a zipped file with my FLA, .css and XML text files (to view you need to take off the .txt extension) There are numerous sites who have a square graphic or a circle shape as the dragable bar that follows along a vertical path (tweening would be cool). Here is one site that uses a draggable graphic idea: http://www.rapunzelfilm.com/

I'm trying to replicate how they and others do that but with a hat image instead of a rectangle shape. Is this possible?

Thank you!!!!



Archive.zip
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 21787917
ok you need to allow your hat to scroll the entire length of the bar:

startDrag(this, false, _root.path._x, _root.path._y + _root.path._height, _root.path._x, _root.path._y);

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 21787919
so inside slider on the hat replace your code with this (notice i also added onreleaseoutside)


on (press) {

	trace(_root.path._y + _root.path._height);

	startDrag(this, false, _root.path._x, _root.path._y + _root.path._height, _root.path._x, _root.path._y);

}

on (release, releaseOutside) {

	stopDrag();

}

Open in new window

0
 

Author Comment

by:rgroft
ID: 21790822
Hi tagit!

Your code now allows my hat to go to the bottom of the path.  Thank you! But I would like to know why does the hat (slider) only reach the middle of the path when the text reaches the end VS the hat reaches the bottom when the text end. This seems odd. Sorry for being a pain about this, but I am trying to learn.

Thank you!
Randy
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 21793307
sorry i did also change the b.... :P

if you see below i changed the maximum from 100 (a.y(100/_root ...) to the _height of the scroll bar
onClipEvent (load) {

	setProperty(this, _x, int(_x));

}

onClipEvent (enterFrame) {

	a = new Object();

	a.y = this._y;

	a.x = this._x;

	_root.path.globalToLocal(a);

	//trace(a.y);

	//b = int(a.y/(100/_root.mcTXT.txt1.maxscroll));

	b = int(a.y/(_root.path._height/_root.mcTXT.txt1.maxscroll));

	//trace(b);

}

Open in new window

0
 

Author Closing Comment

by:rgroft
ID: 31465592
tagit!

Praise the Lord!!!!! Thank you. Now I hope I can try this again and understand it. Thank you very much! You are the Guru.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This is intended to introduce all collision detection principles in flash, their strengths, weaknesses and workarounds. The main method for Collision Detection in flash is using hitTestObject. But unless you'll be pushing rectangular shapes without …
I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now