Starting point on a Blob

Questions
, ,
1

Hi there,

I have an image in the center of my stage in Adobe Animate...... it looks like this....

image
image1522×764 83.7 KB

I have used the following code to create a Blob (which I will hide) to create a circuit.

const grid=new Grid();
aviaun_p2
	.sca(.7)
	.center()
	.drag()
	
 const data = [[2.7,-0.1,0,0,-50,0,50,0],[559.3,-21.3,0,0,0,-50,0,50],[6,224.6,0,0,50,0,-50,0],[-476,-14.7,0,0,0,50,0,-50]];
    const path = new Blob({
        points:data, 
        onTop:false,
        // interactive:false, // to make path not editable
        stickColor:light
    }).center();
    path.visible = true;
    // new TransformManager(path, "drag");
    // path.getPoints(true);

   aviaun_p2
		.sca(.7)
		.center()
        .centerReg()
        .animate({
            // see https://zimjs.com/nio for more demos
            props:{path:path, orient:true, flip:true, zoom:[.2,1.2]}, // extra:{outputProp:"scale", outputMin:.2, outputMax:1.2}},
            time:6,
            ease:"linear",
            loop:false,
            rewind:false,
            drag:true,
            startPaused:false
        });

image
image1396×695 113 KB

How do I get the starting point of the Blob to be at the point where the picture is in the center of the stage. I'm trying to get the plane to fly off into the distance then come back to its starting point in the center of the stage.

Any help would be great! Thank you
Rod

2

Oh... you mean point at the bottom. There are a few ways. If you do not have drag true then you can use startPercent as a prop:

props:{path:path, startPercent:53.5, orient:true, flip:true, zoom:[.2,1.2]}

That does not work with drag though. So you would need to rearrange the points so that the first point is at the bottom. I went to ZIM Paths - Interactive Path Animations and RESET then moved the top point down, the bottom point up and the swapped the left and right points. You can keep the left and right curved but it might look better angled to avoid quick multiflips

[
   [0,120,0,0,100,0,-100,0,"mirror"],
   [-400,-32.9,0,0,0,0,0,0,"none"],
   [0,-120,0,0,-70,0,70,0,"mirror"],
   [400,-50,0,0,0,0,0,0,"none"]
]