8 Replies Latest reply on Aug 15, 2009 5:39 AM by RaceBox

    Stop an animation containing scrollboxes on mouse over

    RaceBox

      Hello.
      I am creating a sort of "information slideshow" for a clients website where a movie clip on the main stage acts as a slideshow and when not touched by the users mouse it fades through 3 stages giving information on 3 different subjects, then when the user places their mouse over the movie on the HTML page the animation stops to allow the user to use the scroll bar on the right of the movie to scroll through the information on the subject, then when the user is finished then can move the mouse away from the movie and it will continue to play through as it did before. i have the animation playing with the 3 seperate "states" and identical scroll-boxes for each state and im trying to think of a way to make the animation stop when the mouse is over it WITHOUT using a button, when a button is used on the top layer of the animation the scroll boxes are not useable as the button is on top of them, so i tried making a gap in the button to cater for them but then of course the mouse isnt over the button when the user goes for the scroll box and the "rollout" part of the script is activated and the movie continues to play.


      is there a way to make the animation stop prehaps when the mouse is over the "main automation" movie clip WITHOUT the use of a button, or what would be even better is when flash detects that the mouse is over the top of the actual .SWF itself it stops the movie.

      help on this would be MUCH appreciated.

      Thanks.

        • 1. Re: Stop an animation containing scrollboxes on mouse over
          JoshSquires Level 1

          I would use ExternalInterface CallBack and setup the javascript to make the call to the code within the movie to stop the animation on mouseover and to start it again on mouseout for example (very rough pseudo-code)

           

          HTML

           

          <script language="javascript" type="text/javascript">
          function callFlashPause()
          {
               var isIE = navigator.appName.indexOf("Microsoft") != -1;
               flashMoviePlayer = (isIE) ? window["flashMovie"] : document["flashMovie"];
               flashMoviePlayer.pauseMovie();
          }
          function callFlashStart()
          {
               var isIE = navigator.appName.indexOf("Microsoft") != -1;
               flashMoviePlayer = (isIE) ? window["flashMovie"] : document["flashMovie"];
               flashMoviePlayer.startMovie();
          }
          </script>
          <div onmouseover="callFlashPause" onmouseout="callFlashStart">[FLASHMOVIE OBJECT id="flashMovie"]</div>

           

          AS

           

          package {
               import flash.display.MovieClip;
               import flash.external.*;
               import flash.events.*;

           

               public class Main extends MovieClip
               {

           

                    public function Main()
                    {    
                         ExternalInterface.addCallback("pauseMovie", pauseMovie);
                         ExternalInterface.addCallback("startMovie", startMovie);
                    }

           

                    private function pauseMovie():void
                    {
                         movie.Stop();
                    }   

           

                    private function startMovie():void
                    {
                         movie.Play();
                    }   

           

               }
          }

          1 person found this helpful
          • 2. Re: Stop an animation containing scrollboxes on mouse over
            robdillon Most Valuable Participant

            You should be able to assign a MOUSE_OVER and MOUSE_OUT event to the movieClip itself. No need to create a button.

            • 3. Re: Stop an animation containing scrollboxes on mouse over
              RaceBox Level 1

              How would i go about doing this?

              I understand how to use a button to play and pause an animation but not a movie clip, with a button id use a script similar to this;

               

              on (rollOver) { stop() ;

              }

               

              on (rollOut) { play() ;

              }

               

              applied to a button covering the movie clip on the top layer of this clip and transparent in colour.

              HOWEVER.

               

              When it comes to a movie clip im not sure and i would go to use something like this;

               

              onClipEvent (mouseOver) { stop() ;

              }

               

              onClipEvent (mouseOut) { play() ;

              }

               

              this (probably quite obviously to you) does NOT work.

              Output gives me a "syntax error" report

               

              Could you please point me in the right direction with this as im very eager to learn.

              Thankyou.

              • 4. Re: Stop an animation containing scrollboxes on mouse over
                RaceBox Level 1

                This seems like a brilliant idea!

                 

                I have a few questions however;

                 

                where you have put "FLASHMOVIE OBJECT" do i insert my HTML flash object like this;

                 

                 

                <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="1024" height="120">
                      <param name="movie" value="Flash/menu.swf">
                      <param name="quality" value="high">
                      <PARAM NAME=wmode VALUE=transparent>
                      <embed src="Flash/menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" width="1024" height="120"></embed>
                    </object>

                 

                 

                And with this bit;

                 

                 

                  var isIE = navigator.appName.indexOf("Microsoft") != -1;
                     flashMoviePlayer = (isIE) ? window["flashMovie"] : document["flashMovie"];
                     flashMoviePlayer.pauseMovie();

                 

                Would the red bits be URL's to my swf file DIR?

                 

                Also would the ActionScript section go in the first frame of my movieClip which contains the initial "main automation" animation? or the first frame of the movie itself? Or even applied to the movieClip?

                 

                 

                Thanks : ]

                • 5. Re: Stop an animation containing scrollboxes on mouse over
                  JoshSquires Level 1

                  this.addEventListener(MouseEvent.MOUSE_OVER,StopMovie);
                  this.addEventListener(MouseEvent.MOUSE_OUT,PlayMovie);

                  function StopMovie(evt:MouseEvent):void
                  {
                      this.stop();
                  }

                  function PlayMovie(evt:MouseEvent):void
                  {
                      this.play();
                  }

                  • 6. Re: Stop an animation containing scrollboxes on mouse over
                    JoshSquires Level 1

                    The [FLASHMOVIE OBJECT id="flashMovie"] is exactly as you ascertained its the object code to render the FlashPlayer Element except that you have to include a ID tag like so.

                     

                    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0, 29,0" width="1024" height="120" ID="flashMovie">
                          <param name="movie" value="Flash/menu.swf">
                          <param name="quality" value="high">
                          <PARAM NAME=wmode VALUE=transparent>
                          <embed src="Flash/menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" width="1024" height="120"
                    ID="flashMovie"></embed>
                        </object>

                     

                    As for the ActionScript you can put it in the first frame of the movie but I put all my AS in a code behind file. To do this you set the stage class in the publish properties of the movie. Then create a new ActionScript file and save it with the same name as your movie in the same directory for example if you have a movie called Untitled.swf the ActionScript file should be called Untitled.AS.

                     

                    then just throw the AS code I gave you in that and everything should work. One of the many beauties of the Code Behind file is that if someone gaffles your SWF off your site it don't work without the hidden AS file which cannot be read off your site directly. (Unless a MIME was setup for some reason but there are always exceptions to any statement made.)

                    • 7. Re: Stop an animation containing scrollboxes on mouse over
                      RaceBox Level 1

                      Ok unfortunatley I dont think this solution is going to work, this is how things are at the moment:

                       

                      The HTML section is like so...

                       

                       

                            <!--This is where the INFO_SLIDE starts, starting with the JS first-->
                           
                            <script language="javascript" type="text/javascript">
                      function callFlashPause()
                      {
                           var isIE = navigator.appName.indexOf("Microsoft") != -1;
                           flashMoviePlayer = (isIE) ? window["flashMovie"] : document["flashMovie"];
                           flashMoviePlayer.pauseMovie();
                      }
                      function callFlashStart()
                      {
                           var isIE = navigator.appName.indexOf("Microsoft") != -1;
                           flashMoviePlayer = (isIE) ? window["flashMovie"] : document["flashMovie"];
                           flashMoviePlayer.startMovie();
                      }
                      </script>
                      <div onmouseover="callFlashPause" onmouseout="callFlashStart">

                       

                      <!--JS ENDS-->

                       


                      <!--EMBED STARTS-->


                      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="315" height="400" ID="flashMovie">
                        <param name="movie" value="Flash/info.swf">
                        <param name="quality" value="high">
                        <PARAM NAME=wmode VALUE=transparent>
                        <embed src="Flash/info.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" width="315" height="400" ID="flashMovie"></embed>
                      </object>
                      </div>

                       

                            <!--END ALL INFO_SLIDE SECTION-->

                       

                      The flash movie is set out with the main automation where it fades between the 3 stages as motion tweens on the main timeline with the action script in a behind file as you suggested with the swf called info.swf and the AS called info.as

                       

                      the action script i just copied directly from here without changing it.

                       

                      when i roll over the movie on the HTML page it doesnt stop, just goes on playing.

                       

                      Any other ideas you have would be great to hear, Thanks for your help.

                      • 8. Re: Stop an animation containing scrollboxes on mouse over
                        RaceBox Level 1

                        OK!! Problem solved, I think.

                         

                        I used this script, and applied it to a movie clip containing the main automation animation:

                         

                         

                        onClipEvent (enterFrame) {

                         

                            if (this.hitTest(_root._xmouse, _root._ymouse, true)) {

                         

                                this.stop()

                         

                            } else {

                         

                                this.play()

                         

                         

                         

                            }

                         

                        }

                         

                         

                        and as it is, it works.

                        Thanks for you help, if you want to see the finished version then visit www.bmracing.org in a few days, try on firday.

                         

                        you've been very helpful these last few days, so thanks.