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.
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.
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 :)
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.
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??
Here is a simple Javascript that seems to work ok.
I just wrote it so it is what it is… for now.
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.
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
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.
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);
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
There are a few ways to achieve this.
