Free Template Tuesday #15 – Tumult Hype “Fishy”

Fishy – Animated GIFWeb development is profession that is filled with numerous challenges. Quite often, you could be faced with a technical puzzle to solve. But unlike a video game, which is designed to entertain you and make you happy, these digital enigmas can torment you. What is the right answer? In a field that is constantly changing, sometimes there are no perfect answers. Even more perplexing, sometimes there are multiple answers. Which is the best choice? That is the point of this free Hype template. Sometimes, it’s OK not to code.

I hear it a lot from designers. “I can’t code!” Well, that’s a bunch of nonsense. I didn’t go to college to be a programmer. I started out as a photojournalist. This lead into desktop publishing and design, which lead me to the Internet. Now that I can code, I find myself looking forward to showing off my Internet prowess. That’s a dangerous trap for a designer / developer. While designers shouldn’t be so fearful of coding, being a bridge between the two professions is also problematic. If you get stuck in the code, or lost in the technical, you can lose track of the overall goal.

OK, so what does this have to do with Tumult Hype? 🤔

In a recent topic at the Tumult Forums, a question was asked – How Do I Add A Particle Effect? This problem is so common in web development. Someone spots a cool feature on a website. Like a shiny toy in a toy store, that someone says, “I want it!” The web developer / designer then has to figure out a way to make the customer happy.

This is an especially troubling task for creative minds. We don’t want to copy. We want to create! But such nobility conflicts with an old saying, “Good artists copy, great artists steal!” See how the pressure builds and you haven’t even started yet? Web design / development is not just a battle of tech smarts, it can also involves ethics and philosophy. What makes something beautiful?

It is true that a developer / designer shouldn’t waste their time reinventing the wheel. And yet, that’s all too often the first and main salvo in solving such a task. Developers and Designers will ask themselves, “What free code can I find online to solve this problem?” Despite the famous artist quote, I don’t recommend stealing. However, some code is meant to be copied. Why else would I publish these templates? But if you simply cut-and-paste, you won’t learn the art of problem solving or creating something for yourself. These projects are meant to enlighten you, to expand your thinking.

This article is not to bash anybody. While I have almost 25 years of professional experience in making websites, finding the correct answer to technical challenges is still a constant struggle. Here’s an example…

With Circles with Grandma, the background circles are animated. It reminds me of a lava lamp. I like particles. Adding such colorful effects is a great way to make a game seem more animated. While there are downloadable particle Javascript libraries online, I wanted a customized and lightweight solution. So, I wrote my own particle engine for the game.

While this code worked for me, it wasn’t a good answer to the question asked on the Tumult forums. My solution was too complex and too purpose specific. Instead of trying to explain the code, I simply suggested that Hype’s native features be used instead.

Fishy - Bubble Motion Path

While I’d like designers to be more open to the possibility that they can code, I don’t want to bash them over the head with the idea either. Programming requires logical thinking and a certain passion for technical problem solving. It’s hard to do that without a clear and focused mind. Instead of suggesting how to use SVG and JavaScript to create floating bubbles, the “Motion Path” feature in Hype is way easier to explain. Then, once one particle is created, just duplicate the effect to create lots of particles. It’s tedious, but effective. That’s way simpler than explaining the use of Sine and Cosine to create a zigzag motion.

Sure, dynamic bubbles would be more impressive. But sometimes, you just need to get a project done. That’s where Hype is nice. It lets designers focus more on the design and not get trapped in the code. This article is also advice to myself. As I’ve become a better developer, I’ve lost track of design. It’s hard to be creative when you’re worried about accessibility, search engine optimization, scalability, file size limitations, cross platform compatibility, hardware performance and a whole bunch of other technical matters. I’m not quite sure how I’ll resolve the balance between creative freedom and technical perfection, but at least I’m aware that this is an issue.

Anyway, here’s the template. It’s to show that sometimes a simple but tedious method can get the job done. If I get around to creating a Hype 4 book, perhaps dynamic “Particles” will be a topic that’s covered.