Explore the community Forums Lectora Lectora Questions & Answers Set resize action to enlarge from left to right, not centered

Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #297788 Score: 0
    Profile photo of Peter Lionberger
    Peter Lionberger
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    @Russell

    Hi,

    I have an action set to resize an image. I would like to control the motion to enlarge or reduce in size moving to the left only (I am changing the horizontal value only),  holding the right edge of the image in place. It currently resizes around the center of the image.

    Is there a way to do this?

     

    Thanks,

     

    Peter

    #297810 Score: 1
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    336 pts
    @ssneg

    There is no setting for that but you can add a “move to” action to concurrently move the image to a different coordinate so that the right edge of the resized image coincides with the right edge of the original image. It’s tricky, though, because Lectora can’t properly do two animations at once, so you’ll have to:
    1. Make sure the animations are set to maximum speed
    2. Delay the “move to” action by 0.1 second to allow the resizing to finish.
    And still it’ll be a bit jolty.

    If I were you, I’d just duplicate the image, resize one of those and make it appear with hide/show actions.

    This post has received 1 vote up.
    #317908 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    119 pts
    @mnotermans5114

    Or use and GSAP to scale. There is perfect functionality in GSAP to set your registration point to wherever you want.

    http://greensock.com/forums/topic/9031-registration-point/

    I tried to find a sample, but didnot succeed.

    If more people think this is interesting i mock up something myself.

    Regards,

    Math

    #318085 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    First of all, credit for the idea goes to Math who shares my appreciation for GSAP. Sorry, Math, it intrigued me and I couldn’t wait.

    One thing I’d like to point out is that if your applying this to a shape object you need to set it’s clip attribute back to auto or it will not work. Images do not require this because Lectora does not apply clipping automatically.

    If you’ve never dabbled in GSAP before here’s instructions. Go to the GreenSock homepage and select the download GSAP button. Unzip. You will need to add an HTML Extension object – Header Scripting. Browse for file and select TweenMax.min.js. You do not need jQuery.

    If your applying this to images only add the following run javascript to whatever you are using to trigger the animation:

    var photo = document.getElementById(“image293″);
    TweenMax.to(photo, 2, {scaleX:1.5, transformOrigin:”center right”});

    Where “HTMLName” is the HTML name of the image – IE “image239”.
    Note that in the first line, which assigns the image to a JavaScript variable, you need to enclose the name in quotes.

    The second line of code, where the magic happens, takes the photo and over a span of 2 seconds applies X (horizontal) scaling of 1.5 percent. The “transformOrigin” moves the point from which the scaling occurs to the center right of the photo.

    With regards to the scaling, if your image is 200px wide, a 1.5 will end up with, you guessed it, a 300px wide image.

    If you don’t like arithmatic (e-gads I almost said “Math”) then just play around with the scaling numbers until you end up with a size you can live with.

    You can also adjust the time to your hearts content.

    Hope this helps. Feel free to fire questions off. Again, shout out to Math.

    Darrel

    This post has received 1 vote up.
    Attachments:
    1. expandLeftOnly.zip
    #318088 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    Oh, I forgot, here is how you would apply the GSAP animation to a Lectora shape.

    Remember, you have to set the clip property to auto if you are doing this with Lectora shapes. This is not necessary if your resizing images.

    On the show of the page with the shape you want to resize add a run JavaScript:

    document.getElementById(“shape38”).style.clip = “auto”;

    Replace “shape38” with the HTML Name of the shape you’re resizing. This is one instance where you do not amend the HTML Name with the addition of “Img”. The line of code changes the CSS clip property to “auto” where no clipping is applied.

    You do, however, have to amend the HTML Name (“shape38” becomes “shape38Img”) for the GSAP animation JavaScript.

    var element = document.getElementById(“shape38Img”);
    TweenMax.to(element, 2, {scaleX:1.5, transformOrigin:”center right”});

    See my post above for code explanation.

    DRS

    • This reply was modified 3 years, 5 months ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: typo
    • This reply was modified 3 years, 5 months ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: second typo
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.