Flash AS3: How to Make scroll bar react to dynamic textfield movement? - actionscript-3

I've been looking for a tutorial and answer to this for a while but can't find what I'm looking for. I am loading html text into a dynamic textfield, and I have a scrollbar controlling the scroll using the code below. What I want to do is also add scroll up/down buttons and have the scroll bar move in relation to the text scroll. I was just going to use "tracklistingtext.scrollV -- " for the scroll buttons, but right now the scroll bar doesn't recognize the text movement. What do I need to do to get the scroll bar to listen to the text scroll position?
var listTextreq:URLRequest=new URLRequest("tracklist.txt");
var listTextLoader:URLLoader = new URLLoader();
var bounds:Rectangle=new Rectangle(scrollMC.x,scrollMC.y,0,300);
var scrolling:Boolean=false;
function fileLoaded(event:Event):void {
tracklistingtext.htmlText=listTextLoader.data;
tracklistingtext.multiline=true;
tracklistingtext.wordWrap=true;
scrollMC.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
addEventListener (Event.ENTER_FRAME, enterHandler);
}
listTextLoader.addEventListener(Event.COMPLETE, fileLoaded);
listTextLoader.load(listTextreq);
function startScroll(e:Event):void {
scrolling=true;
scrollMC.startDrag(false,bounds);
}
function stopScroll(e:Event):void {
scrolling=false;
scrollMC.stopDrag();
}
function enterHandler (e:Event):void {
if (scrolling == true) {
tracklistingtext.scrollV = Math.round(((scrollMC.y - bounds.y)/300)*tracklistingtext.maxScrollV);
}
}
Any help is greatly appreciated.

Replace the scrollHandler calculations with yours.
//...
function fileLoaded(event:Event):void {
tracklistingtext.htmlText=listTextLoader.data;
tracklistingtext.multiline=true;
tracklistingtext.wordWrap=true;
scrollMC.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
addEventListener (Event.ENTER_FRAME, enterHandler);
/* !!! */ tracklistingtext.addEventListener(Event.SCROLL, scrollHandler);
}
//...
function scrollHandler(event:Event):void {
scrollMC.y = (tracklistingtext.scrollV / tracklistingtext.maxScrollV) * bounds.height + bounds.y;
}

Related

How to resize an image on drag?

I have a couple of images I want to use in a drag and drop game. I've got this working through the actionscript code snippets but I also need these images to be able to resize by dragging an arrow or something similar at the bottom corner. I can either get the dragging working by not including the resize code and vice versa.
this.addEventListener(MouseEvent.MOUSE_MOVE, resize);
this.addEventListener(MouseEvent.MOUSE_UP, stopDragging, true);
this.addEventListener(MouseEvent.MOUSE_DOWN, startDragging, true);
function startDragging(E:MouseEvent):void {
resize1.startDrag();
}
function stopDragging(E:MouseEvent):void {
resize1.stopDrag();
}
function resize(E:MouseEvent):void {
item1_mc.width = resize1.x - item1_mc.x;
item1_mc.height = resize1.y - item1_mc.y;
}
Does anyone have any idea how to fix this? I know my image resize code is primitive at the moment but that can be changed to scaling soon enough.
You have to split your image movieclip (or whatever you have) into two parts - one draggable and one resizeable like that
myImageWidget (this is your parent movicelip)
|
|- imageMC (this will hold the image and will be the draggable object)
|- arrowMC (this is your arrow that will be OVER your image and will be used to resize)
Then IN YOUR "myImageWidget" you need something like this (get rid of all "this.", it makes no sense :)
// image MC will listen for clicks and start dragging
imageMC.addEventListener(MouseEvent.MOUSE_UP, stopDragging, true);
imageMC.addEventListener(MouseEvent.MOUSE_DOWN, startDragging, true);
// arrow MC will listen for clicks and start resizing
arrowMC.addEventListener(MouseEvent.MOUSE_UP, stopResizing, true);
arrowMC.addEventListener(MouseEvent.MOUSE_DOWN, startResizing, true);
function startDragging(E:MouseEvent):void
{
startDrag();
}
function stopDragging(E:MouseEvent):void
{
stopDrag();
}
function startResizing(E:MouseEvent):void
{
addEventListener(MouseEvent.MOUSE_MOVE, resize);
}
function stopResizing(E:MouseEvent):void
{
removeEventListener(MouseEvent.MOUSE_MOVE, resize);
}
function resize(E:MouseEvent):void
{
// you will adjust this to local coordinates since you are inside of the imageWidget
width = mouseX;
height = mouseY;
}

Flash reverse timeline

