a-svg

Flash Animate CC extension that converts swf animation to svg.

This tool aims to provide a simple & quick way to convert flash animations into a self contained svg witdh a small footprint Javascript Player.

Requeriments

• Adobe Animate CC
• Node 8.5.0
• Java JRE
• wget running

Features

Export

Don't expect to make all the Animate features work, this is the list of what currently works:

• Main timeline animation ( Not nested timelines )
• Mask(s) ( One at the moment due to a ffdec bug )
• Multiple Layers
• All kind of transforms
• Gradients
• Bones
• Alpha
• Guides
• Instance Names
• Frame Labels
• Small Javascript Player

Installation

Install it globally

npm install a-svg -g

On completion it will automatically open Animate. Choose "Run as command" when prompted.

Installation is complete.

Conversion Server

To be able to convert animations, you need to start the conversion server in the command line:

a-svg --serve

This will start the server that is charged of conversion, and listen for incoming conversion tasks.

Animate CC workflow

Work as normally respecting this norms:

• Convert all assets to Graphics/Movieclips in the library.
• Put 1 asset per layer
• 1 only mask

When your production is ready:

• Make a clone of the .fla file
• Open the cloned file
• Go to Commands [ a-svg ] Convert to a-svg Document

This will process the current fla file and make the needed changes before it can be published.

Now we ar ready to finally convert the file to svg / html, to do it:

• Test your movie, it will go through all the movie frames.
• At the end will call the Conversion Server with the needed metadata.
• Your browser will be opened with a demo preview of the animation.
• You will get the resulting files aside the cloned .fla file.

JavaScript Player

( will move to his own repository )

Minimal Code

	var player = new SVGPlayerMatrix({
    	svg: 'svg[asvg-movie="walk"]',
        frameRate: 24,
        timeline: {},
        loop: true
        });
    player.play();

Methods

• play()
• pause()
• stop()
• gotoAndPlay(frame)
• gotoAndStop(frame)
• attach() => Attaches the instance to the frame loop
• detach() => Detaches the instance to the frame loop

Properties

• totalFrames => Total number of animation frames
• direction => Playing direction 1 | -1
• isPlaying => Indicates is player is currently playing
• played => Indicates that movie has been played at least one time
• currentFrame => indicates the frame number the player is rendering
• frameRate => sets the movie frame rate

Timeline

Full timeline control with per frame actions

    	const timeline = {
        	initialize: function() {
            	// custom var
            	this.loopedTimes = 0;
            },
    		70: function() {
            	this.loopedTimes++;
                if( this.loopedTimes > 3) {
                	this.detach();
                } else {
                	this.gotoAndPlay(15)
                }
            }
    	}