Copy link to clipboard
Copied
Hi. I've tried to recreate a simple AS3 game with the HTML5 canvas, using Javascript. This is the first time I've done this and it's for pupils and staff to use at our school.
It all works fine when I test it from Animate - it opens in a browser and plays. But when I publish it and I get HTML, JS and FLA files, clicking on the HTML file just brings up the visuals, but it isn't interactive in any way. I've tried using the 'Include Javascript in HTML' option, but that didn't make any difference.
Our school has a website, but it doesn't allow for installing game files. Is there a way for people in the school to access and play it locally, maybe from the server - or even from individual PCs' C drives?
The reason I don't want to use AS3 is because the pupils mainly use iPads now.
Thanks.
Copy link to clipboard
Copied
they should be able to use the html, js and source folder(s), from any web server, but not locally
Copy link to clipboard
Copied
Thanks for the reply. I've now discovered IIS on our server and I've put the html and js files, plus the images and sounds folders in the root directory. I can now see the game and interact with some of it but not all - and there's no sound. Am I missing something?
Copy link to clipboard
Copied
i'm not sure that should be in your root directory. test by creating a game directory and putting the files there.
if you detect any problem while testing open your browser's developer console and track the issue. if you have trouble, post a link to your online game and explain the problem and how to trigger it.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
It says variables are not defined, but it all works fine when tested within Animate.
Copy link to clipboard
Copied
what are the lines of code just above and below line 1370?
what is playPiano?
Copy link to clipboard
Copied
I don't know what those lines of code are.
playPiano is the variable(?) that plays the piano sound. Here's the code - I've taken out the references to the other instruments, for clarity.
function init(){
var assetPath = "sounds/";
var sounds = [
{src:"piano.mp3", id:"piano"}
]
var preload = new createjs.LoadQueue()
preload.addEventListener("fileload", handleFileComplete)
preload.loadFile (assetPath)
function handleFileComplete(event){
createjs.Sound.registerSounds(sounds, assetPath)
playPiano = createjs.Sound.play("piano")
}
}
init()
piano.mp3 is in a folder called 'sounds', which is in the same folder as the html and js files.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
I did create the fla and it works fine in AS3 - and in HTML5/JS when testing. My query is why it's not working when I try to access it on a web server.
Copy link to clipboard
Copied
The lines of code that I don't understand are in the Chrome Console in the screenshot.
Copy link to clipboard
Copied
are you requiring user interaction (eg, mouse click) to play your sound?
Copy link to clipboard
Copied
Yes. I click on a play button.
Copy link to clipboard
Copied
which line is 1370 in the code you showed and where is playPiano declared?
Copy link to clipboard
Copied
My apologies - I hadn't realised that 1370 referred to a line of code in the js file. I knew I hadn't written that much code and I'm used to AS3 where the only code is what I've written.
Here's the code around that line:
function activatePiano() {
if(!pianoActive){
pianoActive = true
root.piano_btn.gotoAndStop(4)
root.piano_mc.alpha = 1
playPiano.muted = false
if(soundPlaying){
root.piano_mc.play()
}
} else {
(ln 1370) pianoActive = false
root.piano_btn.gotoAndStop(0)
root.piano_mc.gotoAndStop(0)
root.piano_mc.alpha = 0.5
playPiano.muted = true
}
The sound file should be playing already, but muted, and piano_mc should be faded out a bit. When piano_btn is clicked, piano_btn gets a red line around it (frame 4), piano_mc gets full alpha and starts a looped animation and the piano audio is unmuted.
When it's clicked again, piano_mc's animation stops at frame 0 and is faded out, the red line around the button disappears (frame 0) and the sound is muted.
Copy link to clipboard
Copied
pianoActive is defined right at the beginning of the code, along woith all the other instruments:
let pianoActive = false
Copy link to clipboard
Copied
in the timeline frame where you defined:
function activatePiano(){}
copy from your fla and paste here, all the code. ie, just that one frame of code is needed, at this point.
Copy link to clipboard
Copied
Almost all of the code is in that frame:
let root = this
var buttonClickSound
let congasActive = false
let bassActive = false
let guiroActive = false
let guitarActive = false
let pianoActive = false
let saxophoneActive = false
let triangleActive = false
let trumpetActive = false
let allActive = false
let soundPlaying = false
root.congas_mc.alpha = 0.5
root.bass_mc.alpha = 0.5
root.guiro_mc.alpha = 0.5
root.guitar_mc.alpha = 0.5
root.piano_mc.alpha = 0.5
root.saxophone_mc.alpha = 0.5
root.triangle_mc.alpha = 0.5
root.trumpet_mc.alpha = 0.5
function init(){
var assetPath = "sounds/";
var sounds = [
{src:"congas.mp3", id:"congas"},
{src:"bass.mp3", id:"bass"},
{src:"guiro.mp3", id:"guiro"},
{src:"guitar.mp3", id:"guitar"},
{src:"piano.mp3", id:"piano"},
{src:"saxophone.mp3", id:"saxophone"},
{src:"triangle.mp3", id:"triangle"},
{src:"trumpet.mp3", id:"trumpet"}
]
var preload = new createjs.LoadQueue()
preload.addEventListener("fileload", handleFileComplete)
preload.loadFile (assetPath)
function handleFileComplete(event){
createjs.Sound.registerSounds(sounds, assetPath)
playCongas = createjs.Sound.play("congas")
playBass = createjs.Sound.play("bass")
playGuiro = createjs.Sound.play("guiro")
playGuitar = createjs.Sound.play("guitar")
playPiano = createjs.Sound.play("piano")
playSaxophone = createjs.Sound.play("saxophone")
playTriangle = createjs.Sound.play("triangle")
playTrumpet = createjs.Sound.play("trumpet")
}
root.play_btn.addEventListener("click", buttonClicked.bind(this));
function buttonClicked () {
if(!soundPlaying){
playCongas.play()
if(!congasActive){
playCongas.muted = true
}
playBass.play()
if(!bassActive){
playBass.muted = true
}
playGuiro.play()
if(!guiroActive){
playGuiro.muted = true
}
playGuitar.play()
if(!guitarActive){
playGuitar.muted = true
}
playPiano.play()
if(!pianoActive){
playPiano.muted = true
}
playSaxophone.play()
if(!saxophoneActive){
playSaxophone.muted = true
}
playTriangle.play()
if(!triangleActive){
playTriangle.muted = true
}
playTrumpet.play()
if(!trumpetActive){
playTrumpet.muted = true
}
soundPlaying = true
if(congasActive){
root.congas_mc.play()
}
if(bassActive){
root.bass_mc.play()
}
if(guiroActive){
root.guiro_mc.play()
}
if(guitarActive){
root.guitar_mc.play()
}
if(pianoActive){
root.piano_mc.play()
}
if(saxophoneActive){
root.saxophone_mc.play()
}
if(triangleActive){
root.triangle_mc.play()
}
if(trumpetActive){
root.trumpet_mc.play()
}
} else {
playCongas.stop()
playBass.stop()
playGuiro.stop()
playGuitar.stop()
playPiano.stop()
playSaxophone.stop()
playTriangle.stop()
playTrumpet.stop()
root.congas_mc.gotoAndStop(0)
root.bass_mc.gotoAndStop(0)
root.guiro_mc.gotoAndStop(0)
root.guitar_mc.gotoAndStop(0)
root.piano_mc.gotoAndStop(0)
root.saxophone_mc.gotoAndStop(0)
root.triangle_mc.gotoAndStop(0)
root.trumpet_mc.gotoAndStop(0)
soundPlaying = false
}
}
root.congas_btn.addEventListener("click", activateCongas.bind(this))
function activateCongas() {
if(!congasActive){
congasActive = true
root.congas_btn.gotoAndStop(4)
root.congas_mc.alpha = 1
playCongas.muted = false
if(soundPlaying){
root.congas_mc.play()
}
} else {
congasActive = false
root.congas_btn.gotoAndStop(0)
root.congas_mc.alpha = 0.5
root.congas_mc.gotoAndStop(0)
playCongas.muted = true
}
}
root.bass_btn.addEventListener("click", activateBass.bind(this))
function activateBass() {
if(!bassActive){
bassActive = true
root.bass_btn.gotoAndStop(4)
root.bass_mc.alpha = 1
playBass.muted = false
if(soundPlaying){
root.bass_mc.play()
}
} else {
bassActive = false
root.bass_btn.gotoAndStop(0)
root.bass_mc.gotoAndStop(0)
root.bass_mc.alpha = 0.5
playBass.muted = true
}
}
root.guiro_btn.addEventListener("click", activateGuiro.bind(this))
function activateGuiro() {
if(!guiroActive){
guiroActive = true
root.guiro_btn.gotoAndStop(4)
root.guiro_mc.alpha = 1
playGuiro.muted = false
if(soundPlaying){
root.guiro_mc.play()
}
} else {
guiroActive = false
root.guiro_btn.gotoAndStop(0)
root.guiro_mc.gotoAndStop(0)
root.guiro_mc.alpha = 0.5
playGuiro.muted = true
}
}
root.guitar_btn.addEventListener("click", activateGuitar.bind(this))
function activateGuitar() {
if(!guitarActive){
guitarActive = true
root.guitar_btn.gotoAndStop(4)
root.guitar_mc.alpha = 1
playGuitar.muted = false
if(soundPlaying){
root.guitar_mc.play()
}
} else {
guitarActive = false
root.guitar_btn.gotoAndStop(0)
root.guitar_mc.gotoAndStop(0)
root.guitar_mc.alpha = 0.5
playGuitar.muted = true
}
}
root.piano_btn.addEventListener("click", activatePiano.bind(this))
function activatePiano() {
if(!pianoActive){
pianoActive = true
root.piano_btn.gotoAndStop(4)
root.piano_mc.alpha = 1
playPiano.muted = false
if(soundPlaying){
root.piano_mc.play()
}
} else {
pianoActive = false
root.piano_btn.gotoAndStop(0)
root.piano_mc.gotoAndStop(0)
root.piano_mc.alpha = 0.5
playPiano.muted = true
}
}
root.saxophone_btn.addEventListener("click", activateSaxophone.bind(this))
function activateSaxophone() {
if(!saxophoneActive){
saxophoneActive = true
root.saxophone_btn.gotoAndStop(4)
root.saxophone_mc.alpha = 1
playSaxophone.muted = false
if(soundPlaying){
root.saxophone_mc.play()
}
} else {
saxophoneActive = false
root.saxophone_btn.gotoAndStop(0)
root.saxophone_mc.gotoAndStop(0)
root.saxophone_mc.alpha = 0.5
playSaxophone.muted = true
}
}
root.triangle_btn.addEventListener("click", activateTriangle.bind(this))
function activateTriangle() {
if(!triangleActive){
triangleActive = true
root.triangle_btn.gotoAndStop(4)
root.triangle_mc.alpha = 1
playTriangle.muted = false
if(soundPlaying){
root.triangle_mc.play()
}
} else {
triangleActive = false
root.triangle_btn.gotoAndStop(0)
root.triangle_mc.gotoAndStop(0)
root.triangle_mc.alpha = 0.5
playTriangle.muted = true
}
}
root.trumpet_btn.addEventListener("click", activateTrumpet.bind(this))
function activateTrumpet() {
if(!trumpetActive){
trumpetActive = true
root.trumpet_btn.gotoAndStop(4)
root.trumpet_mc.alpha = 1
playTrumpet.muted = false
if(soundPlaying){
root.trumpet_mc.play()
}
} else {
trumpetActive = false
root.trumpet_btn.gotoAndStop(0)
root.trumpet_mc.gotoAndStop(0)
root.trumpet_mc.alpha = 0.5
playTrumpet.muted = true
}
}
root.allInstruments_btn.addEventListener("click", activateAll.bind(this))
function activateAll() {
if(!allActive){
root.congas_btn.gotoAndStop(4)
root.bass_btn.gotoAndStop(4)
root.guiro_btn.gotoAndStop(4)
root.guitar_btn.gotoAndStop(4)
root.piano_btn.gotoAndStop(4)
root.saxophone_btn.gotoAndStop(4)
root.triangle_btn.gotoAndStop(4)
root.trumpet_btn.gotoAndStop(4)
congasActive = true
bassActive = true
guiroActive = true
guitarActive = true
pianoActive = true
saxophoneActive = true
triangleActive = true
trumpetActive = true
root.congas_mc.alpha = 1
root.bass_mc.alpha = 1
root.guiro_mc.alpha = 1
root.guitar_mc.alpha = 1
root.piano_mc.alpha = 1
root.saxophone_mc.alpha = 1
root.triangle_mc.alpha = 1
root.trumpet_mc.alpha = 1
playCongas.muted = false
playBass.muted = false
playGuiro.muted = false
playGuitar.muted = false
playPiano.muted = false
playSaxophone.muted = false
playTriangle.muted = false
playTrumpet.muted = false
if(soundPlaying){
root.congas_mc.play()
root.bass_mc.play()
root.guiro_mc.play()
root.guitar_mc.play()
root.piano_mc.play()
root.saxophone_mc.play()
root.triangle_mc.play()
root.trumpet_mc.play()
}
allActive = true
} else {
root.congas_btn.gotoAndStop(0)
root.bass_btn.gotoAndStop(0)
root.guiro_btn.gotoAndStop(0)
root.guitar_btn.gotoAndStop(0)
root.piano_btn.gotoAndStop(0)
root.saxophone_btn.gotoAndStop(0)
root.triangle_btn.gotoAndStop(0)
root.trumpet_btn.gotoAndStop(0)
congasActive = false
bassActive = false
guiroActive = false
guitarActive = false
pianoActive = false
saxophoneActive = false
triangleActive = false
trumpetActive = false
root.congas_mc.alpha = 0.5
root.bass_mc.alpha = 0.5
root.guiro_mc.alpha = 0.5
root.guitar_mc.alpha = 0.5
root.piano_mc.alpha = 0.5
root.saxophone_mc.alpha = 0.5
root.triangle_mc.alpha = 0.5
root.trumpet_mc.alpha = 0.5
playCongas.muted = true
playBass.muted = true
playGuiro.muted = true
playGuitar.muted = true
playPiano.muted = true
playSaxophone.muted = true
playTriangle.muted = true
playTrumpet.muted = true
allActive = false
root.congas_mc.gotoAndStop(0)
root.bass_mc.gotoAndStop(0)
root.guiro_mc.gotoAndStop(0)
root.guitar_mc.gotoAndStop(0)
root.piano_mc.gotoAndStop(0)
root.saxophone_mc.gotoAndStop(0)
root.triangle_mc.gotoAndStop(0)
root.trumpet_mc.gotoAndStop(0)
}
}
}
init ();
Copy link to clipboard
Copied
The include JavaScript would have helped with some sescurity issues. The other thing you can do is uncheck any spritesheet options, let it create individual images. That would then test locally ok, and you could publish again using spritesheets for the server based version, to help the page load quicker.
I didn't yet figure out a way for my iPad to open local HTML files.
Copy link to clipboard
Copied
Hi. I've sorted it, thanks. I'd set the site up incorrectly on IIS. Thank you all for your help.
Copy link to clipboard
Copied