Highlighted

Target a frame of movieclip on the timeline? (HTML5)

Explorer ,
Apr 15, 2019

Copy link to clipboard

Copied

I am working on a HTML5 presentation that has about 100 layers and 400 frames.  About 75% through the development my boss throws me a curve ball and I don't want to start from scratch.

Since I can't use scenes everything is laid out on a timeline.  In the 10th keyframe I have a movieclip named "header" with an instance name of "header".  That movie clip consists of 2 keyframes with a different logo on each frame.  One logo on frame 0 and one on frame 9.

When the user clicks option one at frame 1 of my main timeline, it jumps to a specified keyframe on the main timeline and I want the "header" clip to display the logo on keyframe 0.  When the user selects option 2 at frame 1 of my main timeline, I want the header clip to display the logo on keyframe 9.


Easy?

As is my habit, I post questions on here while I'm trying to figure it out on my own just in case I come up short.  In this case I seem to have mashed out the correct code somehow.

My original action was this:

this.movieClip_5.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_15.bind(this));

function fl_ClickToGoToAndPlayFromFrame_15()
{
this.gotoAndPlay(25);
}

I simply added multiple variations of code that I don't understand and kept testing until I found that this works:

this.movieClip_5.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_15.bind(this));

function fl_ClickToGoToAndPlayFromFrame_15()
{
this.gotoAndPlay(25);

this.header.gotoAndStop(9);
}

Views

198

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Target a frame of movieclip on the timeline? (HTML5)

Explorer ,
Apr 15, 2019

Copy link to clipboard

Copied

I am working on a HTML5 presentation that has about 100 layers and 400 frames.  About 75% through the development my boss throws me a curve ball and I don't want to start from scratch.

Since I can't use scenes everything is laid out on a timeline.  In the 10th keyframe I have a movieclip named "header" with an instance name of "header".  That movie clip consists of 2 keyframes with a different logo on each frame.  One logo on frame 0 and one on frame 9.

When the user clicks option one at frame 1 of my main timeline, it jumps to a specified keyframe on the main timeline and I want the "header" clip to display the logo on keyframe 0.  When the user selects option 2 at frame 1 of my main timeline, I want the header clip to display the logo on keyframe 9.


Easy?

As is my habit, I post questions on here while I'm trying to figure it out on my own just in case I come up short.  In this case I seem to have mashed out the correct code somehow.

My original action was this:

this.movieClip_5.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_15.bind(this));

function fl_ClickToGoToAndPlayFromFrame_15()
{
this.gotoAndPlay(25);
}

I simply added multiple variations of code that I don't understand and kept testing until I found that this works:

this.movieClip_5.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_15.bind(this));

function fl_ClickToGoToAndPlayFromFrame_15()
{
this.gotoAndPlay(25);

this.header.gotoAndStop(9);
}

Views

199

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 15, 2019 0
Explorer ,
Apr 15, 2019

Copy link to clipboard

Copied

As is my habit, I post questions on here while I'm trying to figure it out on my own just in case I come up short.  In this case I seem to have mashed out the correct code somehow.

My original action was this:

this.movieClip_5.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_15.bind(this));

function fl_ClickToGoToAndPlayFromFrame_15()
{
this.gotoAndPlay(25);
}

I simply added multiple variations of code that I don't understand and kept testing until I found that this works:

this.movieClip_5.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_15.bind(this));

function fl_ClickToGoToAndPlayFromFrame_15()
{
this.gotoAndPlay(25);

this.header.gotoAndStop(9);
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2019 0
Adobe Community Professional ,
Apr 15, 2019

Copy link to clipboard

Copied

Hi there,

For one, I would change the name of the functions so they are more meaningful because it makes it easier to manage.

For example:

this.submitBtn.addEventListener("click", submit.bind(this));

function submit() {

//  some code

}

How I do it.

var root = this;      // this makes it easier to manage the main timeline

Then you can pretty much access everything on your timeline from frame one and keep your code there.

Just a thought.

and don;t forget to comment you code so when you come back to it  in 6 months it will be easier.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2019 0
Explorer ,
Apr 15, 2019

Copy link to clipboard

Copied

I'm not sure I follow about the var root = this;

Keep in mind I am not a programmer...I am an old Flash designer that is struggling to use Flash in its current state. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2019 0
ClayUUID LATEST
Adobe Community Professional ,
Apr 15, 2019

Copy link to clipboard

Copied

this in JavaScript is the current execution context. When accessed in an event handler, it references the global object (the browser "window" object). This behavior makes coding event handlers a pain in the neck.

Copying the value of this to a local variable allows event handlers to access the desired scope by using the local variable instead, since it will reference the desired object (a timeline).

The reason an event handler function can use a variable defined outside of itself is because JavaScript uses lexical scoping-- functions can access variables defined in the same function that defined them. It's not apparent in the Animate IDE, but the code for every frame is wrapped in a function when published. frame_0(), frame_1(), frame_2(), etc.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 15, 2019 0