Right now it appears the hot spot for a transparent png is the pixel dimensions of the image itself not the area defined by the transparency. Is there a work around this for overlapping images and stacking images where I need the negative space of a larger image to not be "hot"
If you only want part of an image to receive click events in Animator, you could just add a box, remove background-color and borders styles (so it looks "invisible") and then attach the click action to that panel?
true that would work, great idea...but then my fancy script that you folks sent me wont work as I need all those invisible panels(as I'm sure I'll need a few to cover parts of one image) to replace the one image they are the hot spot for.
the below script works great but now I would need any of the "multiple" hotspots to replace the one image sequentially as before, any ideas?
//list of all the images, these need to be in the exported asset folder
var imageSrcList = [
"assets/board-blue.png",
"assets/board-red.png",
"assets/board-yellow.png"
];
//get image element
var imageElement = document.querySelector('#Board img');
//get current image index
var imageSrc = imageElement.src;
var currentImageIndex = 0;
for (var i = 0; i < imageSrcList.length; i++) {
if (imageSrc.search(imageSrcList[i]) !== -1 ) {
currentImageIndex = i;
}
}
//get next image
currentImageIndex = currentImageIndex + 1;
//go to first image if we are at end of list
currentImageIndex = currentImageIndex % imageSrcList.length;
In case this is confusing, the reason I'm doing this is I have multiple images being stacked on a scene and they are all
different shapes and sizes. Sample image below: I want to be able to click on any of the blue areas and replace all blue areas to pink, click again and change it to green etc. But I also want to click on the orange areas and only change them to say yellow, then black. so the above script would now have to understand there are multiple "orange hotspots" that could get clicked to change only one graphic.
Sound like you should write yourself a small js file that does all the logic, and then call it's methods from Animator.
You can include external js by adding a script tag in the Project->Head HTML property.
Let say you create an object called "imageLogic" in you external js file, then you can in Animator click action refer to it (something like "imageLogic.replaceTopImage()"). As long as you assign CSS Id to all the objects you need to change you can refer to them from the external script.
Yeah, as long as you include in the widget and link to it relatively it should work.
E.g. include the script similar to this in the Head HTML property
<script type="text/javascript" src="assets/logic.js"></script>
Then on export, copy in the logic.js file into your asset folder.
For development, you could also give the script an absolute path so you don;t have to copy it in the asset folder every time you export it. e.g
<script type="text/javascript" src="/some/place/on/my/pc/assets/logic.js"></script>
Just make sure to change it back to an relative path when you do the final export.
Just wanted to thank you and Sencha for all the help. Its this level of support that made me buy the full product over other html animation packages. Whilst building a DEMO of an iBook we tied several options but in the end it was the level of support given that was the ultimate deciding point.
So using the transparent box object for hot spot works functionally. BUT when converted to a widget for iAuthor on click the hot spot shows a grey box until you let go of the hold. Is this coming from the sencha file, and if so is there a way to get rid of it(all other "actions" are set to non). I'm trying to turnn everything else off in case theres some other feature being stored but no luck yet
png "on click" hot spot
Reply With Quote