• Global community
• Language:
• Deutsch
• English
• EspaÃ±ol
• FranÃ§ais
• PortuguÃªs
• æ—¥æœ¬èªžã‚³ãƒŸãƒ¥ãƒ‹ãƒ†ã‚£
Dedicated community for Japanese speakers
• í•œêµ­ ì»¤ë®¤ë‹ˆí‹°
Dedicated community for Korean speakers
Exit
• Re: line to movieclip collision

# line to movieclip collision

Community Beginner ,
Oct 16, 2023 Oct 16, 2023

Copy link to clipboard

Copied

Dear All Thank you for your time

I have aproblem that cant seem to work out looked on line and read some books but cant find

a solution. I have one movie clip that is tweened on a straight path that is movable with the mouuse

as wel as rotatable with buttons, the imbedde tweened object cabn also be moved with buttons . The collision object is a line that rotates 360deg with a button . That all works, what I cant figure out to do is display the distance to the line as the tweened object approaches the like a countdown to a colision.

added a photo to help explain.

Thank you all

Views

644

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
42 Replies 42
Community Expert ,
Oct 16, 2023 Oct 16, 2023

Copy link to clipboard

Copied

you can get an exact answer for a disc/circle and an approximation for a square using:

first, calculate the line segment's point of collision.

then, calculate distance between your object's center of that point of collision

if you need a more exact answer, you would need both collision points, the segment and the object.

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Oct 17, 2023 Oct 17, 2023

Copy link to clipboard

Copied

I am not sure how acomplish to that, as both the object and the ray are on different time lines how and are both capable of moving to diffent places on the screen. I can work it out if static but not each a time a new ray position and a new path is chosen.

Thank you peter

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Expert ,
Oct 17, 2023 Oct 17, 2023

Copy link to clipboard

Copied

their layers are irrelevant.  you'll use high school math to calculate (using code) collision points.

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Oct 20, 2023 Oct 20, 2023

Copy link to clipboard

Copied

Thanks for your help

When I look at the position of the imbedded movie clip on stage even though the main movie clip registration has  the same transform point  as the imbedded movie clip, the imbedded movie shows - 1444.45 for x and the main moveie shows x at 233.6 .

Also when I put points on the two lines to work out the intersection the points the two points show different x values for the the imbeded movie clip compared to the main movie clip .

How do I reconsile so both the main and the imbedded movie show the same x and y values ?

Best Regards Peter

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Expert ,
Oct 20, 2023 Oct 20, 2023

Copy link to clipboard

Copied

i don't think i can answer that without checking your fla and this problem is non-trivial. ie, it would take me more than 1 hour (i think) to solve for you.

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Oct 21, 2023 Oct 21, 2023

Copy link to clipboard

Copied

I have done some researching and have come up with a solution by adapting  a JS code online to animate for most of my problems ,the only sticking point now is cant get the movie clip on stage and the create guided path does not seem to work for the created circle. The movie clip in the library wil alsol not allow me to give it a linkage name (Adobe animate 2023) .The motion guide can work if put static numbers but not it seems with variables.Would like to post FLA but seems to be no way to do that.

Red point, is point of intercection

purple is object to place on path.

Best Regards

Peter

``````createjs.Ticker.addEventListener("tick", tick);
createjs.MotionGuidePlugin.install();
var p = this.yellowmc.dot1.localToGlobal(0,0);//dot and other end of the line
var q = this.greenmc.dot1.localToGlobal(0,0);// dot at other end of the line

var x2 = p.x
var y2 = p.y
var x4 = q.x
var y4 = q.y

var Ax = this.yellowmc.x //yellow line on the stage
var Ay = this.yellowmc.y //green line on the stage
var Bx = p.x
var By = p.y

var Cx = this.greenmc.x
var Cy = this.greenmc.y
var Dx = q.x
var Dy = q.y

var top = (Dx-Cx)*(Ay-Cy)- (Dy-Cy)*(Ax-Cx)
var bottom =(Dy-Cy)*(Bx-Ax)- (Dx-Cx)*(By-Ay)
console.log (top+("Top"))

var t = top/bottom
console.log(t,"T")
var w =Ax + (Bx-Ax)*t
console.log (w)

var s =Ay + (By-Ay)*t
console.log (s)
function newdot(A,B){

var dot = new createjs.Shape();
dot.graphics.beginFill("red").drawCircle(A,B, 20);

}
newdot(w,s)
newdot(Ax,Ay)
newdot(Bx,By)
var text = new createjs.Text("A", "20px Arial", "black");
text.x = Bx
text.y = By
function createline(a,b,c,d){
var line = new createjs.Shape(line);

line.graphics.setStrokeStyle(1).beginStroke("#000000");
line.graphics.moveTo(a,b);
line.graphics.lineTo(c,d);
line.graphics.endStroke();
stage.update();

}
createline(Ax,Ay,Bx,By)
createline(Cx,Cy,Dx,Dy)

var shape = new createjs.Shape();
shape.graphics.beginFill("#ff00ff").drawCircle(Ax,Ay,50);

