1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default png "on click" hot spot

    png "on click" hot spot


    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"

  2. #2
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498
    Vote Rating
    10
    arnebech will become famous soon enough

      0  

    Default


    I am not sure I follow.

    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?

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default


    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;


    //update image src
    imageElement.src = imageSrcList[currentImageIndex];

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default


    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.

    sample.jpg

  5. #5
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498
    Vote Rating
    10
    arnebech will become famous soon enough

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default


    thanks I'm going to get some help with the scripts. Do you know if the external js would still compile up in to a widget OK

  7. #7
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498
    Vote Rating
    10
    arnebech will become famous soon enough

      0  

    Default


    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.

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default Thanks

    Thanks


    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.

    Thanks


    Peter

    We'll post a link to the book when it goes live

  9. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default transparent grey box on click

    transparent grey box on click


    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

  10. #10
    Sencha User
    Join Date
    Mar 2012
    Posts
    34
    Vote Rating
    0
    piza is on a distinguished road

      0  

    Default


    Never mind I found a work around. If i use a transparent png instead of the box made in Sencha it never shows the grey box

Thread Participants: 1