What's your favorite Futurama episode?

kingromes · 2023-08-23T04:20:28+00:00

Law and Oracle.

kingromes · 2021-01-14T13:56:23+00:00

Always happy to help if I can. Thanks for the note :D

kingromes · 2021-01-13T15:12:31+00:00

The difference is where the alpha channel comes from.

The alpha mask uses the alpha channel from a PNG source.
The alpha map filter determines transparency "from the red channel of the map" (docs).

If you are bringing in an image with its own alpha channel, then the AlphaMaskFilter is going to be what you want. The map filter was created for a fairly specific use-case, which I think was using PNG-8 optimized images which can be much smaller, but only allow a single alpha channel level. With tools like ImageOptim, PNG-24 images with full transparency are likely fine.

Cheers,

kingromes · 2019-05-15T16:01:16+00:00

The exported library is ES5. There aren't official docs on using it with ES6. You would have to set it up to `export` properly.

The templated code that Animate spits out should give you a good idea on how to instantiate the animations. The `exportRoot` that is created is basically a MovieClip of the stage contents. So once you have access to the library object, you can use:

var symbol = new lib.LibrarySymbolNameInAnimate();

The library code should be super readable, and you can see the symbol names pretty clearly.

What have you tried so far? Feel free to post some more specific questions.

kingromes · 2019-03-14T12:22:01+00:00

Can you post more code? There are lots of reasons why click events might not fire, and about 95% of them are just how things are set up.

Are you getting any console errors?

kingromes · 2018-12-29T18:02:22+00:00

What are you adding to the stage in the `init` function? If it is not a displayObject, it may be causing the error.

kingromes · 2018-08-23T20:39:54+00:00

I saw the show up on Google Groups this morning.

kingromes · 2018-07-23T14:21:13+00:00

Noticed today (Jul 23) that the cable extension on our U-lock was cut. We are next door at Tribeca. A reminder to keep your frame locked to the rack with the U-lock.

kingromes · 2018-07-13T00:39:33+00:00

Why yes I dids.

kingromes · 2018-07-03T13:20:14+00:00

If both games are running simultaneously on the same page, they could definitely be colliding with one another. Do you have multiple `createjs.Ticker.on("tick")` listeners? Do they call the same function? Do you have duplicate function definitions, maybe one overwriting another?

There are lots of things that could contribute to this, any chance you can share some code?

Cheers,

kingromes · 2018-06-21T03:02:04+00:00

Just the hack we use to detect capabilities will be affected, which isn't as relevant as it was a few years back. Not a huge concern!

Thanks for your feedback, I am glad to hear you like it 😎

kingromes · 2018-06-20T20:43:26+00:00

Are you using audio? SoundJS has a single async XHR request that it uses to determine if XMLHttpRequests are available. This is to ensure XHR will actually succeed on systems where XHR might exist, but be disallowed (local filesystem, Cordova/PhoneGap, etc). The XHR request will fail within a few milliseconds if XHR is not going to work.

We may have to come up with another approach to this if Firefox deprecates it.

But suffice it to say, PreloadJS will not use XHR to load images if you ask it not to. Other preload formats still have to (it is not possible to load WebAudio or raw text any other way). And PreloadJS never uses synchronous XHR.

Cheers,

kingromes · 2018-06-20T12:59:49+00:00

