Making a sound when connectors connect

Hi there,
I was asked if it was possible to have a "click" sound when connectors connect to a node. Does anyone know if this is possible?
Rod

Something like this - see the events section of the Connectors docs:

const sound = new Aud("click.mp3");
connectors.on("connection", ()=>{sound.play()});

I made example here in Dutch

with recorded audioVoice
but now it can be made with speech.talk()

I have that working now - thank you so much.

I will be working through this - because I am working in Adobe Animate, I have a few problems converting it over because of my lack of experience - but I will persist with it because what you are doing is where I would like to be with this project. Thank you for taking time to help.

1 Like

send me over your zapp file if ready, so I can have a look
thanks

You are spot on.... thank you
greenSlider.center().drag({all:true,onTop:false});
This did the job!

Hi there,
I have not done any work with zapp yet. I am working in Adobe Animate Canvas. I have the sound OK when the connectors are made, but what I need to do is to be able to have a spurt when the connections are made. I have it working to a point, but not when the reset button is pressed.

I can place my code here, and I would be happy to send you the fla for the project but I can't seem to share it to these posts.

Anyhow ... here is the code, and I will send an image of one of the shapes. The idea is that when the dots are connected, the spurt occurs.

var connections=0;
var numconnect=0;
// Define the coordinates for the connectors
this.hide.visible = true;
this.show.visible = false;
this.hideTicks = function () {
	for (i = 1; i < 4; i++) {
		this["tick" + i].visible = false;
	}
}
this.hideShapes = function () {
	this.largesquare.visible = false;
	this.largetriangle.visible = false;
	this.largerectangle.visible = false;
}

exportRoot.hideTicks();
exportRoot.hideShapes();
this.tick1.visible = true;
var flag = 1;
this.typeOfShape.text = "kuadradu";
this.largesquare.visible = true;

this.hide.addEventListener("click", Hide.bind(this));
this.show.addEventListener("click", Show.bind(this));
this.square.addEventListener("click", Square.bind(this));
this.triangle.addEventListener("click", Triangle.bind(this));
this.rectangle.addEventListener("click", Rectangle.bind(this));

function Hide() {
	this.hide.visible = false;
	this.show.visible = true;
	exportRoot.hideShapes();
}
function Show() {
	this.hide.visible = true;
	this.show.visible = false;
	switch (flag) {
		case 1:
			this.largesquare.visible = true;
			break;
		case 2:
			this.largetriangle.visible = true;
			break;
		case 3:
			this.largerectangle.visible = true;
			break;
	}
}

function Square() {
	connections=0;
	exportRoot.hideTicks();
	exportRoot.hideShapes();
	this.tick1.visible = true;
	flag = 1;
	exportRoot.Reset();
	const sound = new Aud("click.mp3");
connectors.on("connection", ()=>{sound.play()});
connectors.on("connection", ()=>{
	connections++;
	if(connections==4) win()
});
}
function Triangle() {
	connections=0;
	exportRoot.hideTicks();
	exportRoot.hideShapes();
	this.tick2.visible = true;
	flag = 2;
	exportRoot.Reset();
	const sound = new Aud("click.mp3");
connectors.on("connection", ()=>{sound.play()});
connectors.on("connection", ()=>{
	connections++;
	if(connections==3) win()
});
}
function Rectangle() {
	connections=0;
	exportRoot.hideTicks();
	exportRoot.hideShapes();
	this.tick3.visible = true;
	flag = 3;
	exportRoot.Reset();
	const sound = new Aud("click.mp3");
	connectors.on("connection", ()=>{sound.play()});
connectors.on("connection", ()=>{
	connections++;
	if(connections==4) win()
});
}
var points = [
	[440.25, 141.4],
	[839.9, 140.4],
	[839.9, 522],
	[440.25, 522]
];

var connectors = new Connectors({
	points: points,
	node: new Circle(12, red).centerReg(),
	line: new Line({
		color: black,
		thickness: 12
	}),
	nodeRollColor: orange,
	dropType: "on",
	dblclick: false,
	deleteNode: false
	/*liner:true,
	linearOrder:true*/
	//max: 70
}).pos(427.25, 129.4)

