Scrolling Left To Right With Actionscript 3.0 - actionscript-3

maybe someone can help me with this Adobe Flash Actionscript 3.0 question.
I'm trying to make a timeline with "buttons" on the left and right most part of the screen so the timeline can be scrubbed when the mouse goes to those parts of the screen. The buttons themselves are simply there as a means to show the user where they need to hover over in order to make the timeline scroll in that direction.
I've been able to get the timeline to scrub once with the code below, but I want to make it so that it keeps scrolling for the duration of time that the user keeps their mouse over it.
Also I placed an If statement that prevents the timeline from being scrolled off the screen.
Currently the code is only used once and goes left to right on the X axis by 15. How do I make it so it keeps steadily moving to the left or right until the mouse is off the scroll buttons?
//Scroll Logic
backScroll_btn.addEventListener(MouseEvent.ROLL_OVER, backScroll);
function backScroll(e:MouseEvent){
if(timeLine.x < 1406.55){
timeLine.x = timeLine.x + 15;}
}
forwardScroll_btn.addEventListener(MouseEvent.ROLL_OVER, forwardScroll);
function forwardScroll(e:MouseEvent){
if(timeLine.x > 0){
timeLine.x = timeLine.x - 15};
}

Since you want a continuous scroll, use an enter frame event listener to trigger the scroll. The buttons will then have two listeners triggering the scrolling on/off for either side.
var scrollingBack:Boolean;
var scrollingForward:Boolean;
backScroll_btn.addEventListener(MouseEvent.ROLL_OVER, backScrollOn);
backScroll_btn.addEventListener(MouseEvent.ROLL_OUT, backScrollOff);
function backScrollOn(e:MouseEvent):void { scrollingBack=true; }
function backScrollOff(e:MouseEvent):void { scrollingBack=false; }
forwardScroll_btn.addEventListener(MouseEvent.ROLL_OVER, forwardScrollOn);
forwardScroll_btn.addEventListener(MouseEvent.ROLL_OUT, forwardScrollOff);
function forwardScrollOn(e:MouseEvent):void { scrollingForward=true; }
function forwardScrollOff(e:MouseEvent):void { scrollingForward=false; }
timeline.addEventListener(Event.ENTER_FRAME,doScroll);
function doScroll(e:Event):void {
if (scrollingForward) {
if(timeLine.x > 0){
timeLine.x = timeLine.x - 15};
} else if (scrollingBack) {
if(timeLine.x < 1406.55){
timeLine.x = timeLine.x + 15;}
}
}

I think this may work, have enterframe event listen when the item is rollover and increase the X by every frame unitl the mouse roll out of the button.
backScroll_btn.addEventListener(MouseEvent.ROLL_OVER, backScroll);
function backScroll(e:MouseEvent):void
{
addEventListener(Event.ENTER_FRAME,myButton);
backScroll_btn.addEventListener(MouseEvent.ROLL_OUT, backScrollOut);
}
function backScrollOut(e:MouseEvent):void
{
removeEventListener(Event.ENTER_FRAME,myButton);
}
function myButton(e:Event):void
{
timeLine.x+=15;
}

Related

Moving A MovieClip to Left/Right Using Touch Events with simultaneous touches

