{"_id":"@2dimensions/flare-js","_rev":"3-29a648400493ad764633d9a02982eb38","name":"@2dimensions/flare-js","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@2dimensions/flare-js","version":"1.0.0","description":"Library for loading and displaying Flare animations.","main":"build/Flare.min.js","scripts":{"dev":"npx webpack --w","build":"NODE_ENV=production webpack","start":"webpack"},"repository":{"type":"git","url":"git+https://github.com/2d-inc/Flare-JS.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/2d-inc/Flare-JS/issues"},"homepage":"https://github.com/2d-inc/Flare-JS#readme","devDependencies":{"arraybuffer-loader":"^1.0.7","babel-core":"^6.26.3","babel-eslint":"^6.1.2","babel-loader":"^7.1.5","babel-preset-es2016":"^6.24.1","bezier-easing":"^2.1.0","eslint":"^3.19.0","eslint-loader":"^1.7.1","gl-matrix":"^2.8.1","ifdef-loader":"^2.1.1","webpack":"^4.17.1","webpack-cli":"^3.2.3"},"dependencies":{"npm":"^5.10.0"},"gitHead":"8129474b0d3ae4dd12a81b2484a4f8f9408bea3c","_id":"@2dimensions/flare-js@1.0.0","_nodeVersion":"11.11.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-wG/XjNutgB9V0PVNKm8Amb4pilvQcS/qRJMmRQvIj4chMPXvKHxGi4jr+uwS14z7ZAWfZ/Nayzycy5oPbBo9pw==","shasum":"ff685d11381f69f63375e726e7f4f94d16294b0a","tarball":"https://registry.npmjs.org/@2dimensions/flare-js/-/flare-js-1.0.0.tgz","fileCount":85,"unpackedSize":4989015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdri6OCRA9TVsSAnZWagAA/2YQAIbDUWe+uDMK+YnYTlMz\n5mopL9DDifYp5X8z4qqI3N3fIUMU+gUJnIrFH7ulN9RQ1GktJZLnSkllp/dC\nD4J/5tLZ+wblOjJmGRjLYMg/22dRIdk/RcLhO3cA9Q4kV1VKHoHsTi5WcSF5\n3ktmOH6m3U6IwndKFRpcNTivaVCaepd7cZ46iyxVT/v93BVWVEG+S9lN8I62\nI8TCfjzPL/B31ZaTCVIkIv7VZo/0hUDhTmufm078i1iCkEdiyGfKGErw1c2M\newoPLtFTyvKE7x36cFz1ilu9gJErnpi0ai6z1/7h9jb4FmX9IC16B4ZX+nGv\nqgUnEakEwqWqbRaVuhdTb2LpHSHgcvR8ROWKEreSx01artNZA5AFNsajG2Ai\nSp9u6jtdkR1EFY1UtMi+DEByCGcdTAuZIPHM6NbKsThcAXYVnKKS3Y2KECHe\n4mGc/ecvZYjeEVK8Z+6LaHIQp5TfSGIMyYSv69HTbVtM8qlFsE47/m9uYQVI\n/jXVm5ggy53OpRUuZX1CcUvZUU/5YH17+ciG2h0QAf8pK9JAec19J+Lcx7hI\nzidqTv2vSozVSStCsfhl/A1uzc2TO/xUh8Psz4Bz+VaIrZnEpssz24Qtty7J\na7OPXRvbi9zOuV8PVhD2TrwUiJ9RKwyou9goHGoHFeQnEcQPElxrY/NEjVPV\nI//l\r\n=n317\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1Dd0FoZtiYFF89uA6VvH5Sw6yiCpzqBk6KTKN5OE9gAiA1qR5CpGJJPxpZPzf74gu27m5EVEIZQkDeCK+hn+1FZg=="}]},"maintainers":[{"name":"luigi-rosso","email":"luigi.rosso@gmail.com"}],"_npmUser":{"name":"luigi-rosso","email":"luigi.rosso@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/flare-js_1.0.0_1571696269264_0.5800947477472578"},"_hasShrinkwrap":false}},"time":{"created":"2019-10-21T22:17:49.052Z","1.0.0":"2019-10-21T22:17:49.454Z","modified":"2022-04-04T10:42:07.513Z"},"maintainers":[{"email":"umberto@2dimensions.com","name":"berthaus"},{"email":"guido@2dimensions.com","name":"guidorosso"},{"email":"luigi.rosso@gmail.com","name":"luigi-rosso"}],"description":"Library for loading and displaying Flare animations.","homepage":"https://github.com/2d-inc/Flare-JS#readme","repository":{"type":"git","url":"git+https://github.com/2d-inc/Flare-JS.git"},"bugs":{"url":"https://github.com/2d-inc/Flare-JS/issues"},"license":"ISC","readme":"## Flare-JS\nJavascript ES6 runtime with Canvas rendering.\n\n### CanvasKit vs Canvas\nThere are currently two branches: master with CanvasKit rendering (Skia via WebAssembly) and context2d with the standard CanvasRenderingContext2D. The context2d branch is deprecated.\n\n## Building\nUse NPM to get the dependencies and then build with webpack:\n\n```\nnpm install\nnpm start -- --watch\n```\n\n## Flare-JS Example\n\nThere are a few steps to start rendering a Flare file:\n1. Create a `canvas` element in HTML\n2. Instantiate and initialize the `Graphics` object with the `canvas` reference\n3. Start the render loop with `window.requestAnimationFrame()`\n4. Load the an Actor from file with `Flare.ActorLoader.load(fileLocation, callback)`\n5. Initialize and instantiate the `Actor` - that will initialize the `ActorArtboard`s for the loaded Flare file: \n    - First `Actor.initialize()`\n    - then `actor.makeInstance()`\n6. Create a new `AnimationInstance(actor, animation)`\n7. Advance the `AnimationInstance` within the `window.requestAnimationFrame` callback: \n    - increase its time value with the provided setter `animationInstance.time`\n    - then apply it with `animationInstance.apply()`\n8. Advance the actor: `actor.advance(elapsed)`\n\n### Running the Example\n\nThe [example folder](https://github.com/2d-inc/Flare-JS/blob/master/example) contains two files, `example.html` and `example.js`, with an example implementation on how to use this runtime.\n\nUse NPM to get the `gl-matrix` dependency:\n```\nnpm install gl-matrix\n```\n\nAfter the installation completes, copy `gl-matrix.js` from `node_modules/gl-matrix-dist` into the repo's `/build` folder. *(N.B. `canvaskit` is downloaded with this repo, and already present in the `/build` folder.)*\n\nAt this point run a webpack build:\n```\nnpm run dev\n```\n\nUse a local web server such as [NGINX](https://www.nginx.com/) or [MAMP](https://www.mamp.info/en/) to expose the resources.\n\n### example.html\n\nThis file contains the `canvas` element that we need to render the Flare file. It'll also load the necessary dependencies (i.e. `Flare-JS`, `gl-matrix`, `canvaskit`) and the example running script `example.js`.\n\nThe `<script>` tag will have implement the `onLoad()` callback for the `body` HTML Element: a `FlareExample` object is initialized with the `canvas` reference, and passed a callback function that'll load the Flare file from disk - `flareExample.load(filename, callback)`.\n\n### example.js\n\nThis `js` file creates a `FlareExample` object. \nIts constructor initialized the `Graphics` object, starts the rendering loop and calls-back to the script.\n\nThe callback, in the HTML file will call `FlareExample.load(filename)` to load the file from disk. Once `Flare.ActorLoader` is done, its load callback will finish setting up the actor within the Example via `FlareExample.setActor()`.\n\n`FlareExample.setActor` will perform the initialization and instantiation of the Artboards, and the Animation.\n\nThe render loop - that is `FlareExample.advance()` can now advance the Actor, the Animation and lastly draw to canvas via `FlareExample.Draw()`.\n\n## Contributing\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request.\n\n## License\nSee the [LICENSE](LICENSE) file for license rights and limitations (MIT).\n","readmeFilename":"README.md"}