Skip to main content
Dr Abstract
Known Participant
March 5, 2023
Question

How to Get CodePen code (ZIM) into Adobe Animate

  • March 5, 2023
  • 4 replies
  • 1833 views

We had a question on how to get CodePen code (ZIM) into Adobe Animate so made a video about it - the example works great in Animate - have a look.   It lets the user drag objects along a user editable path.  The path itself is wiggling.  And an emitter emits particles when objects hit as they go along the path.  Here is the video: https://www.youtube.com/watch?v=_7A_9ovXkO0

This topic has been closed for replies.

4 replies

JoãoCésar17023019
Community Expert
Community Expert
March 7, 2023

It's also possible to grab the raw points of a shape in Animate but I also don't know how to correctly send this data to ZIM.

kglad
Community Expert
Community Expert
March 7, 2023

@JoãoCésar17023019, why not publish an svg which animate natively supports? 

JoãoCésar17023019
Community Expert
Community Expert
March 7, 2023

@kglad:

This approach is for targeting shapes already on stage so you don't have to keep exporting SVG files everytime you change something.

 

Imagine how hard would be if we had to create all bitmaps for run time instead of Animate doing it for us on export? It's the same idea.

JoãoCésar17023019
Community Expert
Community Expert
March 7, 2023

Hello, Dr. Abstract!

 

I made a simple sample of how to get a shape in Animate and covert it at runtime for ZIM.

 

It's not perfect yet because it seems to only work with straight lines. I kinda struggled trying to understand how to correctly send a SVG data to the Squiggle or SVGContainer class. Can you take a look at it?

Try it:

http://bit.ly/3mlgMgP

 

JS code:

var root = this;
var exporter, svgString, svgContainer;

function main()
{
	root.stop();
	renderSVG(root.pathContainer);
}

function renderSVG(target)
{
	exporter = new SVGExporter(target, false, false, false);
	exporter.run();
	exporter.svg.style.border = "none";
	
	svgString = serializeSVG(exporter.svg);
	
	svgContainer = new SVGContainer(svgString).addTo();
	svgContainer.x = target.children[0].x;
	svgContainer.y = target.children[0].y;
	
	zimify(root.circle).animate({ props:{ path: svgContainer.getChildAt(0) }, drag: true });
	
	exporter.svg = null;
	target.parent.removeChild(target);
	target._off = true;
}

function serializeSVG(svg)
{
	var serializer = new XMLSerializer();
	return serializer.serializeToString(svg);
};

main();

 

Source / FLA / files / download:
https://bit.ly/41J18fs

 

To export a CreateJS shape to SVG I'm using a modified version of this SVGExporter class from the official CreateJS repo on GitHub that I used some time ago for a project because I needed the SVG artwork to be exported in high resolution. But I suppose the original SGVExporter class will work as well.

 

Regards,

JC

Dr Abstract
Known Participant
March 7, 2023

Cool!  Good idea.  Will have a peek in a bit!

Vladin M. Mitov
Inspiring
March 6, 2023

@Dr Abstract 
Can you recommend a method for converting a path drawn in Animate to an array of points suitable for constructing a squiggle?

- Vlad: UX and graphic design, Flash user since 1998Member of Flanimate Power Tools team - extensions for character animation
Dr Abstract
Known Participant
March 6, 2023

That would be nice.  Can shapes be converted to SVG from Animate?  I think I recall and SVG export?  The Squiggle accepts SVG path (not the whole SVG - see SVGContainer that converts to possibly a bunch of ZIM shapes) as its point. An alternative is to use https://zimjs.com/paths to recreate it - you can add an image to trace over.  

kglad
Community Expert
Community Expert
March 6, 2023

yes, they can be exported as svg

Joseph Labrecque
Community Expert
Community Expert
March 6, 2023

Very cool! Thanks for sharing this resource - really seems to extend the core capabilities of CreateJS.