Jump to content
GreenSock

tehfailsafe

Converting old AS3 marquee to JS

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a animated marquee thing I built a few years back for a client who now wants it working on ipads etc. I used timelinelite and tweenlite for everything in AS3, and now that I'm researching into more tools the createjs toolkit looks promising, but doesn't seem to recognize any actionscript.

 

 

Forgive me if it's a obvious question/answer, I haven't been paying attention for the last couple years...

It seems that it should be reasonably easy to take my TimelineLite tweens and port them using the gsap js, no?  Where do I start? Does it require editing the JS file after exporting from the createjs toolbox?

 

And I apologize for the simplicity of the question, I'm just looking for a start in the right direction of how to convert the file easily. If I have to re-create them all from scratch in JS I'll probably just tell the client I don't want to take the project on.

Link to comment
Share on other sites

Hi,

 

Its my understanding that the createjs tools in Flash that allow you to export a Flash animation to "HTML5" are intended to work with timeline animations built with motion tweens and keyframes, not scripted animation like TweenLite, TimelineLite or other AS3 animation tools. 

 

CreateJS may do a good job at converting movieclip and vector assets as images ready to be inserted into a web page, but I'm quite sure you would have to convert your ActionScript to JavaScript. The ActionScript and JavaScript syntax for the GreenSock Animation Platform (GSAP) is nearly identical, but you will most likely have change all the targets of your tweens to be DOM elements and convert any application logic. 

 

In short it sounds like the type of job you may be more inclined to deny than accept. 

 

I would encourage you though to give it a try if only for your own benefit. I think you will find that this type of work may be a little frustrating at first, but you could find yourself at quite an advantage once you get it down. More and more clients are going to be expecting Flash-like animation in the browser and I can say with confidence that knowledge of GSAP JS will certainly empower you to create animations with JS that are literally impossible any other way. Its also quite fun.

Link to comment
Share on other sites

Hey Carl,

 

Thanks for the info.

 

Overall I've transitioned over to ruby on rails and backend, mostly because I really dislike the lack of error reporting of javascript. Maybe there's better tools for that now, but with rails it feels like I can just make anything, and in the long term I can actually build out an idea rather than working for clients forever.

 

But that's a whole'nother story.

When I was first starting out with jquery a couple years ago I got extremely frustrated because something I thought should work didn't, and more often than not it was because I misspelled or mis-targetted something. And I had no way of determining THAT was the problem. The page would load and look normal but the javasript just wouldn't work with no flags or errors on line 65 type of info.

 

Are there better tools for that kind of stuff available now? 

Link to comment
Share on other sites

This stuff has been around for ages, but I suppose it can be easy to overlook:

 

- Chrome has a built-in feature called Developer Tools (press CTRL+SHIFT+I) (Safari has them too)

 

- Firefox has a console and an inspector, but grab the Firebug extension for a more complete toolset (press F12)

 

- Internet Explorer since v8 has Developer Tools built-in (press F12), although they aren't as smooth to use as the browsers above - helpful when just IE is giving you grief though

 

 

All warnings and errors should be logged to the console (the equivalent of traces in AS3), and you can also log things directly with console.log() (don't leave console.log in production code though, as console only exists in IE after it has been opened, and will throw errors otherwise). As long as you aren't using minified javascript files when debugging, you should get stack traces and line numbers with most errors in the console.

Link to comment
Share on other sites

Thanks!

I'll definately be using the console in chrome more. I had been using the dev tools for checking css stuff and selection, never noticed the console button...

 

Here's one I just ran into just recently though. I was adding auto complete on a search field for a db query and forgot the div symbol # in the dom selector on the js that loads the results back to the page. ie $('q_name_cont').autocomplete souce[] etc

 

I ripped apart the whole db query logic for 20 minutes trying to figure out what was going wrong, and in the end it was only because I forgot the # and everything else had been working fine...

 

I just loaded it back up and did it again intentionally to see if the console in chrome would log it, but it doesn't show up as an error or anything. I'm having little trouble with rails and sql but i keep getting gotcha'd on js.

Link to comment
Share on other sites

Ah that's a jQuery 'feature'. When you are aware of it though, you'll realise it's a super handy feature as it allows chaining to work naturally.

 

In your case the selector finds no elements with the tag 'q_name_cont' and returns an empty collection. Then, the next jQuery function would run on that empty collection (doing nothing) and then then next function etc until the chain ends. No errors are thrown because there isn't really any 'error' that has occurred. If it's important, you could counter this by using a pattern like:

var q_name_cont = $('q_name_cont');
if (q_name_cont.length > 0) {
    q_name_cont.autocomplete...
} else {
    // error
}

If jQuery threw an error just because the collection is empty, chaining would become a nightmare, because at any time you could reduce your collection to nil and all of a sudden the code would break. It's not like jQuery could determine if your selector is misspelled or just targeting elements that aren't on the page at the moment. e.g.

$('.some_class').find('.blue').removeClass('blue').addClass('red');
// collect all the elements with class .some_class, edit that collection
// to only those that are blue, then change them to red.

It's not a perfect example, but say you had a button to make everything that is blue, red; you could include just this line and it would always work, even if none of the elements were currently blue. If empty collections threw errors, then a second click would cause problems as the collection would be empty after .find('.blue').

 

Unfortunately that puts the onus on the developer to double check their selectors, but most would find it a small sacrifice considering the benefits that jQuery chaining offers. If it's a problem you can always use document.getElementById and a broken selector will return null.

  • Like 1
Link to comment
Share on other sites

Hi,

 

This is pretty much the way things are right now. I remember like it was yesterday, almost one year ago I was really happy because I was getting my hands on AS3, I was learning to create oop, preloaders, working with sound & video, 3D stuff and on top of that i had GSAP on my hands, then I read about the devices flash plugin situation and how that was going change everything. I didn't knew much about JS and I didn't knew anything about JQuery or any other JS library, the only thing I knew was that I didn't had a lot of time to learn them and get myself going because, at least in Chile this year the sales of devices would be bigger than laptops.

 

I still hate the fact that I have to create even 3 different codes sometimes (firefox and webkit, IE8 and IE7 and sometimes special codes for devices) but that's the way things are now, we're in an adapt or get behind type of race. Canvas and SVG are great and there's been huge advances, but there's a lot to be done yet, edge animate is a great thing, but just taking it first steps, so basically the main tool developers still have is pure code and that brings the issue you mentioned, spend long time looking for the problems, even the smallest ones.

 

But the good news after all that ominous and in some way discouraging text is that you're in a position where a lot of us have been, it's like when you're putting together a desktop for the first time, you put the pieces together but it doesn't work, until you find that something is not plugged, learning goes from the most incredible to the most obvious mistakes but once you made them you got some sort of immediate check list, so I bet you that the next time something doesn't work you're going to look for variable declarations and naming on your functions :mrgreen:

 

All is part of the growing pains of this stuff and my best advice is to encourage you to keep going with a positive look on what you're doing and to the things that are coming in our future because is going to be better every day, it's just impossible that it could be worst. And while we have guys like Jack and Carl on our side making our lives a little easier with this tools and resources you just got to know that we're going in the right direction.

 

Cheers,

Rodrigo.

  • Like 2
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.
×