Hi there, why it is not possible to use blend modes for movieclips? I'd like to keep some animations and effects as they were created, and I need to set 'add' blend mode for some layers with bitmap in movieclip.. Of course, I can do manually in generated JS from AnimateCC.. But, I still can't see, why it is not allowed.. Huge limitation for me.. How it can be added? ... Do you guys have some more info, about native pixi export from Animate CC? Thanks a lot!

I am trying to package a file, but it seems to have an issue reading image sizes for the spritesheet, all images are of width and height of 0.

I tried creating a createJS project, and the spritesheet created correctly

I installed the plugin using the Extension Manager (NPM and the likes are all installed)

Is there something that needed to be installed that I missed?

following a reinstall of node, i've upgraded electron and changed the symlink in my usr/ folder that the extension uses. But electron is not starting.
Any idea what is wrong? I've checked app permissions and recreated symlinks many times, restarted, et al.

I have nvm (versions 10 and 12) as well as electron on both platfrom (12 wasn't working so i tried 10)
I get a json file and the sprites are exported individually. But doesn't get any further.
I've looked at issues 53 (no answer), 64 (no reply either) and 58, no dice

On macOS 10.14.6

I'm actually not certain whether this is an issue with the extension or pixi-animate's interpretation of the data, but I'm seeing incorrect animation shapes for one of our FLA's when I try to publish. Notice the discrepancy in this render (ignore Animate's aliasing, just notice the misplaced arm in the pixi render):

Any ideas on what may cause this and/or how to fix it? I posted the published HTML here if it helps: http://gopherwoodstudios.com/pixi-animate/cith-thing-1.html

Hi, I would really love to use the animate extension but I can't use filters.

I understand that pixiJS doesn't know how to handle/render them. But I was hoping to add filter effects in animateCC when drawing my assets and use the whole movieclip as a bitmap on pixi export, using Display -> Render -> Export as bitmap.

Is it possible to switch filters on in the settings so I can use them at least for my bitmap exported movieclips ?

Adobe Animate CC 2018.
macOS High Sierra

I see an error when compiling:

ERROR: Electron is required to be installed at /usr/local/bin/electron
Install by running the following from a commandline:

	npm install electron-prebuilt -g

The electron on the command line is launched:

$ which electron
/Users/sam/.nvm/versions/node/v9.2.0/bin/electron

How to fix it?

Container.js: parent.children.sort(this.sortByStartFrame);
this.sortByStartFrame is undefined!

It was recommended from #34 to create a new property on PIXI.Container called "instances" which contains the references to named-symbols. This would replaced the current Flash/ActionScript3-style approach of adding the instance directly as a property on the object. Hopefully this will help optimize hidden classes in V8.

I recently saw that pixi-animate has been acquired as an extention by adobe creative cloud and tried the various extension installers to install pixi-animate.
https://www.adobeexchange.com/creativecloud.details.14345.html

I had the npm and electron also installed as per - where to find on the above page.

_In order to use PixiAnimate, you must install Electron with NPM. If you're doing this for the first time, please install NodeJS and then run ”npm install electron -g”.

To create a new PixiAnimate document, open File -> New and select ”PixiAnimate (Custom)” from the Type list on the left._

But somehow I end up not seeing the pixi-animate option in my Animate. Can you please share guidelines on how to install it.

Animate 2019 (19.0) hangs and becomes unresponsive on publishing PixiAnimate documents. Document contents and publish options seem to make no difference. Tested on OS X 10.13.6 (High Sierra). Animate hangs with beachball of death after pushing publish button until force quit. JS, vector, and individual bitmap image files appear to be published correctly, but spritesheets appear to fail between file creation and writing data, and no HTML or libs files are created. Everything seems to work as it should in Animate 2018 (18.0.2).

I got error when trying to build it

gulp --plugin --install
[16:25:55] +-------------------+
[16:25:55] |    PixiAnimate    |
[16:25:55] +-------------------+
[16:25:55] Mode:  Release
[16:25:55] Using gulpfile C:\work\foxium\animate-extension\gulpfile.js
[16:25:55] Starting 'default'...
[16:25:55] Starting 'plugin'...
[16:25:55] Starting 'plugin-win-debug'...
Error: spawn C:\WINDOWS\Microsoft.NET\Framework64\v4\MSBuild.exe ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:478:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn C:\\WINDOWS\\Microsoft.NET\\Framework64\\v4\\MSBuild.exe',
  path: 'C:\\WINDOWS\\Microsoft.NET\\Framework64\\v4\\MSBuild.exe',
  spawnargs: [
    'C:\\work\\foxium\\animate-extension\\project\\win\\pixi-animate-vs2015\\pixi-animate-vs2015.sln',
    '/target:Clean;Build',
    '/verbosity:normal',
    '/toolsversion:4.0',
    '/nologo',
    '/flp:LogFile=Build.log;Append;Verbosity=diagnostic',
    '/maxcpucount',
    '/property:Configuration=Debug'
  ]
}
MSBuild failed!
[16:25:55] 'plugin-win-debug' errored after 25 ms
[16:25:55] Error: spawn C:\WINDOWS\Microsoft.NET\Framework64\v4\MSBuild.exe ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:478:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
[16:25:55] 'plugin' errored after 27 ms
[16:25:55] 'default' errored after 29 ms

In generated js, I found this:

lib.as3_PixiAnimate.assets = {
    "a1": "images/a1.png",
    "a2": "images/a2.png",
    "readers_yay": "sounds/readers_yay.wav"
};

The key of lib.XXX.assets is the name.
It would have some problem if there is duplicated name in different folder.
(For example images/a1.png with /a1.png)

It may be better if the key is the fullpath like images/a1.png;

Hello,
I published the example ColorTween.fla from animate 2021 (with v2 or v1.4.1 of the plugin).
As a result I get the ColorTween.html, the ColorTween.json, the libs & image folders...
But no ColorTween.js
Am I missing something?

Hi,

We have:

• Mac OS catalina 10.15.1
• node 8.16.1
• electron 1.4.13 -> which electron: /Users/name/.nvm/versions/node/v8.16.1/bin/electron
• Adobe Animate CC 2019 version 19.1

We tried: ln -s /Users/name/.nvm/versions/node/v8.16.1/bin/electron /usr/local/bin/electron

When we try to publish the pixi with the lib options checked, Adobe gets stuck. If we don't select, it we don't have the .js file, but we have a .html and .json.

Please help.

If a single keyframe of a mask is masking a layer with many keyframes, the published file creates the mask instance once for each masked keyframe (overwriting the same variable), then masks only the first keyframe. After that, it adds the mask as a timed child for the length of its frame once for each masked keyframe.

//Example Output
var mask = new Graphics()
            .drawCommands(shapes.Example[0])
            .setRenderable(false);
var mask = new Graphics()
            .drawCommands(shapes.Example[0])
            .setRenderable(false);
var mask = new Graphics()
            .drawCommands(shapes.Example[0])
            .setRenderable(false);
var frame1 = new Sprite(fromFrame("foobar"))
            .setMask(mask);
var frame2 = new Sprite(fromFrame("foobar2"));
var frame3 = new Sprite(fromFrame("foobar3"));
this.addTimedChild(mask, 0, 3, {
                "0": {
                    x: 0,
                    y: 0
                }
            })
            .addTimedChild(mask, 0, 3, {
                "0": {
                    x: 0,
                    y: 0
                }
            })
            .addTimedChild(mask, 0, 3, {
                "0": {
                    x: 0,
                    y: 0
                }
            })
            .addTimedChild(frame1, 0, 1, {
                "0": {
                    x: 0,
                    y: 0
                }
            })
            .addTimedChild(frame2, 1, 1, {
                "1": {
                    x: 0,
                    y: 0
                }
            })
            .addTimedChild(frame1, 2, 1, {
                "2": {
                    x: 0,
                    y: 0
                }
            })

Example Timeline:

I can't publish anything in Adobe animate. I tried installing electron. Adobe animate can't detect electron.

Any plans to support PIXI 5?

Hey!

If a textfield has a single frame through all timeline its positioning correctly. Adding a keyframe on text fields timeline breaks its x position.

Example fla included.

https://drive.google.com/file/d/0B3WbKzhNu6REYTZUZC1UYldSUzQ/view?usp=sharing

I can only seem to publish the data for drawing the graphics objects in Pixi.
Whether or not I have "Export Spritesheets" selected, I only get the vector data for my movieclips. Perhaps it's user error. I was following the jibo aquarium tutorial and stopped when checking to see if my spritesheet published.

Since upgrading to Adobe Animate 2017.1, every time the Publish Settings panel is open, the values it displays are the defaults for a new document. Using the Output File filepicker to select an output location seems to restore the previous properties (except for the Output File field which is set to the new value).

I used window7 and Adobe Animate cc2017 , get a error when I publish project. but It's ok when I try example project.

In Animate CC, if the layer for the mask is not visible, then it is not included and doesn't work.

Having the mask layer not visible is a very common setup in a FLA file, and it should always be included regardless of if it's layer is visible or not.

Masks should be exported regardless of the 'include hidden layers' publishing option, because that is how people work with Animate CC.

Followed the build instructions, and got as far as Starting 'package' and then errored out because it could not connect to https://timestamp.geotrust.com/tsa.

Is it possible to download a pre-built zxp file from somewhere? We're just looking to export animations from Adobe Animate and load them in a pixi.js app. Not sure what the best approach to getting the plugin installed is.

Here is the log:

$ gulp --plugin --install
[14:55:18] Using gulpfile C:\webdev\AdobeExt\pixi-animate-extension\gulpfile.js
[14:55:18] Starting 'default'...
[14:55:18] +-------------------+
[14:55:18] |    PixiAnimate    |
[14:55:18] +-------------------+
[14:55:18] Mode:  Release
[14:55:18] Starting 'plugin'...
[14:55:18] Starting 'plugin-win-debug'...
[14:56:35] MSBuild complete!
[14:56:35] Finished 'plugin-win-debug' after 1.28 min
[14:56:35] Starting 'plugin-win'...
[14:57:57] MSBuild complete!
[14:57:57] Finished 'plugin-win' after 1.35 min
[14:57:57] Finished 'plugin' after 2.65 min
[14:57:57] Starting 'clean'...
[14:57:57] Finished 'clean' after 4.07 ms
[14:57:57] Starting 'lint'...
[14:57:58] Finished 'lint' after 1.12 s
[14:57:58] Starting 'stage'...
[14:57:58] Finished 'stage' after 71 ms
[14:57:58] Starting 'build-publish'...
[14:58:02] Finished 'build-publish' after 4.18 s
[14:58:02] Starting 'build-dialog'...
[14:58:02] Finished 'build-dialog' after 70 ms
[14:58:02] Starting 'build-preview-app'...
[14:58:05] Finished 'build-preview-app' after 2.93 s
[14:58:05] Starting 'build-preview'...
[14:58:05] Finished 'build-preview' after 30 ms
[14:58:05] Starting 'build-spritesheets'...
[14:58:05] Finished 'build-spritesheets' after 117 ms
[14:58:05] Starting 'runtime-copy'...
[14:58:05] Finished 'runtime-copy' after 8.34 ms
[14:58:05] Starting 'runtime-copy-debug'...
[14:58:05] Finished 'runtime-copy-debug' after 17 ms
[14:58:05] Starting 'plugin-copy-mac'...
[14:58:05] Finished 'plugin-copy-mac' after 5.79 ms
[14:58:05] Starting 'plugin-copy-win'...
[14:58:05] Finished 'plugin-copy-win' after 20 ms
[14:58:05] Starting 'package'...
Error - cannot contact the chosen TSA. Please make sure the URL is valid and that you are connected to the internet.
[14:58:27] 'package' errored after 21 s
[14:58:27] Error: Command `.\build\bin\ZXPSignCmd.exe -sign "com.jibo.PixiAnimate" "PixiAnimate.zxp" "build/certificate.p12" "password" -tsa "https://timestamp.geotrust.com/tsa"` failed with exit code 36
    at ChildProcess.exithandler (child_process.js:270:12)
    at emitTwo (events.js:125:13)
    at ChildProcess.emit (events.js:213:7)
    at maybeClose (internal/child_process.js:897:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:208:5)
[14:58:27] 'default' errored after 3.15 min
[14:58:27] Error: Command `.\build\bin\ZXPSignCmd.exe -sign "com.jibo.PixiAnimate" "PixiAnimate.zxp" "build/certificate.p12" "password" -tsa "https://timestamp.geotrust.com/tsa"` failed with exit code 36
    at ChildProcess.exithandler (child_process.js:270:12)
    at emitTwo (events.js:125:13)
    at ChildProcess.emit (events.js:213:7)
    at maybeClose (internal/child_process.js:897:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:208:5)

I'm trying to change the export format, specifically to export tweens as first, last frame and easing, instead of frame by frame.
I've been digging through the c++ code, but there aren't any references to easings, hopefully someone in here knows the API better.
My guess is it has something to do with the DOM::PITimeline structure that is passed to the publish method, but I cant find any definitions for it and from what I understand it is created before the extension code

After some digging, I found that in Animate 2019 synced movie clip(graphic) instances are exported with type
"type" : "movieclip", instead of "type" : "graphic" in the JSON temp file, which causes them to be exported as regular movie clips in the output js code.
Furthermore in the method TimelineWriter::Finish(FCM::U_Int32 resId, FCM::StringRep16 pName, std::string name), the 3rd argument(name) is given as 'Graphic<1,2,3>' in Animate 2018, where in 2019 it is the library name of the symbol, so the logic that determines the type of the timeline fails. I imagine this is where a fix could be applied, but would like to hear some input how to go about it exactly.

Edit: After some more digging, I found the origin point of the name to be ResourcePalette::AddSymbol(...). Note that even the documentation states that for graphic instances the name should be NULL, but in Animate 2019 the pName argument has a string value for graphic instances.
Here is a snippet from the declaration of the function.

/**  
 * @brief  This function is invoked to add a symbol to the resource palette.
 *
 * @param  resourceId (IN)
 *         Resource Id associated with the symbol which is getting 
 *         added to the palette.
 *
 * @param  pName (IN)
 *         Name of the symbol which is getting added to the palette. For graphic
 *         symbols, pName can be NULL.
 *
 * @param  pTimelineBuilder (IN)
 *         TimelineBuilder object for the symbol. Contains all the timeline commands.
 *
 * @return On success, FCM_SUCCESS is returned, else an error code is returned.
 */
virtual FCM::Result _FCMCALL AddSymbol(
    FCM::U_Int32 resourceId, 
    FCM::StringRep16 pName, 
    Exporter::Service::PITimelineBuilder pTimelineBuilder) = 0;

Animated mask don't work with Symbols. Only "wet-art" (vector shapes) work. These cannot be animated. The work around is to create static frames and break apart all artwork. There also is an issue where some symbols are mis-aligned when masked.

Hi, I am playing around with pixi-animate to get a feel for what is possible and what is not. When I attempt to export an animation with sound I am getting the error "ReferenceError: sound not defined". Does the pixi-animate export not allow for sound, or am I doing something wrong?

I'm trying to animate a blur on an instance of an MC:

const blurFilter1 = new PIXI.filters.BlurFilter();
this.mario_01.filters = [blurFilter1];
let count = 0;
PIXI.ticker.add(() => {
count += 0.005;
const blurAmount = Math.cos(count);
blurFilter1.blur = 20 * (blurAmount);
});

But I don't know how to access the pixiAnimate ticker. Could someone point me in the right direction?

Windows 10, AnimateCC v19.2.1, PixiAnimate v1.4.0, [email protected].

All worked well with [email protected].
After updating AnimateCC to last version it asks to use Electron v1.8.2 or greater. I updated Electron and there was a problem with publishing PixiAnimate document from .fla to .js.
No .js file is created, only .json with resources, similar to what has already been described in other issues. Electron throws the error "cannot read property 'scripts' of undefined". Tried with [email protected] and [email protected].

Empirically I found that this happens when I have an empty MovieClip somewhere on the stage. If I remove it from the stage or draw something inside it, all published well with .js file and others.
So, steps to reproduce - just add empty MovieClip on the stage and try to publish. In "PixiAnimate Publish Settings" I exported only "Images/".

I am having trouble installing the extension:

The extension is listed at https://creative.adobe.com/addons/my_addons but the CC console isn't installing it automatically. When I try to install it via ExManCmd, I get "Failed to install, status = -403!" which according to http://www.adobeexchange.com/resources/19#errors is "Compatible CC app not found. Solution: Install compatible CC application before installing add-ons." Adobe Animate CC (2015.1) is installed. I have tried uninstalling both Animate and the CC console and reinstalling, but that hasn't seemed to help.

Any insight would be appreciated; thanks!

When i try to publish, adobe animate cc will be stuck, if export as Sprites Sheets is checked.
If I leave this option unchecked， the export goes smoothly.
Has anyone encountered this problem? know how to solve this situation?
My environment is： animate cc 2019，electron v12.0.5， Node v14.16
Here is the test file.
test.fla.zip

Problem
If a MovieClip only have 1 frame, its frame script would never be exported.
(Actually it is exported to the output json file, but not to the output js file.

Reproduction

1. Make a new MovieClip
2. Only 1 frame, and add script at frame0, for example:

console.log('test');

3. Publish and run , and you would not see test in the console.

Demo project

The TSA signing is broken, but if you update it to:

        '-tsa \"http://timestamp.digicert.com/\"';

and update the ZXPSignCmd.exe to the newest ( windows, I assume mac also requires this )

After those two changes, signing works again.

Each frame only can support a single frame label. Multiple frame labels could be supported in the future by updating the plugin to publish a collection of frame label objects.

When click publish, get error:

Error: ENOENT: no such file or directory, uv_chdir

• Animate CC 2018

It looks like when you add multiple labels with the same name to a timeline, only the last is preserved due to the labels being stored in an object with the label name as the key.

Example from the output JS:

lib.storyframe_test_01_mc = MovieClip.extend(function () {
        MovieClip.call(this, {
            duration: 75,
            labels: {
                pause: 22,
                stop: 34
            }
        });

Clearly, having duplicate label names breaks gotoAndPlay('label') but it could also be really useful to have for other use cases.

In my example I was attempting to add multiple 'pause' labels at points in a timeline where the user would have to interact in some way to continue the animation. We could just use unique labels, but my idea was to make it as easy for the animator as possible.

I guess changing the JS output to use a collection for labels would allow dupes like:

labels: [{
    name: 'foo',
    position: 20
}]

What do you think? Is this worth looking into further or is the feeling that labels should be unique?

I'm trying the plugin in Animate CC 2018 on OSX 10.13.2 (and after that 2017, and 2015.2). But if I try to run the fla, nothing happens, no output, nothing running. And when I look in finder I don't see the generated js file.

Is there a logfile I can check somewhere?

Was it considered to be able to change the text in a textfield runtime and is it possible to accomplish ?

I have some frame script, which is simply console.log.

But in built in previewer (Ctrl + Enter), I cannot see console.log output in Developer Tools.

If I open the page in browser, I can see the console.log output.

Hello please help
adobe version 20.5.1, windows 10 operating system, plugin installed correctly and will be displayed in Anastasiy's Extension Manager, download the plugin from here https://github.com/pixijs/animate-extension/releases, https://github.com/pixijs/animate-examples
examples from here open correctly. I tried to install different versions of adobe, and only on version 20 I managed to install the plugin, what should I do?

Text field positioning is incorrect for center-aligned, and wrapped text. It is offset slightly to the right.

I installed the new PIXI 2.0 plugin. Great work btw!! but I don't know where to find it.
Looked in the extensions and under custom type but nothing.

I have an old pixi created file, which also says it can't find pixi do I have to convert this file to Actionscript 3.0

Tried both the version in adobe exchange: cc extensions
And tried the new 2.0.0 ZXP.
Would be great if it possible to get My old file to work again! Thanks for the effort!

Could be a Pixi.js issue, but mask graphics that contain a stroke are not renderered correctly as a mask. It only masks the stroke shape and not the fill.

When trying to publish a document with the images path pointing to the parent directory('../images/'), the electron process hangs and the image publish files are not created.
Also if the images path is something like 'assets/images/' and the 'assets' dir doesn't exist, there is a JavaScript error dialog in flash and you have to kill the electron process to continue.

Edit: This seems to only happen when there are bitmap images in the library.

I've noticed that the images publish path is relative to the generated JavaScript file and not the fla file, which is a problem if a published fla file is part of a project that has different and deeper dir structures for assets and js files.

My current solution is to have the correct images path in the publish dialog and move the images afterwards, but the path needs to be something like '../assets/images/', which triggers this bug.

Different versions of Electron do not seem to affect this. I'm using Flash 15.0.0.

Hi all there,

I've allready successfully installed pixi-animate add-on, to Animate CC on my Mac. Add-on was installed via Creative Cloud app, and in Animate is now new PixiAnimate project type with custom publish settings, tested, works great, very nice.

There are several problems with Windows 7 x64 SP1 installation in my case. Node.js, NPM installed, up-to-date, electron-prebuilt installed ok, Visual Studio Community installed, add-on on Adobe's site acquired, installed, synced turned on in cc and animate, regedit changes, pixi-animate installed,..

1. First problem is when trying to build and install plugin (gulp --plugin --install) > ending with 'no gulpfile found'.

2. Can't find add-on - never shows in Adobe CC app to be installed, and zxt extension installation can't be done, since I'm on Animate CC 2017, and Extension Manager CC can't install this type of extensions now. So, I see on my mac's CC journal, that PIXIAnimate add-on was installed, and I expected the same on Windows, but I've tried all the steps, many times, and never got the add-on into Animate CC.

Thanks for any help, good luck with pixi-animate! :)

Hello good afternoon.
First of all, thanks you very much for the space to be able to consult and apologize for the inconvenience in advance.
I'm having trouble publishing the project / mockup from Adobe Animate using the PIXI extension.
In console it tells me that electron is not installed and suggests launching npm install electron -g

The truth is that I have everything installed:
Adobe Animate version with paid license.
Pixi downloaded from the Adobe store.
Electron installed in its version compatible with macbook pro m1.

I would like to know if I am doing something wrong, I urgently need to be able to solve this,

Thank you,
Greetings.
Gonzalo.

Hola buenas tardes.
Primero que nada muchas gracias por el espacio para poder consultar y disculpas por las molestias de antemano.
Estoy teniendo problemas al publicar el proyecto/maqueta desde Adobe Animate utilizando la extension de PIXI.
En consola me dice que no esta instalado electron y sugiere lanzar npm install electron -g

La verdad es que tengo todo instalado :
Adobe Animate version con llicencia paga.
Pixi descargado desde la tienda de Adobe.
Electron instalado en su version compatible con macbook pro m1 .
Me gustaria saber si estoy haciendo algo mal , necesito urgente poder resolver esto,

Muchas gracias,
Saludos.
Gonzalo.

I made a simple animation of a box moving across the canvas for testing out pixi-animate but when publishing from Animate CC (I tried both Animate CC 2018 and 2019) I'm not receiving a JavaScript file for the animation data. I seem to be getting everything else such as an HTML, JSON, images folder with images, and a libs folder with pixi/pixi-animate JS files. The HTML file tries to load the JS file <script src="box.js"></script> and then use it scene.load(lib.box); but its not getting created when published. Any thoughts or help is appreciated.