Carousel and Pen together

Questions
,
1

Hi there,
I have been working on a drawing for infants.

I have used the Pen to create the line drawing and Carousel for scrolling through letters for the students to trace over with their pen.

There is also an eraser.

I have 2 problems:

  1. I am trying to get the pen to trace over the letters rather than under them.
  2. The other problem I am having is getting the eraser to clear the Pen when either the left or right arrows of the Carousel are pressed. Just wondering how to get the arrows keys to run the Eraser function.

This is the Carousel Code:

const carousel = new Carousel(assets, 1)
        .scaleTo(S,80,80)
        .pos(200,0,LEFT,CENTER);
        
    
    carousel.arrowLeft.vis(true)
    carousel.arrowRight.vis(true);//.pen.clear();
    
    S.update(); // update stage after loading (not needed if in Frame ready)
});

this is the Pen code.

const pen = new Pen({
	damp: .2,
	size: 10,
	move: false,
	color: culur,  // Initial color
}).center()

and this is the eraser function:

function Eraser() {
	pen.clear();
}

Any help would be very appreciated.

Thanks

Rod

image
image1920×743 64.3 KB

2 Likes
2

Hi Rod,

Looks cool.

  1. Usually, things that are added last to a container (the stage is a container) are above those added before - so add the Pen after adding the Carousel.

You can also use the top(), bot() and ord() to adjust layers. Just watch, the Pen is a little different, as in there is the Pen and then there is the pen.paper which is the actual drawings. Layering the Pen, like pen.top() will not do it, you would need to layer the paper to the top like pen.paper.top(). The Emitter is like this too as there is the emitter.particles which is the container of particles.

If you still have a problem, let us see all the code together.

  1. For the clearing when pressing the arrow, add an event to the arrow like:
carousel.arrowLeft.on("mousedown", eraser);
// functions should start lower case unless it is a class
// that is by convention, it would work uppercase

Note: I edited your message above so that the code shows in code blocks. To do this use three back ticks (top left of keyboard) followed by the word JavaScript - without spaces. Then end the code with three back ticks. Here is a screenshot of what I did for the code above.

image

3

Hi there,

I have been able to get that working really well now.

I just have one more question.

Is there a way to replace the default arrowLeft and arrowRight with zimified movieclips of arrows that I would like to use?

I have created two movieclips called "left3D" and "right3D".

Are you able to point me in the right direction?

Thanks for your help so far.

Rod

4
5

Cool but when you are at the end of beginning arrows or text stays visible? Not fainted why?

6

by default it is continuous.

7

But the text of the right arrow is getting colored blue once used - will add it to bugs.

1 Like
9

I've been trying to sort out the changing of the arrows - with no success. I'm clearly missing something in my understanding.

Below you will see the code I am using and also a picture of the interface in Adobe Animate. The left arrow is the left3D movieclip referred to in the code.

Can you see what I am doing wrong? All I want to be able to do is replace green left and right arrows on the carousel with the yellow arrow.

I've noticed the pen doesn't work with the error that I am making.

Thanks for your patience.....

Rod

const assets = ["k.png", "m.png", "n.png", "o.png"];
const path = "pics/";

const arrow=zimify(this.left3d);
const arrowRoll = zimify(this.left3d);

F.loadAssets(assets, path);

F.on("complete", ()=>{

const carousel = new Carousel(assets, 1)
    .scaleTo(S,80,80)
    //.center();
	.pos(200,0,LEFT,CENTER);

carousel.arrowLeft
		setIcon("icon", arrow)
		setIcon("rollIcon",arrowRoll);

carousel.arrowRight
		setIcon("icon", arrow.clone())
		setIcon("rollIcon",arrowRoll.clone());

carousel.arrowLeft.vis(true)
carousel.arrowRight.vis(true);//.pen.clear();
carousel.arrowLeft.on("mousedown", Eraser);
carousel.arrowRight.on("mousedown", Eraser);
S.update(); // update stage after loading (not needed if in Frame ready)

pen.paper.top();

});

image
image1920×598 38.7 KB

10

That looks right. Make sure that you stop the timeline animation otherwise it will grab your arrow back and put it where it was to start.

this.stop();

Otherwise, your code looks good.

11

Hi there again ..... almost there.

I have been able to replace the arrows now. (see interface image at the end...)

BUT...

In the process I have lost the pen and I just can't see why?

Are you able to see what I have done wrong. It only happened when I changed the icons to the zimified arrows.

Thanks for taking a look..... I think this will be the last step!!!!

this.stop();
// Given F, S, W, H or frame, stage, stageW, stageH

const arrow=zimify(this.left3d1);
const arrowRoll=zimify(this.left3d2);
const arrowR=zimify(this.right3d1);
const arrowRollR=zimify(this.right3d2);

const assets = ["k.png", "m.png", "n.png", "o.png"];
const path = "pics/";
F.loadAssets(assets, path);
    
F.on("complete", ()=>{
     
    const carousel = new Carousel(assets, 1)
        .scaleTo(S,80,80)
        //.center();
		.pos(200,0,LEFT,CENTER);
	

    
    // optionally, take out the arrows
	carousel.arrowLeft
		.setIcon("icon", arrow);
	carousel.arrowLeft
		.setIcon("rollIcon", arrowRoll);
	carousel.arrowRight
		.setIcon("icon", arrowR);
	carousel.arrowRight
		.setIcon("rollIcon", arrowRollR);
    carousel.arrowLeft.vis(true)
    carousel.arrowRight.vis(true);//.pen.clear();
	carousel.arrowLeft.on("mousedown", Eraser);
	carousel.arrowRight.on("mousedown", Eraser);
    S.update(); // update stage after loading (not needed if in Frame ready)
	
    
	carousel.arrowRight
		.setIcon("icon", heide.clone())
		//.setIcon("rollIcon", heide.clone());
		 
	pen.paper.top();
});
	
var culur = "#D54440";

const pen = new Pen({
	damp: .2,
	size: 10,
	move: false,
	color: culur,  // Initial color
}).center()


new MotionController({
	target: pen,
	type: "pressmove",
	damp: .5,
	speed: 100,
});

image
image1434×754 40 KB

12

Check for any errors in the console - F12

The MotionController might not be working if you are mousing down on some object like a background or a big button or something... you would then need to add that to mousedownIncludes parameter of the MotionController. That might not be the reason... but it is a tricky one, if it is.