3 Replies Latest reply on Jan 6, 2014 12:27 PM by sinious

    Need advice on making a simple Flash video file. Trying to accomplish two things.

    MikeB2342 Level 1

      I have some video files (.avi) that I am trying to convert to a Flash video format. I am trying to export it to a Flash player to go into a Powerpoint file. With this, I am trying to accomplish two goals:

      1. To have the short clip (15sec, 30fps) endlessly loop, like an animated .gif.

      2. To allow the user to click on the video player and drag left/right to ff/rew.

       

      The video itself is a turntable animation. One of our products is making a complete 360degree turn. By allowing the user to grab and drag, it will simulate them rotating the model.

       

      So far, I have already accomplished Goal 1. I made a new Actionscript 3 file, imported video (embed flv in swf and play in timeline), and then made the video loop on the timeline. This seems to export properly, and the video loops as needed. The only thing I can't figure out is how to make the video "interactive" and let the user drag left/right.

       

      For context, I have never used Flash before. Any help would be greatly appreciated.

        • 1. Re: Need advice on making a simple Flash video file. Trying to accomplish two things.
          sinious Most Valuable Participant

          This will come down to essentially moving the playhead of Flash based on the movement of the mouse. It's certainly not going to be smooth however, you'd need a timer to be responsible for moving your playhead and reversing spatial compression is very CPU intensive (moving backwards on the timeline). I'd recommend having a forward and backward version of the video so you could flip between them but if you're new to flash you're already in way above your head.

           

          Add a new layer and try adding this example script (or Download Source example here, saved to CS5):

           

          import flash.utils.Timer;

          import flash.events.TimerEvent;

          import flash.events.MouseEvent;

           

           

          // make sure we don't trip this frame twice

          if (!stage.hasEventListener(MouseEvent.MOUSE_DOWN))

          {

           

                    // stop playhead

                    stop();

           

                    // set state (forwards? backwards?)

                    var movingForward:Boolean = true;

                    var curFrame:int = 1;

                    var mouseStartX:int; // used later to determine drag

           

                    // detect mouse click and drag left or right

                    stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseF);

                    stage.addEventListener(MouseEvent.MOUSE_UP, onMouseF);

           

                    // create new timer to control playhead, start it

                    var phTimer:Timer = new Timer(33,0);

                    phTimer.addEventListener(TimerEvent.TIMER, movePlayheadF);

                    phTimer.start();

           

                    // function to control playhead

                    function movePlayheadF(e:TimerEvent):void

                    {

                              curFrame += movingForward ? 1 : -1;

           

                              // validate frame (60 total frames)

                              if (curFrame > this.totalFrames) curFrame = 2;

                              else if (curFrame < 1) curFrame = this.totalFrames;

           

                              // goto the next frame

                              this.gotoAndStop(curFrame);

                    }

           

                    // function that controls the direction variable

                    function onMouseF(e:MouseEvent):void

                    {

                              if (e.type == MouseEvent.MOUSE_DOWN)

                              {

                                        // user started touching, record start spot

                                        mouseStartX = int(stage.mouseX);

                              }

                              else if (e.type == MouseEvent.MOUSE_UP)

                              {

                                        // user let mouse go, determine direction change (swipe stype)

                                        if (stage.mouseX > mouseStartX)

                                        {

                                                  // swiped right, move forwards

                                                  movingForward = true;

                                                  trace('Moving forward now');

                                        }

                                        else if (stage.mouseX < mouseStartX)

                                        {

                                                  // swiped left, move backwards

                                                  movingForward = false;

                                                  trace('Moving backwards now');

                                        }

                              }

                    }

          }

           

          This is pretty simple. In the example source link above an object on the timeline (nice ugly red circle) moves right over 60 frames and then left over 60 frames (120 total). Consider that your movie.

           

          A timer ticks at a speed of 33ms (30fps). This is where it isn't necessarily going to be too smooth with video. If you increase it to 60FPS then decrease the timer by half (16.5ms), season to taste. Each time the timer goes off the playhead is moved, either forwards or backwards.

           

          To know if it should go forward or backwards a simple variable (movingForward) keeps track of the last 'swipe'. The swipe is simply captured when a user touches the screen (mouse/finger), moves in a direction and then lets up. If they moved to the left the direction will be reverse. If they moved to the right it will move forward. This doesn't take into consideration any more than that logic, but illustrates how you can watch the mouse for movement and "do something" based on it.

           

          A very simple validatior in the timer event function checks to see if the next frame (in either direction) is valid and if it's not, it corrects it so it stays within your videos timeline length.

           

          Note there is a MOUSE_MOVE event you can try to hook to which can be used to literally let the user drag the video forwards and backwards the amount they drag their finger/cursor. Also if this is some kind of circular surface like a record spinning, the direction the user moves the mouse based on where they touch the record would change which direction they expect it to move. Etc etc..

           

          That should get your feet wet in how much you need to consider for your project.

          • 2. Re: Need advice on making a simple Flash video file. Trying to accomplish two things.
            MikeB2342 Level 1

            Yeah, wow. You're very right about me being in way over my head. I didn't realize I would have to put in scripts/coding to make this happen. I was just hoping that there would be something I could click, or some kind of menu option.
            I don't even know where to add this stuff into a layer. I'm just going to try and think of another solution, this looks way too advanced for me.


            Thanks for your help though. I hope you didn't spend too much time writing that out.

            • 3. Re: Need advice on making a simple Flash video file. Trying to accomplish two things.
              sinious Most Valuable Participant

              That was the easy way too, hehe. Yes that is a potentially difficult thing to implement, especially being embedded and at the mercy of PowerPoint and any mouse interference it might add.

               

              You're welcome and good luck!

              1 person found this helpful