I'm back with a new sound question...

Anaximanes

Ok, I finished Slugs and Bugs, (thanks again to grayelf and TheMadExile)and everyone loved it, so I am working on a new story. I made sound effects for it, and what I have noticed is that if a person goes back a menu or more, then when they return to the first screen, the animation of the gif no longer lines up with the sound. Example:

Go to table of contents

Then when you click that, you show up at the ToC with a lightning strike and thunder perfectly aligned.

[[Go back to Title Screen[[

If you click this, you leave the ToC and end up at the first screen again (I have no animation synced with sound)

Go to table of contents

Now when we go here, the lightning flashes on my gif are way off with the sound effects.

Basically is there a way to auto make it refresh on the few screens that have animations with sound?

greyelf

Have you thought about converting your animated image into a WEBM video (including your sound effects), you would not have to worry about syncing the sound then.

Claretta

From what you've described, I imagine the GIF is playing underneath on whatever layer you've got it set to even when the title screen is not active.

Assuming you're using SugarCube, why not just put the GIF in a separate CSS layer, unload it with SugarCube's <<removeclass>> macro when you exit the contents screen, and reload it with <<addclass>> when you visit the screen again in time with the music.

You can add and remove classes with Javascript or GSAP if not using SugarCube.

Anaximanes

Darn. I was hoping there was just an easy way to tell the html page to "reload". Like if I go back and reload, then it lines up perfectly again, or if I select restart. Yes, I am using SugarCube, but frankly I know NOTHING about programming. I only pulled of Slugs and Bugs by doing the most basic. So there's no <<reload>> or something easy? lol I have no idea how to make web movies or do what Claretta said.

However, I want to thank both of you very much for mentioning these. I need a fix that a chimp could do. I'll just leave it as is and release my preview tomorrow night. Thank you though.

Claretta

Reloading the html layer is easy to do. If your gif is just in the initial html layer, I assume you have something like:

html {
background-image: [img[mygif.gif]];
All other code for the html;
}

You can change this to two separate html entries in the css where you split the background image into a separate selector:

html {
All other code for the html;
}

html.lightning {
background-image: [img[mygif.gif]];
}

Selectors are basically "add on" code that you can tell to be added at certain points. To do this, on the page where you want the lighting to appear, use the macro:

<<addclass "html" "lightning">>

When you navigate away write <<removeclass "html" "lightning">> to remove it (for example, put this on the title screen).

That way, you're reloading the html.gif selector every time you visit the contents.

Anaximanes

Thanks Claretta, right now it looks like this:

<div align="center">[img[Pictures/ToC.gif]]</div>
<<stopallaudio>>
<<audio "toc" volume 0.5 loop play>>
<<audio "thunder" volume 0.5 loop play>>

The Book of Shadows - Bware, reader!

Preview - I'm coming for you...

Start - Return to the Title Screen

Can you fill this in exactly how I need to please? I know I probably seem dumb but, I just don't understand!