I am Developing a game, AS3 Adobe air targeted for both android and ios, in which you have a movie clip in the center, and two buttons ( left and right ) that should move that movie clip. My goal is to make the shift between the left/right as smooth as possible :
- if the player is touching the left button, the movie clips moves left. if he removes he's finger from the left button, and touches immediately the right button, the movie clip won't move, it's until he re-touches the right button , that the movie clips moves right. I have tried to implement multitouch events, but i seem to have something wrong since this is the behavior i'm getting.
- if the player is touching the left button, the movie clips moves left as expected, if he touches the right button, the movie clip stops as expected, but if he removes his finger from the left button while keeping it on the right button, the movie clip still freezes and don't move, it should move then to the right
This is the code i am using :
leftButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,mouseDown);
rightButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,mouseDown2);
stage.addChild(leftButtonCreated);
stage.addChild(rightButtonCreated);
function mouseDown(e:TouchEvent):void
{
stage.addEventListener(TouchEvent.TOUCH_END,mouseUp1);
//listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.;
addEventListener(Event.ENTER_FRAME,myButtonClick);//while the mouse is down, run the tick function once every frame as per the project frame rate
}
function mouseUp1(e:TouchEvent):void
{
removeEventListener(Event.ENTER_FRAME,myButtonClick);//stop running the tick function every frame now that the mouse is up
stage.removeEventListener(TouchEvent.TOUCH_END,mouseUp1);
}
function mouseDown2(e:TouchEvent):void
{
stage.addEventListener(TouchEvent.TOUCH_END,mouseUp2);
//listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.;
addEventListener(Event.ENTER_FRAME,stopDragging);//while the mouse is down, run the tick function once every frame as per the project frame rate
}
function mouseUp2(e:TouchEvent):void
{
removeEventListener(Event.ENTER_FRAME,stopDragging);//stop running the tick function every frame now that the mouse is up
stage.removeEventListener(TouchEvent.TOUCH_END,mouseUp2);
}
function stopDragging(ev2:Event):void
{
if (MC.x <= rightButtonCreated.x)
{
MC.x = MC.x + 10;
}
}
function myButtonClick(ev:Event):void
{
if (MC.x > leftButtonCreated.x)
{
MC.x = MC.x - 10;
}
else
{
}
}
The Code was initially set for mouseEvents, so i tried to shift to touch events so i could fix this problem, and the code above is what i got. Thank you for your time.
EDIT:
And, i use the following code :
var leftButtonCreated:leftB= new leftB();
Your current problem is that both mouseUp1 and mouseUp2 are triggered once you release the left button, as they are both attached to stage. But your actual problem is deeper. You should first move the object left and right if corresponding buttons are pressed, and use TouchEvent.touchPointID to track which touch has been released to understand which button was released.
Also a potential caveat: If you touch both left and right button, then swap fingers while retaining both touches, then release the finger that's over the right button - where should your object move, left or right? I say the correct answer is to the right, as the finger released corresponds to the left button.
leftButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,touchDown);
rightButtonCreated.addEventListener(TouchEvent.TOUCH_BEGIN,touchDown);
leftButtonCreated.addEventListener(TouchEvent.TOUCH_END,touchUp);
rightButtonCreated.addEventListener(TouchEvent.TOUCH_END,touchUp);
addEventListener(Event.ENTER_FRAME,moveObject);
function touchDown(e:TouchEvent):void {
var button:DisplayObject=e.currentTarget as DisplayObject;
if (!button) return; // can't fail typecast to DisplayObject in this context, but leave for good measure
if (button==leftButtonCreated) {
leftButtonPressed=true;
leftButtonTouchID=e.touchPointID;
return;
}
if (button==rightButtonCreated) {
rightButtonPressed=true;
rightButtonTouchID=e.touchPointID;
return;
}
}
function touchUp(e:TouchEvent):void {
var button:DisplayObject=e.currentTarget as DisplayObject;
if (!button) return;
var ti:int;
if (button==leftButtonCreated) {
ti=leftButtonTouchID;
if (ti==e.touchPointID) {
leftButtonPressed=false;
}
}
if (button==rightButtonCreated) {
ti=rightButtonTouchID;
if (ti==e.touchPointID) {
rightButtonPressed=false;
}
}
}
function moveObject(e:Event):void {
if (leftButtonPressed) MC.x-=10;
if (rightButtonPressed) MC.x+=10;
if (MC.x<leftButtonCreated.x) MC.x=leftButtonCreated.x;
if (MC.x>rightButtonCreated.x) MC.x=rightButtonCreated.x;
}
EDIT: Apparently SimpleButtons don't allow the events to propagate outside to their parents. Okay, this can still be remedied, but you will have to store the required properties in your Main class.
var leftButtonPressed:Boolean=false;
var rightButtonPressed:Boolean=false;
var leftButtonTouchID:int=0;
var rightButtonTouchID:int=0;
The above code has been updated. Please return to using SimpleButtons directly, as you were using with var leftButtonCreated:leftB= new leftB();.

