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.
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 !
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).
Yeah the reason why i dont do that is all our files at work are called index on export for our QA 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.
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
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
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?
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.
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.