Scratch ad template needed with object revealing picture

I’ve got it! I think it’s because I replaced images that weren’t in fact in my Hype document. I replaced them by the ressources’ panel because I didn’t seen them in my document, but in fact, I replaced non-existing images. That is a part of why I didn’t succeed. So, I just deleted all ressources that weren’t used and reimport my good images. Also, I checked to be sure all the images’ name in the HTML head of my document were the same as the one I imported. And finally, I cleared all the cache, the one of Hype and the one of my browser. I realized that even if I cleared them and close Hype, the only way it shows up correctly it’s when I make a refresh in my browser.

Now, my new question is :
would it be possible to switch scene when the scratching is finished without doing it by a javascript function? Or, if it just can be done in Javascript, would it be complexe to do?

to be honest I haven’t really used this “scratch” library. Perhaps @Luckyde can chime in and help you. I can’t guarantee that. I wouldn’t think it would be too difficult. I’m assuming that the ‘callback’ would be the function you would have to change in order to fire something at the end. The problem I foresee is that you cannot access the Hype API from there easily.

1 Like

Thanks for the reply! For the moment, I’ve managed it with a timeline action that switch scene after X seconds, if @DBear ou @Luckyde have something better, please tell !

use this for within the callback:

HYPE.documents['index'/*in this case index = your hypedocuments name*/].showNextScene(HYPE.documents['index'].kSceneTransitionCrossfade, 1.1)
1 Like

Hi @laquite

just an FYI. Using Han’s example. You need to put that here:

function callback(d) { HYPE.documents['index'].showSceneNamed('YOUR SCENE NAME',HYPE.documents['index'].kSceneTransitionInstant); }

However, this is for local preview. If / when you export your project. You have to change the ‘index’ to the name of your project.

function callback(d) { HYPE.documents['real-test'].showSceneNamed('YOUR SCENE NAME',HYPE.documents['real-test'].kSceneTransitionInstant); }

This is assuming you export it as is. i.e with the name on your project you gave as an example above.

1 Like

Thanks @h_classen and @DBear for all the help and the explanations. I’ll try that!

I think I'll start liking Javascript, it works perfectly!

Is it possible to call more than one image for an element in my HTML head? For example, I would like to call one or more images for the foreground element? In fact, I want to downsize the weight of my document by eliminating images and build my foreground form other elements that are already in my document. And, yes, I’ve already optimize the compression of my images (by Photoshop and TinyPNG).

OR would it be possible that my foreground would be a static view of my next scene?
I just don’t know how to link it in my HTML head…

Yeah the reason why i dont do that is all our files at work are called index on export for our QA :stuck_out_tongue: Also you could set up a lookup for the first div tag’s id on export which will be a hype document’s and place it in the above.

Yeah it’s pretty easy with javascript to swap the scenes
scratchScene.zip (259.1 KB)
Here’s one of the versions of the file

$(document).ready(function() {
	    $('.scratch').ScratchCard({
	        revealRadius: 80,
	        onScratchComplete: sratchDone, 
	        updateOnMouseMove: false, 
	        updateOnFingerMove: false, 
	        percentComplete: 50, 
	        onUpdate: function(e) {}
	    });
	}); 
function sratchDone(){
   console.log('done');
   hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1);
}

sorts it out

Does I have to paste this code in the HTML head or in my scratch.min.js file? Here what my HTML head looks like if it could help. I’ve test it with pasting this bloc of code after the createScratchCard elements but it didn’t worked, it didn’t showed up my next scene instead the called foreground.

No that script is meant for my file, I don’t know what your functions triggering things are called , but I was pointing out the
hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1);
which is triggered onscratchcomplete

If you download my zip file you’ll see how my script works, its the same file that you requested before with the swiffer :smile:

1 Like

Thanks for precisions! :blush:

In fact, I’ve started my ad from scratchCardAd.hypetemplate given by @DBear in top of this topic. And I wanted to know if it was possible to call a scene instead of an image for my Background element (sorry, in past posts, I wrote Foreground).

If yes, could you give me the syntax of it? I’ve tried to replace the « “${resourcesFolderName}/over.jpg” » by multiple elements but none of them is working.

so on paper you want a div which could potentially be animated and interactable to be one of the elements of the scratch. Well my version uses canvas to achieve this, so I don’t know if its wise to redraw the whole stage over and over animated on interaction BUT couldn’t you just
Make your background image transparent, so just a giant image with 0% opacity as in it’s got nothing inside it.
Then underneath that layer have your scene this way when you scratch out the foreground(above image) your scene will be underneath animated. The only downside of all this is you can’t interact with the scene untill the above image is gone, because all press tap events will be taken over by it. But yeah could technically just set up a scene with

Foreground
0%opacity transparent png background
entire scene of stuff underneath everything
Wouldn’t require any code

1 Like

Just brillant! I’ll try it for sure with a transparent background. Maybe I’ll also try to use your version, but I used the one of @DBear because I needed the coin’s option. Do you have something similar in your version to scratch the ad with an called image instead of doing it with mouse or finger?

Hi!

I have put together a scratch off file using the scratch.min.js file I downloaded from the forums here.
It works well in Safari but what I need is to now create an element to use instead of the cursor since on a touch screen device, there isn’t really a cursor.

I was informed that I would need to have an actual element that is set to move with touches on touch start, adjust it on touchmove, and then hide it on touchend via javascript code.

Can anyone help me to achieve this?
I’ve attached my file for your review.
indexMR.zip (2.4 MB)

Not really thinking straight. Here’s an update that uses the default scratch card setup for desktop but adds the movement and appearance of the zamboni element on mobile.

indexMR-vDBear.zip (2.2 MB)

3 Likes

Thank you so much DBear.
The first file you sent over was close to working. The image displayed on mousedown but it did not move with finger. The function of erasing the image did work.

The second file you sent over didn’t work at all with the zamboni so what I did was I transferred the setCursorForMobile function over to the original file, set it on the Mouse Down Action and it works perfectly.

I really appreciate you helping me on this. This should help all who would like to use this feature on touch screen devices.

Thanks again!
Marian
indexMR-vDBear-2-MR.zip (2.2 MB)

4 posts were split to a new topic: Issue with Scratch ad template