• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

I wish to create objects that moves away from mouse cursor

Explorer ,
Nov 08, 2022 Nov 08, 2022

Copy link to clipboard

Copied

I have 10 - 15 bats and I would like them to avoid (move away) from the mouse cursor.

Do I need to create separate symbols from each bat?
Also which AS3 code I need to use to achive my goal?
Example: https://codepen.io/richimgd/pen/XWJmmGK

Thanks a lot in advance guys 

Views

527

Translate

Translate

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 guidelines

correct answers 1 Correct answer

Community Expert , Nov 08, 2022 Nov 08, 2022

Hi.

 

Here is a sample.

 

AS3 code:

import flash.display.DisplayObjectContainer;
import flash.display.MovieClip;
import flash.events.Event;

const MAX_PARTICLES:uint = 15;

var magnet:Number = 500;
var target:MovieClip;
var forceX:Number = 0;
var forceY:Number = 0;
var forceDivider:Number = 4;

function main():void
{
	spawnMultiple(MAX_PARTICLES, Bat);
	setParticles();
	stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}

function spawnMultiple(total:uint, ParticleClass:*):void
{
	va
...

Votes

Translate

Translate
Community Expert ,
Nov 08, 2022 Nov 08, 2022

Copy link to clipboard

Copied

Hi.

 

Here is a sample.

 

AS3 code:

import flash.display.DisplayObjectContainer;
import flash.display.MovieClip;
import flash.events.Event;

const MAX_PARTICLES:uint = 15;

var magnet:Number = 500;
var target:MovieClip;
var forceX:Number = 0;
var forceY:Number = 0;
var forceDivider:Number = 4;

function main():void
{
	spawnMultiple(MAX_PARTICLES, Bat);
	setParticles();
	stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}

function spawnMultiple(total:uint, ParticleClass:*):void
{
	var i:int;
	
	for (i = total - 1; i > -1; i--)
		spawnParticle(particlesContainer, ParticleClass);
}

function spawnParticle(container:DisplayObjectContainer, ParticleClass:*):void
{
	var particle = new ParticleClass();
	
	particle.x = randomRange(particle.width * 0.5, stage.stageWidth - particle.width * 0.5);
	particle.y = randomRange(particle.height * 0.5, stage.stageHeight - particle.height * 0.5);
	container.addChild(particle);
}

function setParticles():void
{
	var i:int;
	
	for (i = particlesContainer.numChildren - 1; i > -1; i--)
	{
		var child:MovieClip = particlesContainer.getChildAt(i) as MovieClip;
		
		child.initialX = child.x;
		child.initialY = child.y;
		child.gotoAndPlay(uint(randomRange(1, child.totalFrames - 1)));
	}
}

function enterFrameHandler(e:Event):void
{	
	var i:int;
	
	for (i = particlesContainer.numChildren - 1; i > -1; i--)
	{
		var target:MovieClip = particlesContainer.getChildAt(i) as MovieClip;
		var distanceX:Number = particlesContainer.mouseX - target.x;
		var distanceY:Number = particlesContainer.mouseY - target.y;
		var distance:Number = Math.sqrt((distanceX * distanceX) + (distanceY * distanceY));
		var powerX:Number = target.x - (distanceX / distance) * magnet / distance;
		var powerY:Number = target.y - (distanceY / distance) * magnet / distance;
		
		forceX = (forceX + (target.initialX - target.x) * 0.5) / forceDivider;
		forceY = (forceY + (target.initialY - target.y) * 0.5) / forceDivider;
		target.x = powerX + forceX;
		target.y = powerY + forceY;
	}
}

function randomRange(min:Number, max:Number):Number
{
	return min + Math.random() * (max - min);
}

main();

 

Download / FLA / SWF:
https://bit.ly/3EfPy1z

 

I hope it helps.

 

Regards,

JC

Votes

Translate

Translate

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 guidelines
Explorer ,
Nov 09, 2022 Nov 09, 2022

Copy link to clipboard

Copied

Thank you very much ❤️

Votes

Translate

Translate

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 guidelines
Explorer ,
Nov 09, 2022 Nov 09, 2022

Copy link to clipboard

Copied

Dear JC is is possible that my bats have random sizes? And that the bats apperaing on the upper half of my screen?ScreenShot_20221109093754.png

Votes

Translate

Translate

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 guidelines
Community Expert ,
Nov 09, 2022 Nov 09, 2022

Copy link to clipboard

Copied

You're welcome!

 

And just update the spawnParticle function like this:

function spawnParticle(container:DisplayObjectContainer, ParticleClass:*):void
{
	var particle = new ParticleClass();
	
	particle.x = randomRange(particle.width * 0.5, stage.stageWidth - particle.width * 0.5);
	particle.y = randomRange(particle.height * 0.5, stage.stageHeight * 0.5 - particle.height * 0.5);
	particle.scaleX = particle.scaleY = randomRange(0.5, 1);
	container.addChild(particle);
}

 

Votes

Translate

Translate

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 guidelines
Community Expert ,
Nov 09, 2022 Nov 09, 2022

Copy link to clipboard

Copied

But if you want predefined positions and scale, just place the bats inside of the particlesContainer MovieClip instance on stage and comment/remove the call to the spawnMultiple function inside of the main function. Like this:

function main():void
{
	//spawnMultiple(MAX_PARTICLES, Bat);
	setParticles();
	stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}

 

Votes

Translate

Translate

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 guidelines
Community Expert ,
Nov 09, 2022 Nov 09, 2022

Copy link to clipboard

Copied

Please let us know if you need more help.

Votes

Translate

Translate

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 guidelines
Explorer ,
Nov 09, 2022 Nov 09, 2022

Copy link to clipboard

Copied

Woooow you are awesom ❤️ ❤️ Thanks a lot 

Votes

Translate

Translate

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 guidelines
Community Expert ,
Nov 09, 2022 Nov 09, 2022

Copy link to clipboard

Copied

You're welcome!

Votes

Translate

Translate

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 guidelines
Explorer ,
Nov 14, 2022 Nov 14, 2022

Copy link to clipboard

Copied

Hi Cesar, I have only just a small request 🙂 
Could I incorporate in the code a slight random rotatation on the bats (patricles)?
https://www.loom.com/share/f541dbbd2a8741f9bf0e8534f011bc47
And on the end I have a really big problem, I am really happy with my file, but what can I do with this file?
Have some workaround after the swf files are discontinued from the web browsers, how can I publish my file? 
The whole file is interactive!
ScreenShot_20221114123040.png

Votes

Translate

Translate

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 guidelines
Community Expert ,
Nov 15, 2022 Nov 15, 2022

Copy link to clipboard

Copied

Hello again.

 

You can modify that same function like this:

 

function spawnParticle(container:DisplayObjectContainer, ParticleClass:*):void
{
	var particle = new ParticleClass();
	
	particle.x = randomRange(particle.width * 0.5, stage.stageWidth - particle.width * 0.5);
	particle.y = randomRange(particle.height * 0.5, stage.stageHeight * 0.5 - particle.height * 0.5);
	particle.scaleX = particle.scaleY = randomRange(0.5, 1);
        particle.rotation = randomRange(-45, 45);
	container.addChild(particle);
}

 

 

The values I'm giving are just suggestions. You can modify them as you want.

Votes

Translate

Translate

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 guidelines
Community Expert ,
Nov 15, 2022 Nov 15, 2022

Copy link to clipboard

Copied

But if you want this interactivity to go to the web, you're gonna have to use the HTML5 Canvas document.

 

For this, you need to go to File > Convert To > HTML5 Canvas. This process will convert all visuals but not the code. You would need to rewrite it from scratch.

 

But I went ahead and did the conversion. You can grab the file here:

http://bit.ly/3g7Gnau

 

JS code (for reference):

 

var root = this;
var MAX_PARTICLES = 15;
var magnet = 500;
var target;
var forceX = 0;
var forceY = 0;
var forceDivider = 4;
var particlesContainer = root.particlesContainer;

function main()
{
	root.stop();
	spawnMultiple(MAX_PARTICLES, lib.Bat);
	setParticles();
	createjs.Ticker.timingMode = createjs.Ticker.RAF;
	createjs.Ticker.on("tick", enterFrameHandler);
}

function spawnMultiple(total, ParticleLinkage)
{
	var i;
	
	for (i = total - 1; i > -1; i--)
		spawnParticle(particlesContainer, ParticleLinkage);
}

function spawnParticle(container, ParticleLinkage)
{
	var particle = new ParticleLinkage();
	var width = particle.nominalBounds.width;
	var height = particle.nominalBounds.height;
	
	particle.x = randomRange(width * 0.5, lib.properties.width - width * 0.5);
	particle.y = randomRange(height * 0.5, lib.properties.height * 0.5 - height * 0.5);
	particle.scale = randomRange(0.25, 1);
	particle.rotation = randomRange(-45, 45);
	container.addChild(particle);
}

function setParticles()
{
	var i;
	
	for (i = particlesContainer.numChildren - 1; i > -1; i--)
	{
		var child = particlesContainer.children[i];
		
		child.initialX = child.x;
		child.initialY = child.y;
		child.gotoAndPlay(Math.floor(randomRange(1, child.totalFrames - 1)));
	}
}

function enterFrameHandler()
{	
	var i;
	
	for (i = particlesContainer.numChildren - 1; i > -1; i--)
	{
		var target = particlesContainer.children[i];
		var distanceX = stage.mouseX / stage.scaleX - target.x;
		var distanceY = stage.mouseY / stage.scaleY - target.y;
		var distance = Math.sqrt((distanceX * distanceX) + (distanceY * distanceY));
		var powerX = target.x - (distanceX / distance) * magnet / distance;
		var powerY = target.y - (distanceY / distance) * magnet / distance;
		
		forceX = (forceX + (target.initialX - target.x) * 0.5) / forceDivider;
		forceY = (forceY + (target.initialY - target.y) * 0.5) / forceDivider;
		target.x = powerX + forceX;
		target.y = powerY + forceY;
	}
}

function randomRange(min, max)
{
	return min + Math.random() * (max - min);
}

main();

 

 

I hope it helps.

 

Regards,

JC

Votes

Translate

Translate

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 guidelines
Explorer ,
Nov 18, 2022 Nov 18, 2022

Copy link to clipboard

Copied

Thank you very very much Cesar ❤️

Votes

Translate

Translate

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 guidelines
Community Expert ,
Nov 18, 2022 Nov 18, 2022

Copy link to clipboard

Copied

LATEST

You're welcome!

Votes

Translate

Translate

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 guidelines
Community Expert ,
Nov 08, 2022 Nov 08, 2022

Copy link to clipboard

Copied

you can use the same library object for each bat, but each bat should have a different instance name, though there are other ways to do it so you don't need to use the different instance names.

 

and the link you posted isn't as3 code.  that's javascript.

Votes

Translate

Translate

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 guidelines