I have a TileList that's loaded with data from Flickr. The tilelist uses an imageRenderer to make a bunch of thumbnails.
I'm trying to create a custom drag and drop function, but I want to get the image source of the tilelist mouseEvent target. Here's what the code looks like for the drag handler:
public function onPicMouseDown(e:MouseEvent):void {
var tileList:TileList = TileList(e.currentTarget);
var item:Object = Object(tileList.selectedItem);
var source:DragSource = new DragSource();
var dragView : Image = new Image();
dragView.source = tileList.selectedItem.source;
DragManager.doDrag(
rowRenderer,
source,
e,
dragView
);
}
But tileList.selectedItem doesn't have a source property. The source is a property of the image produced by the itemrenderer. I'd like to be able to do something that's the equivalent of
tileList.selectedItem.itemRenderer.source
But that doesn't do it either.
There's got to be a simple way to do this that I'm just missing. Any help would be much appreciated.
In your onMousePicDown handler your source should be:
dragView.source = event.target.parent.source;
Related
I'm doing the drag an drop of an ItemRenderer manually (DataGrid) and want to know how to generate a custom DragProxy of a component that hasn't been added to the display list.
I tried something like this but didn't work:
private function doDrag(event:MouseEvent):void
{
var dragSource:DragSource = new DragSource();
dragSource.addData(data, 'dnd_format');
//var bm:Bitmap = new Bitmap(ImageSnapshot.captureBitmapData(this));
var btn:Button = new Button();
btn.label = 'New Button';
var bm:Bitmap = new Bitmap(ImageSnapshot.captureBitmapData(btn));
var dragProxy:Image = new Image();
dragProxy.source = bm;
DragManager.doDrag(this, dragSource, event, dragProxy,0,0, 0.6);
}
So, I want to be able to create the DragProxy using a component, the button is just an example.
Any ideas?
My guess is that this is not working because you are trying to get a bitmap from a component that was just created and has not been added to the stage. I would try testing this code with using an embedded image as the drag proxy first. If that works, then try getting a bitmap from a component that exists on the stage. My guess is that both cases will work.
I am implementing drag and drop from a DataGrid onto a List in a Flex 3 AIR application. I would like to have the drag image be a photo (jpg) referenced by a String field in the data grid item, named 'imagePath'. I'm having trouble getting the image to show up during dragging. I have triple checked that it is not because of an invalid path to the image. I have tried Image's source() and load() methods in every way I can think of. I am calling this method 'dragCurrentToList(event)' on a mouseDown event.
private function dragCurrentToList(event:MouseEvent):void
{
var current:Object = event.currentTarget.selectedItem;
var dragImg:Image = new Image();
dragImg.load(current.imagePath);
dragImg.width = 100;
dragImg.width = 100;
var dsource:DragSource = new DragSource();
dsource.addData(current, 'record');
DragManager.doDrag(event.currentTarget as DataGrid, dsource, event, dragImg);
}
This works perfectly if I set the image source to the following bindable variable but I don't want to hardcode the image name.
[Bindable]
[Embed(source='assets/icons/default.jpg')]
public var dragIcon:Class;
...
dragImg.source = dragIcon
...
In your dragCurrentToList method, why are you loading the image instead of just specifying the source attribute as the URL to the image?
http://livedocs.adobe.com/flex/3/langref/mx/controls/SWFLoader.html#source
private function dragCurrentToList(event:MouseEvent):void
{
var current:Object = event.currentTarget.selectedItem;
var dragImg:Image = new Image();
dragImg.source = current.imagePath;
dragImg.width = 100;
dragImg.width = 100;
var dsource:DragSource = new DragSource();
dsource.addData(current, 'record');
DragManager.doDrag(event.currentTarget as DataGrid, dsource, event, dragImg);
}
Also make sure you are responding to the dragStart event. ( http://livedocs.adobe.com/flex/3/langref/mx/core/UIComponent.html#event:dragStart ). And I believe instead of accessing the DragManager class; you should simply modify the dragSource property of the dragStart event.
Is it possible to get the bitmap data from a component using ActionScript?
I dynamically load an image.
onComplete I create a Flex Image component and add the loaded image to the source
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event):void
{
var image:Image = new Image();
image.x = 0;
image.y = 0;
image.source = e.currentTarget.content;
canvas.addChild(image); // canvas is already added as an MXML element.
}
Later I want to create a new Image component and get the bitmapData from the first Image.
I have tried this
canvas.getChildAt(0)
Which seems to give me the Image, but I can not figure out how to get the bitmap data.
canvas.getChildAt(0).bitmapData;
gives me a compile error "... undefined property"
Does anyone know how ot get the bitmap data so I can use it in my new Image component?
Thanks in advance,
Ran
Check out ImageSnapshot.captureBitmapData()
http://livedocs.adobe.com/flex/3/langref/mx/graphics/ImageSnapshot.html
Cliff's answer will give you a screenshot of the Image; to get the underlying BitmapData for the image without doing a screenshot, you can try
Bitmap(image.content).bitmapData
This should avoid any filters as well.
This should do it.
var bd:BitmapData = new BitmapData(myComponent.width, myComponent.height, true, 0);
bd.draw(myComponent);
I've reviewed all the documentation and Google results surrounding this and I think I have everything setup correctly. My problem is that the symbol is not appearing in my app. I have a MovieClip symbol that I've embedded to my Flex Component. I need to create a new Image control for each item from my dataProvider and assign this embedded symbol as the Image's source. I thought it was simple but apparently not. Here's a stub of the code:
[Embed(source="../assets/assetLib.swf", symbol="StarMC")]
private var StarClass:Class;
protected function rebuildChildren():void {
iterator.seek( CursorBookmark.FIRST );
while ( !iterator.afterLast ) {
child = new Image();
var asset:MovieClipAsset = new StarClass() as MovieClipAsset;
(child as Image).source = asset;
}
}
I know the child is being created because I can draw a shape and and that appears. Am I doing something wrong? Thank you!
You should be able to simply set child.source to StarClass:
child = new Image();
child.source = StarClass;
See the MovieClipAsset Language Reference for more details:
you rarely need to create MovieClipAsset instances yourself
because image-related properties and
styles can be set to an
image-producing class, and components
will create instances as necessary.
For example, to set the application
background to this animation, you can
simply write the following:
<mx:Application backgroundImage="{backgroundAnimationClass}"/>
Flex has built in drag-n-drop for list controls, and allows you to override this. But they don't cover this in examples. The built-in functionality automatically drags the list-item, if you want to override this you find the handlers are being set up on the list itself.
What I specifically want to do, is my TileList shows small thumbnails of items I can drag onto a large Canvas. As I drag an item from the list, the drag proxy should be a different image.
So, I followed the technique suggested and it only works if I explicitly set the width/height on the proxy Image. Why?
It's not obvious until you've tried it =) I struggled with the same thing just a few weeks ago. This was my solution:
The list:
<List>
<mouseDown>onListMouseDown(event)</mouseDown>
</Tree>
The mouse down handler:
private function onMouseDown( event : MouseEvent ) : void {
var list : List = List(event.currentTarget);
// the data of the clicked row, change the name of the class to your own
var item : MyDataType = MyDataType(list.selectedItem);
var source : DragSource = new DragSource();
// MyAwsomeDragFormat is the key that you will retrieve the data by in the
// component that handles the drop
source.addData(item, "MyAwsomeDragFormat");
// this is the component that will be shown as the drag proxy image
var dragView : UIComponent = new Image();
// set the source of the image to a bigger version here
dragView.source = getABiggerImage(item);
// get hold of the renderer of the clicked row, to use as the drag initiator
var rowRenderer : UIComponent = UIComponent(list.indexToItemRenderer(list.selectedIndex));
DragManager.doDrag(
rowRenderer,
source,
event,
dragView
);
}
That will start the drag when the user clicks an item in the list. Notice that I don't set dragEnabled and the other drag-related properties on the list since I handle all that myself.
It can be useful to add this to the beginning of the event handler:
if ( event.target is ScrollThumb || event.target is Button ) {
return;
}
Just to short circuit if the user clicks somewhere in the scrollbar. It's not very elegant but it does the job.
I found a simpler answer here. That example extends a DataGrid control, but you can do the same with a List control. In my case, I use an image source instead of Class:
public class CustomDragList extends List {
[Bindable]
public var dragProxyImageSource:Object;
override protected function get dragImage():IUIComponent {
var image:Image = new Image();
image.width = 50;
image.height = 50;
image.source = dragProxyImageSource;
image.owner = this;
return image;
}
}
Then use that custom list like this:
<control:CustomDragList
allowMultipleSelection="true"
dragEnabled="true"
dragProxyImageSource="{someImageSource}"
dragStart="onDragStart(event)"/>
Where 'someImageSource' can be anything you'd normally use for an image source (embedded, linked, etc.)