A little over five years ago, marks the start of free Hype template Tuesdays. It all started with a Coconut. I didn’t even realize that so much time had transpired. But after noticing that Groundhog Day falls on a Tuesday this year, I started getting nostalgic. I remembered the Groundhog template. Perhaps I should launch a new Hype Template?
A new template hasn’t been launched since last summer. That’s when I switched from working on A Book About Hype, back to working on the Widgets app. But since my main computer wasn’t available, there was a brief moment to toss something together. I’ve been reading the Tumult Forums and I noticed that people were having trouble with masking. Hype could use some improvement in this area. But in some cases, a hack could work. This is reminiscent of the night vision effect in Bot.
By placing a big image over the scene, a “Spotlight” effect is fairly easy to achieve.
Just looking at that, I expect the James Bond theme song to start playing. While the image is fairly large, at 1280 x 720 pixels, the file size is less than 3K. I probably could have optimized it even more, but I wasn’t at my main computer when I created the spotlight.png image. Maybe an SVG image would have been better. The point is to create a cutout in the image. That circle is not white. It’s transparent. The background is white. By placing something underneath the “spotlight” image, you can create a crude — but effective — masking effect.
By dragging the spotlight image, with a click or touch, the spotlight can be moved horizontally or vertically. This is easy to do with Hype’s “Control Timeline” action from an “On Drag” event. There are two main actions. One moves the image horizontally (X), while another moves the image vertically (Y). The trick is to create two timelines where the “spotlight” image moves left/right and up/down. A “Group” element is used to scale the whole scene.
The spotlight is given a soft edge with the “Filter Effect” options. A little blur can make the lighting seem more realistic. With those “Backdrop” effects gaining better browser support, lots of other cool effects can be achieved. By modifying the “spotlight” image and the filter effects, there are a lot of cool possibilities. As an example, if I was porting BOT to Hype, this is the technique I’d explore to recreate the night vision effect.
In this template, the motion of the spotlight is not a pixel perfect effect. I didn’t even bother with alignment. Instead, the speed was increased. This actually makes it less tedious to control, especially on large screens. Sure, this effect could be improved, but that would likely involve custom JavaScript. If you look close enough, you can find a little bit of code sprinkled into the project. When the mouse is down, the cursor is hidden, only to return on a mouse up event.
Download the Spotlight Template to see how it works. If you’ve read A Book About Hype, and reviewed the Looking template, then you should have enough information to add a mouse-over effect.