ScreenZoom Example: Pinch to zoom

Welcome to our brand new Clickteam Community Hub! We hope you will enjoy using the new features, which we will be further expanding in the coming months.

A few features including Passport are unavailable initially whilst we monitor stability of the new platform, we hope to bring these online very soon. Small issues will crop up following the import from our old system, including some message formatting, translation accuracy and other things.

Thank you for your patience whilst we've worked on this and we look forward to more exciting community developments soon!

Clickteam.

    Hi everybody!
    As promised here is an example file how to use Multitouch Pinching to zoom in/out using the ScreenZoom object.

    There are two frames, one that shows a combined drag/drop scrolling with zooming + scroll-speed altering based on scale and one frame that just shows the very basics (if you have trouble understanding the first more advanced frame).


    Limitations:
    When zooming in, you cant scroll entirely to the edges. This is a limitation that is pretty hard to work around.
    You might be able to do it manually by setting the layer position itself when it can't scroll any longer due to the frame edges.

    Thanks...
    Of course I couldn't get it to work.. tried both examples in my program.
    What is it looking at? I only copied the controls on my frame (3 layers) and copied the 3-5 events in it.
    Will is resize EVERYTHING that's on the frame, or only specific items etc.
    in my game I am using 3 layers (1 = background , 2 = frame for the puzzles, 3 = everything else)
    and I added the component on 1 the background and also tried on layer 3 where I have all the buttons and active objects.

    (here is an example of how I have the frames Please login to see this link.)

    It will only work when you run it on you iOS device. The windows runtime doesn't support the ScreenZoom or multi-touch objects yet.

    If you look closely at the events, it also shows that it's scaling the layer named "ScaleLayer". So anything on the layer named that would be scaled. If you want everything to be scaled (all your layers at once), use the Scale screen action of the ScreenZoom object instead.

    It is for IOS. I might have saved the example to save in filesize. But yes it's for IOS otherwise.

    Guess I did not see the "scalelayer" part. have to look when i get home then.
    thought I didn't see any arrows that something was missing... but it was late :)

    The Scale screen Action, was that also in the example ?

    ok, I see the layer thing, so I updated my code with it and gave some of my layers a name...
    But nothing happens lol.
    Does it matter how the layers are setup ?
    Like
    Layer1
    Layer2
    Layer3
    And I have the code set for Layer 2

    Tried a lot of times, but a pain to keep going back and forth between PC<-->mac<-->Ipad lol

    ok, I cannot get this to work in my own app..
    my app has 2 layers, and 1 of them is called ScaleLayer (like in the example)
    I copied over the code from the example into my app, but it's not working..
    What is the trick ?

    Any chance I can see what you are doing to figure out what isn't working right?

    Please login to see this picture. Please login to see this link. - Please login to see this picture.

    Any word on this ?? I even put in a bug report for it. since it looks like it was made with MMF 2 and MF 2.5 it doesn't
    also... what does "LaScale" stands for ? since I cannot find it as a Var anywhere...

    Here is a link with both files: Please login to see this link.

    Check your iOS properties for your frame.
    Set the 'Touch mode' to 'Multi touch' instead of 'Single touch' :)

    If you can't use two fingers then you can't pinch to zoom ;)

    Please login to see this picture. Please login to see this link. - Please login to see this picture.

    have 1 question... Zoom is working great, but is it possibe to put a limit on how far you can zoom in and out ??
    my screen = 1028 x 768 to i made the area 1200 x 900 but I can zoom way more in and zoom all the way out, so i can't see it at all lol..
    It needs some kind of a max zoom in / out on it... is that possible with the 1st example ?

    In my example have a look at event #6 (the last one).
    There I set the scale value:

    Code
    Min(Max(referenceScale( "Multiple Touch" ) * ( pinchPercent( "Multiple Touch" ) / 100.0 ), 0.2 ), 5.0 )

    Simply change the 0.2 and 5.0 values to whatever you want. Those values limit the zoom.

    Please login to see this picture. Please login to see this link. - Please login to see this picture.

    The zoom is working great now... changed it to 1.0 and 3.0 so I can't zoom all the way out.
    1 thing I noticed..
    My window viewer = 1024x768 and my app frame= 1363x768 and with this in place if it's showing normal
    i can drag the form to the left (the rest of 1362-1024) Is there a way to ignore that, so it doesn't move when it's zoomed normal ?

    Simply limit the scroll in both x and y direction to half the window size.
    So:
    Center horizontally at: Min( <the old X-scroll-position here>, WinXSize( "Window Control" )/2)
    Center vertically at: Min( <the Y-old scroll-position here>, WinYSize( "Window Control" )/2)

    (note: it may sound counter-intuitive to set a maximum scroll position using the Min() function, but that is how it works :) )

    You can even do better and correct the maximum scroll position to some calculation of the current zoom level. Otherwise you cannot zoom in on the bottom-right corner.

    Please login to see this picture. Please login to see this link. - Please login to see this picture.

    I mean the expression that it would otherwise use:

    Before it was:
    referenceX( "Multiple Touch" ) + ( referenceWinX( "Multiple Touch" ) - windowTouchX( "Multiple Touch" ) ) * scrollScale( "Multiple Touch" ) + ( X Right Frame - X Left Frame ) / 2.0


    Now it should be:
    Min( referenceX( "Multiple Touch" ) + ( referenceWinX( "Multiple Touch" ) - windowTouchX( "Multiple Touch" ) ) * scrollScale( "Multiple Touch" ) + ( X Right Frame - X Left Frame ) / 2.0 , WinXSize( "Window Control" )/2)

    Please login to see this picture. Please login to see this link. - Please login to see this picture.

    Thanks, that worked... now it doesn't move to the right anymore when it's not zoomed..
    Now I need to figure out why I can't move up/down and left/right anymore once I zoom in....
    I can't win :(

    I expanded on my example file a bit here:
    Please login to see this attachment.

    The maxScrollX and maxScrollY alterable values in the Multiple Touch object controls the scrolling limits.
    When you zoom in it allows you to scroll closer to the window edge as that portion isn't visible to the user.


    EDIT: I realize that the MMF2 scrolling boundary will prevent it from zooming in on the topmost and leftmost part of the frame here. I'll modify the example so it has a minimum scrolling part as well. You will have to center your zoomable area inside a larger frame that is free to scroll in any direction and not limited for scrolling near the top and left frame edge.

    Please login to see this picture. Please login to see this link. - Please login to see this picture.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login