Scratch ad template needed with object revealing picture

Using JavaScript with Hype
1

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!!

2

Hi @laquite

Have you downloaded the example that LuckyDe provided here? If you search for Scratch Card you will find a few posts on this. Or are you looking for a template that is similar to what Lucky did?

3

Hi @DBear!

Yes, I’ve downloaded it! But I’m more looking for a template that as an image that will make the scratch (as the penny in the example of creating a scratch card : Help creating a scratch card simulation)

4

Hi @laquite

The coin option enables you to point to a picture in your resources folder for the coin.

"coin":"",
/* on this line put a relative path to a coin pic from your resources 
folder e.g "${resourcesFolderName}/blahblah.png",*/

scratchCardAd.zip (198.8 KB)

1 Like
5

OMG, you’ve made my day, it works! Thank you very much!

6

But one thing I don’t catch, if you could give me a clue on this too, it would be very appreciated! I’ve duplicated my folder that worked with a picture for the coin’s option and I’ve try to replace the other images. To take fewer risks, I’ve decided to keep the same names files and files extensions (to avoid risk and problems). But, the web preview keeps showing the old images, can you explain what I’ve done wrong or what I haven’t done?! Thanks in advance!real-test.zip (3.0 MB)

7

@laquite

You can use whatever images you want. The names aren’t important.

To set the images you need to edit the Head HTML. (Document Inspector ⌘1)

createScratchCard({
    "container":document.getElementById("scratchcard"),
    "background":"${resourcesFolderName}/demo1-background.png", ///<---  here you place the path to your background image
    "foreground":"${resourcesFolderName}/over.jpg", ///<---  here you place the path to your foreground image
    "percent":65,
    "coin":"${resourcesFolderName}/coin.png", /// <---- here you place the path to your coin image
    "thickness":42,
    "counter":"percent",
    "callback":"callback"
    });
}

Also if you have replaced the files in the resources folder with your own images but named them the same. Then you have to close your Hype document and re-open before you do it. There is a cache problem that retains the old images when you try to delete them and then add another with the same name.

I would just add images with different names. And then edit the HTML as suggested above.

8

Oh, I’ve thought about cache, but I didn’t closed and re-opened my Hype, I’ve just tried to preload it to differents browsers. Maybe it also could be due to the fact that I didn’t renamed my file testscratchcoin_hype_generated_script.js to realtest_hype_generated_script.js and the intern mentions in it. I’ll try more things and we’ll see, thanks for your advices and your knowledge.

9

The cache problem is in Hype not any browser. If you delete / remove a file and don’t close and re-open Hype then when you re-add the same file (or different with the same name) then it does’t update the image.

10

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?

11

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
12

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 !

13

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
14

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
15

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

16

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

17

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).

18

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…

19

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.

20

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