Highlighted

Duplicate multiple movieclips dynamically one after another and so on

Community Beginner ,
Feb 11, 2020

Copy link to clipboard

Copied

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

TOPICS
Ad development, Code, How to, Other

Views

790

Likes

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

Duplicate multiple movieclips dynamically one after another and so on

Community Beginner ,
Feb 11, 2020

Copy link to clipboard

Copied

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

TOPICS
Ad development, Code, How to, Other

Views

791

Likes

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
Feb 11, 2020 0
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 11, 2020 2
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

Cool JC!

Likes

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
Reply
Loading...
Feb 11, 2020 1
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

Thanks, res!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 11, 2020 0
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

Adding text is easy.

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

How would you add a different image for each box?

Likes

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
Reply
Loading...
Feb 11, 2020 1
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

Image from the web?

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 11, 2020 0
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Feb 11, 2020 0
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 11, 2020 1
Adobe Community Professional ,
Feb 12, 2020

Copy link to clipboard

Copied

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! 🙂

Likes

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
Reply
Loading...
Feb 12, 2020 1
Adobe Community Professional ,
Feb 14, 2020

Copy link to clipboard

Copied

Excellent, res!

 

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

 

Please let me know if you need further assistance!

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 14, 2020 0
Community Beginner ,
Feb 12, 2020

Copy link to clipboard

Copied

thanks so much, JC!

Likes

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
Reply
Loading...
Feb 12, 2020 1
Adobe Community Professional ,
Feb 12, 2020

Copy link to clipboard

Copied

You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 12, 2020 1