SWF loader support for assets 😄

TypeScript
#1

Hey guys,

Quick update, we now have hot-reload support for SWF assets in the NPM releases, check out “features/display/UsingSWFAssets” or “demos/NyanCat” under https://github.com/openfl/openfl-samples-ts to get an example.

In short, you can import a SWF file, and processing is automatically done as a part of the build. The import returns the file path you can use to load it

import * as libraryPath from "./../assets/library.swf";

...

AssetLibrary.loadFromFile (libraryPath);

For anyone using Adobe Animate for Adobe Flash Professional, this provides a hot reload workflow for working with changed SWF assets, and simplifies the process of converting SWFs for use with HTML5 :thumbsup:

5 Likes
#2

It’ so cool~

  1. Intellisense of openfl api can improve?
  2. How about the SWF assets become an independent tool?
    :smile:

I like openfl for Typescript~

1 Like
#3

There should be an openfljs command exposed by the OpenFL NPM library, so you can do openfljs process path/to/swf path/to/output.bundle in an NPM script.

The latest release added Haxe generated code output to the bundles, though the classpath won’t be added automatically in NPM releases. I think there’s more that could be done to improve this :smiley:

#4

Hi, I find that the *.bundle is folder.
Is there has any way to use ‘AssetLibrary.loadFromBytes’ to load swf from ByteArray?
Because I might uncompress and read the resource from the ‘.zip’ file.
Looking forward to your reply, thank you~ :grin:

#5

You should be able to currently use AssetLibrary.loadFromFile with the path to the *.bundle directory. It will figure out the additional paths from there

We do not have a feature yet to bundle the SWF assets into a flat file (which in testing was not as fast and requires more memory), but a single file does make managing some other things easier, so I’ve had it requested a few times

#6

It seems like some swf files are incompatible.(CWS , size: 5.3M)

ie
ie.png1128×198 4 KB

#7

I believe this was fixed in the latest NPM release. Using the source, you may have to npm update and npm rebuild to compile the tools

#8

I think I have already updated them to the latest version.:smile:
image

#9

Oh, I mean the latest release of OpenFL on NPM :slight_smile:

#10

:rofl: error persists.

image
image.png1148×211 14.4 KB

Is there something wrong with my swf?
But I just compiled the swf that does not have any AS code.(Target: Flash 10.3, Deflate)
image
image

#11

Could you share a SWF we could use to test? Thanks :slight_smile:

#12

Are you sure that you are using the latest version of OpenFL with the project?

The “package.json” asks for OpenFL version ^7.0.0, so it might not be grabbing the latest version. Could you try running npm install openfl --save-dev and seeing if it updates to a newer version?

EDIT:

I had to actually edit the “package.json” and set it to 8.8.0, then run npm install openfl again.

There’s probably an easier way to flag a project to use the latest major version

#13

The problem still exists.
SWF file have been sent, please check it.
Thank you~

#14

Thanks for sharing!

I was able to use the OpenFL dev version and get it working. You are right that the latest NPM release online does not work :frowning:

Until the next release, here’s the workaround:

git clone https://github.com/openfl/openfl
cd openfl
npm install
npm build -s
npm link
cd path/to/UsingSWFAssets
npm link openfl
npm start -s
#15

Path error. :thinking:

image
image.png815×92 3.45 KB

Should it be as follows?
git clone https://github.com/openfl/openfl-js

Looking forward to release version.

  • Hope to add support AssetLibrary.loadFromBytes.
  • Hope to ByteArray supports [] accessor.(Now it can be simulated by Proxy，but native support is best.)
    let ba = new ByteArray(); ba.writeByte(0x00); console.log(ba[0]);
  • Conversion between ByteArray and Buffer.

:smile:

#16

Oops! I forgot the one step. When in the OpenFL directory, run:

npm build -s

This should rebuild the OpenFL library and tools.

What happens if you run AssetLibrary.loadFromBytes? Is it supported? Does it have an error?

JavaScript (unfortunately) supports the array accessor only on the Array object (not even something that has Array in its prototype chain!) or if you add a real property. We hacked in support for openfl.Vector, but ByteArray currently uses get or set methods as a workaround

We did not expose ByteArray.fromArrayBuffer to the NPM release, but perhaps we could. Would that help? I know its not the same as Buffer, but might fill a similar use-case

#17

Yes, I run it in openfl path, or you means project folder?

I can’t run AssetLibrary.loadFromBytes, because *.bundle is folder. :joy:

:thinking: I think it’s not necessary support [] on Array object, for example:

let ba = new Proxy(new ByteArray(), {
	get: (ba: ByteArray, key) =>
	{
		let i = key as number;
		if (i >= 0 && i <= ba.length)
		{
			let position = ba.position;
			ba.position = parseInt(i as any);
			let result = ba.readByte();
			ba.position = position;
			return result;
		}
		return ba[i];
	},
	set: (ba: ByteArray, key, value) =>
	{
		let i = key as number;
		if (i >= 0 && i <= ba.length)
		{
			let position = ba.position;
			ba.position = parseInt(i as any);
			ba.writeByte(value);
			ba.position = position;
		}
		else
		{
			ba[i] = value;
		}
		return true;
	}
});
ba[0] = 0x11;
console.log('ba.position:', ba.position);
console.log('ba.length', ba.length);
console.log('ba.readByte()', '0x' + ba.readByte().toString(16));

result:
image

#18

Yeah, in the OpenFL library directory. The npm build command will rebuild the “tools.js”

Try using AssetLibrary.loadFromFile, with the path to the *.bundle folder, like AssetLibrary.loadFromFile("path/to/my.bundle").onComplete(...)

Perhaps we can do something (such as proxy) as a backup for array access, but I’m concerned about performance:

http://thecodebarbarian.com/thoughts-on-es6-proxies-performance

We also support ES5

#19

After opening VPN, the command run successfully.
Our country’s GFW is really strong, haaaa… :joy:

I strongly hope that supporting bundle the SWF assets into a flat file.
Because I found that so many resource files were created.:rofl:
image

Besides, do you have other recommended UI editors for openfl except Adobe Animate and Adobe Flash Professional?
Thanks a lot for your previous answers. :smile:

As follows, it seems that the some instances lost after publishing.

import * as ui_path from "./../assets/ui.swf";
AssetLibrary.loadFromFile(ui_path).onComplete((library: AssetLibrary) =>
{
    let bi = this.addChild(library.getMovieClip('StartButton'));
    bi.x = 200; bi.y = 100;
}

That’s a correction, no missing instances.
The bitmap pixels seem to be set transparent in child movieclip.
image

#20

Have you tried “Export as Bitmap” from Animate, if you are using filter effects?

It may work better to let filtered objects be exported from Animate rendered with the effect already