Typewriter effect in Hype

Using JavaScript with Hype
60

Of the top of my head maybe something like this.

Have each timeline action call this as you are doing in you example. But all of them calling this single code.
I have commented in the code…

//- Set up a call counter to use as an index
 if(typeof window.speakIndex == "undefined") {window.speakIndex = 0 }


//-- list the conversation in the order you want it in an Array which holds Associated Array objects. ( key /value objects)

	//-- boxID = the box elements id
	
  var boxPeopleConversation = [
  {boxID:"textBox1",speed:50,ttext:"Hello, how are you"},
  {boxID:"textBox2",speed:50,ttext:"<indent>I'm fine, you?"},
  {boxID:"textBox3",speed:50,ttext:"The weather is nice"},
  {boxID:"textBox4",speed:50,ttext:"Yes it is"},
  {boxID:"textBox5",speed:50,ttext:"See you later"},
  {boxID:"textBox6",speed:80,ttext:"<indent>Take Care"}]
  
  //-- use the index number to get the Array  object at that index in boxPeopleConversation.
  //-- An Array item index  starts at 0 not 1.   i.e index 0,1,2,3,4,5   would be six items
  
  //-- Then we use the keys to get their values.  i.e boxID, speed, ttext are keys. their values folloews  after the ":"
  var  textElementID =  boxPeopleConversation[window.speakIndex].boxID
  var  txtString = boxPeopleConversation[window.speakIndex].ttext
  var  speed = boxPeopleConversation[window.speakIndex].speed
  
  //-- we don't want outof bounds error. i.e the calls may exceed the number of objects in the boxPeopleConversation Array.
  //-- So we put a condition in to to counter going beyond the number of items in the Array.
  
  if (window.speakIndex <= boxPeopleConversation.length){
  
  //-- we call the function that will pass on the latest arguments to the TypeText function.
  coversation(textElementID,txtString,speed)
  }
  
  
  function coversation(textElement,txtString,speed){
  
  var textElement = document.getElementById(textElementID);
  
  hypeDocument.TypeTextExtension({
	textElement:textElement,
	 autoTypingSpeed:speed,
	 typeString:txtString,
	 
	 hasCursor: {
	cursor:"" ,
	cursorFontSize:28},
	 
	})
	   //-- increase index count by 1
	window.speakIndex++
}

TypeText_Dialogue Example.hypetemplate.zip (20.1 KB)

If you wanted just two boxes for example you would have you Array like this.

 var boxPeopleConversation = [
  {boxID:"textBox1",speed:50,ttext:"Hello, how are you"},
  {boxID:"textBox2",speed:50,ttext:"<indent>I'm fine, you?"},
  {boxID:"textBox1",speed:50,ttext:"The weather is nice"},
  {boxID:"textBox2",speed:50,ttext:"Yes it is"},
  {boxID:"textBox1",speed:50,ttext:"See you later"},
  {boxID:"textBox2",speed:80,ttext:"<indent>Take Care"}]

TypeText_Dialogue Example_just twoBoxes.hypetemplate.zip (16.7 KB)

2 Likes