Worked with flash cs6 and as3.
I wanted to make menu like this link. When mouse_over on the menu, the blue rectangle moves to the right; and when mouse_up, the animation reversed.
I made the blue rectangle in a movieclip menuBlueHome. There, I made the rectangle moves from left to right (from frame 1 to 10). At frame 10, I made action script:
stop();
I was still working with home menu when I faced this problem. When I hover the home menu, the blue rectangle moves to the right and reversed straightaway before mouse_up. Here is the code outside the mc:
var menuBlueHome: MovieClip;
menuBlueHome.stop();
var direct: String;
btnHome.addEventListener(MouseEvent.MOUSE_OVER,onOverHome);
btnHome.addEventListener(MouseEvent.MOUSE_OUT,onLeaveHome);
btnHome.addEventListener(MouseEvent.CLICK,onClickHome);
function onOverHome(e:MouseEvent):void{
androidHome.visible = true;
menuBlueHome.play();
}
function onLeaveHome(e:MouseEvent):void{
androidHome.visible = false;
addEventListener(Event.ENTER_FRAME,onFrameHome);
}
function onClickHome(e:MouseEvent):void{
gotoAndStop(1);
}
function onFrameHome(event:Event):void {
if(menuBlueHome.currentFrame > 9) {
direct = "backward";
}
var backAmount:Number = menuBlueHome.currentFrame -1;
if(direct == "backward") {
menuBlueHome.gotoAndStop(backAmount);
}
}
Did I make something wrong with the code? Thanks for your help.
Try with this code:
function onLeaveHome(e:MouseEvent):void{
androidHome.visible = false;
menuBlueHome.removeEventListener(Event.ENTER_FRAME, onFrameHome);
menuBlueHome.addEventListener(Event.ENTER_FRAME, onFrameHome);
}
function onFrameHome(event:Event):void {
var backAmount:Number = menuBlueHome.currentFrame - 1;
menuBlueHome.gotoAndStop(backAmount);
if(backAmount == 1) menuBlueHome.removeEventListener(Event.ENTER_FRAME, onFrameHome);
}
Here you have and example.
But, I recommend you to do your code more dynamic, here you have another example.

Changing text dynamically with drag / drop in Flash CS6 (AS3)

I have some incredibly simple code that works fine in letting me drag a "slider" button horizontally. However, I also want the text that appears above the object to change depending upon what the x-coordinate is of the object I'm dragging.
Here's the simple code:
var rectangle:Rectangle = new Rectangle(31,944,179,0);
Button.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);
function fl_ClickToDrag(event:MouseEvent):void
{
Button.startDrag(false, rectangle);
}
Button.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop);
function fl_ReleaseToDrop(event:MouseEvent):void
{
Button.stopDrag();
gotoAndPlay(20);
}
What I'm wanting to do is have the system determine where the "Button" is in terms of its x-coordinate, and if the x-coordinate is higher than, say, 50, for the text above the "Button" to say "50+", and if the x-coordinate is higher than 100 for the text to change to "100+". I'm also not sure if the x-coordinate should be relative to the rectangle or relative to the entire screen.
Any and all help is appreciated.
You can use a boolean var to indicate if your button is dragged and if, then update your text field like this :
var is_dragged:Boolean = false;
var rectangle:Rectangle = new Rectangle(0, 100, stage.stageWidth - button.width, 0);
stage.addEventListener(Event.ENTER_FRAME, _onEnterFrame);
function _onEnterFrame(e:Event):void {
if(is_dragged){
text_field.text = String(Math.round(button.x / 50) * 50) + '+';
}
}
button.addEventListener(MouseEvent.MOUSE_DOWN, button_onPress);
function button_onPress(e:MouseEvent):void {
button.startDrag(false, rectangle);
is_dragged = true;
}
button.addEventListener(MouseEvent.MOUSE_UP, button_onRelease);
function button_onRelease(e:MouseEvent):void {
button.stopDrag();
is_dragged = false;
}
You can see this code working here.
Hope that can help.

Match scroll bar scrolling to content scrolling - AS3

