5 Replies Latest reply on Aug 5, 2013 12:05 PM by elainecc

    Load and Control Extrenal HTML within Edge?


      To preface things, I'm primarily a Flash animator - I can work my way around Action Script, but since swf files are on the outs, I have started messing with Edge Animate and HTML5 in general...


      Let's say I want to use Edge to let users control an animated character. Now, in Flash, I'd just create a nested timeline of  - we'll call him McFlashy - like this:


      • frames 1-50 is a "waiting" period, meant to loop while waiting for users to push a button;
      • frames 50 - 100 McFlashy jumps then returns to frame 1;
      • frames 100- 200 McFlashy waves and says "Hello! The SWF is dead!" and returns to frame 1;


      Then I'd simply place buttons (ie JUMP_btn and SPEAK_btn) on the stage with "gotoandPlay.McFlashy_mc("jump") functionality. Pretty simple stuff. Now I want to recreate this in Edge Animate...


      I used CreateJS to export the animation as an HTML file (McFlashy.html). What's the next step?


      • How do I tell Edge to load the McFlashy.html inside the main file created by Edge?
      • Can I control WHERE the McFlashy.html appears on the stage?
      • How can I have the Edge buttons control the McFlashy.html file like I mentioned earlier?
      • Is there a better way to do this than what I'm trying?
        • Let's assume I have to use Edge.
        • I know importing a PNG sequence or even Sprite sheet into Edge might be better, but unltimately, I will need to control long and complicated animations that have audio like this, so PNGs and Sprites aren't the best option (I assume)


      Thanks SOOOO much for anyone who takes the time - I'm feeling pretty lost here

        • 1. Re: Load and Control Extrenal HTML within Edge?
          elainecc Adobe Employee

          Hi, FuzzyDrawings-


          First off, welcome!


          A couple of things to note here.

          • CreateJS exports into the HTML canvas tag, which Animate does not interact with.  Animate is going to be useful if you want to natively recreate your animations.
          • You can control where McFlashy.html appears on the stage
          • Regarding interactivity, you should probably look at the "Extend" lesson in the application (when you first launch Animate, click on "Getting Started" and then "Extend").  You can definitely do timeline animation using Animate, but the biggest thing you'll have to remember is that you're not working in keyframes, you're working in milliseconds


          I would suggest playing first with Animate and then thinking about what you want to accomplish with your animation.  The approach may be significantly different than what you're used to in Flash.


          Hope that points you in the right direction!



          • 2. Re: Load and Control Extrenal HTML within Edge?
            FuzzyDrawings Level 1

            Thanks for replying!


            Would you mind clarifying one of your comments?


            You said that I could control where McFlashy.html appears on stage, but that Animate does not interact with CreateJS exports (which in this instance would mean McFlashy.html)...if the two are incapable of interacting with eachother, how can Animate tell where to load McFlashy? (or are you simply saying that it can be done, but just not in Animate?)


            Like I mentioned before, I'm an animator, not a web developer (so apologies for asking any "duh" questions! ). The issue I have with creating the animations natively in Edge is that my work involves complex, character-driven animation with detailed movement and a mix of traditional and symbol-based techniques. From what I've seen and played with, Edge Animate is not advanced nearly enough for anything other than simple animations (I'm sure users more adept with Edge's methods can create better animations, but not being frame-based, you loose a lot of the feel associated with frame-based animation). And since Edge (and everyother HTML5 app it seems) is unable to import audio, that even further hurts character animators ability to use the program. In short, I need to use Flash, Toonboom, etc to create these animations.


            Thanks again for replying. I'll look into the Extend lesson you mentioned.

            • 3. Re: Load and Control Extrenal HTML within Edge?
              elainecc Adobe Employee

              Hi, FuzzyDrawings-


              Sure, I can clarify - what I meant to say by it can't interact with it was that you can't import a canvas-based object into Animate and expect to drag objects within the tag around on the Animate stage and continue to animate in that manner.  However, if you have a project with a canvas tag and you already know that you can start and stop the animations from external HTML, you can certainly use Animate to do so.


              Hope that clarifies things.



              • 4. Re: Load and Control Extrenal HTML within Edge?
                FuzzyDrawings Level 1

                Oh, i get ya. Yeah, I wasn't expecting to be able to litteraly import McFlashy.html into Edge as if it were a jpeg or something. I guess I was figuring that within the Edge Aniamte stage, I could place a dummy element that would - when viewed in a browser - load/be replaced by McFlashy.html. Then the buttons that were created natively within Edge would control how and when McFlashy.html plays. How to create an element and code it so that the element is be replaced with an extrenal html file (McFlashy) is what I am trying to figure out.

                • 5. Re: Load and Control Extrenal HTML within Edge?
                  elainecc Adobe Employee

                  Yes, that should be supported.