Forum Discussion
Fake a Blinking Cursor
Hi all. I'm simulating entering text in a DOS command window. I have instructions and a text entry field. The text entry field is the bottom layer so when landing on the page the cursor is already b...
Hi Kris,... firstly, respect for mentioning DOS and the command prompt - takes me back to my good old days of games programming! ;)
Second, you can absolutely fake a blinking cursor in a text field. The blink is fairly easy to do. Set up two layers, each one 0.5 seconds long (thats about how long a "blink" lasts)
On Layer 1 you will show your white cursor
On Layer 2, it wont show anytihng (but the timeline is still set to 0.5s)
Now on Layer 1, add a trigger that says SHOW LAYER "Layer 2" WHEN TIMELINE ENDS on THIS LAYER
And the same for Layer 2 (except of course you are showing Layer 1 when timeline ends)
This is a nice little timer hack, so SL will automatically swap between the layers at the right time and it will look like a blinking cursor.
If you then need to MOVE your cursor as the user types (just like in DOS), then I would just use a state in Layer 1 for each position of your cursor (1,2,3,4,5... etc)
Once you have the states set up, you just need to show the correct state WHEN TIMELINE STARTS on Layer 1. TO do this, you could use JS if you are comfortable with it, or a Numeric SL variable could hold the character count of the text field, and show the corresponding blinking cursor state.
Does that help at all?
This is very helpful! I'm going to try it today. A few questions.
What do you mean by this:
If you then need to MOVE your cursor as the user types (just like in DOS), then I would just use a state in Layer 1 for each position of your cursor (1,2,3,4,5... etc)
Do I set the layers to show the base layer?
How would the javascript go?
Thank you so much!
Sorry Kris, only now did I realise your questions were to me!
So yes, when you need to move that cursor when the user types, you will simply move from one state to another in Layer 1. Each position of the cursor will be set up as a different state in the layer.
Im not sure what you mean with this one - "do i set the layers to show the base layer?", but dont worry too much here. The base layer will show automatically, and this is where you will have your text input field. The additional Layer 1 and Layer 2 are only there to make a fake cursor blink.
Therefore, as long as you show Layer 1 when you start to type, the rest will take care of itself.You asked about the javascript...
Ive attached an actual Storyline project file here with the JS in it.
It works!... and I messed around a little to refine it (for example I noticed when comparing it to DOS, that the DOS cursor doesnt blink uniformly, it actually doesnt blink when you type, so I have tweaked my SL file to mimic this behaviour)It could do with more polish though! :)
Does this help for a solution?
