Randomized animation solution

Javascript
1

Hi. Hopefully this is in the appropriate section…

In my current website (which I want to redo, making it mobile friendly and not requiring Flash), I had a Flash animation header which consisted of a background, and an Actionscript routine which would constantly pick a random number between 1 and 200. if the number was greater than 1, it would just loop back (nothnig happens). If it was 1, then it would move to the next section of the timeline, where it would pick a number from 1 to 20, and then it would go to an actionscript section consisting of a series of if/thens, which would jump swf to different parts in the timeline, based on the chosen number. Each of these parts was an animated segment, which then had a gotoAndPlay bringing it back to the very start (where it would be picking a number between 1 and 200).

With this, I had an animated header with occassional random animations occurring.

Now that I’m abandoning Flash, I’m looking into what is the current proper method for doing this sort of thing.

I am using Moho (rather than Flash) to create the animations itself, and although Moho doesn’t export HTML5, the project CAN be imported into another program (Motion Artist) which does… Odd thing is, what it creates is a series of PNG images for each of the elements/layers, and seemingly then animates them (in the browser) via javascript. I’m not too familiar with or SVG’s or generally how HTML5 does ‘Flash-like’ animations, but I was surprised to see it uses a rasterized format for the elements, rather than SVG, as I would have exprected.

Problem is… there’s no scripting, so the animation would just be a linear loop of the same animated frames, so I’m trying to figure out if there’s some (compatible, smart) way to do the same kind of randomized animation in HTML5.

