Free Hype Templates 🏗

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!

image

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. :scream_cat:

It’s terrible. But maybe with Hype 4, the games can be reborn.

Anyway, less talk, more work. :laughing:


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:heavy_heart_exclamation:

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? :smile:

6 Likes

The lightbox template is now online…

6 Likes

sliding

The slide puzzle is now online…

4 Likes

The “Timing” template is now online…

3 Likes

The “Navigating” template is now online…

3 Likes

The clock is back, now in dark mode…

3 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

Ha ha... nice.

I considered automating that part, but I didn't see the timesaving... xkcd: Is It Worth the Time?

...but I'm only working with 16 pieces. If someone made a much larger puzzle, then that's pretty neat.

2 Likes

Drawing those puzzle-pieces with hypes svg-shapes you’ve earned this weeks diligence-award :wink:

2 Likes

If you missed it, the "Jump" template is online...

https://photics.com/free-template-tuesday-34-tumult-hype-jump/

There’s a nice discussion about this template here…

...and there's a related post here...

The webpage template is online…

…it has cool features, such as a responsive menu, viewport based animation, and vector drawing.


UPDATE — Fixed an issue where the menu wouldn’t update when changing layouts.

Also, this template is based on the “Hype Book” landing page… http://photics.com/hype-book/ …and related chapter / section in the book.

4 Likes

Recently, I received a message asking if it was OK to use the templates. This was somewhat surprising to me. They're free templates. Go and have fun! HA HA. But yeah, if you're working on a commercial project, you might be looking for something more official.

So, here it is... the Photics Public License (PPL)

I thought about using the MIT license, but I don't want the templates distributed on a stand-alone basis. The PPL was created to emphasize that distinction. If people are looking for unaltered templates, then they should get them from Photics.com. I don't mind if people pass around the templates privately to their friends and co-workers. But if shared publicly, it should be done via a link to the Photics.com template page.

If you've already been using the templates in your projects, that's great! This is change is not about harassing you. If you notice, I put "Attribution Recommendation" — not "Attribution Requirement" — because I want to be friendly to people that previously used the templates.

This change is more in response to this... https://choosealicense.com

An open source license protects contributors and users. Businesses and savvy developers won’t touch a project without this protection.

In other news...

A new template is scheduled for Tuesday. It's a response to this thread...

2 Likes

The "Orientation" webpage is online...

...by comparing the width and height of a webpage, it can be quickly determined if the orientation is landscape or portrait. This technique can be applied as an alternative — or complement — to responsive elements and breakpoints.


UPDATE 7/28/2020 (Afternoon) — A new version of template was uploaded.

4 Likes

The "Spotlight" template is online...

https://photics.com/free-template-tuesday-37-tumult-hype-spotlight/

It's in response to this thread...

What I find interesting is how there are so many solutions to this problem. Here's one from @gasspence A Flashlight (mouse follower) — back in May of 2015. It's one of the oldest templates in the "Template Gallery" category. After posting the "Spotlight" template, I looked at the forum list. I was surprised to see that one second to last. Did I waste my time? Nope, it's different, but it's another coding solution.

...and that's where the "Spotlight" template gets tricky. It uses two "On Drag" actions, so the image can be moved left/right or up/down.

It's not pixel perfect. The "Control Element Position" action is pixel perfect. But if you move the image too far, this can happen...

That's why the "Spotlight" template uses "On Drag". While the speed is set to be a bit fast, this method has some advantages. It works well when using a trackpad or touch device. Your finger doesn't have to move so far to control the spotlight. Plus, if the spotlight exactly matched the touch location, your finger could cover the animation.

4 Likes

The "Timely" template is online...

https://photics.com/free-template-tuesday-38-tumult-hype-timely/

It's in response to this thread...

Basically, the template shows how to add real-world time-based animation. Based on the time of the day, you can load a specific scene. That same idea could be used to load a timeline, or go to a specific point in a timeline. In this example, it's a city scene that changes color... Morning, Afternoon, Evening, and Nite. There's also a corresponding greeting.

Recently, macOS added a lot of timely features... Dark Mode, Night Shift, and Dynamic Desktop. Tumult is even expanding that with their "Nightly" app...

...with a few conditionals and a timer, your Hype project can also react to the time of the day.

These related templates may also be useful...

4 Likes