• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Animate CC 2019: Button symbol not communicating with parent HTML background element

New Here ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

What JS code can I apply to a button symbol within ANIMATE CC to change the background image of HTML parent page onclick?

I'm currently using getElementsByTagName( ) - not functioning at all...

Current CSS declaration in HTML page:

html

{

  background: url(img/bkg3.png) no-repeat center center fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

}

Current JS on button symbol within Animate CC:

function fl_MouseClickHandler() {

     function changeBackground() {

     this.document.getElementsByTagName("html").style.background = "url(img/bkg4.png)";

     }

}

Any assistance would be greatly appreciated!

Thanks!

Views

509

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
community guidelines

correct answers 1 Correct answer

Advocate , Dec 20, 2018 Dec 20, 2018

Sorry, this might not work because you declared the background-image for the html-element in the first instance.

I would supply an id to you body like

<body id="docbody" onload="init();">

Further I would css-declare:

#docbody {

     background-image: url("img/bkg3.png");

     background-size: cover}

then in JS for your button:

function YOURBUTTONCLICKHANDLER(e) {

    document.getElementById("docbody").style.backgroundImage = "url('img/bkg4.png')";

}

this.YOURBUTTONNAME.addEventListener('click', YOURBUTTON

...

Votes

Translate

Translate
Advocate ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

Hi March

try

this.document.getElementsByTagName("body").style.background = "url(img/bkg4.png)";

Klaus

Votes

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
community guidelines
New Here ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

Hi Klaus

Thanks for your quick reply!

I updated my button symbol code with your string:

this.cwbut.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler() {

this.document.getElementsByTagName("body").style.background = "url(img/bkg4.png)";

}

I updated my CSS changing 'html' to 'body':

body

{

  background: url(img/bkg3.png) no-repeat center center fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

}

When I click on my button (within canvas), it does not replace the current background image bkg3.png with bkg4.png.

FYI

My FLA architecture is simple:

One frame.

One layer with single button symbol.

One layer with JS button symbol code.

HTML Architecture

One CSS background image.

One button (canvas).

Assets

Two PNGs.

Thanks again for your help Klaus!

Votes

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
community guidelines
Advocate ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

March

this.document.getElementsByTagName("body").style.background = "url(img/bkg4.png)";

this.document ... the this can't be right .. long story

try my second revised suggestion.

Klaus

Votes

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
community guidelines
New Here ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

Klaus

Brilliant!

You are...

Working nicely.

Thank You Sir

Votes

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
community guidelines
Advocate ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

LATEST

March you're welcome.

Please could you do me the favor and mark my answer which worked for you as correct?

cheers

Klaus

Votes

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
community guidelines
Advocate ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

Sorry, this might not work because you declared the background-image for the html-element in the first instance.

I would supply an id to you body like

<body id="docbody" onload="init();">

Further I would css-declare:

#docbody {

     background-image: url("img/bkg3.png");

     background-size: cover}

then in JS for your button:

function YOURBUTTONCLICKHANDLER(e) {

    document.getElementById("docbody").style.backgroundImage = "url('img/bkg4.png')";

}

this.YOURBUTTONNAME.addEventListener('click', YOURBUTTONCLICKHANDLER);

Things in italic/CAPITAL setyour own names

Klaus

Votes

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
community guidelines
New Here ,
Dec 20, 2018 Dec 20, 2018

Copy link to clipboard

Copied

Reading your reply now...

Votes

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
community guidelines