I've created a custom scrub bar which means the scrub handle is being drug along a specific axis. I can drag the handle just fine, but when I start dragging and move the mouse off the handle and release, the handle does not stop. I have to be over the actual handle when I stop dragging in order for it to stop.
That wouldn't be an issue, but the handle is pretty small so it would be nice if I could figure out a way to stop dragging the handle when the mouse is on or off.
A good example is Youtube. You can start dragging the handle and while moving the handle move your mouse off and release. The handle stops even though you're not releasing directly over it.
bottom_bar.scrubber.handle.addEventListener(MouseEvent.MOUSE_DOWN, scrubberDown);
bottom_bar.scrubber.handle.addEventListener(MouseEvent.MOUSE_UP, scrubberUp);
function scrubberDown(e:Event):void
{
flvPlayback.pause();
var object = e.target;
var bounds:Rectangle = new Rectangle();
bounds.x = e.currentTarget.width - bottom_bar.scrubber.handle.width;
bounds.y = e.currentTarget.y;
bounds.width = bottom_bar.scrubber.width - (bottom_bar.scrubber.handle.width);
bounds.height = bottom_bar.scrubber.height - bottom_bar.scrubber.handle.height;
object.startDrag(false, bounds);
}
function scrubberUp(e:Event):void
{
var _math:Number =((bottom_bar.scrubber.handle.x) / (960) * flvPlayback.totalTime);
var object = e.target;
object.stopDrag();
flvPlayback.seek(_math);
flvPlayback.play();
}
Register MouseEvent.MOUSE_UP in scrubberDown handler, and for the stage, so user can stop dragging in any position.
bottom_bar.scrubber.handle.addEventListener(MouseEvent.MOUSE_DOWN, scrubberDown);
//bottom_bar.scrubber.handle.addEventListener(MouseEvent.MOUSE_UP, scrubberUp);
function scrubberDown(e:Event):void {
stage.addEventListener(MouseEvent.MOUSE_UP, scrubberUp);
//Your current code
}
function scrubberUp(e:Event):void {
stage.removeEventListener(MouseEvent.MOUSE_UP, scrubberUp);
var _math:Number =((bottom_bar.scrubber.handle.x) / (960) * flvPlayback.totalTime);
bottom_bar.scrubber.handle.stopDrag();
flvPlayback.seek(_math);
flvPlayback.play();
}
Related
i'm building a flash desktop app, where the user needs to link two Movieclips on stage (a computer and a router) using a line (or whatever can do the job), i want to achieve this same exact effect: image1. I searched and found this solution, i tried the code and did some modifications:
link.addEventListener(MouseEvent.CLICK, linkOnClick);
function linkOnClick(e:MouseEvent){
this.addEventListener(Event.ENTER_FRAME, enterFrame);
var linkPoint:Point = new Point(link.x, link.y);
var mousePoint:Point = new Point();
var distance:Number;
var radians:Number;
function enterFrame(e:Event):void {
//Distance
mousePoint.x = stage.mouseX;
mousePoint.y = stage.mouseY;
distance = Point.distance(linkPoint, mousePoint);
link.width = distance;
//Rotation
radians = Math.atan2(stage.mouseY - link.y, stage.mouseX - link.x);
link.rotation = radians * (180/ Math.PI);
if(link.hitTestObject(router)){trace("Success");}
}
When i compiled the code i got this: image2, so as you may remark, the problems i found are:
1-the edge of the line follows the direction of the mouse, but sometimes it goes beyond the cursor, i want the cursor to drag the edge of the line.
2-the line changes it's width, if it's 90° degrees the line width is so remarkable, i want the line to have a constant width.
how can i acheive the same exact effect shown in image1 ?
// First, lets create mouse-transparent container for drawing.
var DrawingLayer:Shape = new Shape;
addChild(DrawingLayer);
// Hook the event for starting.
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
// Define a storage for keeping the initial coordinates.
var mouseOrigin:Point = new Point;
function onDown(e:MouseEvent):void
{
// Save the initial coordinates.
mouseOrigin.x = DrawingLayer.mouseX;
mouseOrigin.y = DrawingLayer.mouseY;
// Hook the events for drawing and finishing.
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onDraw);
}
function onDraw(e:MouseEvent):void
{
// Remove the previous line.
DrawingLayer.graphics.clear();
// Draw a new line.
DrawingLayer.graphics.lineStyle(5, 0xFF6600);
DrawingLayer.graphics.moveTo(mouseOrigin.x, mouseOrigin.y);
DrawingLayer.graphics.lineTo(DrawingLayer.mouseX, DrawingLayer.mouseY);
}
function onUp(e:MouseEvent):void
{
// Unhook the events for drawing and finishing.
stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onDraw);
}
It's because of that the actionscript is trying to stretch the line thickness by changing its container MovieClip's scale. But you can prevent this by setting the line Scale option to None.
To do that, select your line and open the properties menu and then select None from the drop down menu of the Scale option.
But,
I recommend you to draw a line by a code: Draw line from object to Mouse (AS3)
Write below code:
this.graphic.clear ();
this.graphic.lineStyle(0x000000);
this.moveTo(startPoint.x,startPoint.y);
this.lineTo(endpoint.X,endpoint.y);
I am attempting to build a drag and drop game where a user can build something using the images I provide. I will have images in a menu that the user can click and drag to the building area. The user will be able to add however many instances of that image as they want.
I was able to get part of it working. So far, I can click the image and drag it around, and create as many instances as I want. However, I cannot click and drag the image once I have placed it.
When I do a trace to see what the name is, it says that all the new instances are named hillChild1. I tried to make them named hillChild1, hillChild2, etc., but that doesn't seem to work either... not sure that is an issue, though.
Here's my code:
thesubmenu1.hill.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
var myImage:Sprite = Sprite(new Hill_mc());
var i:Number=0; i++;
function onDown(e:MouseEvent):void {
var myImage:Sprite = Sprite(new Hill_mc());
myImage.name = "hillChild"+i;
addChild(myImage);
myImage.x = mouseX;
myImage.y = mouseY;
myImage.startDrag();
myImage.buttonMode = true;
}
function onUp(e:MouseEvent):void {
var myImage:Sprite = Sprite(new Hill_mc());
myImage.stopDrag();
myImage.name = "hillChild";
}
stage.addEventListener(MouseEvent.CLICK, traceName);
function traceName(event:MouseEvent):void { trace(event.target.name); }
myImage.getChild(myImage).addEventListener("mouseDown", mouseDownHandler);
stage.addEventListener("mouseUp", mouseUpHandler);
function mouseDownHandler (e:MouseEvent):void{
myImage.startDrag();
}
function mouseUpHandler (e:MouseEvent):void{
myImage.stopDrag();
}
I am new to StackOverflow and also Actionscript 3, if it isn't apparent.
Your issue is likely that you are creating a new instance on mouse up (when what you want is a reference to instance that was already created on mouse down). Also, you never add a click listener to you new objects. Add the mouse up listener to stage only after the mouse down (then remove the listener in the mouse up).
thesubmenu1.hill.addEventListener(MouseEvent.MOUSE_DOWN, createCopy);
var i:int=0;
var tmpImage:Sprite; //to store which image is being dragged currently
function createCopy(e:MouseEvent):void {
tmpImage = new Hill_mc();
tmpImage.name = "hillChild"+(i++); //increment every copy
addChild(tmpImage);
tmpImage.x = mouseX;
tmpImage.y = mouseY;
tmpImage.startDrag();
tmpImage.buttonMode = true;
tmpImage.addEventListener(MouseEvent.MOUSE_DOWN, onDown); //add the mouse down to this new object
stage.addEventListener(MouseEvent.MOUSE_UP, onUp); //since the mouse is currently down, we need to listen for mouse up to tell the current copy to stop dragging
}
//this will be called when click a copy
function onDown(e:MouseEvent):void {
tmpImage = Sprite(e.currentTarget); //get a reference to the one that was clicked, so we know which object to stop dragging on the global mouse up.
stage.addEventListener(MouseEvent.MOUSE_UP, onUp); //listen for the mouse up
tmpImage.startDrag();
}
function onUp(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_UP,onUp); //now that the mouse is released, stop listening for mouse up
tmpImage.stopDrag(); //stop dragging the one that was clicked
}
Help!!
I have a piece of code on a mc that when the mouse is dragged it plays through that movie clip, giving a 360 spin of a product.
Inside this movieclip on different increments of the 360 spin i have child movieclips with various other animations to relate to each angle of the product.
exp..
Scene 1 > spinY_mc > AWComplete_mc
My code for the spin is written within the actions in scene1 and controls spinY_mc but once im in AWComplete_mc i do not want you to be able to drag the mouse and spin?
Im sure this is simple but im a noob at all this and am taking on a mammoth project!
Here is the code used on the movieclip (spinY_mc) I dont want this code to work when inside of its child mc (AWComplete_mc).
// Rotation of Control Body Y
spin_Y.stop();
spin_Y.buttonMode = true;
var spin_Y:MovieClip;
var offsetFrame:int = spin_Y.currentFrame;
var offsetY:Number = 0;
var percent:Number = 0;
spin_Y.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
spin_Y.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
function startDragging(e:MouseEvent):void
{
// start listening for mouse movement
spin_Y.addEventListener(MouseEvent.MOUSE_MOVE,drag);
offsetY = stage.mouseY;
}
function stopDragging(e:MouseEvent):void
{
// STOP listening for mouse movement
spin_Y.removeEventListener(MouseEvent.MOUSE_MOVE,drag);
// save the current frame number;
offsetFrame = spin_Y.currentFrame;
}
// this function is called continuously while the mouse is being dragged
function drag(e:MouseEvent):void
{
// work out how far the mouse has been dragged, relative to the width of the spin_Y
// value between -1 and +1
percent = (mouseY - offsetY) / spin_Y.height;
// trace(percent);
// work out which frame to go to. offsetFrame is the frame we started from
var frame:int = Math.round(percent * spin_Y.totalFrames) + offsetFrame;
// reset when hitting the END of the spin_Y timeline
while (frame > spin_Y.totalFrames)
{
frame -= spin_Y.totalFrames;
}
// reset when hitting the START of the spin_Y timeline
while (frame <= 0)
{
frame += spin_Y.totalFrames;
}
// go to the correct frame
spin_Y.gotoAndStop(frame);
}
I'm pretty sure you just want to stop the propagation of an event from the child so it doesn't make it out to the parent. If you add a listener for the event you want to block (lets say it's mouseDown you want to block).
child_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownBlocker);
private function mouseDownBlocker(event:MouseEvent):void
{
event.stopImmediatePropagation();
}
The way events work is they start at the "deepeest" child which the mouse has a hit event with, then they "bubble" up through all the parents. By stopping the propagation you block the bubbling from occurring, so the parents never get the event.
I draw with a mouse Paper.js. I need to keep these strokes and replay them at the same rate as in the video replay. How can I accomplish this?
In paper.js, the onFrame() function is called up to 60 times per second, while the onMouseMove() function "is called when the mouse moves within the project view", and contains the position of the mouse. By using both functions you can store the mouse motions and replay them later with close to the same time between positions.
var mousePosition = null;
function onMouseMove(event) {
if (mousePosition != null) {
var path = new Path();
path.strokeColor = 'black';
path.moveTo(mousePosition);
path.lineTo(event.point);
}
mousePosition = event.point;
}
var recordedPositions = [];
var delayFrames = 60;
function onFrame(event) {
if (mousePosition != null) {
recordedPositions.push(mousePosition);
if (recordedPositions.length > delayFrames) {
var path = new Path();
path.strokeColor = 'red';
delayedPositionIndex = recordedPositions.length - delayFrames;
path.moveTo(recordedPositions[delayedPositionIndex - 1]);
path.lineTo(recordedPositions[delayedPositionIndex]);
}
}
}
I do not know the timing accuracy/resolution/dependability of onFrame(). Alternatively you could just use javascript timing events as in this answer: How can I use javascript timing to control on mouse stop and on mouse move events
I am pretty new to action script 3 (I did a little bit in as2) and i am trying to create a laser gun that rotates towards the mouse and shoots when the mouse is fired.
kind of like this but in as3
http://www.freeactionscript.com/2009/04/laser-hitting-solid-objects-walls/
Thanks,
Thor
You can start to play with something like this:
//adding listener to run all the time
m.addEventListener("enterFrame", runGame);
//listener for mouse is down
stage.addEventListener("mouseDown", md);
//listener for mouse is up
stage.addEventListener("mouseUp", mu);
//to know if mouse is down
var _fire:Boolean = false;
//function for all the time
function runGame(evt:*):void
{
//to know the angle where the mouse is from the "canon" in radians
var angle:Number = Math.atan2(stage.mouseY - m.y, stage.mouseX - m.x);
//set the canon's rotation
m.rotation = 180 * angle / Math.PI;
//if mouse us down -> fire
if(_fire)
{
//create a point far away, so it will always work if the screen is normal
var point:Point = Point.polar(10000, angle);
//shoot the laser
graphics.lineTo(point.x, point.y);
}
}
//when mouse is down
function md(evt:*):void
{
//prepare graphics
graphics.clear();
graphics.lineStyle(2, 0xff0000);
graphics.moveTo(m.x, m.y);
//set fire to true
_fire = true;
}
//when mouse is up
function mu(evt:*):void
{
//set fire to false
_fire = false;
//clear the laser
graphics.clear();
}
Create a new project, place a movieclip on the stage, name it "m" (without the quotes ;)). Paste the script where the actionscript goes on frame 1.
If you want the laser to follow the mouse when it's down, change
runGame function to this:
function runGame(evt:*):void
{
//to know the angle where the mouse is from the "canon" in radians
var angle:Number = Math.atan2(stage.mouseY - m.y, stage.mouseX - m.x);
//set the canon's rotation
m.rotation = 180 * angle / Math.PI;
//if mouse us down -> fire
if(_fire)
{
//create a point far away, so it will always work if the screen is normal
var point:Point = Point.polar(10000, angle);
//shoot the laser
graphics.clear();
graphics.lineStyle(2, 0xff0000);
graphics.moveTo(m.x, m.y);
graphics.lineTo(point.x, point.y);
}
}
and md function to this:
//when mouse is down
function md(evt:*):void
{
//set fire to true
_fire = true;
}
"Epic" laser, with source. Also great site btw.
Probably best to learn the basic concepts of programming before trying to tackle things like this. Cutting/Pasting code is not programming, and can have frankenstein-ish results.
There is no magical shortcut to programming, you need to learn the basic concepts and build on them. Wonderfl.net is a cool place to check out, but I'd suggest starting out far more basic concepts to start. Until you do that, it's all going to appear as voodoo to you.