Hi there,
I am working on a counting activity for infants. They are counting 5 rocks. When a rock is clicked, it will run down the path and stop at the bottom of the screen, building a pile.
(See image)
I have a long way to go with this because it is all very new. However the first thing I need is to work out how to keep the path the same when it is reloaded.
Would someone be able to give me a little help with this.
Thanks.
You can record a path and pass it in to the Squiggle. See ZIM Paths - Interactive Path Animations for an example. The link is probably the easiest way to get path points parameter - but you can also do it programmatically by calling the record(true) method at any time (true will pop up a window).
Also, setting onTop:false in the squiggle or blob parameters will keep the squiggle/blob from coming above the items as you are testing, etc.
WOW! That took me ahead in leaps and bounds.
All I need now is a way to click on the rock to start the animation down the path, and also to make the path invisible!
I'm trying to find the command for these.
This is what I have so far.
const rock1 = zimify(this.rock1);
const data = [[-404.8,-122.1,0,0,-30,0,30,0],[-176,124.5,0,0,-30,0,30,0,"straight"],[-44.5,164,0,0,-30,0,10,0],[3.4,285.1,0,0,-20,0,30,0],[177.9,407.1,0,0,-30,0,30,0]]
const path1 = new Squiggle({
onTop:false,
points:data,
interactive: true,
}).center();
rock1
.addTo()
.animate({
onTop:false,
time: 3,
props: {path: path1},
rewind:true,
loop: false,
drag: true,
startPaused:true
})
Is there somewhere in the ZIM site that teaches me how to record the points in a Squiggle (path) in Adobe Animate. I have use the Path generator to get my points and copied them into my Animate code. However, it is not in the correct position, so when I reposition the line to the correct position, I want to be able to make sure they are fixed in that position each time.
Sounds a bit confusing doesn't it?
The path values are independent from their location. So use loc(), pos(), center(), etc. to place the path. You can also use myPath.place() and then drag the path and look at the console (F12) to get the x and y of where you have placed the path. Then in your code add loc(theX, theY) and next time you run it, it will be in the right place.
To hide the path use alp(0) or vis(false)
To start the animation when pressing on the rock, do not add the animation until you press on the rock. You can use a mousedown event
rock.on("mousedown", ()=>{
rock.animate(etc)
}, null, true);
The last true will make sure that event only runs once.
If you want to record the points in animate then put the Squiggle where you want - for example, center it on the stage with center(). Do not have any points - just choose the default. Perhaps set the move parameter to false so you cannot accidentally pick up the squiggle.
const squiggle = new Squiggle({move:false}).center();
new Button({label:"RECORD"}).pos(100,100,RIGHT,TOP).tap(()=>{
squiggle.record(true);
});
Then you can add points to the squiggle by pressing on the line or remove points by double tapping them or press hold. You can change the squiggle beziers by double tapping them. If you need to.
Once you have the path you like, press RECORD. A Pane will pop up with the points. Copy these. Then remake your squiggle:
const squiggle = new Squiggle({
points:[etc]
}).center();
I'll work through these instructions and give you feedback..... thank you very much for the support you giver
Rod
Hi there again,
Well, I have everything working except for the popup with the points of the new path called squiggle.
This is the code I used (as per the instructions).
//recording button
const squiggle = new Squiggle({move:false}).center();
new Button({label:"RECORD"}).pos(100,100,RIGHT,TOP).tap(()=>{
squiggle.record(true);
});
I don't think I added in the earlier instructions that I am working in Adobe Animate.
The squiggle appears, and I can move it into position. When I click the buttons, the points on the curve disappear, but I just can't get the popup to display.
I'll add the full code below so you can see where I have placed the record instructions. (Right down the bottom)
const rock1 = zimify(this.rock1);
const pathrock1 = [
[0, 0, 0, 0, -30, 0, 30, 0],
[75, 60, 0, 0, -30, 0, 30, 0],
[150, 0, 0, 0, -30, 0, 30, 0],
[225, 60, 0, 0, -30, 0, 30, 0],
[249.5, 330, 0, 0, -30, 0, 30, 0]
]
const path1 = new Squiggle({
onTop: false,
points: pathrock1,
interactive: true,
thickness: 1,
color: green,
allowToggle: false,
showControls: true
}).center().vis(true);
rock1.on("mousedown",()=>{
rock1.addTo(),
rock1.animate({
//visible:false;
onTop:false,
time: 3,
props: {path: path1},
rewind:false,
loop: false,
drag: true,
startPaused:false
})
}, null, true);
//recording button
const squiggle = new Squiggle({move:false}).center();
new Button({label:"RECORD"}).pos(100,100,RIGHT,TOP).tap(()=>{
squiggle.record(true);
});
Oh!!! Sorry... it is path1.getPoints(true); All the properties, methods, etc. are in the docs - which I should have referred too rather than my memory ;-).
That is just perfect! That has just opened up a whole lot of doors for me! Thank you so much.
Ok, things have worked well. I have a rock (actually a little red bus) moving along a squiggle.
My last challenge is to be able to reset the position of the object back to the beginning ready to be clicked on again to start.
I have a reset button, but I don't know where to go from there to reset to kids can have another go. Any support would be really welcome.
Here is my code so far....
const rock1 = zimify(this.rock1);
const pathrock1 = [[-669.1,187,0,0,-30,0,18,0],[-541,130.5,0,0,-29.4,14.4,29.4,-14.4],[-427.9,94.6,0,0,-27.7,0.2,27.7,-0.2],[-353.1,103.2,0,0,-30,-5.5,30,5.5],[-272.7,115.2,0,0,-34,-3.8,43.2,4.8,"straight"],[-193.8,116.5,0,0,-35.6,4.5,1.7,-0.2],[-156.6,125.8,0,0,-12.7,-10.1,12.7,10.1],[-116.7,128,0,0,-24.1,18.6,24.1,-18.6],[-75.7,74.3,0,0,-3.1,4.4,3.9,-5.6],[-61.9,61.4,0,0,-9.6,1.9,5.8,-1.1],[-25.9,65.1,0,0,-20.2,4.7,11.6,-2.7],[38,47,0,0,-11.9,4.3,8.9,-3.2],[256.1,50.1,0,0,-0.3,0,30,0,"straight"]]
const path1 = new Squiggle({
onTop: false,
points: pathrock1,
interactive: true,
thickness: 1,
color: green,
allowToggle: false,
showControls: true
}).center().vis(false).pos(181.65, 165.15);
rock1.on("mousedown",()=>{
rock1.addTo(),
rock1.animate({
//visible:false;
onTop:false,
time: 10,
props: {path: path1},
rewind:false,
loop: false,
drag: true,
startPaused:false
})
}, null, true);
//recording button
//const squiggle = new Squiggle({move:false}).center();
//new Button({label:"RECORD"}).pos(100,100,RIGHT,TOP).tap(()=>{
// //squiggle.record(true);
// path1.getPoints(true);
//});
this.replay.addEventListener("click", reset);
function reset() {
//I'm not sure how to reset so that the rock is ready to start from the beginning again
}
you can use on() instead of addEventListener() - or even the ZIM tap() which is shorter and can be chained.
But... to answer your question, you can try rock1.replayTween() or rock1.resetTween(). In some cases when looping or rewinding you can set the percentComplete.
Thanks for your help. This is what I tried and it worked with 1 minor thing I can't sort...
this.replay.on("click", reset);
function reset() {
rock1.replayTween();
}
The rock is actually a bus.
After the animation starts - the first click on the reset button puts the bus back to the starting point, but facing the opposite direction - so it moves in reverse. (See image below)...
Then when I click the reset button again, it is reset to the correct position (see below diagram) seems likes some sort of "toggle" issue.
I'm pretty sure it has to be a minor issue. Are you able to see what I am doing wrong?
Once again - this is all really helpful. Thanks for taking the time.
Hi Rod - hmm... seems like a little glitch in the system. @pettis are you around to check it out?
For now, Rod, did you try settting the rotation of the bus to 0 or whatever is needed after you call the replayTween()
So rock1.rot(0);
Mmmmm... this doesn't seem to work. Clicking the replay button keeps changing direction so for now, that will have to do.
Thanks for your help.
I am just getting back into the groove of things. Will look at the squiggle issue when I can. I thought somethings were just the way it is. I think for some reason the object rotation's get funky at the end of the path. Maybe in a formula that calculates the angle.