Highlighted

revisit - make one iframe move another iframe's timeline forward, how?

Explorer ,
Oct 24, 2019

Copy link to clipboard

Copied

i never did get this working. here's my setup. using adobe animate canvas:

 

main clip (index.html) one of the frames generates iframe0 using mkdiv

iframe0 (page1.html) one of the frames generates iframe1 using mkdiv

iframe1 (subpage.html) i have a button that when pressed, i'd like it to move iframe0 (page1.html)'s timeline forward by 1 frame.

 

sounds simple enough.. but it's proven to be very confusing. i humbly request a ready to use copy/paste code that makes this possible. i've tried suggested postMessage(), except I have absolutely no idea how to even structure it. the tutorials are confusing as it is, so all I can do is hope someone knows >.<  thanks guys.  all other bits in previous posts are working, so you guys are doing great so far!

 

page1.html

 

var receiveMessage = function(event) {
    this.gotoAndStop(2);
}
window.addEventListener("message", receiveMessage, true);

 

 

subpage.html  

 

var this = _this

_this.button1.on('click', function () {
var iframegrab = window.document.getElementById('iframe0');
	iframegrab.postMessage('message', '*');
});

 

 

interestingly, if i do this code, it makes main clip (index.html) move its timeline no problem

 

window.parent.exportRoot.gotoAndStop(2);

 

 

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

You can achive this using custom events.

 

Here is a sample:

 

Code:

index.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Communication Between Iframes</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <iframe id="destination" src="page0.html" frameborder="0"></iframe>
    <iframe src="page1.html" frameborder="0"></iframe>

    <script>
        function advanceTimelineHandler(e)
        {
            document.querySelector('#destination').contentWindow.exportRoot.advanceTimeline(e.detail.offset);
        }

        window.document.addEventListener("advanceTimeline", advanceTimelineHandler, false);
    </script>
</body>
</html>

 

 

main.css

 

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: auto;
}

iframe
{
    width: 550px;
    height: 400px;
    min-width: 550px;
    min-height: 400px;
}

 

 

page0.fla (page0.html)

 

var root = this;

root.advanceTimeline = function(offset)
{
	root.gotoAndStop(root.currentFrame + offset);
};

root.stop();

 

 

page1.fla (page1.html)

 

var root = this;

root.button.on("click", function(e)
{
	var event = new CustomEvent("advanceTimeline", { detail: { offset: 1 } } );
	window.parent.document.dispatchEvent(event);
});

 

 

Online demo: here.

Source files (fla, html, js, css, images): here.

 

I hope this helps.

 

 

Regards,

JC

Views

427

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

revisit - make one iframe move another iframe's timeline forward, how?

Explorer ,
Oct 24, 2019

Copy link to clipboard

Copied

i never did get this working. here's my setup. using adobe animate canvas:

 

main clip (index.html) one of the frames generates iframe0 using mkdiv

iframe0 (page1.html) one of the frames generates iframe1 using mkdiv

iframe1 (subpage.html) i have a button that when pressed, i'd like it to move iframe0 (page1.html)'s timeline forward by 1 frame.

 

sounds simple enough.. but it's proven to be very confusing. i humbly request a ready to use copy/paste code that makes this possible. i've tried suggested postMessage(), except I have absolutely no idea how to even structure it. the tutorials are confusing as it is, so all I can do is hope someone knows >.<  thanks guys.  all other bits in previous posts are working, so you guys are doing great so far!

 

page1.html

 

var receiveMessage = function(event) {
    this.gotoAndStop(2);
}
window.addEventListener("message", receiveMessage, true);

 

 

subpage.html  

 

var this = _this

_this.button1.on('click', function () {
var iframegrab = window.document.getElementById('iframe0');
	iframegrab.postMessage('message', '*');
});

 

 

interestingly, if i do this code, it makes main clip (index.html) move its timeline no problem

 

window.parent.exportRoot.gotoAndStop(2);

 

 

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

