Type writing effect

Using JavaScript with Hype
21

Hi Mark and of course all of the forum,
now there is another question regarding to the same topic…
Is there an option to get this effect on mobiles?
Problem, how can i force mobile keyboard to pop up and use for this fancy effect?
I tried several fakes but still unsatisfied.
Any ideas

22

It can be done… sort of. My idea of how ( so far )

You can place a new rectangle behind the typing Rectangle with

<textarea rows="4" id="textbox" cols="1" style="font-size: 48px "> 
</textarea>

As it’s innerHTML

It is important to keep the font size of the text area above 16px. If you do not the page will zoom when the textArea comes into focus.

You then add a Touch down Action in the Action inspector on the typing rectangle.

The action should trigger a new javascript function with this.

$("#textbox").focus();

Now the problem we have though is I have not found how to hide the flashing cursor for the textArea. with still shows through the element layers!.

23

Ok I have it working now.

I changed the innerHTML of the new rectangle to:

	<input id="Input" style="font-size: 48px " value="">
	
	<label class="foo_Label" for="Input">_</label>

I then placed this above and out of scene. Making it’s opacity also 0.

We leave the touch down action but change the function slightly to:

$(".foo_Label").focus();

This seems to work well.

The one thing to note is the Auto text will go under the keyboard depending on length.

Above in other posts is one fix for this but it may not work well for all displays. I am sure there is a better fix like scroll to a position rather than into view but I only have the one iPhone size to test on so it is not worth me really looking at this.
i.e cannot be arsed :smiling_imp:

iOS_Auto_Type.hype.zip (46.7 KB)

2 Likes
24

really good work:-) i guess i will find a solution with this, thank´s for now, will let you know if i´m succeeding with my project

1 Like
25

Hi Mark,
work never stops so is there an option to use this effect on different scenes within one document?
Cheers
Achim

26

Because I’m just an amateur in programming, I’m very happy occasionally to be able using a script as shown in the forum. I then adapt it to my own wishes. For example, I used type writing effect to (fake-)challenge students typing a piece of text by head.
The lesson I made is about color and high school students can use it on their computer. When using an iPad, they can not use the type writing effect because a keyboard is required. Is it possible changing the script to show a keyboard on the iPad page as with other apps that use a keyboard? (I’m afraid asking too much now…)
The type writing effect is done on page 3 ‘Verf’ (paint)

https://www.janmac.nl/Kleur2/Kleur2.html

Another amazing effect, unfortunately I forgot the name of it and the creator, is on page 5 ‘printen’ (printing). Children can play the game to learn complementary colors.

The lesson is not ready yet, but I want to thank all the forum participants who helped me in the past with their amazing scripts and ideas.

27

This post in the thread (above) is an adaption to get the type writer effect to work on iOS.
It was for the auto type but I expect it can be further adapted with the older code.

28

It works! Thank you so much for your contribution to my hobby.
Mark Hunte for president!
https://www.janmac.nl/Kleur/Kleur.html

1 Like