I need to build a view that can display many images at the same time (scattered around the screen), and where each image can be dragged, resized and rotated. I want to prevent the images from being dragged completely off the screen too. I also need to find a way to include a button on each image, that when clicked, "flips" the image (or just switches view state to show text on the "backside"). Any tips for what components/widgets I would use for this?
Our ImageElement provides that exact composition and functionality and you can see our GML tutorial for specifying gesture boundaries.
I'm trying to do the same thing. When I run it, it looks like this: ...
the grey box in the upper left hand corner looks like it may be trying to be the info box. Do I have to edit the cml differently? or add any buttons to my library?
Are you building your ImageViewer in CML or AS3?
Great, I'll have a look at the ImageViewer component!
I just tested the CML example, from the link above, by switching the image reference and the layout updated as expected.
<Image id="img" src="images/new_image.jpg" scale=".5" mouseChildren="false"/>
Have you made any other changes to the CML?
I kinda of have something working here. But running into some problems.
I want to restrict the boundaries of the drag/scale - This is mostly working with the GML tutorial referenced above but it seems like the size of images has an effect on the boundary. Is this true?
The drag - I'm using the simulator, so maybe it's just that. But as I drag, the image moves faster than my cursor/mouse. Is that normal? Can I turn that off?
For the bounded area (for dragging/scaling) - is it possible to also apply a mask so that even if a user drags an image quickly, they'll never see it go into another area of the canvas?
Performance - I have a LOT of really big images. Anything I should be aware of here? I'm noticing an increased startup time as I add more images - totally expected there, just want to know if there are serious limits or problems after some threshold?
The size of the image has no effect on the boundary. They are simply hard limitations enforced on either the gesture deltas or the transformations depending on where you set them. For example, if you set x drag boundaries of min=0 and max=1200, the objects registered with the gesture cannot be horizontally translated to values less than 0 or greater than 1200. If you scale the image up, the boundaries will not automatically adjust to account for the new transform.
An alternative to applying boundaries to the gesture, is to apply them individually on the touch objects themselves. The TouchSprite (base class of all touch objects) has local min and max boundary settings for all transform properties.
touchSprite.minX = 0;
touchSprite.maxX = 1200;
This approach will allow you to dynamically update the settings relative to the object's size.
Are you using native transforms or are you applying your own transformations through custom gesture handlers? If you are using handlers, you need to make sure the nativeTransform attribute is set to false otherwise the gesture will be processed through both resulting in duplicate transformations.
The easiest way to do this is to create a primary parent object and set the scrollRect attribute to the dimension you want to mask.
parent.scrollRect = new Rectangle(0, 0, 400, 400);
YES! Standalone Flash players are only 32 bit and will crash if loaded with too many memory intensive files. I recommend scaling the images to the maximum size they will be in the application. So if you have a 3840x2160 image but it will only display at 1280x720 at it's max scale, then resize the image to this resolution before loading into the app.
Your boundary explanation makes sense. Using minX and maxX seems to do the trick.
I still can't figure out why my drag speed is faster than my mouse drag speed though. I'm just setting up the n-drag (http://www.gestureml.org/wiki/index.php/N-drag) gesture and applying it to my CML file like:
minScale="0.1" maxScale="1.0" scale="0.1"
<Gesture ref="n-drag" gestureOn="true"/>
I don't have any code attached to these objects/events. What could I be doing wrong here?
Maybe the device's refresh rate and the applications frame rate are out of sync. Take a look a the solution for this post. If adjusting the frame rate does nothing, I will need you to send me your project.
I tried adjusting the frame rate of the main Flash (fla) file. Same problem though. The code I have is really just what I've posted above, plus this gesture:
<Gesture id="n-drag" type="drag">
<comment>The 'n-drag' gesture can be activated by any number of touch points between 1 and 10. When a touch down is recognized on a touch object the position
of the touch point is tracked. This change in the position of the touch point is mapped directly to the position of the touch object.</comment>
<cluster point_number="0" point_number_min="1" point_number_max="1"/>
<algorithm class="kinemetric" type="continuous">
<property id="drag_dx" result="dx"/>
<property id="drag_dy" result="dy"/>
<property ref="drag_dx" target="x"/>
<property ref="drag_dy" target="y"/>
I tested this simple drag example on two separate machines using both touch and mouse simulator and could not reproduce the exaggeration. We have received reports in the past and have been able to verify this issue in certain instances for some unknown reason in fullscreen AIR applications. Download and run the example to see if the behavior persists on your end (you will need to relink the libraries). If it does, I will provide you with a workaround.
Hi Shaun, thanks for that. Your app works fine on my system. So I went through my app and changed every setting (publish target version, frame rate, etc.) to be the same as yours, then also linked to the exact same libraries. My app still has the drag problem! Because my app worked fine when using FlashBuilder, and this problem came about when I created a new doc in Flash Pro (then copied in my code/assets), I can only assume this is a strange FlashPro problem. I'm probably going to spend a little more time digging through the settings just to be sure, and if I don't find a fix, I'll create a new doc and go from there. Really weird!
Ugh, I didn't set fullscreen=true, that was the problem. Finally able to move forward!
But now my images are huge/up-scaled hmm. Is fullscreen=true just scaling the entire movie up to fill the screen? Is there a way to do fullscreen but not scale the images incorrectly?
Enabling fullscreen just applies these settings to the stage:
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
stage.align = StageAlign.TOP_LEFT;
With these settings, there should be no alteration to the scale of your display objects. Are you setting the scaleMode of the the stage elsewhere in your application to something like EXACT_FIT or SHOW_ALL?