You can achive this using custom events.

 

Here is a sample:

 

Code:

index.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Communication Between Iframes</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <iframe id="destination" src="page0.html" frameborder="0"></iframe>
    <iframe src="page1.html" frameborder="0"></iframe>

    <script>
        function advanceTimelineHandler(e)
        {
            document.querySelector('#destination').contentWindow.exportRoot.advanceTimeline(e.detail.offset);
        }

        window.document.addEventListener("advanceTimeline", advanceTimelineHandler, false);
    </script>
</body>
</html>

 

 

main.css

 

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: auto;
}

iframe
{
    width: 550px;
    height: 400px;
    min-width: 550px;
    min-height: 400px;
}

 

 

page0.fla (page0.html)

 

var root = this;

root.advanceTimeline = function(offset)
{
	root.gotoAndStop(root.currentFrame + offset);
};

root.stop();

 

 

page1.fla (page1.html)

 

var root = this;

root.button.on("click", function(e)
{
	var event = new CustomEvent("advanceTimeline", { detail: { offset: 1 } } );
	window.parent.document.dispatchEvent(event);
});

 

 

Online demo: here.

Source files (fla, html, js, css, images): here.

 

I hope this helps.

 

 

Regards,

JC

Views

428

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
Oct 24, 2019 0
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

Hi.

 

You can achive this using custom events.

 

Here is a sample:

 

Code:

index.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Communication Between Iframes</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <iframe id="destination" src="page0.html" frameborder="0"></iframe>
    <iframe src="page1.html" frameborder="0"></iframe>

    <script>
        function advanceTimelineHandler(e)
        {
            document.querySelector('#destination').contentWindow.exportRoot.advanceTimeline(e.detail.offset);
        }

        window.document.addEventListener("advanceTimeline", advanceTimelineHandler, false);
    </script>
</body>
</html>

 

 

main.css

 

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: auto;
}

iframe
{
    width: 550px;
    height: 400px;
    min-width: 550px;
    min-height: 400px;
}

 

 

page0.fla (page0.html)

 

var root = this;

root.advanceTimeline = function(offset)
{
	root.gotoAndStop(root.currentFrame + offset);
};

root.stop();

 

 

page1.fla (page1.html)

 

var root = this;

root.button.on("click", function(e)
{
	var event = new CustomEvent("advanceTimeline", { detail: { offset: 1 } } );
	window.parent.document.dispatchEvent(event);
});

 

 

Online demo: here.

Source files (fla, html, js, css, images): here.

 

I hope this helps.

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Nov 20, 2019 1
Explorer ,
Nov 22, 2019

Copy link to clipboard

Copied

Update: It works 100%, thank you so much for this. But you've got to hear about what happened to me while trying to implement your solution. It's gonna make you cringe...

First I tried copying your code into my project. Javascript from the index, then the JS from the fla files into my own... and it didn't work. Hmm, head scratcher... I knew that your worked just fine, so I put your page0 and page1 in my arrangement instead, they worked... so mine should work? Just by chance... I decided to copy all my content into your working fla files and export from there. It worked.

Turns out my fla files were somehow corrupt. Frames were misbehaving, certain code was being ignored, it was a nightmare. I KNEW something was wrong... I just couldn't pinpoint it. I had no idea fla files could go bad and that you'd still be able to open them as normal and continue working on them. Had I never gotten help from you, I would be working on the same broken fla file, never knowing that past solutions might have actually worked 😞  So really, thanks for all your help.

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...
Nov 22, 2019 1
Adobe Community Professional ,
Nov 23, 2019

Copy link to clipboard

Copied

Hi! This is great! I'm glad you managed to solve the issue.

 

And, yeah, unfortunately sometimes we have to take into account the integrity of a FLA file.

 

I also solved many problems in the past by just copying and pasting my content into new files.

 

 

Have a great weekend!

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Nov 23, 2019 1