AS3 Apache Flex: click randomly not updating stage until mouse moves

I have a SWF that displays a field of stars as a single BITMAP added to the Stage. The image is dynamically generated through the Bitmap's BitmapData, to allow trackball interaction with the star field. Planets and other buttons are also on the stage with hint Labels underneath.
All works as expected. However, sometimes clicking a button, performs an operation, that does not show up until the mouse moves. For example, clicking the button to toggle planet labels, will immediately update the stage with labels turning on and off. But sometimes, the click does nothing, until the mouse is moved, or another click is made and then both clicks activate in series.
Same goes for a button that resets the star field to show either the Sun to Earth or Earth to Sun view. Click the image (button) and the background star field updates immediately. However, sometimes it does nothing until the mouse moves. It seems like an interface timing issue beyond my control.
Anybody encounter this situation? Working on MAC with Firefox, all latest updates.
Here's the event code.
private function moveRespond(e:MouseEvent):void {
var X:int=mouseX,Y:int=mouseY,R:int=Assets.Assets.radius/10; if(R<15){R=15}
if( moveActive ) {
Assets.Assets.STUFF.view.rotateMatrix(PT.x,PT.y,X,Y);
FIELD.update(w,h);
}
else {
Assets.Assets.STUFF.line.hover(X,Y,R);
var btn:Vector.<Button>=Assets.Assets.BTN_list;
var i:int,I:int=btn.length;
for( i=0; i<I; i++ ) {
btn[i].label.visible=btn[i].hover(X,Y);
} }
DP.x=PT.x-X; PT.x=X;
DP.y=PT.y-Y; PT.y=Y;
}
private function upRespond(e:MouseEvent):void { moveActive=false }
private function downRespond(e:MouseEvent):void { moveActive=true;
var X:int=mouseX,Y:int=mouseY;
PT.x=X; PT.y=Y;
}
private function clickRespond(e:MouseEvent):void {
...
//lots of button management, similar to above
//FIELD.update(w,h); and new zodiac sign fetch...
//but if there was a soft error in here,
//then the click at the end would get skipped,
//and it doesnt.
...
if( click ) { Assets.Assets.soundClick(X); }
}
Because of the randomness of the error, I'm assuming a memory thrashing somewhere in my code that is interrupting the next event, but kinda hoping its a communications issue because the missed-click is Event-queued. It just doesnt get sent to my App until either a move or another click. The App.swf can be run without the wrapper (preloader basically), and it has the same randomness. Even though it is very rare, it is still very annoying.
There is also a ConstantUpdate timer:
public function constantUpdate(evt:TimerEvent):void {
Mouse.hide(); Mouse.show();
dateMessage();
if( !Assets.Assets.BTN_help.glowing && Math.random()<0.05 ) { Assets.Assets.BTN_help.glow(); }
if( !Assets.Assets.BTN_logo.glowing && Math.random()<0.01 ) { Assets.Assets.BTN_logo.glow(); }
if( !Assets.Assets.BTN_next.glowing && Math.random()<0.05 ) { Assets.Assets.BTN_next.glow(); }
Assets.Assets.BTN_help.update();
Assets.Assets.BTN_logo.update();
Assets.Assets.BTN_next.update();
Assets.Assets.BTN_star.update();
Assets.Assets.BTN_note.update();
Assets.Assets.BTN_moon.update();
}
Just more button management. The Mouse hide/show pings the Mouse after the contextMenu deactivates. Otherwise, the mouse turned into an arrow over the contextMenu and would stay that way until mouse left the window and returned. Still have some mouse hick-ups on startup though - not setting my cursor after App.swf loaded. Have no idea if that is related to the clicking issue, but here's that code:
var cursor:MouseCursorData=new MouseCursorData();
cursor.hotSpot=new Point(
Assets.Assets.BTN_sun.icon.width/2,
Assets.Assets.BTN_sun.icon.height/2);
var pointer:Vector.<BitmapData>=new <BitmapData>[Assets.Assets.BTN_sun.icon.bitmapData];
cursor.data=pointer;
Mouse.registerCursor("myCursor",cursor);
Mouse.cursor="myCursor";
I dont keep a local handle to the cursor object.

