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
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
...
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
Copy link to clipboard
Copied
Thank you very much ❤️
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?
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);
}
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);
}
Copy link to clipboard
Copied
Please let us know if you need more help.
Copy link to clipboard
Copied
Woooow you are awesom ❤️ ❤️ Thanks a lot
Copy link to clipboard
Copied
You're welcome!
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!
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.
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:
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
Copy link to clipboard
Copied
Thank you very very much Cesar ❤️
Copy link to clipboard
Copied
You're welcome!
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.