Duplicate multiple movieclips dynamically one after another and so on

[jamesf17655682]

Hi,

I would like to create a simple script animation where a movieclip (ie a  box) appears in sequence one after another.

So a box will appear, then another box, then another box, then another ….. and so on.

It’s to create a pattern effect but I need it to be done dynamically perhaps with a loop.

Or maybe the script on the (movieclip) box itself

I want this done in HTML5 not actionscript

cheers

Zod

[JoãoCésar]

Hi.

Your box must be a symbol in the Library with a linkage name assigned.

And in which events the instances should be added?

Anyway, here is a code that adds instances and position them in a grid fashion in a fixed interval of 100 ms (0.1s). These are instances from a symbol in the Library with its linkage name set to Box.

var root = this;
var index = 0;
var columns;

root.stop();

setInterval(function()
{
	var box = new lib.Box();
	var boxWidth = box.nominalBounds.width;
	var boxHeight = box.nominalBounds.height;
	
	if (!columns)
		columns = Math.floor(canvas.width / boxWidth);
	
	box.x = boxWidth * 0.5 + (index % columns) * boxWidth;
	box.y = boxHeight * 0.5 + Math.floor(index / columns) * boxHeight;
	root.addChild(box);
	index++;
}, 100);

I hope this helps.

Regards,

JC

[resdesign]

Cool JC!

[JoãoCésar]

Thanks, res!

[resdesign]

Adding text is easy.

var myText = ['cat','dog', 'elephant'];
box.numTxt.text = myText[index];

How would you add a different image for each box?

[JoãoCésar]

Image from the web?

[resdesign]

Any image, really. Either from the web or from the image fodler.

[JoãoCésar]

Hey, res.

Here is an example of this pattern animation using images from three types of sources: Library, local storage, and the web.

var root = this;

var urls =
[
	"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Japanese_Wave_Pattern.svg/800px-Japanese_Wave_Pattern.svg.png",
	"https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Portion_of_Pattern_of_Jali_from_Humayun%27s_Tomb.svg/575px-Portion_of_Pattern_of_Jali_from_Humayun%27s_Tomb.svg.png",
	"./Japanese_Wave_Pattern.svg.png",
	"./575px-Portion_of_Pattern_of_Jali_from_Humayun's_Tomb.svg.png"
];

var linkages =
[
	"Pattern0",
	"Pattern1",
];

var index;
var linkageIndex;
var tempBox;
var rows;
var columns;
var loader;
var manifest;
var linkage = "Box";
var delay = 50;
var idPrefix = "image";

function start()
{
	root.stop();
	tempBox = new lib[linkage]();
	rows = Math.floor(canvas.height / tempBox.nominalBounds.height);
	columns = Math.floor(canvas.width / tempBox.nominalBounds.width);
	tempBox = null;
	index = 0;
	linkageIndex = 0;
	
	manifest = new Array(rows * columns).fill(null).map(function(image, index)
	{
		return {src: urls[index % urls.length], id: idPrefix + index};
	});
	
	loader = new createjs.LoadQueue(false);
	loader.addEventListener("complete", completeHandler);
	loader.loadManifest(manifest, true);
};

function completeHandler(e)
{
	loader.removeEventListener("complete", completeHandler);
	
	root.interval = setInterval(function()
	{
		var instance = new lib[linkage]();
		var instanceWidth = instance.nominalBounds.width;
		var instanceHeight = instance.nominalBounds.height;
		var bitmap;
		var bitmapBounds;
		
		instance.x = instanceWidth * 0.5 + (index % columns) * instanceWidth;
		instance.y = instanceHeight * 0.5 + Math.floor(index / columns) * instanceHeight;
		root.addChild(instance);
		
		if (index <= rows * columns - 1)
		{
			linkageIndex++;
			index++;
		}			
		else
		{
			console.log(index);
			clearInterval(root.interval);
			root.removeAllChildren();
			setTimeout(start, delay);
		}
		
		bitmap = index % (urls.length + 1) > 0 ? new createjs.Bitmap(loader.getResult(idPrefix + (index % manifest.length))) : new lib[linkages[linkageIndex % linkages.length]];
		bitmapBounds = bitmap.getBounds();
		
		if (bitmapBounds.width < bitmapBounds.height)
			setWidth(bitmap, instanceWidth);
		else
			setHeight(bitmap, instanceHeight);
		
		if (!bitmap.nominalBounds)
		{
			bitmap.x = -bitmapBounds.width * 0.5 * bitmap.scaleX;	
			bitmap.y = -bitmapBounds.height * 0.5 * bitmap.scaleY;
		}
		
		instance.container.addChild(bitmap);
	}, delay);
};

function setWidth(target, width)
{
	target.scaleX = width / target.getBounds().width;
	target.scaleY = target.scaleX;
};

function setHeight(target, height)
{
	target.scaleY = height / target.getBounds().height;
	target.scaleX= target.scaleY;
};

start();

FLA / files / sources:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/span_boxes

I hope this helps!

Regards,

JC

[resdesign]

Pretty cool JC for taking the time. I am thinking about making a puzzle game, so this will be helpful. I already had the drag n'drop working. So it is just a matter of adding the images randomly and your example will help me apply some principles.

You are just one of the best on this forum for your kindness and expertise! 🙂

[JoãoCésar]

Excellent, res!

I'm really glad it will be helpful to you!

Please let me know if you need further assistance!

Regards,

JC

[jamesf17655682]

thanks so much, JC!

[JoãoCésar]

You're welcome!