ActionSript 3 - show controls on mouseover

I currently have a graphic animation with a simple play/pause button beneath, which stops and starts the entire animation:
Frame 1:
stop();
btn_2.addEventListener (MouseEvent.CLICK, stopplaying);
function stopplaying(e:MouseEvent):void {
MovieClip(root).stop();
stop();
gotoAndStop(2);
}
Frame 2:
stop();
btn_1.addEventListener (MouseEvent.CLICK, startplaying);
function startplaying(e:MouseEvent):void {
MovieClip(root).play();
play();
gotoAndStop(1);
}
This works simply and perfectly. However, I'd like the control button to show up on mouseover, and once again become transparent when the mouse leaves the area of the animation. Simply mapping alpha states to the mouse events works, but also seems to break the functionality of the button. Any help would be hugely appreciated!
Update: #BadFeelingAboutThis has good logic, but I'm not having much success with it. To be clear, frame 1 of my scene's actions is now:
var btn_1, btn_2;
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
function mouseOver(e:Event):void {
if(btn_1) btn_1.visible = true;
if(btn_2) btn_2.visible = true;
}
function mouseOut(e:Event):void {
if(btn_1) btn_1.visible = false;
if(btn_2) btn_2.visible = false;
}
The button is hidden, but is not reappearing on mouseover. The only fail-point I can see is the keyword 'this', that is, that I'm using it incorrectly. Let me know if there's any other info I can provide!
Update 2: Some more information (and I apologize for my dimness here): here is the animation: [link snipped, updated link below]. The play/pause button is a movie clip named "pp" that contains two frames, each with a button, one named btn_1, the other btn_2.
Update 3: I added a transparent background square (named "backpp") as a mouseevent area (instead of using the broader "this"):
backpp.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
backpp.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
This works great! When I mouseover the square, the controls show up. When I mouseout, they go away. However, the play/pause functionality is now not functioning. Any ideas?
Update 4: Most recent code/context below. The play/pause button is now sort-of functioning, and is hiding as intended, but is exhibiting a visual "flashing" behavior, as seen here: http://allaboarddesign.com/rodney/rodney-test.swf
Here is a screenshot of my FlashPro context:
You can do the following:
//create placeholder vars for your btns (they will be populated by the instances on the timeline)
//do this so the compiler knows they exist
var btn1, btn2;
//hide the buttons, do this on frame 2 as well but with btn2
btn1.visible = false;
//listen for mouse over/out on `this` (the timeline whose code this on, presumably your animation)
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT,mouseOut);
function mouseOver(e:Event):void {
//show the buttons if they exist
if(btn1) btn1.visible = true;
if(btn2) btn2.visible = true;
}
function mouseOut(e:Event):void {
//hide the buttons if they exist
if(btn1) btn1.visible = false;
if(btn2) btn2.visible = false;
}
EDIT
Based off your screenshot, it looks your hierarchy is this:
Maintimeline -> pp -> btn1
Where pp is the controls for your main timeline animation.
In that case, the code should be on the Main Timeline and look like this:
pp.visible = false;
//listen for mouse over/out on `this` (the timeline whose code this on, presumably your animation)
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT,mouseOut);
function mouseOver(e:Event):void {
//show the buttons if they exist
pp.visible = true;
}
function mouseOut(e:Event):void {
//hide the buttons if they exist
pp.visible = false;
}
For the mouse over to work, your animation will need something in the background to mouse over, even a transparent shape or movieClip will do.

