Typewriter effect in Hype


(Francois Meehan) #1

Hi,

I have been using Hype for quite some time. I am not a programmer but I can see the great potential of using Javascript with Hype. It is just that I don’t know where to start.

For instance I need to display text as if it was enterred from a typewriter. The only option I have is to enter the letters one by one on the timeline, each being individual text element. There has to be a better way.

There are a couple of javascript that can do that, like typed.js http://www.mattboldt.com/demos/typed-js/

I have no clue how to interface the code with hype and I could not find a tutorial like javascript for hype for beginner.

Can someone give me a hint, where to start? A widget or add a script to the library? And then how to invoke the script?

By the way, concerning the Hype 3 book project, integrating script should be a full section by itself, in a way that a non programmer could get it’s way around it.

Thanks in advance,

François


#2

Hi Francois, ( @meehanfp)

You can animate the innerHTML of an element. And type the letters in as you create new keyframes but …

an easier way is using a javascript library.

textAnimation.zip (26.3 KB)

Enjoy!


(Francois Meehan) #3

Wow! Thanks, this is awesome!


#4

More info here! for the javascript library. If you want to change it. :wink:


(Derek) #5

Hey DBear…
This is very kind of you to add this, and although I have downloaded and done my best to integrate the JS file into my existing page, I am at a loss.

I have added the… “This is really all you need to get going.”

<script src="jquery.js"></script>
<script src="typed.js"></script>

To my Head HTML document, but now what?  
The test text and New Text, New Text, New Text... doesn't show up on scene.

I have downloaded the .js folder, but now what?  How do I get it into Hype?
Confused, yet again.

Thanks  :)

#6

Hi Derek,

I’ll try to break it down for you. :slight_smile: There are a few ways to achieve this.

• First you have to download a copy of typed.js from the site
(this is a direct link to download it :wink: https://github.com/mattboldt/typed.js/archive/master.zip )

• Then drag to your resources folder in your Hype document or click the plus symbol at the bottom of the resources window and click add file…

(Don’t forget the file you want is “typed.js”

• You then need to do the same for jQuery or you can use the CDN link

So depending on what you did your head.HTML file should look like this

<script type="text/javascript" src="${resourcesFolderName}/jquery.js"></script>
<script type="text/javascript" src="${resourcesFolderName}/typed.js"></script>

or

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="${resourcesFolderName}/typed.js"></script>

Then you have to write a little javascript for what text you want to appear. If you look at my document I uploaded above then you should see what I’ve done.

Basically, on scene load run a new javascript function and add the code below then wherever you want your text to display give it a class name of “typed”. Your sentences are where it says strings: below.

$(".typed").typed({
  strings: ["New Text New Text New Text New Text New Text New Text.", "New Text New Text New Text New Text New Text New Text."],
  typeSpeed: 1
});

If you’re still stuck let me know and maybe send me what you want done and I’ll do you a quick document.

D


(Derek) #7

Hey thanks DBear.
I don’t know why I can’t get my head around it, but here’s what I have…

This is the Header:

This is the Javascript I put into a new function called Test()

  $(function(){
      $(".typed").typed({
        strings: ["New Text New Text New Text New Text New Text New Text.", "New Text New Text New Text New Text New Text New Text."],
        typeSpeed: 1
      });
  });

I added Test() to OnSceneLoad … but nada.
Gotta be missing something.
Thanks for your help.

EDIT - It appears the header text doesn’t show… but it is the second choice.
Also… I only added the file names type.js, not the entire folder??


Repeating keyframes
(Mark Hunte) #8

Here is a simple Javascript that seems to work ok.

I just wrote it so it is what it is… for now. :smile:

 	var charArray = "Here is some text to type out\n And this is a second line.".split('');
	var textElement = hypeDocument.getElementById('text');
	var counter;
	var i=0;

  var thisFire =   setInterval(function(){
	 
	 if (i == charArray.length){
	 clearInterval( thisFire);
	  return;
	 }
     var charItem = charArray[i];
 
	 textElement.innerHTML =  textElement.innerHTML + charItem;
 
  		i++;
	
	 }, 200);

In this project this Javascript is run on scene load.

type text.hypetemplate.zip (10.6 KB)


(Derek) #9

Hey Thanks Mark.
Can’t get that to work either… maybe I default to a simple F*&%ing opacity fade.


(Mark Hunte) #10

@Chizz,
Can you post your project ?


(Derek) #11

Thanks Mark.
But it is huge.
I have lots of text I would like to animation various scenes, but am under time constraints and can’t be bothered if it’s going to take this amount of effort.
Found an equally impressive option.
Thanks much for your time and offer :slight_smile:


(Mark Hunte) #12

Hi Derek ,

Ok.

Maybe when you get some time we can go over what you are doing. Both methods above are really simple to add to a project so maybe there is some misunderstanding of how to run things in hype, which we can look at.

Can you elaborate on the solution you found for others who may read this post.

Cheers


(Mark Hunte) #13

@Chizz Derek,

I just noticed a typo in the code above which I just corrected. This would have stopped it working.

The line textElement.innerHTML = ttextElement.innerHTML + charItem;

Should be textElement.innerHTML = textElement.innerHTML + charItem;

The download would have worked as expected


#14

Well, I’m not sure what else we could do. Nice to see you’ve found an option.

D


(Mark Hunte) #15

A slight update to my code.

I noticed that the CR where not working…

There is probably a better way of getting them to show up. But this works for me at the mo.

var charS = "Here is some text to type out @ And this is a second line. @@@ this is a third line with 3 returns above"
	
	var charArray = charS.split('');
	
	var textElement = hypeDocument.getElementById('text');
	var counter;
	var i=0;

  var thisFire =   setInterval(function(){
	 
	 if (i == charArray.length){
	 clearInterval( thisFire);
	  return;
	 }
     var charItem = charArray[i];
     
     if (charItem == "@"){

     charItem = "\<br\>";
 
     }
 
	 textElement.innerHTML =  textElement.innerHTML + charItem;
 
  		i++;
	
	 }, 200);

#16

You have to add a rectangle element and give it a class name of “typed”. This is where the text will appear.

D


(Colin) #17

Hello Francois,
I am sending you a link to a simple process I use. Type out the text and then use the same colour as your background in a rectangle that is on top of the text and have that rectangle move out of the way using a timeline… Download the zip file from my site, no need for extra coding Hype does it for you
good luck
Colin

Update… the link did not work, I have since uploaded a zip file


(Mark Hunte) #18

Can you zip and upload this.

Thanks


(Colin) #19

Would love to, I thought sending a link would work… not sure how to upload


(Mark Hunte) #20

just compress the project file and drag it into your post.
:smile: