|
 |
|
|
|
|
|
Creating bilinear scrollbar
[swf]http://img40.exs.cx/my.php?loc=img40&image=bilinearscrollbar.swf[/swf]
Let's start:
1.Draw a rectangle in the size of your text block.
2.Copy the rectangle and create with resizing the two tracks like the sample above (horizontal and vertical).
3.Right-click on the rectangle you first created in the outline panel to group it as a sprite.
4.Give the sprite a name ('mySprite' for example) and select 'Use bottom object as mask'.Insert your text field in the sprite; give it a name ('myText' for example) and select 'target'.
If you use a pixel font it's good to set it's anchor at top-left in the outline panel and to give it the coordinates x=0 y=0.
5.Close the sprite to have the main timeline selected and insert your arrows (up, down, left and right).
6.Convert the four arrows to buttons in the outline panel (up and down group as sprite and add name "y_buttons" and left and right arrows group as sprite and add name "x_buttons").
7.Then give them both actions:
Scripting:
I:for y axis buttons:
up arrow:
on (press) {
up="true";
}
on (release) {
up="false";
}down arrow:
on (press) {
down="true";
}
on (release) {
down="false";
}
I:for x axis buttons:
left arrow:
on (press) {
left="true";
}
on (release) {
left="false";
}
right arrow:
on (press) {
right="true";
}
on (release) {
right="false";
}
With this code you set a variable to be "true" or "false". It's useful to use variables that you can remember easily.With the timeline of the "y_buttons" open set the actions:
"y_button" Sprite:
onLoad () {
up="false";
down="false";
}
onEnterFrame() {
if ((up eq "true") && (_root.mySprite.myText._y < 3)) {
_root.mySprite.myText._y += 2;
} else if ((down eq "true") && (_root.mySprite.myText._y > -135 )) {
_root.mySprite.myText._y -= 2;
}
}
8.With the timeline of the "x_buttons" open set the actions:
"x_button" Sprite:
onLoad () {
left="false";
right="false";
}
onEnterFrame() {
if ((left eq "true") && (_root.mySprite.myText._x < 3)) {
_root.mySprite.myText._x += 2;
} else if ((right eq "true") && (_root.mySprite.myText._x > -120 )) {
_root.mySprite.myText._x -= 2;
}
}
9.Adding your sliders:
Draw a rectangle or import the image of slider and place it between your two arrows. Have it in the "y_buttons" sprite in the outline. Give the rectangle or slider a name (y_slider) and make it a target (check the [x] target box).Copy the rectangle or slider image and paste into the "x_buttons" sprite and add the name (x_slider).Again check the [x] target box.
10.Slider scripting:
for "y_buttons" sprite, add:
onEnterFrame() {
if ((down eq "true")&&(_root.y_buttons.y_slider._y < 65)){
_root.y_buttons.y_slider._y += 2;
}else if ((up eq "true")&&(_root.y_buttons.y_slider._y > -65)){
_root.y_buttons.y_slider._y -= 2;
}
}for "x_buttons" sprite, add:
onEnterFrame() {
if ((right eq "true")&&(_root.x_buttons.x_slider._x < 97)){
_root.x_buttons.x_slider._x += 2;
}else if ((left eq "true")&&(_root.x_buttons.x_slider._x > -97)){
_root.x_buttons.x_slider._x -= 2;
}
}
11.Now select the _root timeline; (click on 'Scene 1' in the outline panel) and set actions:
Scene 1:
onEnterFrame(includingFirstFrame) {
NegY =(-65 - _root.y_buttons.y_slider._y);
NewY = NegY * 1.1;
_root.mySprite.myText._y =math.round (NewY);
}
onEnterFrame(includingFirstFrame) {
NegX =(-97 - _root.x_buttons.x_slider._x);
NewX = NegX * 0.7;
_root.mySprite.myText._x =math.round (NewX);
}
12.The text now moves the opposite way as the scroller; you can drag or push the arrows.
Hope it has helped a bit 
Enjoy 
|
|
|
|
