7 posts were split to a new topic: How to add Google Fonts to the Photics “Book” Template?
If you didn’t already know, I’ve been working on a printed version of “A Book About Hype”. Since the book is to be printed, I’ll probably just post the templates on my website. I might start as soon as this Tuesday, making new templates available before you can buy the book.
I just realized that this could be a nice Christmas Eve gift to the community, so I’ll try to get the first template online this week. The “Origin” template is just a simple project, nothing too fancy. It’s the thought that counts. 
Meanwhile, I’ve been trying to figure out the purpose of the “Use low latency Web Audio API” setting.
I’m not sure what’s it for… uncheck to enable crappy audio?! 
While experimenting with this feature, I realized something. “Hey, I can fix the ‘Coconut’ template!” Previously, the sound effect would lag. It didn’t sync with the coconut animation. The “low latency” option is great! Although, since modern web design/development is becoming a series of rules about things you can’t do, one doesn’t simply play audio on the Internet.
You need a chaser! 
(I don’t drink, but it really is a great name for the effect.)
I added a dropping sound effect once the “drop coconut” button is pressed. The user interaction unlocks the ability to play audio. Now it should work in modern web browsers. With over 2,000 downloads, it’s the most downloaded template of the bunch. I’m surprised too, as I didn’t put that much effort into it. HA HA. Hard work is not directly proportional to success. Regardless, I felt that such a popular template should be respected. So, I fixed it. Enjoy!
1 Like
Basically! Unchecking will use the HTML5 <audio> tag instead of the Web Audio API.
The most typical reason for unchecking this is that if an iPhone is set on mute, the Web Audio API will be silent, whereas the <audio> tag will still play audio. (There is a hack we've subsequently learned about and may put into Hype in a future release).
Beyond this, there are some rare contexts users have written about in which the Web Audio API can be buggy or not play at all and the best fix for users is to use the <audio> tag instead. The Web Audio API likely will also use more memory, which may an issue on larger documents on iOS.
There are some situations Hype will always use the <audio> tag regardless of the checkbox setting: having a browser that does not support the web audio api, being offline, being in an iBook, or viewing via a file:/// URL.
2 Likes
Heh, the first reply is funny.
It is disgusting that this is possible or necessary.
– Matt Montag
Ha ha, I was just playing with my goofy coconut template and wondering why the Internet isn't as fun now as it was years ago. There used to be silly animations and sound effects everywhere. Heh, difficulty in playing HTML5 audio is a big reason.
I did see that in the code, line 2148...
if(_useWebAudioAPI == true && (typeof AudioContext !== "undefined" || typeof webkitAudioContext !== "undefined") && window.location.href.indexOf("file://") == -1 && _resourcesFolderName.indexOf("ibooksimg://") == -1 && iBooksWorkaround == false && navigator.onLine != false && _browserInfo.opera == null) {
audioMethodAPI = HypeAudio_WebAudioAPI;
}
...and it looks like less than IE9 defaults to QuickTime. (I'm not sure why anyone would be running less than IE9 though. Those browsers are long dead. Even Windows 7 is going to be end of life next month.)
The other information is good to know. Thanks!
1 Like
MERRY CHRISTMAS! 
The “Origin” template is available.
– https://photics.com/free-template-tuesday-16-tumult-hype-origin/
It’s a way to visualize how elements are arranged on an HTML grid. It’s not much, but it’s the start of a lot of new templates. The idea is that I’ll be posting new templates while working on the book. It’s also important to know how the “grid” works. (That was the original name for this template, but I gave it a Christmas theme.)
There is something interesting about this template. The animation of the crosshairs is done with JavaScript and SVG. This template is over four years old, so I’m not sure why I did it that way. I suppose if you want to practice with Hype, as a way to learn, you could try recreating this template with less JavaScript. I’m thinking that the animation of the crosshairs could be done with Hype.
4 Likes
Happy New Year! 
This week’s template shows how HTML filters work.
3 Likes
You should post the links to twitter to!
I think it's better when the links occur naturally. Like this…
Besides, social media can be a major distraction. I need to be focused on finishing the book. The plan is to get the templates online, so that the book be printed. It's about one per week for the next six months.
Is everyone OK with that? 
Sure! Just thought might get some more eyeballs and build up. But then again … every approach is valid. Was in the Spirit of what I am currently trying. Either way hope Hype gains even more traction in 2020 … looking forward to the book!
1 Like
Instead of updating this thread every week, I’ve been focusing on working on the book. Although, with a nice bunch of templates published, and a bunch of templates queued up, I figured that I should do another update.
Here’s a screenshot from the Photics.com website (WordPress) dashboard. It shows the recently published templates and the templates that are upcoming…
I updated the first post with new links.
UPDATE: I’ve been busy. There are so many new templates queued up that the “Recently Published” section in WordPress can’t display them all.
The “Lightbox” template is scheduled for March 10. (I have some more writing to do, but it’s basically done.)
I’m feeling pretty good about this project and A Book About Hype (printed edition). I realized it while working on the “Bounce” template. This is it for Flash. This is the year that so many classic web games will die. 
It’s terrible. But maybe with Hype 4, the games can be reborn.
Anyway, less talk, more work. 
Update (2/6/2020) — Templates are scheduled to appear every Tuesday, from now until the end of March. After the “Lightbox” template are the “Sliding”, “Picturing”, and “Timing” templates.
More templates are planned for after that too!
2 Likes
https://photics.com/free-template-tuesday-23-tumult-hype-physics/
The Physics template is out today. It uses the standard “no coding” Physics settings in Hype. The advanced stuff (Physics API) is later on. This template does use JavaScript though, so you can change the Physics settings.
4 Likes
Wow, some people really wanted this one…
…but it wasn’t out yet. Now it is!
https://photics.com/free-template-tuesday-24-tumult-hype-clicky/
The “Clicky” template is about using the parameters in Hype’s built-in JavaScript functions. Doing so can make your project more dynamic. In the “Clicky” example, there’s only one JavaScript function — not four separate functions or four separate timelines. That’s because it uses the “element” from the action event. If an element is clicked, modify that element and only that element.
More information is in A Book About Hype. The book is ahead of schedule, but still several months out. If you want to be notified when the book is available, heart the second thread in the announcement post
2 Likes
Flash is dying!
It’s been a long and slow death. Even this video is almost 5 years old…
And yet, what’s been done about it?
For many old Flash games, like “Population Tire”, pretty much nothing.
…but if only people knew… if only they knew how to make games with Hype… perhaps fun would return to the Internet. This week’s free Hype Template shows the possibilities…
https://photics.com/free-template-tuesday-25-tumult-hype-bounce/
Making games with Hype is to be a big part of A Book About Hype. The “Bounce” template doesn’t even use the new Physics API. I’m really looking forward to releasing the book, but there’s still much more work to do.
Meanwhile, what’s your high score?
6 Likes
The slide puzzle is now online…
4 Likes
This week’s a big one. It’s the Jigsaw template…
Wow… 📘 A Book About Hype (2020 Print Edition) [UNDER CONSTRUCTION] …one month ago seems so far away.
4 Likes
Just kept on looking at the repeat lines… and just could not help myself… [it’s lock down after all]
And I know foreach recursive madness.
//-- elements X COORDS object
var setXObjects = {
"a":["-50","-128","-192"],
"b":["-50","-128","-178"],
"c":["-64","-114","-192"],
"d":["-64","-114","-178"]
}
//-- elements Y COORDS object
var setYObjects = {
"b":["-64","-50","-64","-50"],
"c":["-128","-128","-114","-114"],
"d":["-174","-178","-192","-192"]
}
//-- coord array to loop through
var XYObjects = [setXObjects,setYObjects]
var counter = 2 // start number for id name of element.
var coord = "x" // coord we are going to set
//-- loop over each item in XYObjects
XYObjects.forEach(function(ob) {
//-- loop over this item in XYObjects
Object.keys(ob).forEach(function(key) {
//-- loop over this objects value in this XYObjects item
ob[key].forEach(function(val,index) {
//-- use the key name with object index number + counter to get the Element by ID. Set the coord to the value
hypeDocument.getElementById(key + ( index + counter) +"_hype_pat").childNodes[0].setAttribute(coord, val );
});
});
//-- change the coord and the start number
counter--
coord ="y"
});
3 Likes