If all else fails, I’ll just use a linear (non-random) animation (via the HTML5 export of Motion Artist (which uses the PNGs animated via javascript), or at worst, an animated GIF.

I am hoping is that someone can give me some guidence on a few things:

-Is there some way I can have an animation or image loaded onto the web page, and then have some sort of random number generator that then drives the loading or playback of separate clips… so that it is usually is displaying that image/animation, but then sometimes randomly plays from a library of other quick clips (…I’m assuming loading it to replace the regular one, as we are no longer jumping around the timeline of a swf…unless there IS some way of jumping around a movie file or something!).

As an example, the header shows an image of a creature (non-moving image, or looping ‘rest’ pose)… every once in a while (random), it loads a very short (action) clip, such as a blink, head move, stretch, etc, and when that clip finishes, it loads the regular (rest) clip. I’m again, assuming we’d be loading and replacing clips, since I’m assuming we can’t jump around a movie clip or some sort.

-What is the best format for the animation? The ‘PNG animated via javascript’ HTML5 export? A series of sequential files that some script then plays through? Or some other solution?

I was comfortable doing actionscript and all this stuff using Flash and HTML4, but now with HTML5 and the alternate animation formats, I’m kind of in very new territory, so I’m really not sure how to go about things.

Hope someone can point me in the right direction…

2

I miss my dear old friend Flash and especially Actionscript, but alas no more. You really held on for many years past its expiration date. In my heart I still do too. :smile:

Do you have a Flash version that has Canvas Export? That may work in your case.
https://www.google.com/search?q=flash+canvas+export

Canvas in general was one of the things intended to be part of the HTML5 evolution from Flash.

Adobe added it to Flash (known today as Animate), and it leverages CanvasJS, EaselJS, etc., for the output.

Otherwise some other libraries you may find very useful:

SVG Animation Library

Canvas Animation Library

There are other specific ones also like:

Some interesting timeline animation web apps too keep an eye on:

Some other apps that may be useful

Nowadays you can also do a lot with just vanilla CSS, or sprinkle in some vanilla JS to extend it further.

With most of those libraries and frameworks you are only limited by your imagination and your ability to leverage their capabilities and API, otherwise you can code up whatever you desire, randomness etc.,

Please let us know if something is helpful or allows you to accomplish what you desire.

ActionScript :disappointed_relieved:

3

Hi, thanks for the reply! (Wow!)

I have Flash CS6, so no, I don’t think it has canvas… if it does, I certainly don’t now about it!

There were third party plugins/scripts that supposedly export HTML5… but when I tried them, they don’t seem to work. From what I tested, it seemed to ignore any actionscript, and just played the entire animation end to end, rather than jumping around (as dictated by the random gotoAndPlay routine I created). It seems like it SHOULD be working, but it doesn’t. Actually, even simple direct gotoAndPlay’s didn’t work… so I have no idea what the deal is there. I know THEY should work… but again, nope. Just plays the whole animation, end to end… ignoring all script.

I kind of gave up on the Flash route, partially because it simply didn’t seem to work (with the 3rd party solutions).
Moho is really great for animation… but unfortunately lacks a HTML5 format export, but as I mentioned, there is a workaround by importing the project into Motion Artist (a very simplified ‘motion comic’ type program, which DOES have HTML5 export). That all works (although, again, I’m surprised it stores the graphics as rasterized PNG’s that are then animated via javascript). All wonderful… but no scripting.

So, I’m trying to figure out if I can either get some sort of script that will randomly jump around in the playback of a single ‘movie’ file (whatever that format may be)… or play from a library of ‘modular’ clips (each a different action/event… like a blink, looking around, etc). That’s probably a javascript thing, so kind of out of my level of familiarity.

Heck, I’d even accept having a folder of different stills (ex. character standing there, character blinking, character looking up, etc), and having a script randomly display from them, basically assembling an ‘animation’ by random stills. Not ideal, but I’d take it.

But, again, no idea how to do that.

I’ve looked into some of the current animation creation alternatives, but so far haven’t found anything that seemed like it would either be suitable for something more complex than logos moving across the screen, or something that had scripting (in my case, the random jumping around within the animation’s timeline).

Ya, in Flash, I could do all this stuff (as well as have it all work inside the header of my webstie), but now that I’m venturing into new realms (HTML5, bootstrap, etc), I’m kind of lost.

I’ll check out some of the links. I should have mentioned, I’m on a PC, which unfortunately seem often seems to drastically shorten the list of possible alternatives!

As retro and uncool as it probably seems, my online portfolio page uses an animated GIF for the animated header… it isn’t randomized (just a loop), but it works great, requires no code, and has the bonus of just displaying the first frame if the browser doesn’t support animated GIFs… Call me old-school, but that totally works for me! But, I am trying to get with the modern crowd, and use whatever the kids are using these days. So, here I am… trying to figure out how to replicate the randomized Flash animation thing I previously was doing.

4

So… If I were to import an ‘HTML5 format’ animation (…so, that would be the PNG elements, animated via actionscipt) or (if it’s not suitable) a regular rasterized movie clip, is there any way code could be added to the site to make it occasionally jump to a random frame on the ‘timeline’ of that animation, to randomize it a bit?

If so, I’d just to a linear animation, containing every desired action of the character, and then bring that in, add that code (into the HTML page), and (theoretically) it would then give me a more randomized version of that linear animation.

Is that a possible thing? If so, how do you do that? (If you can, PLEASE give me a full explanation, as this is a realm I’m really not familiar with)

5

That had canvas export to my knowledge.

Ok. Please check all of the links extensively and research diligently, you will find what you seek. :wink:

6

Maybe I’m missing something, but it often seems a lot of the animation plugins (or whatever they may be) are aimed at motion graphic type things… moving logos and interface elements around. I haven’t seemed to find anything that seems to be suitable for cartoon animation type things… Again, I’m probably missing something here, but I seem to only be seeing ‘move stuff around the screen’ type solutions, or particle type stuff.

The actual creation of the animation I can do in Moho, where I am comfortable… but I’m trying to see if there’s a means of randomly jumping around the animation’s timeline to create a more randomized version.

I just checked Flash CS6, and it seems you can only create for Flash or Air (I never knew what that was!)… again, unless I’m missing something (which I’d be the first to admit I’m sadly capable of!). Is there some other export feature in CS6 that allows the Canvas format? I know there’s a lot of Flash that I didn’t touch.

7

Sorry but you could not have possibly studied the links provided that fast, and already discount them.

It’s gonna require effort and diligence. No quick fix, study and learn, repeat over and over.

Read this fully, follow those instructions as needed:
http://www.adobe.com/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html

8

I’ve looked into some of those things previously.

Yep, that Toolkit for CreateJS is what I previously tried, and couldn’t get to work (seemed to ignore the Actionscript). Obviously I’m doing something wrong, or there’s some other aspecct that is affecting the output.

I’ll read through that article. It mentions limitations which may be part of the issue. Thanks.

9

“It supports most of the core animation and illustration capabilities of Flash, including vectors, bitmaps, tweens, sounds, and JavaScript timeline scripting.”

“JavaScript code can be added to your timeline on a keyframe using the ActionScript panel”

Rightly so, since it requires Javascript, each quoted from that referenced article.

But again…

Sorry but you could not have possibly studied the links provided that fast, and already discount them.

It’s gonna require effort and diligence. No quick fix, study and learn, repeat over and over.