suzannelust

Q: Transparent Image overlay

I am making an Scratchpad widget for iBooks Author.

 

I have got a worksheet where students need to draw the arms of the clock in the right angles.

I have got a transparent PNG with the arms of the clock in the correct positions and a button "check answers"

 

How can I make it so that when I click the button the image appears?

 

I have tried the action lists. But no matter what I try the image appears in the first frame before I click the "check answer" button.

MacBook Air, OS X Yosemite (10.10.3), null

Posted on May 2, 2015 3:02 PM

Close

Q: Transparent Image overlay

  • All replies
  • Helpful answers

  • by Khelmar,

    Khelmar Khelmar May 17, 2015 8:55 AM in response to suzannelust
    Level 1 (0 points)
    May 17, 2015 8:55 AM in response to suzannelust

    You should start off with the opacity of the image at 0%, then in the "Check answers" button, have the action list set the opacity of the button to 50% (or whatever's appropriate). You can also set opacity in the PageWillLoad and PageWillDisappear lists to make sure it's set appropriately before it shows up.

     

    Good luck!

  • by kiotsukete,

    kiotsukete kiotsukete Jun 3, 2015 11:16 PM in response to suzannelust
    Level 1 (20 points)
    Jun 3, 2015 11:16 PM in response to suzannelust

    Open up the code editor and, in Global.js, create an array with the correct time images you have e.g.

     

    window.globalVar = "timepics";
    
    timepics = [
        assets/timepic1.png,
        assets/timepic2.png
    ];
    

     

    However many images  you have put a comma at the end of each line except the last in your array list. Put your timepic1.png, timepic2.png, etc images in the assets panel in your iAd project.

     

    Create and import an image the same size as your timepic images. This image, when tapped will be replaced with the correct answer. Because it needs to be tapped, it can't be transparent, but it could be styled as a button with "Check!" or something written in the middle. Add this code to the image in the code editor, deleting whatever code might appear there when you first open up the code editor:

     

    this.onViewTouchDown = function (event) {
      this.viewController.startActionWithSourceView({
      "className" : "iAP.ImageSourceAction",
      "delay" : 0,
      "properties" : {
        "duration" : 0.0001,
        "targetViewId" : "Page1-MyImageName", 
          "url" : timepics[0], // This is timepic1.png (remember that the first item in an array is at index 0, not 1!)
          "height" : 165, //change this to whatever your image height is
          "width" : 173 //change this to whatever your image width is
      }
    }, this);
    };
    

     

    The MyImageName value of your tappable image is the Properties > Name  value in the iAd Inspector. Replace MyImageName in the code with whatever appears there.