Adding a Video to Edge Animate CC

Is there a way to add a video to Edge Animate? I like to export it as a HTML5 file.
Thanks,
joe

the easiest way is with the edgeHero plugin. See at edgeHero.com

Similar Messages

  • How do I stream video in edge animate?

    I am a Flash Pro convert, which means I know action script, but not html, html5 or js. I found a training video that talks about embedding youtube video through the use of a container and creationComplete coding. However, I would prefer not using embeded youtube video (since I think it still requires flash player). I also was unable to even make the youtube embeding work.
    I downloaded a html5 player/converter thinking I could convert the video to html5 video and drop the associated code into my composition. But unfortunately, I don't know if this is possible or where I might "drop" the code in. I've searched for several hours for a solution to this problem and have found very little information related to my issue.
    Any help on this would be greatly appreciated. I'm willing to put in the work to find answers and learn, but at this point I suspect I may not know the right questions to ask.
    Thanks in advance.
    bevans9908

    Moved to the Edge Animate forum. They will be able to help you here.

  • The best way to import video in Edge Animate project?

    What is the best way to add video and audio in Edge ANimate project?
    Thanks
    Ares

    Hi,
    Can you check out the answers on this forum thread, and let us know if it helped you?
    Can I import video into Edge? (http://forums.adobe.com/message/4352262)
    Thanks,
    Preran

  • Problem uploading video to edge animate

    I am trying to add a video to my Edge Animate project, but every time I complete the process, it doesn't show up in the library.  Here is the process I follow:
    1. In the library panel, I click the + sign next to the video tab
    2. The browse dialog box pops up and I find the video and double click it to add it to the Edge Animate library
    3. Edge Animate pauses for a second, then appears to be ready to continue, but the video never shows up in the library
    The movie was created in Premiere Pro. I exported it as an H.264 high def movie. The file is 760 MB.  The title of the movie is Yellowstone.mp4.
    I am able to upload other movies which are the same H.264 codec with the .mp4 extension.
    Is there a size limit on video files for Edge Animate?

    When you add any Video to the animate project, the video gets copied from the location you selected to the Edge composition folder.
    As your video is very large-sized, it takes quite a time to copy it. And if copying fails internally, then it won't show in the library.
    Workaround:
         First save the composition somewhere.
         And then manually, copy all such large-sized videos to the composition's media folder.
         Then automatically it will show under Vidoe Library.
    hth,
    Vivekuma

  • Adding own javascript to edge animate

    I'm having a bit of trouble adding my own javascipt to an edge animate project. I created a website that has javascipt in it. I am trying to recreate it using edge animate because I was interested in using edge animate to take the site up a notch... basically I have a template of what I need the site to do with the existing javascipt I have, but I haven't gotten it to work integrated into edge animated yet.
    I imported all of the images I have from the existing website into edge animate and then relabled all of the instances on the stage to reflect what I have called them in the javascript. I've tried importing my javascript file into the "scripts" section and then just linking to the source in the main html page that edge generates but the javascript doesn't work. Then I've tried putting parts of the script into the CompositionReady panel and onto the button I want clicked directly in the elements.... this works ok, except I have to change the syntax a little (not too much of a pain except when I don't think the edge animate javascript has the same functions).....I'll post below and see if someone can help me get this working either by just linking to the file directly from the html or making the script campatable in edge syntax and posting it in the appropriate element panel. Here is the seperate script from the outside javascript... show I change the syntax and put it directly on the"checkbutton" button in the elements (if so, how?) or should I just link to the file (if so, how come when I put a simple link in the header that it doesn't work: <script type="text/javascript" charset="utf-8" src="js/myscript.js"></script>
    script from myscript.js:
    //sym.$("pic1a").hide(); //edge animate syntax when in animate panels.... does my external js sheet have to keep this syntax?
    var carArrayX = [140,140,330,460,650,765];
    var carArrayXcounter = 0;
    var carArrayY = [ 440,440,405,390,390,390];
    var carArrayYcounter = 0;
    $( '#blueCar' ).addClass( "hidden" );
    var counterBox = 0;
        $('#checkButton').click(function(){
         if (counterBox == 0)
             alert("Please choose an answer");
         else if (counterBox > 1)
             alert("Please choose only one answer");
         else if (counterBox == 1)
             $(this).css('background-image', 'url(button_down.png)');
             $("#pic2a").unbind("click");
             $("#pic2b").unbind("click");
             $("#pic2c").unbind("click");
             $("#pic2d").unbind("click");
             $("#pic2e").unbind("click");
             $("#pic2f").unbind("click");
               if($("#pic2a").hasClass("hidden")){
               $("#words_correct").removeClass("hidden");          
               $( '#pic3a' ).removeClass( "hidden" ); //correct answer
               $( '#pic1a' ).addClass( "hidden" );
               $( '#blueCar' ).removeClass( "hidden" );
               $('#blueCar').animate({
                left:carArrayX[carArrayXcounter] + "px",
                top:carArrayY[carArrayYcounter] + "px"
               carArrayXcounter ++;
               carArrayYcounter ++;
               var cookieXcounter = carArrayXcounter;
               var cookieYcounter = carArrayYcounter;
               //console.log(cookieXcounter);
               //console.log(cookieYcounter);
               $.cookie('mycookieX',cookieXcounter,{expires:7,path:'/'});
               $.cookie('mycookieY',cookieYcounter,{expires:7,path:'/'});
               console.log($.cookie('mycookieX'));
               $( '#pic1b' ).addClass( "hidden" );
               $( '#pic1c' ).addClass( "hidden" );
               $( '#pic1d' ).addClass( "hidden" );
              else if($("#pic2b").hasClass("hidden")){
               $("#words_wrong").removeClass("hidden");
               $( '#pic4b' ).removeClass("hidden");//incorrect answer
               $( '#pic1b' ).addClass( "hidden" );
               $( '#pic1a' ).addClass( "hidden" );
               $( '#pic1c' ).addClass( "hidden" );
               $( '#pic1d' ).addClass( "hidden" );;
              else if($("#pic2c").hasClass("hidden")){
               $("#words_wrong").removeClass("hidden");          
               $( '#pic4c' ).removeClass( "hidden" );//incorrect answer
               $( '#pic1c' ).addClass( "hidden" );
               $( '#pic1a' ).addClass( "hidden" );
               $( '#pic1b' ).addClass( "hidden" );
               $( '#pic1d' ).addClass( "hidden" );;
              else if($("#pic2d").hasClass("hidden")){
               $("#words_wrong").removeClass("hidden");        
               $( '#pic4d' ).removeClass( "hidden" );//incorrect answer
               $( '#pic1d' ).addClass( "hidden" );
               $( '#pic1a' ).addClass( "hidden" );
               $( '#pic1b' ).addClass( "hidden" );
               $( '#pic1c' ).addClass( "hidden" );;
        $('#pic2a').click(function(){
          $( '#pic1a' ).removeClass( "hidden" );
          $( '#pic2a' ).addClass( "hidden" );
          counterBox++;
        $('#pic2b').click(function(){
          $( '#pic1b' ).removeClass( "hidden" );
          $( '#pic2b' ).addClass( "hidden" );
          counterBox++;
        $('#pic2c').click(function(){
          $( '#pic1c' ).removeClass( "hidden" );
          $( '#pic2c' ).addClass( "hidden" );
          counterBox++;
        $('#pic2d').click(function(){
          $( '#pic1d' ).removeClass( "hidden" );
          $( '#pic2d' ).addClass( "hidden" );
          counterBox++;
        $('#pic2e').click(function(){
          $( '#pic1e' ).removeClass( "hidden" );
          $( '#pic2e' ).addClass( "hidden" );
          counterBox++;
        $('#pic2f').click(function(){
          $( '#pic1f' ).removeClass( "hidden" );
          $( '#pic2f' ).addClass( "hidden" );
          counterBox++;
        $('#pic1a').click(function(){
          $( '#pic2a' ).removeClass( "hidden" );
          $( '#pic1a' ).addClass( "hidden" );
          counterBox--;
        $('#pic1b').click(function(){
          $( '#pic2b' ).removeClass( "hidden" );
          $( '#pic1b' ).addClass( "hidden" );
          counterBox--;
        $('#pic1c').click(function(){
          $( '#pic2c' ).removeClass( "hidden" );
          $( '#pic1c' ).addClass( "hidden" );
          counterBox--;
        $('#pic1d').click(function(){
          $( '#pic2d' ).removeClass( "hidden" );
          $( '#pic1d' ).addClass( "hidden" );
          counterBox--;
        $('#pic1e').click(function(){
          $( '#pic2e' ).removeClass( "hidden" );
          $( '#pic1e' ).addClass( "hidden" ); 
          counterBox--;
        $('#pic1f').click(function(){
          $( '#pic2f' ).removeClass( "hidden" );
          $( '#pic1f' ).addClass( "hidden" );
          counterBox--;

    I also had the problem of wanting to use custom javascript that I could call from an Edge Animate Composition.
    The solution I found (from a post by hemanth kumar r https://forums.adobe.com/thread/1479495) was to make variables and functions properties of AdobeEdge.
    So in the external .js document a variable is declared and given a value:
    AdobeEdge.myVariableName = "The variable value";
    To use it in a symbol/element:
    alert(AdobeEdge.myVariableName);
    And a function is declared:
    AdobeEdge.myFunctionName(param){...function code...} //param optional
    To call these in a symbol/element:
    AdobeEdge.myFunctionName(param);
    To test this out I created a button on my stage that called a function in my custom .js file that simply called an alert. Once the function works you can expand it to do anything you want (I used it to go to a new html page).
    Peter Small

  • DW not picking up html audio/video from Edge Animate

    Just inserted Edge Animate compostion in Dreamweaver. The native animation and buttons work fine in DW. So when button is clicked, it transforms, but it should also play a sound. The sound plays fine in Animate, but not playing in DW. Same with the video link. I inserted copies of those media elements in the same folder hoping it would fix the link, but that didn't work.
    Do I need to re-wire those links somewhere? What am I missing?

    thank you for sharing this method, Nancy.
    There is actually a much easier way for both audio and video. Just use the actions and an html tag.
    Here is how it goes:
    choose element
    add action (let's say, click...)
    insert "get element" from right column list.
    modify your code so it would look something like this ...
    var chooseName = sym.$("AnyElementName");
    chooseName.html('<video width="100%" height="100%" controls="controls"> <source src="source/source.mp4" type="video/mp4" poster="source/source.jpg"> <source src="source/source.ogg" type="video/ogg"> Yikes! can't play this video? Check it out on youtube + URL. </video>');
    and close the actions window.
    Same for audio.
    You should be good to go. 
    YOU MUST:
    * make sure to NOT hit enter in the middle of your html tag. Keep it all intact. It will get super long once you add all the media files, but that's fine as long is it is not "broken"
    * once you publish your file, copy your media to the edgeanimate_assets folder...see below for instructions.
    good luck!

  • Video in edge animate

    Can I import a video into animate and then add some animations over it on the timeline?  We are trying to achieve a "gif" like effect with some repeating video and simple animations included...is this possible with animate?

    http://www.animatedhtml.com/browserdetection/browserdetection-9.html
    I used EdgeHero to import a background video and also to do the 3d rotating square/cube at the bottom of the screen. I am sure that there are much better examples out there but this is one. If I can do it, so can you.
    I was thinking about posting the files & a message explaining how to do this under a newby/If I can do it, so can you message as an example of what someone with no coding experience can do & how to do it.
    Good luck
    Bob

  • Is it possible to make a video preview and export it from edge animate?

    is it possible to make a video preview and export it from edge animate?

    Hi Johan,
    If you are looking to export video through Edge Animate.
    Well, there is no direct way to do it but you could use a screen recorder to make an mp4. Then you can import the mp4 in PS and if you have the plugin for gif then you just save aa a gif.
    Regards,
    Devendra

  • Edge animate crashes once video imported

    hi
    I'm trying to import a video into edge timeline. It imports fine and works exactly how i want on the timeline, but if i close and reopen the file edge immediately crashes, its only when i add video that this happens.
    can anyone help?
    Emily

    Hi,
    Thanks for getting back to me.
    As mentioned before, I know how to resize the video – the problem was that once it comes in incorrectly, the visible aspect ratio (black area) cannot be changed.  To help clarify, here’s a summary of exactly what happens:
    When I import the video, no matter what size or aspect ratio it actually is, it comes in at 320x45 – but the black image area is 90x45 (a 2:1 aspect ratio).  See attached image.
    When I resize the video to the correct frame size, the grab handles extend to the proper size, but the black image area remains at the 2:1 aspect ratio.  See the image in this discussion provided on October 2, showing a 720x405 video with the black area still at 2:1 (720x360).
    Since I didn’t hear back from you, I did some additional testing.  Even though the black area indicates an incorrect aspect ratio, if the video is resized to the proper frame size, it plays properly – filling the entire frame represented by the grab handles. So, the bug doesn’t affect how the video plays when previewing the project in a browser, it only affects how it appears when working with it in Edge Animate.
    At this point, I’ll consider the issue closed since I’ve discovered I can work around it.  I hope the info in this discussion can assist anyone else who encounters this issue.  However, I would appreciate your team looking into why video comes in at an incorrect size, and why the black image area appears incorrectly.  This makes it difficult to line things up when working with the video in Edge Animate.
    Thanks again for your attention to this issue and for your assistance.
    Regards,
    - Joel

  • Lesson for Adobe Edge Animate

    Hello Everyone.
    OK. Have been doing Edge Lesson's for quite nearly a year now, and wanted to share them with the community.
    If you have any request or questions, please feel free to post them to the video links below, or in here, and I will
    Try my best to assist you any way that I can.
    Edge Animate has really come a long ways, and with the new CC, it has taken on a life of its own.
    Look forward to what the future may bring with this awesome Adobe program release.
    Wayne Barron
    Dark Effects Production
    Adding sound to Mouseover event in Adobe Edge Animate 
    3:42 
    1 
    Adobe Edge Animate - Add Sound in Mouseover Event
    by darkeffectstv 1,987 viewsIn this video, we will learn how to add sound to a buttons Mouseover event in Adobe Edge Animate.…
    Learning how to add sound to Adobe Edge Animate 
    7:08 
    2 
    Adobe Edge Animate Adding Sound to Project
    by darkeffectstv 5,031 viewsAdobe Edge Animate Adding Sound to Project…
    Remake, as the cursor was not in the last videos. 
    4:10 
    3 
    Adobe Edge Animate - Mirror Text Effects with Wipe On Text (Lesson 3) (Remake)
    by darkeffectstv 447 viewsRemake with "Cursor" this time…
    Remake, with Cursor 
    3:49 
    4 
    Adobe Edge Animate - Load Background Image (Lesson 3) (remake)
    by darkeffectstv 1,050 viewsremake with Cursor, as Cursor was not int he original one.…
    2:00 
    5 
    Adobe Edge Animate Starting Symbol at certain location
    by darkeffectstv 245 viewsIn this quick tip.
    We are going to stop a symbol from playing.…
    6:53 
    6 
    Adobe Edge Animate Animate Logo to show and hide words
    by darkeffectstv 418 viewsIn this lesson, we are going to learn how to take an Image (Like a LOGO for a company) and animate it on the screen, and show and hide words.…
    5:44 
    7 
    Adobe Edge Animate Publish Files and JS Folder
    by darkeffectstv 758 viewsIn this lesson, we will guide you through the ins and outs of publishing your site from Adobe Edge Animate, to a web server.…
    6:19 
    8 
    Adobe Edge Animate Create a Pen and write a Line
    by darkeffectstv 527 viewsIn this lesson, we are going to create a Pen, then write 2 lines.
    This can be used in so many different projects, that it is endless.…
    2:34 
    9 
    Adobe Edge Animate Rollover Button
    by darkeffectstv 2,195 viewsIn this lesson, I will show you how to code a Rollover Button.
    This is a very simple and easy way to create a Rollover Button, with very little effort.…
    4:06 
    10 
    Adobe Edge Animate show Grid to fine tune your Animation
    by darkeffectstv 77 viewsHave a lot of Animation in your project?
    In this lesson, we are going to show you how to fine tune your animation down to the 30th of a second…
    16:49 
    11 
    Adobe Edge Animate Create a Menu
    by darkeffectstv 4,993 viewsIn this lesson, we are going to be creating an animated interactive menu, that is sure to grab your users attention.…
    12:30 
    12 
    Adobe Edge Animate Menu Slide Down
    by darkeffectstv 1,175 viewsIn this lesson, we are going to showing you how to create a Sliding Down Menu.
    This was really big a few years ago, a lot of sites had these types of menus…
    9:45 
    13 
    Adobe Edge Animate Menu Slide In from Left
    by darkeffectstv 358 viewsIn this lesson, we are going to be creating a cool little menu that will slide in from the left.
    I have never seen one like this before, and thought that I would create one, to see if it would work good,…
    4:29 
    14 
    Adobe Edge Animate Pin and Timeline Indicator
    by darkeffectstv 153 viewsIn this lesson, we are going to go over some basics on how to use the Pin and the timeline indicator. This will come in handy, if you have a big project and you wonder what happened, if something messes up …
    16:43 
    15 
    Adobe Edge Animate Menu Button Header Footer
    by darkeffectstv 905 viewsIn this lesson, we are going to be creating a Menu Button, with a Header and Footer.
    This is a cool looking button, that will come in handy for some sites.…
    12:56 
    16 
    Adobe Edge Animate - Shot Bullet from Gun and hit Wall
    by darkeffectstv 110 viewsIn this lesson, we are going to be creating a gun, a bullet, a wall.
    We are then going to shot the bullet, out of the gun, and destroy the wall.…
    7:44 
    17 
    Adobe Edge Animate Menu Rollover Buttons
    by darkeffectstv 1,047 viewsIn this lesson we are going to create some Rollover Menu Buttons.…
    4:11 
    18 
    Adobe Edge Animate - Animate Ball Bounce Squish
    by darkeffectstv 172 viewsIn this lesson, we are going to animate a ball, of which is going to bounce on the floor, and once it makes contact with the floor, it is going to squish down, just like a real ball will do.…
    6:16 
    19 
    Adobe Edge Animate - Change Text when Button is clicked
    by darkeffectstv 353 viewsIn this lesson, we are going to learn how to change the text of Textfield, when a button is clicked.
    reusing the same Text Element over and over again, keeps the project clean and tidy.…
    4:02 
    20 
    Adobe Edge Animate - Space Demonstration (Lesson coming soon!)
    by darkeffectstv 49 viewsThis is a demonstration of a project that I have been working on for the last few days. This will be turned into a lesson, that will be available within the next week or so…
    21:37 
    21 
    Adobe Edge Animate - Lesson 1 Space Project
    by darkeffectstv 87 viewsAdobe Edge Animate space project, showing how to rotate elements around a centered element. Also, how to reuse the same text element over again…
    9:32 
    22 
    Adobe Edge Animate - lesson 2 Display Planet Information using single text element
    by darkeffectstv 61 viewsview lesson #1 first:
    http://youtu.be/16GOY1QOD_…
    1:39 
    23 
    Adobe Edge Animate - Open Link
    by darkeffectstv 227 viewsIn this quick how to lesson.
    We are going to create a link on Adobe Edge Animate.…
    2:31 
    24 
    Adobe Edge Animate - Add Sound in MouseOut Event Part II
    by darkeffectstv 192 viewsThis is a follow up to a previous lesson.
    Please view the following lesson to catch up to what this is all about…
    1:28 
    25

    Here are 2 video using "Edge Hero"
    Adobe Edge Animate - Edge Hero Lesson 1 - 3d Objects
    by darkeffectstv 107 viewsIn this lesson, we are going to be working with a new plugin for Edge Animate called
    Edge Hero…
    6:55 
    2 
    Adobe Edge Animate CC Lesson #2 - Loading Video with Edge Hero
    by darkeffectstv 40 viewsIn this lesson, we are going to load some video into our edge project using Edge Her…
    And this is the latest video for Edge Animate CC
    Adobe Edge Animate CC - Lesson #3 - Animate ball bouncing on boxes and changing colors
    http://youtu.be/MxxpQspBpcw

  • Placing Edge Animate in Muse trouble

    I made a short html video in Edge Animate just like the Tom Green tutorial and it works perfectly when testing it from Edge but when I place the .oam file in Muse I just get a gray box. What am I doing wrong?
    Thank you.

    This feature has been introduced in Muse 2.0. Please upgrade your Muse. Watch this video to see how to insert edge animate projects in Muse
    http://tv.adobe.com/watch/cs6-creative-cloud-feature-tour-for-design/adobe-muse-new-featur es-overview/

  • Edge Animate with Fancybox?

    Hi:
    I can't seem to get Edge Animate and Fancybox to work happily together. Please see:
    http://www.mercerhrs.com/marcomm_world/test/testfancybos.html

    Here is an old thread that may be of assitance.
    http://forums.adobe.com/message/4761205#4761205
    Also, here is a tutorial and sample file to follow that should get you there: http://businessanywhere.biz/blog/2013/03/adding-a-lightbox-to-edge-animate/
    Darrell

  • Light box Edge Animate 2014.1.1

    I'm not very well versed in the code please give the finished work proet version Edge Animate 2014.1.1. I need to open photos in the ie light box

    Does this help?
    Adding a Lightbox to Edge Animate - YouTube

  • Fancybox iframe in Edge Animate - Not showing correct height and width

    Hi All,
    Can someone please provide advice or a solution to this issue.
    I have been trying to use the Fancybox.js in Edge Animate to call an iframe (as a lightbox pop up).
    However when I try this it doesn't show the correct height and width properties - even though I am setting them.
    When I test this on my hard drive it works fine in Chrome and Firefox. However when tried online on a test server I get a slim pop up that hasn't set the height properly.
    Could this be because the iframe is pre-loading the composition/html page first before setting the size??
    Please help
    CODE USED:
    $.fancybox.open(
    type: 'iframe',
    autoScale : 'false',
    height: '600',
    widht: '600',
    href : 'website composition link.html',
    padding : 0
    Other references: http://businessanywhere.biz/blog/2013/03/adding-a-lightbox-to-edge-animate/
    Cheers,
    Jason

    HI Darmendra,
    Thank you for your reply to this.
    I worked out what the problem was - my external composition that was created Edge Animate was centred both horizontally and vertically.
    This was created the problem. When I took this off the fancy box worked well.
    Cheers,
    Jason

  • Edge Animate & Vimeo... Almost...

    Hi, I'm trying to control a vimeo video using Edge Animate, but I'm having no luck. Does anybody see where I may have gone wrong??
    var becky = $("<iframe/>");
    sym.$("vidCon").append(becky);
    becky.attr('type','text/html');
    becky.attr('width','100%');
    becky.attr('height','100%');
    becky.attr('src','http://player.vimeo.com/video/86529767?api=1&player_id=becky');  // url/Video_Id
    becky.attr('frameborder','1');       // 1 | 0
    becky.attr('allowfullscreen','0');   // 1 | 0
    var iframe = document.getElementById('becky');
    // $f == Froogaloop
    var player = $f(iframe);
    var playButton = document.getElementById("test");
    playButton.addEventListener("click", function() {
      player.api("play");

    Hi, I want to do the same thing you want to. Did you solve your problem ? What I can think of right know is to create a image gallery, wich image is a button that sends me faraway on the timeline (with a label) and there my video would be. I just dont know how to make it go back in the timeline when the video finish reading.... I am not sure that sounds logical ....

Maybe you are looking for