I apologize in advanced if this is a little confusing to understand, but I'll do the best I can to explain it.
Basically I've created a scrolling page that allows you have content that extends beyond the stage and swipe up or down to view it.
In this case, a movieclip the size of the stage masks an object under it (taller than the stage) and swiping up/down affects the objects y position, revealing more of it.
The part I'm stuck on is getting the "scroll bar" object on the side to match the position of the top and bottom of the overflow object;
Since the scroll bar has to stay on the stage, when the bottom of the object is reached the scroll bar ends up being off stage because they move at the same speed, so in this case, the scroll bar would need to move slower in order to be at the bottom when the other object is.
The way it's coded right now I can only seem to match either the top with
scrollbar.y = (e.target.y - barY);
the opposite is achieved by
scrollbar.y = (e.target.y + barY);
but I can't seem to achieve both simultaneously.
I'm coding this in AS3 (flash CC) with mobile being my desired platform to publish, and I'll attach my code as well as some screenshots below.
var ease:int = 6;
var targY:int = dragMe.y;
var barY:int = scrollbar.y;
var drag:Boolean = false;
var pos:Number = 0;
var minY:Number = 0 + dragMe.height / 2; // how low the top can go
var maxY:Number = stage.stageHeight - dragMe.height / 2; // how high the bottom can go
var barMax:Number = 0 + scrollbar.height; // how high the bar can go
var barMin:Number = stage.stageHeight - scrollbar.height; // how low the bar can go
dragMe.mask = mcMask;
mcMask.visible = false;
dragMe.addEventListener(Event.ENTER_FRAME, dragging);
dragMe.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
function dragging(e:Event):void {
if (drag) {
targY = mouseY + pos;
}
// restrict scrolling to stage
targY = Math.min(targY, minY); // how low the top can go
targY = Math.max(targY, maxY); // how high the bottom can go
barY = Math.min(barY, barMin); // how low the bar can go
barY = Math.max(barY, barMax); // how high the bar can go
// Movement of the text
e.target.y += (targY - e.currentTarget.y) / ease;
// Movement of the bar
scrollbar.y = (e.target.y - barY);
}
function mouseUp(e:MouseEvent):void {
drag = false;
}
function mouseDown(e:MouseEvent):void {
pos = e.currentTarget.y - mouseY;
drag = true;
}
Any help would be greatly appreciated!
Grey = stage
Black = outside stage
Good:
http://i.stack.imgur.com/qvAoz.png
Bad:
http://i.stack.imgur.com/FvHIm.png
The part I'm stuck on is getting the "scroll bar" object on the side to match the position of the top and bottom of the overflow object;
Well, there's no need to get the scrollbar object to match the position of the overflow object, you should bind it to the coordinates of the masker object. Btw I usually gather all UI elements right in the IDE, and then parse them. For example, if I need to add a scroll bar, I need only three elements:
container - all content will be added right in it;
masker
Scrollbar movieclip, which consists of two MCs: bg and a bar.
In this case I don't need to place this elements in code, but just call in a function to handle this elements. The code itself is simple enough. You know the height of the masker, the height and the position of the container, and also the height of the scrollbar background and current position of the bar. All you need is to handle the events and react accordingly.
E.g. in case you are scrolling using your scrollbar, just translate current coordinates of the bar and update container's position. If you are dragging your content, update your bar's position accordingly.
Also, there's a better way to drag the bar:
private static function drag(e:MouseEvent):void
{
var myBounds:Rectangle = new Rectangle(bar.x, 0, 0, barBg.height-bar.height+8);
bar.startDrag(false, myBounds);
bar.addEventListener(Event.ENTER_FRAME, update);
}
static private function stopdrag(e:*):void
{
bar.stopDrag();
update(null);
bar.removeEventListener(Event.ENTER_FRAME, update);
}
static private function update(e:Event):void
{
var scroll_run_length:Number = barBg.height - bar.height + 8;
var modificator:Number = (content.height-masker.height) / scroll_run_length;
content.y = startContY -(bar.y * modificator);
}

Scrolling within AS3 Flash

I'm trying to scroll a movieclip within flash. The problem is I have buttons within the movieClip so everytime I try to scroll its difficult not to open the button. My code is below for the scroll im using which is fairly simple.
ChestBiceps.addEventListener(MouseEvent.MOUSE_DOWN, ClipDraggedOn);
var boundsRect:Rectangle = new Rectangle(ChestBiceps.x, -200, 0, 310);
function ClipDraggedOn(event:MouseEvent):void {
ChestBiceps.startDrag(false, boundsRect);
stage.addEventListener(MouseEvent.MOUSE_UP, ClipDraggedOff);
}
function ClipDraggedOff(event:MouseEvent):void {
ChestBiceps.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_UP, ClipDraggedOff); }
Could someone try and figure how I disable the buttons almost whilst scrolling? I still want to be able to use the buttons, just not when scrolling...Thanks in advance
To disable the buttons add the following:
function ClipDraggedOn(event:MouseEvent):void {
ChestBiceps.mouseEnabled = false;
ChestBiceps.mouseChildren = false;
[...]
To re-enable the buttons add the following:
function ClipDraggedOff(event:MouseEvent):void {
ChestBiceps.mouseEnabled = true;
ChestBiceps.mouseChildren = true;
[...]