Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Carl

Flash Professional HTML5 Canvas export with GSAP

Recommended Posts

remember, text that's gripped is tiny.

Link to comment
Share on other sites

You can also create your own custom build and remove the parts you don't need. That 280kb includes everything, which would be like including every single GSAP plugin.

 

Here's some good news. Pixi is actually working on their own version of a Flash exporter. The bad news is that it might take some before it's released. The developers have full time jobs and cannot devote all their time to an unfunded project. They just opened a Patreon account, so you can send them your hard earned money if you want to help support the project.

 

https://www.patreon.com/user?u=2384552&ty=h

 

I'm happy to see improving documentation and adding examples is on that list because that is by far the worst part of Pixi. I would actually recommend starting with Phaser if you want to learn Pixi since it's built on top of it, uses a similar API, and has tons of resources.

  • Like 1
Link to comment
Share on other sites

As some of you may know I'm a huge fan of using PIXI.js for canvas projects because it by far the best 2d renderer available. Anyways, today I was updating a PIXI project with some tools from a company called CloudKid which has started to convert all their Flash stuff over to PIXI. I just found out that they have created a tool to bridge the CreateJS exported by Flash over to PIXI, which will run much faster and includes a bunch of WebGL filters and masks. 

 

Here's two examples of a Flash animtion export to PIXI.

http://cloudkidstudio.github.io/PixiFlash/examples/shapes/

http://cloudkidstudio.github.io/PixiFlash/examples/animation/

 

Repo: https://github.com/CloudKidStudio/PixiFlash

First, I dont know why pictures are not cropped to reduce size.

Second, I dont know why pictures are not compressed to reduce size.

Link to comment
Share on other sites

It's not that straightforward with WebGL. Everything is based on a triangle, and all your images have to be a power of 2 in size, i.e. 2, 4, 8, 16, 32, 64, etc...

Link to comment
Share on other sites

  • 3 months later...

Just an update to my own question: 

 

 

It's been recommended to me that breaking apart the text and converting to MovieClip is often the safest and easiest thing to do. It is also beneficial to select the "cacheAsBitmap" option so that the vector data does not have to be re-calculated and rendered on every frame of animation. Great tips from a trusted source. 

Hi Carl,

I have been using the new version (Animate CC) that was just launched and it now supports static and dynamic text. All static text will be automatically converted to outlines on publishing and turned into canvas shapes. The outputted shapes are nicely compressed (option checked by default under the publishing settings).

  • Like 3
Link to comment
Share on other sites

Hi Carl,

I have been using the new version (Animate CC) that was just launched and it now supports static and dynamic text. All static text will be automatically converted to outlines on publishing and turned into canvas shapes. The outputted shapes are nicely compressed (option checked by default under the publishing settings).

Wow, that's awesome news!  That will make a much smoother workflow.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×