Hiding/Showing stage elements when using drag and drop

I asked a question about drag and drop a few days ago, which was answered here:
Changing text dynamically with drag / drop in Flash CS6 (AS3)
I have another question related to the first question, not sure if I was supposed to ask it on that original question or start a new one.
Anyway, I am trying to have some stage elements show on the screen when the slider is being used, and then hide when the user stops using ("drops") the slider button. The elements are a button and a textarea component.
I set the alpha for each element to zero and then wanted to use as3 to tell the system when to set the alpha to 100, and then of course when to set it back to zero.
The issue I'm having is that when I let go of the slider, everything becomes hidden again EXCEPT for the text inside the textarea component.
Here is my code:
slider.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);
function fl_ClickToDrag(event:MouseEvent):void
{
slider.startDrag(false, rectangle);
graphic.alpha = 1;
textarea1.alpha = 1;
}
stage.addEventListener(Event.ENTER_FRAME, _onEnterFrame);
function _onEnterFrame(e:Event):void {
if (slider.x > 26){
textarea1.text = '25+';
}
}
slider.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop);
function fl_ReleaseToDrop(event:MouseEvent):void
{
slider.stopDrag();
graphic.alpha = 0;
textarea1.alpha = 0;
}
What am I missing here?

AS3 - MouseWheelDown listener

Is there any way to detect if the mouse wheel is held down? I need to pan my scene while the middle button or mouse wheel is pushed down (I thought holding the mouse wheel down was the same as middle mouse button, but it aint working).
Thanks!
Though I never used it there's MIDDLE_CLICK event which works only in AIR apps. Does your app run in browser or on desktop?
Also, just my 2 cents, it's so damn inconvenient to use scrollwheel button in an application. Each time I am forced to do that in some 3D modelling tool I want to smash my monitor. I'd use just shift/alt/ctrl + mouse1/mouse2.
How about trying out this:
this.onEnterFrame = function() {
if (ASnative(800, 2)(1)) {
trace ("You have pressed or depressed the left mouse button");
}
}
this detects the left mouse... if you substitute the argument (1) with (2) you get the right mouse button so...
this.onEnterFrame = function() {
if (ASnative(800, 2)(2)) {
trace("You have pressed or depressed the right mouse button");
}
}
and if you put in a (4) you get the middle mouse or often the wheel button...
this.onEnterFrame = function() {
if (ASnative(800, 2)(4)) {
trace("You have pressed or depressed the middle mouse or wheel button");
}
}
Source: http://www.actionscript.org/forums/showthread.php3?t=68209
PS: I would suggest not using the middle mouse or wheel button because not everyone has a middle mouse button. So if you still want the usability of a middle mouse button, please adjust your functions accordingly so a person without a middle mouse button can still pan the canvas.
EDIT:
Ok, I made a booboo! Didn't catch it had to be for AS 3.0.
The support for the middle/right mouse button click is no longer available in AS 3.0.
Atleast not directly.
One way to do it is using JS to detect the mouse button that's being pressed and then giving that variable as a string into Flash.
How to detect a mouse click in JS:
http://www.quirksmode.org/js/events_properties.html
How to put this variable into Flash: (ExternalInterface)
http://learn.adobe.com/wiki/display/Flex/External+Interface
Or you can do it directly through a hack in AS 3.0: (limited browser & OS support)
http://flashpunk.net/forums/index.php?topic=2549.0
DEMO: http://www.shinyhappypixels.com/punk-forums/clicky-hook/
This is possible with as3, came across this so here it is:
import flash.events.MouseEvent;
function handleMouseWheel(event:MouseEvent):void {
if ((event.delta > 0 && box_mc.y < 270) || (event.delta < 0 && box_mc.y > 0)) {
box_mc.y = box_mc.y + (event.delta * 3);
}
}
stage.addEventListener(MouseEvent.MOUSE_WHEEL, handleMouseWheel);