Set Focus to SWF
May 26, 2016 12:00 AM
Hello,
I am building an interactive software simulation file in Flash that has textboxes involved. My question is, is there some way after importing the swf into Lectora to set the focus to the swf file? In other words, when the exercise starts, I need the first textbox to have the cursor flashing so the user can start typing as soon as the exercise loads and not have to click in the box. I set the focus to the textbox already in Flash, but since the focus isn't on the swf in Lectora, it isn't showing as flashing when it loads. Is there some way to accomplish this in Lectora so that the swf is in focus when it loads and the user doesn't have to click the swf to set the focus?
Thank-you in advanced.
Discussion (16)
Thank-you very much for your response. I actually tried this already, but it still isn't working. The user still has to click the swf for the cursor to start flashing in the textbox. Is this something that needs to be published to work and won't work locally? I tried Run, Preview, Preview in Browser, and published offline to test, but it still doesn't work. Also, I am using Lectora v12, not sure if that makes a difference in functionality.
Add action "On Page Show" - "Run JavaScript" - with the following code:
var flash = document.getElementById("swfanim3objundefined
where "swfanim3" is the HTML name of your object.
This might be helpful: http://stackoverflow.com/questions/7921690/how-do-i-make-my-flash-object-get-focus-on-load/13674793#13674793
Also, if you share a file, someone (me) might take a look.
Thank-you again for your reply. Unfortunately, I cannot share the files. I tried the code in the link you provided, but that didn't work either. I tried looking at the console in Firefox/IE to see if the JS was even running and it is, but I get this message in IE "Debugger: Unable to get property 'focus' of undefined or null reference" and this message in FF, "TypeError: flash is null". This is showing when I tried the JS you originally posted. When I tried the code in the link, I don't get the error, but it still doesn't work (i.e. the user has to click the swf to get the cursor to start flashing). Not sure what the issue is; have you seen these errors before?
Thank-you for your reply. I still cannot figure out what the issue is, so as suggested, I put a dummy file together that has the same issue. I have been testing in Preview Browser - IE and the cursor won't flash in Text Field 1 until you click anywhere in the swf (or in the textbox itself) or right-click the swf and Rewind. Please see the attached zip for the test Lectora file. Thank-you very much again for the help!
Allthough i am not 100% sure of this, the issue might be browsercompability.
Check this thread if this helps you out:
http://james.padolsey.com/snippets/fixing-focus-in-internet-explorer/
As Sergey says, sharing files helps too... so someone ( Sergey .. or me or someone else ) can check it and fix it.
I know some files cannot be shared due to client restrictions... well remake the issue with some dummies and share that then.... Often also a good debugging technique to rule out other issues..
Regards,
Math
This will work in IE, edge and chrome. Firefox is being a brat and I haven't the time to work around it.
1. First make sure that your .SWF movie includes: stage.focus = textInput; (Where textInput is the name you provided the input component).
2. In lieu of Lectora's built in Flash adding capability use SWFObject.
3. Go to Learn SWFObject in case you are unfamiliar with using this to embed Flash Movies in web pages.
4. Make sure you set the wmode parameter to "opaque".
5. On the page you are embedding the input put a run javascript on show of the page with the following:
function onloadFocus(){
setTimeout(function() {
document.getElementById("textInput").focus()
}, 10);
}
window.onload=onloadFocus();
You need to delay setting focus on the swf to be sure it is fully loaded.
The attached example is in version 12. I'll try to look at your file you just posted but it's a holiday weekend here and it may take me a bit. Hopefully my post will point you in the right direction.
DRS
Allready googled for a Firefox hack for it...but really seems to be a problem with Firefox...
Maybe someone else is a better googlur ;-)
Did you follow my instructions for uploading to ReviewLink? Send me your email address. private message me or send it to darrel.somoza@elearningcode.com. I need it to set you up as a reviewer in ReviewLink. The only browser it will not work on is Firefox (although I'm sure there's a hack for it somewhere).
Thank-you for the explanation. I was able to see the swf in ReviewLink following your instructions; however, the focus still isn't on the swf when I tried to publish and test the zip you fixed and uploaded. When you view the file on ReviewLink is the cursor flashing in the first text field? I still have to click the swf to set the focus (testing in IE).
Thank-you very much again for all your help!
You decide where you want to place the swf file. To change the location alter The following line in the "toEmbedSwfScript":
var so = swfobject.embedSWF("test_file.swf", "swfContainer", "450", "450", "9.0.0", false, flashvars, params, attributes);
change "test_file" to the relative URL you want to locate the file in. For instance, let's say you want to have a "media" folder in the root folder you would change it to "media/test_file.swf" (no quotes). so now it wold look like:
var so = swfobject.embedSWF("media/test_file.swf", "swfContainer", "450", "450", "9.0.0", false, flashvars, params, attributes);
Yes, because you are not using a built in Lectora widget, you will have to manually place the swf file in the folder (and also make the folder itself unless you choose one, like "images", that Lectora builds on it own for other reasons.)
When uploading to ReviewLink you will have to do the following. Go through the motions to publish to reviewLink but DO NOT click upload yet. You were probably asked if you wanted the material to be saved in a folder called "review" in the root directory of your lesson. The files will be zipped. you are going to have to add the swf file into this zip file BEFORE you click the upload button on the publish to ReviewLink window.
Remember where you wanted to place it when you altered the script above. If you decided to put it in the "images folder" then add the swf to the "images" folder inside the zip. If you decided on making your own folder then you will have to add the folder with the swf inside it into the zip.
It doesn't matter what version of Lectora your using for this. I put your sameple on ReviewLink. If you give me an email address I will set you up as a reviewer.
Hope this helps.
Darrel
I tried re-uploading and it seems to work only in Chrome for me. IE is what I am developing for though. Thank-you for uploading it to ReviewLink for me, but I don't feel comfortable giving out my e-mail address. I am using IE v11, which works fine locally (i.e. viewing the index.html file in IE), but when I upload to ReviewLink, the only browser that shows the field flashing is Chrome. I will have to discuss this over with my team tomorrow, as this method seems to be a bit time consuming and prone to error, especially when there are several people working on the file and are constantly uploading for review; I am afraid linking everything and ensuring the files are where they need to be before uploading will become an issue, especially when this function is needed on at least 30 different pages. This is why I was hoping a simple native Lectora solution in setting the focus to swf files.
In any case, I thank-you again for all your help, and I greatly appreciate the time you have taken in helping me with this problem.
Thank-you very much for fixing the file! I tested it and it seems to work fine. I only have a couple of concerns with setting the focus this way. First, it seems the swf has to be included in the folder where index.html is, or it doesn't work. It actually took a while to figure out why it was showing up as blank when I tried previewing in Lectora and using the Preview in Browser option, but when I tested the index.html in the zip folder, it worked fine. When exporting as HTML, it doesn't seem like it includes the swfs in the folder, so it would have to manually placed there, correct?
In addition, when I tried to upload to ReviewLink to test, the page showed as blank. I am guessing this has to do with the way it exports when publishing to ReviewLink; the swf must not be in the folder it needs to be when it gets published. In addition, if I need to set the focus on multiple different pages, will I need to duplicate the scripts being run? It looks like I can't copy and paste the SWFObject file and have it work; I am guessing that the program generates the code for each individual file and cannot be copy and pasted across projects/pages? Is there no native Lectora fix for the focus issue without the use of third party tools? Is it just a v12 issue that the JS originally suggested doesn't work?
Thank-you again for your time in helping me with the issue. I greatly appreciate all the help given here.
One solution... in my eyes best option for sure... get rid of Flash completely. All you want done in a swf for sure can be done in Lectora with or without Javascript. Gladly prove it by converting one of your swfs to a native/javascript setup in Lectora.
Discussions have been disabled for this post