//this.replay.on("click", reset);
this.replay.on("click", reset.bind(this));
function reset() {
	this.hide.visible = true;
	this.show.visible = false;
	switch (flag) {
		case 1:
			this.typeOfShape.text = "kuadradu";
			var points = [
				[440.25, 141.4],
				[839.9, 140.4],
				[839.9, 522],
				[440.25, 522]
			];
			this.largesquare.visible = true;
			// Remove the current Connectors instance from the stage
			stage.removeChild(connectors);
			// Create a new Connectors instance with the same settings
			connectors = new Connectors({
				points: points,
				node: new Circle(12, red).centerReg(),
				line: new Line({
					color: black,
					thickness: 12
				}),
				nodeRollColor: orange,
				dropType: "on",
				dblclick: false,
				deleteNode: false
				/*liner:true,
		linearOrder:true*/
				//max: 70
			}).pos(427.25, 129.4);
			// Add the new Connectors instance to the stage
			stage.addChild(connectors);
			// Update the stage to reflect the changes
			stage.update();
			break;
		case 2:
			this.typeOfShape.text = "triángulu";
			var points = [
				[412.5, 541.55],
				[639.63, 115.2],
				[866.75, 541.55]
			];
			this.largetriangle.visible = true;
			// Remove the current Connectors instance from the stage
			stage.removeChild(connectors);
			// Create a new Connectors instance with the same settings
			connectors = new Connectors({
				points: points,
				node: new Circle(12, red).centerReg(),
				line: new Line({
					color: black,
					thickness: 12
				}),
				nodeRollColor: orange,
				dropType: "on",
				dblclick: false,
				deleteNode: false
				/*liner:true,
		linearOrder:true*/
				//max: 70
			}).pos(400.53, 103.2);

			// Add the new Connectors instance to the stage
			stage.addChild(connectors);

			// Update the stage to reflect the changes
			stage.update();
			break;
		case 3:
			this.typeOfShape.text = "retángulu";
			var points = [
				[322.75, 503.25],
				[322.75, 175.25],
				[958.75, 175.75],
				[958.75, 503.25]
			];
			this.largerectangle.visible = true;
			// Remove the current Connectors instance from the stage
			stage.removeChild(connectors);
			// Create a new Connectors instance with the same settings
			connectors = new Connectors({
				points: points,
				node: new Circle(12, red).centerReg(),
				line: new Line({
					color: black,
					thickness: 12
				}),
				nodeRollColor: orange,
				dropType: "on",
				dblclick: false,
				deleteNode: false
				/*liner:true,
		linearOrder:true*/
				//max: 70
			}).pos(309.75, 163.25);

			// Add the new Connectors instance to the stage
			stage.addChild(connectors);

			// Update the stage to reflect the changes
			stage.update();
			break;
	}
	const sound = new Aud("click.mp3");
connectors.on("connection", ()=>{sound.play()});

}

this.Reset = function () {
	this.hide.visible = true;
	this.show.visible = false;
	switch (flag) {
		case 1:
			this.typeOfShape.text = "kuadradu";
			var points = [
				[440.25, 141.4],
				[839.9, 140.4],
				[839.9, 522],
				[440.25, 522]
			];
			this.largesquare.visible = true;
			// Remove the current Connectors instance from the stage
			stage.removeChild(connectors);
			// Create a new Connectors instance with the same settings
			connectors = new Connectors({
				points: points,
				node: new Circle(12, red).centerReg(),
				line: new Line({
					color: black,
					thickness: 12
				}),
				nodeRollColor: orange,
				dropType: "on",
				dblclick: false,
				deleteNode: false

				/*liner:true,
		linearOrder:true*/
				//max: 70
			}).pos(427.25, 129.4);

			// Add the new Connectors instance to the stage
			stage.addChild(connectors);

			// Update the stage to reflect the changes
			stage.update();
			break;
		case 2:

			this.typeOfShape.text = "triángulu";
			var points = [
				[412.5, 541.55],
				[639.63, 115.2],
				[866.75, 541.55]
			];
			this.largetriangle.visible = true;
			// Remove the current Connectors instance from the stage
			stage.removeChild(connectors);
			// Create a new Connectors instance with the same settings
			connectors = new Connectors({
				points: points,
				node: new Circle(12, red).centerReg(),
				line: new Line({
					color: black,
					thickness: 12
				}),
				nodeRollColor: orange,
				dropType: "on",
				dblclick: false,
				deleteNode: false
				/*liner:true,
		linearOrder:true*/
				//max: 70
			}).pos(400.53, 103.2);

			// Add the new Connectors instance to the stage
			stage.addChild(connectors);

			// Update the stage to reflect the changes
			stage.update();
			break;
		case 3:
			this.typeOfShape.text = "retángulu";
			var points = [
				[322.75, 503.25],
				[322.75, 175.25],
				[958.75, 175.75],
				[958.75, 503.25]
			];
			this.largerectangle.visible = true;
			// Remove the current Connectors instance from the stage
			stage.removeChild(connectors);
			// Create a new Connectors instance with the same settings
			connectors = new Connectors({
				points: points,
				node: new Circle(12, red).centerReg(),
				line: new Line({
					color: black,
					thickness: 12
				}),
				nodeRollColor: orange,
				dropType: "on",
				dblclick: false,
				deleteNode: false
				/*liner:true,
		linearOrder:true*/
				//max: 70
			}).pos(309.75, 163.25);

			// Add the new Connectors instance to the stage
			stage.addChild(connectors);
			// Update the stage to reflect the changes
			stage.update();
			break;
	}
	const sound = new Aud("click.mp3");
connectors.on("connection", ()=>{sound.play()});

}

const sound = new Aud("click.mp3");
connectors.on("connection", ()=>{sound.play()});
connectors.on("connection", ()=>{
	connections++;
	if(connections==4) win()
});

function win(){
	new Emitter({startPaused:true}).center(connectors).spurt(40);
}

it is a lot of code

can you explain what it does
or send me a printscreenvideo

=> als the fla is also good so I can test it into an fla viewer