MOUSE OVER, ANIMATE

Report · Nov 24, 2016

Hi guys,

I am a student and I am trying to show a movie clip when the mouse reaches my invisible button (on my second frame).

Well, it's not working at all.

And also, every time I put an EventListener, my button on the first frame stop working.

// FRAME 2:

this.stop();

var KEYCODE_LEF = 37;

var KEYCODE_RIGH = 39;

this.whisky1.visible = false;

this.b1.addEventListener("mouseover",onOver.bind(this));

this.b1.addEventListener("mouseout",onOut.bind(this));

function onOver(){

this.whisky1.visible = true;

this.b1.removeAllEventListeners();

}

function onOut(){

this.whisky1.visible = false;

this.b1.removeAllEventListeners();

}

document.onkeydown = handleKeyDown.bind(this);

function handleKeyDown(e) {

if (!e) {

var e = window.event;

}

switch (e.keyCode) {

case KEYCODE_LEF:

console.log("left");

this.bagsyMalone1.x -= 25;

if (this.bagsyMalone1.x <= 60){

this.gotoAndStop(2);

}

return false;

case KEYCODE_RIGH:

console.log("right");

this.bagsyMalone1.x += 25;

if (this.bagsyMalone1.x >= 450){

this.gotoAndStop(3);

}

return false;

}

// FRAME I:

this.stop();

this.justPlay1.addEventListener("click", gotoNextFrameAndStop.bind(this));

var KEYCODE_LEFT = 37;

var KEYCODE_RIGHT = 39;

document.onkeydown = handleKeyDown.bind(this);

function handleKeyDown(e) {

if (!e) {

var e = window.event;

}

switch (e.keyCode) {

case KEYCODE_LEFT:

console.log("left");

if (this.bagsyMalone1.x >= 60){

this.bagsyMalone1.x -= 10;

return false;

}

case KEYCODE_RIGHT:

console.log("right");

if (this.bagsyMalone1.x <= 450){

this.bagsyMalone1.x += 10;

return false;

}

function gotoNextFrameAndStop()

{

this.justPlay1.removeAllEventListeners();

this.gotoAndStop(1);

}

Report · Nov 24, 2016

The Forum Lounge is not for technical help, please provide the name of the program you are using so your message may be moved to the correct program forum

Report · Nov 24, 2016

I am sorry.

The software is animate

[Moved from non-technical Forum Lounge to specific Program forum... Mod]

[Here is the list of all Adobe forums... https://forums.adobe.com/welcome]

Report · Nov 24, 2016

The buttons don't yet exist at the time you're setting the listeners. You could put your code into the second frame the button exists, then the script should be able to find it ok.

You didn't mention it, but is your invisible button done by having an alpha of zero? That isn't allowed in createjs, either set the alpha to 1, or make it be a regular button, where the idle, over, and down state frames are empty, and the hit frame (the fourth one in the button) would be a rectangle big enough to cover the intended target area.

Report · Nov 25, 2016

I was writing to say, in a polite way, that "naaah, the button was created"!

But I've check and yes, you are right!

THANK YOU!!!

Report · Nov 25, 2016

I am sorry to bother you again.

There is some kind of conflict in my code.

My character should change the frame, every time he went too left or too right.

It was working well.

Then I put all my eventListener and now my character keep walking out of the stage... and he never reaches frame 2 or 3 and so on.

I don't know what I did wrong!
It was working.

FRAME 1:

this.stop();

this.justPlay1.addEventListener("click", gotoNextFrameAndStop.bind(this));

var KEYCODE_LEFT = 37;

var KEYCODE_RIGHT = 39;

document.onkeydown = handleKeyDown.bind(this);

function handleKeyDown(e) {

if (!e) {

var e = window.event;

}

switch (e.keyCode) {

case KEYCODE_LEFT:

console.log("left");

if (this.bagsyMalone1.x >= 60){

this.bagsyMalone1.x -= 10;

return false;

}

case KEYCODE_RIGHT:

console.log("right");

if (this.bagsyMalone1.x <= 450){

this.bagsyMalone1.x += 10;

return false;

}

function gotoNextFrameAndStop()

{

this.justPlay1.removeAllEventListeners();

this.gotoAndStop(1);

}

FRAME 2:

this.stop();

//whisky

this.whisky1.visible = false;

this.b1.addEventListener("mouseover",onOver.bind(this));

this.b1.addEventListener("mouseout",onOut.bind(this));

function onOver(){

this.whisky1.visible = true;

}

function onOut(){

this.whisky1.visible = false;

//this.b1.removeAllEventListeners();

}

//light

this.light2.visible = false;

this.b2.addEventListener("mouseover",onOver2.bind(this));

this.b2.addEventListener("mouseout",onOut2.bind(this));

function onOver2(){

this.light2.visible = true;

}

function onOut2(){

this.light2.visible = false;

//this.b1.removeAllEventListeners();

}

//hearts

this.hearts.visible = false;

this.b3.addEventListener("mouseover",onOver3.bind(this));

this.b3.addEventListener("mouseout",onOut3.bind(this));

function onOver3(){

this.hearts.visible = true;

}

function onOut3(){

this.hearts.visible = false;

//this.b1.removeAllEventListeners();

}

var KEYCODE_LEF = 37;

var KEYCODE_RIGH = 39;

document.onkeydown = handleKeyDown.bind(this);

function handleKeyDown(e) {

if (!e) {

var e = window.event;

}

switch (e.keyCode) {

case KEYCODE_LEF:

console.log("left");

this.bagsyMalone1.x -= 25;

if (this.bagsyMalone1.x <= 60){

this.b1.removeAllEventListeners();

this.b2.removeAllEventListeners();

this.b3.removeAllEventListeners();

this.gotoAndStop(2);

}

return false;

case KEYCODE_RIGH:

console.log("right");

this.bagsyMalone1.x += 25;

if (this.bagsyMalone1.x >= 450){

this.b1.removeAllEventListeners();

this.b2.removeAllEventListeners();

this.b3.removeAllEventListeners();

this.gotoAndStop(3);

}

return false;

}

FRAME 3:

this.stop();

var KEYCODE_LE = 37;

var KEYCODE_RIG = 39;

//dancers

this.dancer2.visible = false;

this.dancer1.visible = true;

this.b4.addEventListener("mouseover",onOver4.bind(this));

this.b4.addEventListener("mouseout",onOut4.bind(this));

function onOver4(){

this.dancer2.visible = true;

this.dancer1.visible = false;

}

function onOut4(){

this.dancer2.visible = false;

this.dancer1.visible = true;

//this.b1.removeAllEventListeners();

}

//balloon

this.bal2.visible = false;

this.b5.addEventListener("mouseover",onOver5.bind(this));

this.b5.addEventListener("mouseout",onOut5.bind(this));

function onOver5(){

this.bal2.visible = true;

}

function onOut5(){

this.bal2.visible = false;

//this.b1.removeAllEventListeners();

}

//baloon

this.bal1.visible = false;

this.b6.addEventListener("mouseover",onOver6.bind(this));

this.b6.addEventListener("mouseout",onOut6.bind(this));

function onOver6(){

this.bal1.visible = true;

}

function onOut6(){

this.bal1.visible = false;

//this.b1.removeAllEventListeners();

}

document.onkeydown = handleKeyDown.bind(this);

function handleKeyDown(e) {

if (!e) {

var e = window.event;

}

switch (e.keyCode) {

case KEYCODE_LE:

console.log("left");

this.bagsyMalone1.x -= 20;

if (this.bagsyMalone1.x <= 60){

this.gotoAndStop(4);

}

return false;

case KEYCODE_RIG:

console.log("right");

this.bagsyMalone1.x += 20;

if (this.bagsyMalone1.x >= 450){

this.gotoAndStop(3);

}

return false;

}

FRAME 4:

this.stop();

this.Blondie.addEventListener("tick", doAnimation.bind(this));

this.Blondie.alpha = 0;

function doAnimation()

{

if (this.Blondie.alpha < 1){

this.Blondie.alpha += 0.03;

}

//drink

this.drink.visible = false;

this.b7.addEventListener("mouseover",onOver7.bind(this));

this.b7.addEventListener("mouseout",onOut7.bind(this));

function onOver7(){

this.drink.visible = true;

}

function onOut7(){

this.drink.visible = false;

//this.b1.removeAllEventListeners();

}

//phone

this.phone.visible = false;

this.b9.addEventListener("mouseover",onOver9.bind(this));

this.b9.addEventListener("mouseout",onOut9.bind(this));

function onOver9(){

this.phone.visible = true;

}

function onOut9(){

this.phone.visible = false;

//this.b1.removeAllEventListeners();

}

//bill

this.bill.visible = false;

this.b8.addEventListener("mouseover",onOver8.bind(this));

this.b8.addEventListener("mouseout",onOut8.bind(this));

function onOver8(){

this.bill.visible = true;

}

function onOut8(){

this.bill.visible = false;

//this.b1.removeAllEventListeners();

}

var KEYCODE_L = 37;

var KEYCODE_R = 39;

document.onkeydown = handleKeyDown.bind(this);

function handleKeyDown(e) {

if (!e) {

var e = window.event;

}

switch (e.keyCode) {

case KEYCODE_L:

console.log("left");

this.bagsyMalone1.x -= 20;

if (this.bagsyMalone1.x <= 60){

this.gotoAndStop(1);

}

return false;

case KEYCODE_R:

console.log("right");

this.bagsyMalone1.x += 20;

if (this.bagsyMalone1.x >= 450){

this.gotoAndStop(4);

}

return false;

}

FRAME 5:

//no code so far

Report · Nov 25, 2016

Putting all the functions handleKeyDown(e) on the top of my code page (frame by frame):

When my character reaches the boards of the page just jump on my last frame.

For no reason as I wrote:

if (this.bagsyMalone1.x <= 60){

this.gotoAndStop(2);

and

if (this.bagsyMalone1.x >= 450){

this.gotoAndStop(3);

}

No mention to my last frame at all.

Report · Nov 25, 2016

The frames are perfect linked just when I comment-out all the EventListeners

like:

this.drink.visible = false;

this.b7.addEventListener("mouseover",onOver7.bind(this));

this.b7.addEventListener("mouseout",onOut7.bind(this));

function onOver7(){

this.drink.visible = true;

}

function onOut7(){

this.drink.visible = false;

//this.b1.removeAllEventListeners();

}