5 Replies Latest reply on Dec 18, 2012 11:56 AM by Jacksoneon

    Video App Design

    Jacksoneon Level 1

      I have artwork and design plans for a simple interactive app, that includes video. I know how to make the buttons and animations I need, but I'd like to add video. I've tried using a 100+ frame sprite sheet but it was hard to match the frames perfectly.

       

      It will be a simple app in which the user presses buttons to trigger the progression of the scene (video). Is it possible to create the app in Flash then import it into InDesign for DPS? Any other software that I could use?

      I have tried to use InDesign alone, but there is some limitation with transitions and triggering actions when videos are completed.

       

      Any help would greatly be appreciated.

       

      Thanks!

       

      Jackson

        • 1. Re: Video App Design
          elainecc Adobe Employee

          Hi, Jacksoneon-

           

          I'm unsure what you mean by "video," as it implies to me a video file format.  It seems like what you're looking for is an animation of some kind that takes advantage of your sprite sheet.  You could easily do that within Edge Animate by loading your spritesheet once and using masking.  You can even start/stop your playback through the timeline using buttons in the same composition.  Once you have it written in Animate, you can export an OAM file for import into InDesign 6 DPS.

           

          Hope this helps inform your decision.

           

          Thanks,

           

          -Elaine

          • 2. Re: Video App Design
            Jacksoneon Level 1

            Hi Elaine,

             

            Thanks for replying to my post. I have tried spritesheets in the past, but found it hard to align each frame, and do it in a timely manner (100+ frames). Do you know if there is a simple way to align spritesheets?

             

            Otherwise some others on the forum, TimJaramillo, John Dunning, have helped me get to a practical way of importing video into Edge to be used natively instead of streamed.

            For anyone else that may need this workflow, this is the direction I've gone.

             

            Encode your video file into a Quicktime file with a PNG Codec. Encoder/AfterEffects

            Import your .mov into Fireworks.

            Thanks to John Dunning there is a script you can run that will take your opened Fireworks animation and turn it into an Edge symbol. here: http://johndunning.com/fireworks/about/EdgeAnimate

            Next I import the symbol into edge and the video is annimated.

             

            Right now I have over 500+ PNGs in the composition and they run fine when I preview in browser. The .oam file right now is 13mb, but I anticipate going up to 100mb. Do you know if this size will work going through DPS, and run on the iPad?

            • 3. Re: Video App Design
              Dam4222 Level 1

              Hey Jacksoneon,

               

              I may not be totally understanding what you are trying to do but one thing that could make sense is to break your video into multiple clips. For instance, if you have a 100 frame video. Export a .mov or .mp4 frames 1-25 then export another one frames 25-50 and so on and so forth. Then you can use the <video> tag to call for the mp4 or mov on button click.

               

              I am not a developer so if this code is incorrect or sucks I am sorry... but in my tests it seems to work.

               

              //create a container called vContainer on your stage then in the actions panel of whatever button you have select Click. Then paste this code inside of it. Replace the source with the local path of your .mov or .mp4

               

              // insert code for mouse click here

              var myvid = $("<video/>");

              sym.$("vContainer").empty().append(myvid);

              myvid.attr('type','text/html');

              myvid.attr('width','600');

              myvid.attr('height','338');

              myvid.attr('src','media/BG1.mov');  // url/Video_Id

              myvid.attr('frameborder','0');       // 1 | 0

              myvid.attr('preload','auto'); 

              myvid.attr('autoplay','autoplay'); 

               

              Adam

              • 4. Re: Video App Design
                Dam4222 Level 1

                One other thing, you may see some blinking in between when you try to load each new video. I have yet to figure out a way to solve this so if anyone knows how it would be much appreciated.

                 

                Adam

                • 5. Re: Video App Design
                  Jacksoneon Level 1

                  Hi Adam,

                   

                  That would be great if you can play video from an .mov file in Edge. I haven't been able to try it yet, but I will when I can.

                   

                  Jackson