Import statements in html wrapper?

Report · Feb 28, 2017

Well, I'm still stalled here:

I resolved the 2 bugs in Stiller's Sound Sync demo (see link to his zip files below) that Colin pointed out earlier in this thread: https://forums.adobe.com/thread/2283273

...and have it working as an Animate CC project.

However, when I try to put that sound sync code, specifically this part:

import net.quip.sound.SoundSync;

import net.quip.sound.CuePointEvent;

...into the framescript of my Animate project, it crashes (blank page results when trying to test in browser).

Probably, that's because those import lines need to be put into the html wrapper, right?

So, I tried to put those lines into the template that my Animate project uses (inserting them at the end of my <head> section of my template) like this:

import net.quip.sound.SoundSync;

import net.quip.sound.CuePointEvent;

</script>

But when I put this:

var ss:SoundSync = new SoundSync();

...into my Animate's FLA framescript it still crashes upon test.

Any ideas what I'm doing wrong?

Thanks!

====================

Stiller's Sound Sync demo:

http://www.adobe.com/content/dotcom/en/devnet/actionscript/articles/cue_points_audio/_jcr_content/ar...

Report · Feb 28, 2017

You would normally not be testing with HTML at all. When you do a test movie it makes a swf. If you get that working you would later on maybe add it to a web page, and then the HTML is just a wrapper.

It's not like how HTML5 Canvas works, where having some of the code in the HTML is normal.

Report · Feb 28, 2017

Thanks Colin.

I guess I need some guidance.

I read in Animate help, that "To create all the files you need to put Animate content on the web, use the Publish command"

Also I'm using Greensock tweens in my Animate project and the GSAP framework tutorial recommends this:

"Unlike Flash content that was neatly wrapped up in a single .swf file, Adobe Animate CC needs to publish an HTML file that typically:

Loads external JavaScript libraries (CreateJS).
Creates the <canvas> where artwork will be rendered.
Contains JavaScript that initializes your project.
Loads custom JavaScript unique to your project (symbol definitions, animation code)."

(Creating GSAP Templates for Adobe Animate CC | GreenSock )

...So if I'm using Animate in that way, should I export as SWF?

If so, then should keep the:

import net.quip.sound.SoundSync;

import net.quip.sound.CuePointEvent;

...in the FLA's frame script?

Thanks

ps. My project includes complex animation that will ultimately be viewed as responsive web content.

Report · Feb 28, 2017

For testing you don't need to use Publish.

For Greensock you will need to use their AS3 libraries, and not their Javascript libraries.

GitHub - greensock/GreenSock-AS3: Public repository for GreenSock's ActionScript 3 libraries like GS...

Yes, keep the import lines in the frame script.

Report · Feb 28, 2017

Ok. It sounds like, because I'm using GSAP with Animate I need to use the GSAP AS3 libraries/ tweens. Makes sense.

I looked at the repository but I think I'm a bit over my head:

Can you please refer me to some learning resources or tutorials on using these AS3 tweens?

Thanks much!

Report · Feb 28, 2017

If you got to the page ok there should be a green "Clone or download" button on the right. Click that to download the files. The folder that you get will include an 'src' folder, and in that is a 'com' folder, then a 'greensock' folder.

If you already have a com folder in your project, copy the greensock folder into it.

If you don't have a com folder but do have a src folder, copy the com folder into your src folder.

If you don't have any of those, put the com folder next to your FLA.

After that any greensock AS3 code you're using should start to work.

Report · Mar 01, 2017

Thanks much Colin.

A couple remaining questions:

If I'm working on complex, interactive animations for the web (responsive), shouldn't I be using Animate to export a HTML5 canvas final product?
Why do I need AS3 GSAP tweens if my JS GSAP tweens worked in my project (when published via the html wrapper/ template method)? Is it because they won't work when exported as an SWF?

Report · Mar 01, 2017

You started all this with wanting to do sound cuepoints. That's AS3 only, so HTML5 Canvas wouldn't be an option.

Report · Mar 01, 2017

Right. I get it. Thank you.

So before rebuild my project in AS3:

Is there any reliable sound cue point method that works with HTML5 Canvas?

Report · Mar 01, 2017

Sound in HTML5 doesn't work so well at all. But for what it's worth, I would solve the whole problem without cuepoints, and that would work with HTML5.

Look at setTimeout(). With that you could call a function after a given amount of time. If instead of using cuepoints you just set up a bunch of setTimeout() calls at the time you start to play the sound, that would do everything, and would work in ordinary Javascript.

Report · Mar 01, 2017

will do. Thanks, Colin.

Adobe Community

Import statements in html wrapper?

1 Correct answer