Image masking with Hype (with Android support)

Tips & Tricks
,
1

Hey guys,

I had a bit of a break trough moment last week and I wanted to share it.
Hype is great, I want to push hype a lot more. One example is masking. You can mask using a group sure, but the group is a square shape, you can't use custom shapes unless you dig into code. Unless you start using SVG, and if you use SVG you can't support android(older android). I wanted to find an alternative.

Well hype has background image properties so I thought why not use that.

So i made an action so that when you click and drag the background image property of a e.g. circle offsets by the nudge amount. So it ends up being a mask! It works on ipad and it works on android. So wanted to share it!
If you guys know a better way let me know, but this seems to work great for what I wanted to achieve in a basic way.

http://www.luckyde.com/ipad/explorer/

Note: Safari required, optimized for safari, mobile safari and Android.
I haven't done a chrome version yet, but my goals in ads are ipad/android so this works great for me.

explorer_final.zip (456.8 KB)

Screen Shot 2015-06-30 at 3.25.07 PM.png1732×1072 769 KB

Let me know if you have any feedback :smile:

Cheers!

Other things i tried making in hype:

Combining hype with GSAP
南阳欢痪工艺品有限责任公司 (turn the handle)
Gyroscope
南阳欢痪工艺品有限责任公司 (ipad required)
Scratch ad in hype
南阳欢痪工艺品有限责任公司

Update 1: See Mark's post below for an improved version

9 Likes
2

Thanks Lucky, that’s useful! Kinda Addams Family-esque to boot.

3

So the lens is mirroring the under image

Nice one, really cool.

Added simple prefs. ( Did em quick so not as pretty as they could be)

explorer_final.hypetemplate.zip (494.9 KB)

3 Likes
4

Thanks for sharing this technique and your other awesome documents!

1 Like
5

Really sorry for the late reply , this is awesome! This file is made as a template for designers who cant code so this is pretty much perfect! Thanks man, I’ll let my company know you and the forums helped out on this :smile:

1 Like
6

sheer brilliance !!!

7

This is indeed very cool!

My question: would it be possible to use this technique to make a magnifying glass? So you need two images large and small, but how to make a real magnifyer? I’ve seen some jquery examples, but will that work in Hype too?

8

I don’t see why not, you could use a small and large image for the magnifier and edit the values of it so that it moves double as slow, yeah i can definitely see it being possible with some modification. If you want to go beyond that with better zoom in and out yeah i think jQuery’s a better option, but for a basic one that doesn’t lag as much for phones working with background-image i think would be better.

1 Like
9

Hi @Luckyde

I’ve tested this Hype project inside an Android App made in XDK Intel.
I used two devices android for testing.
the animation does not work properly.

when you click over the button the circle appear after a bit at the top/left side of the screen. you can’t drag it.

The same animation works well in all browsers.

any idea?
thansks in advance

1 Like
10

Well my code was written for iPad originally,
it doesnt function in crome as well because i’m using a lot of webkit stuff.
e.g. circleContainer.style.webkitBackgroundSize ,backgroundPosition which has limited support i think. I’m using pageX and pageY for location of pointer. the root container is set to index_hype_container so possibly rename it to hypedocument.documentId(). i’m afraid my knowledge on code doesn’t extend that far as to know how to do android support iwthout having an android in my office to test it on :frowning: . But just trial and error, make a bunch of boxes and console log all the info into them to see which commands android doesn’t understand.

11

@Luckyde

No problem,
I’ve tested the animation and it works very well on all browsers, also in andorid.
I had problems on XDK only.

anyway, you made a great work
thanks !

12

Hey LDE

Great effect. Thanks a lot for sharing this.

13

Would someone have a template of a Scratching Ad in which the revealed’s image is showing up by moving an object (image) above the top image? I’m seeking for something similar to the “Scratch ad in hype” posted by @ Luckyde (http://www.luckyde.com/ipad/Swiffer/)

I’m not a developper, but I can usually manage something from a template that has the code in it.

Thanks in advance!

14

I made a no-need-js version :smile:
dragable mask.hype.zip (251.5 KB)

3 Likes
15

thats a neat idea, but the more you move the more it goes off the mouse if you let go and start dragging again. Not sure the best way of fixing that without code. Hype's got built in functions you can use though

var target = controller,
doc = hypeDocument.getElementById(hypeDocument.documentId()),
targetOffset = {left:parseInt(target.style.width)/2,top:parseInt(target.style.height)/2},
xLoc =event.hypeGestureXPosition - doc.offsetLeft -targetOffset.left,
yLoc =event.hypeGestureYPosition - doc.offsetTop -targetOffset.top;

hypeDocument.setElementProperty(target, 'left', xLoc);
hypeDocument.setElementProperty(target, 'top', yLoc);

dragable mask.hype 2.zip (155.6 KB)

16

@Luckyde

Hi Lucky! Was your example intended to be a workable demo?

In your version when I drag the mask the image underneath is not revealed. The image in the mask stays the same.

17

Hey Jim,

It was, but I made this file a year and a half ago so i found much better ways since then to approach stuff like this and this may not work in current browsers now.
If i was to make this file now i would use

to make the mask, and i would make the svg mask follow the cursor.. Sorry this file is a bit outdated..

The modified file I just posted above would work though, it's using the mask uedvincent did and it just moves it with the setElementProperty call on drag.

1 Like
18

Hi Luckyde!
Glad to see your reply, problem is I have no coding experience, I’m a UX/UI designer and just know a little bit of some thing like CSS stuff, so… forgive me I may let you down. I gonna to learn some JS skills, But English is my secondary language, and I’m not good at it. Is there some good tutorials or website can easily help me in?
Thanks again!

1 Like
19

Good work uedvincent!

Is it possible to move the magnifier on the timeline rather than dragging it?