How to Get CodePen code (ZIM) into Adobe Animate

[Dr Abstract]

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

[Joseph Labrecque]

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

[Vladin M. Mitov]

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

[Dr Abstract]

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]

yes, they can be exported as svg

[Dr Abstract]

Okay - tried it out and here is a video tutorial on how to get Adobe Shapes into ZIM Blob or Squiggle.  Perhaps a little longer than it needs to be but it all works out.  Hope it helps.  Cheers.  Any questions, please ask!  https://www.youtube.com/watch?v=nLFcuCtRLu8

[kglad]

@Dr Abstract 

i didn't know that about the backquote.  cool tip.

[JoãoCésar]

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]

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

[Dr Abstract]

Okay - so we took a look at @JoãoCésar code and it worked well.  We took a slightly different route and posted a tutorial video about the process https://www.youtube.com/watch?v=euALbJEd7WM We used the SVGConverter and got the path from the resulting SVG and passed it into a Squiggle.  We kept in the SVGContainer() approach at the bottom commented out.  Thanks for your help on this João!  And of course Kudos all the way back to Grant for the SVGExporter.

[JoãoCésar]

Awesome! I just watched your tutorial. Your approach is way better and simple than mine. I'm sure this solution will be very helpful for a lot of users. This feature of dragging an instance along a path is very requested here.

Thanks a lot!

[JoãoCésar]

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]

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

[JoãoCésar]

@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ésar]

Also, if you watch Dr. Abstract's video, you will see that it takes a lot of work to get the SVG exported from Animate ready for ZIM.

[Dr Abstract]

@kglad - rather than do two steps - publish the SVG and then bring the results back into Animate as I had done, @JoãoCésar is doing it in one step.   We are passing the SVG into a ZIM Blob or Squiggle to add extra functionality.  For instance:

1. the user can then change the blob or squiggle with bezier controls
this is a main difference - the path is optionally user editable yet we can do the following:
2. we can animate along the blob or squiggle
3. we can drag objects along the blob or squiggle
4. we can apply beads along the path
5. we can do hitTests along the path
6. we can shape tween the path