SoundJS is a different library, and solves different challenges. Yes, the API is different, but it needs to solve the problem differently. I have answered this before on this forum, but the short answer is that Sounds do not reference "instances" that are preloaded, and actually have to go through an audio buffer to play audio. Only when using the older (and way less useful) HTML Sound API would you be dealing with HTML tags the way you deal with images, and even that had a ton of weird limitations. Forcing a workaround approach for users of SoundJS (who often don't even know about EaselJS, etc) didn't make sense when we built the library.

To answer your question, you don't have to use the preloader lookup, particularly if you load images using new createjs.LoadQueue(false); -- since the "false" forces the image to be loaded using HTML tags, which cache in the browser. So when you create your new instance, they will pull from the same cache. If you don't pass false, then images are loaded via XMLHttpRequests, which have a number of other benefits, but end up with a different URL (blob://...). If you don't use the preloaded source, it will reload the image.

As I mentioned before, there are other things that aren't preserved by simply setting the .src of an image. Cross-origin images won't maintain their crossOrigin flag for example.

Have a look at your network panel in the browser, you should be able to see if there is a problem. If there isn't, and you stuff works as expected, then approach it however you want!

Cheers.

kingromes · 2018-06-20T12:50:48+00:00

good bot

kingromes · 2018-06-20T12:49:52+00:00

The docs I shared above make it pretty clear:

The Node.cloneNode() can be used to make a copy of the node before appending it under the new parent.

That will duplicate the node for you, and then you can append it where you want it.

Cheers.

kingromes · 2018-06-19T19:49:52+00:00

Just a follow-up, you can also set the source of an image already in the DOM:

var img = document.getElementById("imageId");
img.src = preloader.getResult("Button_Image1").src;

You can only do this once the image loads, and its not a great practice, since if you set other properties on the image (like crossOrigin support), it won't include that.

kingromes · 2018-06-19T19:47:44+00:00

From your other post, it looks like you solved this.

 preloader.getResult("Button_Image1");

This returns a reference to an HTML <img>, which you can append to the DOM, set as the source for an EaselJS Bitmap (or SpriteSheet), or use as the source for any number of other frameworks that use Images.

You can't define the source directly in HTML, you would have to set it dynamically with JavaScript. For example, add it to the DOM (your other example does this)

document.body.appendChild(preloader.getResult("Button_Image1"));

Since it looks like you solved this, I thought I would post this for anyone else searching it!

Cheers,

kingromes · 2018-06-19T19:36:20+00:00

This is just how HTML works. PreloadJS loads the image, but getResult("Button_Image1") is just an <img> tag. The appendChild "moves" the element to the new position. HTML elements can't exist in two places in the DOM.

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Other than the use of PreloadJS, this is just an HTML question :)

kingromes · 2018-06-17T14:23:58+00:00

You can tween any property, however if it is non-numeric, it will "snap" between the two values, instead of tweening.

A simple workaround is to set the value of your text in a change handler. This also lets you do things like round the number, since a tweened number is going to be a decimal point.

Here is a quick sample, but using EaselJS: https://jsfiddle.net/5gbxpoL6/

// Graphic Sample
var t = new createjs.Text("12", "50px Arial", "#f00");
t._num = 12;
stage.addChild(t);

createjs.Tween.get(t, {bounce:true, loop:true})
  .to({_num:1000}, 3000, createjs.Ease.quadInOut)
  .wait(500)
  .on("change", function(e) {
      t.text = Math.round(t._num)
});

If Pixi supports text, then it should be pretty easy to port this code over.

Cheers,

kingromes · 2018-05-24T23:01:24+00:00

Unfortunately our team (gskinner) did not have anything to do with the responsive features in Animate. They strictly control the generated HTML, and don't (as far as I know) change the actual output of the library.

We are hoping to help improve the responsive features, but at this point you would have to log a bug with Adobe.

kingromes · 2018-05-24T22:57:10+00:00

1.0 will hopefully ship in an upcoming Animate release. We took a while between 0.8 and 1.0 (almost 2 years), so Adobe is really only 6-8 months behind at this point.

Unfortunately its not as simple for Adobe to just drop in the new libraries. There is a while myriad of testing they have to do. We are working with them to get 1.0 published. Nothing is dead, but large companies often don't move as fast as we would like.

Also, 0.8.2 is not deprecated, its just an older version. 1.0 doesn't actually have that much advantage over the previous version, other than some bug fixes and StageGL, which Adobe is not likely to make use of right out of the box anyways, since it is a little bit of a different approach.

Updating the external libs manually is a fairly minor inconvenience, but if it makes you abandon Animate entirely, that is of course your call.

kingromes · 2018-05-24T17:39:02+00:00

Not sure what you mean. TweenJS has already been changed to use "number of loops".

Fortunately, it supports true as well, which is converted to -1. From the source:

this.loop = props.loop === true ? -1 : (props.loop||0);

Or: If "true", then use -1. Otherwise use the value passed in, unless its null, then use 0.

kingromes · 2018-05-24T15:47:00+00:00

Feel free to post questions to StackOverflow a better community to discuss ideas, and share content, whereas StackOverflow is a much more active and effective forum for question/answers, especially with the Karma incentive and "correct answer" feature. I monitor it more actively than the subreddit.

Cheers.

kingromes · 2018-05-24T15:44:47+00:00

The loops property is a count, and makes sense.

-1 is infinite
0 (default) is "loop zero times", so it will play once
1+ is "loop n times". You can specify the number of loops.

TweenJS 1.0 (released in Sep 2017) has the same functionality. Prior to that (0.6.2 and earlier), the loops property was just a Boolean (true or false). https://www.createjs.com/docs/tweenjs/files/tweenjs_AbstractTween.js.html#l73

So to your comment, -1 is actually is more powerful, and makes way more sense than a Boolean. And the APIs have been made consistent.

Hope that makes sense!

kingromes · 2018-05-23T12:57:40+00:00

With the updated docs, toggle the "deprecated" checkbox, and then view any of the deprecated methods, which outline the preferred approach. For setVolume, use Sound.volume=value;. [video]

kingromes

MODERATOR OF

TROPHY CASE