Issues with Mouseover and Mouseout

[NJArtist]

Hi All, I am trying to transition an old animation over from flash into html5. It would start out as a bar on the side and when hovered over, it would side across the screen and display its content Once the person moved off the content, it would slide back into place. it worked just fine in flash but doesn't translate well in html5. I have been able to set up the mouseover and mouseout functions, but it activates the mouseout gotoandplay function while still hovering over the content. Is there a way that i can have it only activate the animation once the cursor is fully off the content?

below is the code i am using for both fucntions

Mouseover

this.stop();

var frequency = 1;

stage.enableMouseOver(frequency);

this.movieClip_1.addEventListener("mouseover", fl_MouseOverHandlerToGoToAndPlayFromFrame.bind(this));

function fl_MouseOverHandlerToGoToAndPlayFromFrame()

{

this.gotoAndPlay(2);

}

Mouseout

this.stop();

var frequency = 1;

stage.enableMouseOver(frequency);

this.movieClip_1.addEventListener("mouseout", fl_MouseOutHandlerToGoToAndPlayFromFrame.bind(this));

function fl_MouseOutHandlerToGoToAndPlayFromFrame()

{

this.gotoAndPlay(8);

}

thanks for any help provided

[ClayUUID]

Why are you enabling mouseover on the stage twice? Once it's enabled, it's enabled. And you're setting it to a polling rate of ONE time per second. That can't be good.

[RandomlyFish · Accepted solution]

Did you make sure to stop the animation when it's extended, using "this.stop();"?

This code worked for me:

// Frame 1:

var main = this;

var sidebar = main.movieClip_1;

main.stop();

stage.enableMouseOver();

sidebar.addEventListener("mouseover", SidebarShow);

sidebar.addEventListener("mouseout", SidebarHide);

function SidebarShow () {

     main.gotoAndPlay(1);

}

function SidebarHide() {

     main.gotoAndPlay(8);

}

// Frame 8:

this.stop();

[NJArtist]

First off thanks for your responses. I really appreciate it. Sadly While the basic function of RandomlyFish's code worked, it still continues to repeat the animations while hovering over the moved bar. My hope was that it would move in with a mouse over and move out once the mouse cleared the clip. Instead it just keeps repeating while you are still over the clip. Basically the cursor has to remain COMPLETELY still for it not to repeat the sequence

[ClayUUID]

Uh... the button isn't actually part of the sidebar, is it? Or entangled with it in any way?

[NJArtist]

they are basically one and the same, which is how i had it in flash and it worked just fine. The movie clip is essentially a slim bar with the title of that content, along with the actual content that is hidden off canvas. When you moused over the title, it would slide the entire bar out with its content and then retract when the mouse moved off the content.

[ClayUUID]

What you're describing suggests that the button is disappearing from underneath the mouse when it's rolled over. So fix your button so it isn't doing that.

[just.emma]

Can you share an example FLA file to help make it easier to troubleshoot?

[NJArtist]

I hope this helps

Its not the original flash file but a file i was trying to use to figure out the new coding.

https://files.fm/u/wsenrkfk

https://files.fm/u/wsenrkfk

[RandomlyFish]

The problem is that the symbol on frame 1 is not the same as the symbols on the rest of the frames. So if you click on the symbol on frame 1 and check the properties panel, you'll see that it's an instance of Symbol 1, with the instance name movieClip_1. But on Keyframe 2 it's an instance of Tween 1 and on Keyframe 7 and forward it's an instance of Tween 2. If you open the library panel, you'll see that you have each of those objects listed there.

You didn't actually create the symbols Tween 1 and 2, those where created by the program when you animated an object that was not converted to a symbol. So to fix this, you'll have to remove the rest of the animation, and make sure that you're only animating with the symbol.

[NJArtist]

That worked! Many thanks RandomlyFish and to all the others who offered help

[NJArtist]

sorry to be a pain but i had one follow up question. How would i go about doing this for multiple sidebars in the same animation? Say if i wanted sort of like an accordion effect on the side?

[RandomlyFish]

I'm not sure what you mean, do you want to make it so that you open one sidebar, and then get the option to open another?

[NJArtist]

Below is an image of what i'm referring to. I wanted to have all the tabs on the side pull out there own info much like the first one you helped with.

https://files.fm/u/znr9czy9

[just.emma]

I feel like it would make the most sense just to do that with pure HTML/CSS.

You could use http://accordionslider.com/ to generate the code.  (Note: this would not work in Animate, because Animate uses canvas, not CSS.)

[NJArtist]

there is a sequence of things that happens before that final version in the image so a simple html accordion wouldn't work unfortunately.

[RandomlyFish]

Here you go, this should work as long as you add the windows in the right order:

stage.enableMouseOver(); // Enabling mouse events on the stage
var windows = []; // Array for storing each window
var windowsStartX = []; // Array for storing start positions for each window
var slideDistance = 800; // The distance that the window slides out
var slideTimeOut = 0.3; // The time it takes for the window to slide out
var slideTimeIn = 0.8; // The time it takes for the window to slide back in
// Adding each window, starting from the one closest to the side and is also the one covering all the other windows
AddWindow(this.Gray); // Instance name: Gray
AddWindow(this.GrayDark); // Instance name: GrayDark
AddWindow(this.Blue); // Instance name: Blue
// Function for adding a window
function AddWindow (_window) {
     var index = windows.length;
     windows[index] = _window; // Stores the window
     windowsStartX[index] = _window.x; // Stores the start position of the window
     var over = function () {
          // Moves each window that was added after the selected window
          for (var i = index; i < windows.length; i += 1) {
               createjs.Tween.get(windows, {override:true}).to({x:windowsStartX + slideDistance}, 1000 * slideTimeOut, createjs.Ease.quadOut);
          }
     }
     var out = function () {
          // Moves each window that was added after the selected window
          for (var i = index; i < windows.length; i += 1) {
               createjs.Tween.get(windows, {override:true}).to({x:windowsStartX}, 1000 * slideTimeIn, createjs.Ease.quadOut);
          }
     }
     // Add mouse over and out event listeners to the window
     _window.addEventListener("mouseover", over);
     _window.addEventListener("mouseout", out);
}

[NJArtist]

works like a charm! thanks