//createjs.Tween.get(shape).to({guide:{ path:[0,0,w,s,Bx,By] }},7000);

//Cant get tween to work
function tick(event) {
stage.update();
}
this.addChild(new lib.mybox())// does not work``````

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Expert ,
Oct 22, 2023 Oct 22, 2023

Copy link to clipboard

Copied

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Oct 28, 2023 Oct 28, 2023

Copy link to clipboard

Copied

I have fixed most things with animation, however two things have sumped I have tried various work arounds but nothing sdeems to work. Animation shows different on my laptop compared to my main computer see below.

Main Computer correct

Lap top computer incorect placement of  red dots and lines

Have also not worked out how to make plane follow line with a create js tween.

Link to FLA here

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Oct 28, 2023 Oct 28, 2023

Copy link to clipboard

Copied

Drop box did not work at first with fla here is link to zip file

Brg Peter

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Expert ,
Oct 29, 2023 Oct 29, 2023

Copy link to clipboard

Copied

if not, i opened your fla and saw a plane drag problem that i fixed:

what's the next thing that should be fixed?

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Oct 29, 2023 Oct 29, 2023

Copy link to clipboard

Copied

The main thing at moment is a problem with I think the localTo Global call as it shows different on different monitors, I have searched online but cant find anywhere why it happens see pics above.Sorry how do I see what changes you made to the createjs file as the file in the browser is a straight javascript file and the referencing is hard to understand for me.

Best Regards

Peter

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Expert ,
Oct 30, 2023 Oct 30, 2023

Copy link to clipboard

Copied

use stage.scaleX, stage.scaleY to adjust everything.

whatever.x = something;

use

whatever.x = something/stage.scaleX;

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Nov 01, 2023 Nov 01, 2023

Copy link to clipboard

Copied

I am not sure where I put that code, tried it in the local to global statement but it just sent the dot1 to the top left hand corner . I also did some research online and could not find what this isupposed to do, I a confused sorry.

Best Regards

Peter

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Expert ,
Nov 01, 2023 Nov 01, 2023

Copy link to clipboard

Copied

copy and paste a code snippet or relink an updated fla

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Nov 02, 2023 Nov 02, 2023

Copy link to clipboard

Copied

Thank you for your help.

Here is the code the result is the line starts at top lh corner and only one dot is in the correct position .

Best Regards

Peter

Result with stage code included

Normal way it shows

var root = this
var line1;
var line2
//let myset = new Set();
var dot1;
var dot2;
var dot3;
var shape;
var container = new createjs.Container();
var s;
var w;
var z;
var zx;
var zy;
var By;
var x2;
//let myArray = ["line","dot","shape"]
function redraw() {
//createjs.MotionGuidePlugin.install();
root.yellowmc.dot1.x = x2/stage.scaleX
//var p = root.yellowmc.dot1.localToGlobal(0, 0); //dot and other end of the line
var q = root.greenmc.dot1.localToGlobal(0, 0); // dot at other end of the line
var z = root.yellowmc.myplane.myplane2. localToGlobal(0,0)

x2 =  p.x
var y2 = p.y
var x4 = q.x
var y4 = q.y

var Ax = root.yellowmc.x //yellow line on the stage
var Ay = root.yellowmc.y //green line on the stage
var Bx = p.x
By = p.y

var Cx = root.greenmc.x
var Cy = root.greenmc.y
var Dx = q.x
var Dy = q.y

var top = (Dx - Cx) * (Ay - Cy) - (Dy - Cy) * (Ax - Cx)
var bottom = (Dy - Cy) * (Bx - Ax) - (Dx - Cx) * (By - Ay)
//console.log(top + ("Top"))

var t = top / bottom
//console.log(t, "T")
w = Ax + (Bx - Ax) * t
//console.log(w +"myw")

s = Ay + (By - Ay) * t
//console.log (s + ("mys"))

//console.log(s)
function newdot1(A, B) {

dot1 = new createjs.Shape();
dot1.graphics.beginFill("blue").drawCircle(A, B, 20);
//myArray
//dot1.alpha =1

}
function newdot2(A, B) {

dot2 = new createjs.Shape();
dot2.graphics.beginFill("gren").drawCircle(A, B, 20);
//myArray
}

function newdot3(A, B) {

dot3 = new createjs.Shape();
dot3.graphics.beginFill("red").drawCircle(A, B, 20);
//myArray
}

newdot1(w, s)
newdot2(Ax, Ay)
newdot3(Bx, By)
var text = new createjs.Text("A", "20px Arial", "black");
text.x = Bx
text.y = By

function createline1(a, b, c, d) {
line1 = new createjs.Shape();

line1.graphics.setStrokeStyle(1).beginStroke("#000000");
line1.graphics.moveTo(a, b);
line1.graphics.lineTo(c, d);
line1.graphics.endStroke();

stage.update();

}

function createline2(a, b, c, d) {
line2 = new createjs.Shape();

line1.graphics.setStrokeStyle(1).beginStroke("#000000");
line1.graphics.moveTo(a, b);
line1.graphics.lineTo(c, d);
line1.graphics.endStroke();

stage.update();

//console.log(s + "barleft", w)

}

createline1(Ax, Ay, Bx, By)
createline2(Cx, Cy, Dx, Dy)

//s/*hape = new createjs.Shape();
//shape.graphics.beginFill("#ff00ff").drawCircle(Ax,Ay,50);
// //window.shape = shape1
////createjs.Tween.get(shape).to({guide:{ path:[0,0,w,s,Bx,By] }},7000);

////Cant get tween to work
function tick(event) {
stage.update();
}
//console.log (myArray)
var bar = dot1.x - 30

c = dot1.localToGlobal(0,0)

console.log(x2)

//console.log(root.yellowmc.myplane.myplane2.x+("planestate"))

}

function test() {
c = dot1.localToGlobal(0,0)
z = root.yellowmc.myplane.myplane2.localToGlobal(0, 0);
zx = z.x
zy = z.y
//console.log(zx+("planex"))
console.log(zy+("planey"))
console.log (s +("mys"))
console.log(By+(" myby"))
//console.log (w +("myw"))

if (zy<= s){

if(zy>=s){
console .log ("cross")
root.yellowmc.myplane.stop()
}

}
}
function startmc (){
root.ind1.gotoAndPlay(1)
//console.log("is playing")

//console.log(z.x+"mp")
}
//nsole.log(w)

//redraw()
this.updatebtn.on("mousedown", planestart)
function planedown() {
root.yellowmc.gotoAndStop(0)
root.yellowmc.y += 10
//redraw()
stage.removeChild(dot1)
stage.removeChild(dot2)
stage.removeChild(dot3)
stage.removeChild(line1)
stage.removeChild(line2)
stage.update();

}

function planestart() {
//root.yellowmc.myplane.play()
redraw()
}

root.yellowmc.on("pressmove", moveplane)
function begin(){
root.yellowmc.myplane.play()
myInterval = setInterval(test, 200)

}
function mystop(){
root.yellowmc.myplane.stop()
clearInterval(myInterval)
}

function moveplane(e) {
stage.removeChild(dot1)
stage.removeChild(dot2)
stage.removeChild(dot3)
stage.removeChild(line1)
stage.removeChild(line2)
e.currentTarget.x = e.stageX;
e.currentTarget.y = e.stageY;
root.yellowmc.gotoAndStop(0)

}

function calculate(){

}

/*
this.yellowmc.on("pressup",stopplane)
function stopplane(){
redraw ()

}*/

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Expert ,
Nov 02, 2023 Nov 02, 2023

Copy link to clipboard

Copied

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Nov 04, 2023 Nov 04, 2023

Copy link to clipboard

Copied

Thanks for your time here is the link to Vor5a

Best Regards

Peter

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Expert ,
Nov 04, 2023 Nov 04, 2023

Copy link to clipboard

Copied

the first problem i saw was the same problem that i corrected previously. you failed to account for stage scaling when clicking and dragging the plane (yellowmc).  so, i went back to your fla and started to look for yellowmc pressmove listener and listener function and noticed:

the first problem:  you have nested anonymous functions:

a();

b();  // <- will generate a b() not defined error

function a(){

function b(){

}

}

so i unnested everything formatted your code so it's legible (this is important when encountering a problem).  i've done so much coding and i'm prone to make so many errors, i've become pedantic about proper formatting and convenient line spacing etc.  it's so much easier to debug code that's legible.

here's your fla simply with the unnesting and legibility changes. (and the stage scaling for yellowmc)

is it easier for you to read your code in that fla?

and what is the next thing that needs to be fixed?

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Nov 04, 2023 Nov 04, 2023

Copy link to clipboard

Copied

Thank you for help Kglad

Unfoutunatley when I click on you link I get this erro and cant see the files

The document you are looking for may have been removed or re-named. Please contact the web site owner for further assistance

Best Regards

peter

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Expert ,
Nov 04, 2023 Nov 04, 2023

Copy link to clipboard

Copied

try it now

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Nov 04, 2023 Nov 04, 2023

Copy link to clipboard

Copied

Works now thanks, appreciate your help will look and learn from your suggestions and recomendations

Best Regards

Peter

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Expert ,
Nov 04, 2023 Nov 04, 2023

Copy link to clipboard

Copied

keep this updated.

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Nov 04, 2023 Nov 04, 2023

Copy link to clipboard

Copied

Sorry, but I still have same problem when I hit reset button  the red dot  sits at to left corner and no crossover point is shown, when the "//var p = root.yellowmc.dot1.localToGlobal(0, 0); //dot and other end of the line"  is uncommented and the "root.yellowmc.dot1.x = x2/stage.scaleX" is commented out the animation is working properly however the position of all the dots shows different on other screens.

The animation concept is to pressmove move plane then hit reset  buttons

the three dots then  show the blue dot being the center of the intersection. The I click the start button allowing the plane to  move along the track ,the other button stops  the plane.

I agree with the formatting mine was a bit erractic .

Best Regards

Peter

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Expert ,
Nov 05, 2023 Nov 05, 2023

Copy link to clipboard

Copied

where's the red dot supposed to be?