beta
Click here to ask Question Now
Its free No registration required. Flash, Flex, Flash
Media Server, ActionScript,Adobe Air. Most questions receive a response in an hour.
3/9/2010 8:03:00 AM
Title: flex video drag and drop
How to drag and drop videos in flex. I searched a lot in the website
but i am not able to found only images drag and drop i found. so somebody pls help i need it urgently for my project.
1
do you want to drag and drop VideoDisplay component in flex , if so then you can use code like this to do this :
<mx:VideoDisplay id="vidDisplay" x="101" y="160" width="100" height="100" mouseDown="vidDisplay.startDrag(false)" mouseUp="stopDrag()"/>
2
Actually i want drag and drop the video in the flip book. can you help how to drag and drop the videos in the flip book.
3
www.quietlyscheming.com/blog/components/flexbook/,http://www.rubenswieringa.com/blog/flex-book-component-beta, this sites are showing flip book and inside this book dynamically we can drag and drop the videos.For that i tried a lot converting drag and drop image coding to videoDisplay but it is not working.
4
www.quietlyscheming.com/blog/components/flexbook/,http://www.rubenswieringa.com/blog/flex-book-component-beta, this sites are showing flip book and inside this book dynamically we can drag and drop the videos.For that i tried a lot converting drag and drop image coding to videoDisplay but it is not working. it is very urgent for my project please send details about this.
5
if you are using flex component for video it should behave similar to image component.
If you are using raw video component then try adding it as rawChildren inside some flex container like canvas and then use the canvas refrence like you are using for image . it should work.
Its difficult to predict whats going wrong in your code . If you can upload your project source code to some server and post link here then i can check the project for you.
If you are using raw video component then try adding it as rawChildren inside some flex container like canvas and then use the canvas refrence like you are using for image . it should work.
Its difficult to predict whats going wrong in your code . If you can upload your project source code to some server and post link here then i can check the project for you.
6
Thanks Andre...But i am new to flex i am doing my final year project in flex so you please send a sample code drag and drop for video files.If you have time please guide me
or give some useful links...
or give some useful links...
7
check this sample to drag and drop videoDisplay component in flex. There are two functions to drag and drop object in two canvas components. In dragging function when clicked the object is added to parent application so that it can be dragged in whole movie. On releasing mouse it detects where it is dropped . If dropped in canvas1 or canvas2 it will be added to the pages or to the root again.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="1024" minHeight="768">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private function dropObject(component:DisplayObject):void{
if(component.hitTestObject(canvas1)){
canvas1.addChild(component);
component.x=0;
component.y=0;
}else if(component.hitTestObject(canvas2)){
canvas2.addChild(component);
component.x=0;
component.y=0;
}
stopDrag();
}
private function startDragging(component:UIComponent):void{
this.addChild(component);
component.x=mouseX-30;
component.y=mouseY-30;
component.startDrag(false)
}
]]>
</mx:Script>
<mx:Canvas id="canvas1" x="47" y="21" width="200" height="200" backgroundColor="#AEAEAE">
</mx:Canvas>
<mx:Canvas id="canvas2" x="440" y="21" width="200" height="200" backgroundColor="#CFEDFF">
</mx:Canvas>
<mx:VideoDisplay id="vidDisplay" x="301" y="277" width="100" height="100" mouseDown="startDragging(vidDisplay)" mouseOut="dropObject(vidDisplay)" mouseUp="dropObject(vidDisplay)"/>
<mx:Label x="47" y="2" text="Page1 on , Drag object to this page to add"/>
<mx:Label x="440" y="2" text="Page2 on , Drag object to this page to add"/>
<mx:Label x="166" y="251" text="click to Drag the Black video component and drop it on pages to addin them"/>
</mx:Application>
8
Thanks inder, But if the video ends, in one canvas it cannot play again from starting but i want it continuously play after dropping into one component so pls guide send your personal email for my reference. If you have doubt mail me at above mail thankyou..
9
Hi,
the code I provided you does not effect the video playback while dragging and dropping the videoDisplay component.
However if you want the video to keep playing after ending again in loop then you should set the autoPlay="true" autoRewind="true" in videoDisplay component tag in mxml.
the code I provided you does not effect the video playback while dragging and dropping the videoDisplay component.
However if you want the video to keep playing after ending again in loop then you should set the autoPlay="true" autoRewind="true" in videoDisplay component tag in mxml.
10
also add vidDisplay.play(); in startDragging function this will make video play if it has stopped playing on dropping.
11
m also having the same question that how to drag and drop videos in flex book,well its working perfectly for images but not supprt audio,video files..As i tried a lot the above coding and still showing the problem,the videos not loading and displaying the output..Waitin for a QUICK AND POSITIVE REPLY...
12
you need to set the source of the video . set your flv file as source and it should play
13
I attached (ActionScript) code with this which is used to drop the image in the flip book.But it is not possible to do swf video please how to add video and audio with this flip book.
package com.adobe.wheelerstreet.fig.panzoom
{
import com.adobe.wheelerstreet.fig.panzoom.modes.PanZoomCommandMode;
import com.adobe.wheelerstreet.fig.panzoom.utils.ContentRectangle;
import flash.display.Bitmap;
import flash.display.BlendMode;
import flash.display.Loader;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.media.*;
import flash.net.URLRequest;
import flash.display.AVM1Movie;
import flash.media.Video;
import mx.controls.*;
import mx.core.UIComponent;
import mx.effects.AnimateProperty;
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
import mx.events.TweenEvent;
import mx.containers.Panel;
import mx.controls.Button;
import mx.core.UIComponent;
import mx.core.Application;
import mx.core.IUIComponent;
import mx.events.FlexEvent;
import mx.events.EffectEvent;
import mx.effects.Resize;
import mx.managers.CursorManager;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.events.MouseEvent;
import mx.core.UITextField;
public class ImageViewer extends UIComponent
{
[Bindable]
public var loadingImage:Boolean = false;
[Bindable]
public var bitmapScaleFactorMin:Number = .125;
[Bindable]
public var bitmapScaleFactorMax:Number = 5;
private var _panZoomCommandMode:PanZoomCommandMode;
public var viewRect:Rectangle;
public var _contentRectangle:ContentRectangle;
private var _bitmap:Bitmap;
private var _video:Video;
private var _bitmapScaleFactor:Number;
private var _smoothBitmap:Boolean = false;
private var _imageURL:String;
private var _loader:Loader;
private var _vidload:SWFLoader;
private var _percentLoadedLabel:Label;
private var _angle:Number = 0;
// preloader assets
[Embed(source="icons/iconography.swf", symbol="ProgressThrobber")]
private var _progressThrobber:Class;
private var _progressSWF:SWFLoader;
/////////////////////////////////////////////////////////
//
// public getters/setters
//
/////////////////////////////////////////////////////////
/**
*
* Setting the imageURL triggers the loading of the image and extraction
* and assignment of it's bitmapData.
*
*/
[Bindable]
public function get imageURL():String
{
return _imageURL;
}
public function set imageURL(value:String):void
{
// setting imageURL triggers loading sequence
if (value == _imageURL)
return;
_loader = new Loader();
_loader.load(new URLRequest(value));
loadingImage = true;
formatUI();
_percentLoadedLabel.text = "";
invalidateDisplayList();
// load events
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleLoadComplete);
_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, handleLoadIOError);
_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, handleLoadProgress);
}
/**
* Setting the ImageViewer's bitmap triggers the activation of the PanZoomCommandMode.
*
* <p>The PanZoomCommandMode acts as the 'invoker' element in the Command Pattern.
* It's constructor requires that you assoiciate it with a 'client' and a 'reciever'.
* In this implementation the 'client' is the ImageView (this) and the
* reciever is the bitmapData transform matrix.</p>
*/
public function get ContentRect():ContentRectangle
{
return _contentRectangle;
}
public function set ContentRect(value:ContentRectangle):void
{
_contentRectangle = value;
Alert.show("VALUE++>"+_contentRectangle);
}
public function get angle():Number
{
return _angle;
}
public function set angle(value:Number):void
{
_angle = value;
}
public function get bitmap():Bitmap
{
return _bitmap;
}
public function set bitmap(value:Bitmap):void
{
if (value == _bitmap)
return;
_bitmap = value;
Alert.show("bitmap"+_bitmap);
//_contentRectangle = new ContentRectangle(0,0,_bitmap.width, _bitmap.height, viewRect);
//Modified for above to fit image to viewRect
//{
_contentRectangle = new ContentRectangle(0,0,viewRect.width, viewRect.height, viewRect);
_contentRectangle.viewAll(viewRect);
//}
_panZoomCommandMode = new PanZoomCommandMode(this, _contentRectangle)
_panZoomCommandMode.activate();
invalidateDisplayList();
}
public function get video():Video
{
return _video;
}
public function set video(value:Video):void
{
if (value == _video)
return;
_video= value;
Alert.show("video"+_video);
//_contentRectangle = new ContentRectangle(0,0,_bitmap.width, _bitmap.height, viewRect);
//Modified for above to fit image to viewRect
//{
_contentRectangle = new ContentRectangle(0,0,viewRect.width, viewRect.height, viewRect);
_contentRectangle.viewAll(viewRect);
//}
_panZoomCommandMode = new PanZoomCommandMode(this, _contentRectangle)
_panZoomCommandMode.activate();
invalidateDisplayList();
}
/**
* Tracks the scale of the bitmap being displayed.
* Setting the bitmapScale factor invalidates the displayList since any
* change will requite an update.
*/
[Bindable]
public function get bitmapScaleFactor():Number
{
return _bitmapScaleFactor;
}
public function set bitmapScaleFactor(value:Number):void
{
if (value == bitmapScaleFactor )
return;
if (value < bitmapScaleFactorMin)
return;
if (value > bitmapScaleFactorMax)
return;
_bitmapScaleFactor = value;
invalidateDisplayList();
}
/**
* setting smoothBitmap to true hurts performance slightly
*/
[Bindable]
public function get smoothBitmap():Boolean
{
return _smoothBitmap;
}
public function set smoothBitmap(value:Boolean):void
{
if (value == _smoothBitmap)
return;
_smoothBitmap = value;
invalidateDisplayList();
}
/////////////////////////////////////////////////////////
//
// public functions
//
/////////////////////////////////////////////////////////
/**
* The zoom function requires a direction to be assigned when the function
* is triggerd. "in" zooms in and conversly "out" zooms out.
*/
public function zoom(direction:String):void
{
var _animateProperty:AnimateProperty = new AnimateProperty(this);
_animateProperty.property = "bitmapScaleFactor";
_animateProperty.addEventListener(TweenEvent.TWEEN_UPDATE, handleTween);
_animateProperty.addEventListener(TweenEvent.TWEEN_END, handleTween);
switch (direction)
{
case "in":
if (_bitmapScaleFactor * 2 > bitmapScaleFactorMax)
{
_animateProperty.toValue = bitmapScaleFactorMax;
} else
{
_animateProperty.toValue = _bitmapScaleFactor * 2;
}
break;
case "out":
if (_bitmapScaleFactor / 2 > bitmapScaleFactorMax)
{
_animateProperty.toValue = bitmapScaleFactorMax;
} else
{
_animateProperty.toValue = _bitmapScaleFactor / 2;
}
break;
}
_animateProperty.play();
function handleTween(e:TweenEvent):void
{
switch (e.type)
{
case "tweenUpdate":
_contentRectangle.zoom = bitmapScaleFactor;
break;
case "tweenEnd":
_contentRectangle.zoom = bitmapScaleFactor;
_animateProperty.removeEventListener(TweenEvent.TWEEN_END, handleTween);
_animateProperty.removeEventListener(TweenEvent.TWEEN_UPDATE, handleTween);
break;
}
}
}
/**
* The zoomByOrigin function zooms in on the users current mouse position.
* This function requires a direction to be assigned when the function
* is triggerd. "in" zooms in and conversly "out" zooms out.
*/
public function zoomByOrigin(direction:String):void
{
var _animateProperty:AnimateProperty = new AnimateProperty(_contentRectangle);
_animateProperty.property = "zoomByOrigin";
_animateProperty.addEventListener(TweenEvent.TWEEN_UPDATE, handleTween);
_animateProperty.addEventListener(TweenEvent.TWEEN_END, handleTween);
_contentRectangle.zoomOrigin = new Point(
(-_contentRectangle.x + mouseX) * 1/_contentRectangle.scaleX,
(-_contentRectangle.y + mouseY) * 1/_contentRectangle.scaleY
);
switch (direction)
{
case "in":
if (_bitmapScaleFactor * 2 > bitmapScaleFactorMax)
{
_animateProperty.toValue = bitmapScaleFactorMax;
} else
{
_animateProperty.toValue = _bitmapScaleFactor * 2;
}
break;
case "out":
if (_bitmapScaleFactor / 2 > bitmapScaleFactorMax)
{
_animateProperty.toValue = bitmapScaleFactorMax;
} else
{
_animateProperty.toValue = _bitmapScaleFactor / 2;
}
break;
}
_animateProperty.play();
function handleTween(e:TweenEvent):void
{
switch (e.type)
{
case "tweenUpdate":
bitmapScaleFactor = e.value as Number;
break;
case "tweenEnd":
_animateProperty.removeEventListener(TweenEvent.TWEEN_END, handleTween);
_animateProperty.removeEventListener(TweenEvent.TWEEN_UPDATE, handleTween);
break;
}
}
}
public function setZoom(scale:Number):void
{
_contentRectangle.zoom = scale;
bitmapScaleFactor = scale;
}
public function centerView():void
{
_contentRectangle.viewAll(viewRect);
bitmapScaleFactor = _contentRectangle.scaleX;
}
/////////////////////////////////////////////////////////
//
// constructor
//
/////////////////////////////////////////////////////////
/**
* Constructor.
*/
public function ImageViewer():void
{
viewRect = new Rectangle();
_contentRectangle = new ContentRectangle(0,0,0,0,viewRect);
addEventListener(ResizeEvent.RESIZE, handleResize);
addEventListener(FlexEvent.CREATION_COMPLETE, handleCreationComplete);
function handleCreationComplete(e:FlexEvent):void
{
_contentRectangle.zoom = .5;
bitmapScaleFactor = _contentRectangle.zoom;
invalidateDisplayList();
}
}
/**
* @private
*/
private function handleResize(e:ResizeEvent):void
{
if (_contentRectangle == null)
return;
_contentRectangle.centerToPoint(new Point(this.width/2, this.height/2));
}
/////////////////////////////////////////////////////////
//
// protected overrides
//
/////////////////////////////////////////////////////////
/**
* When the display list is updated the bitmap is drawn via a bitmapFill
* applied to the UIComponents graphics layer. The size and position of the bitmap
* are determined by the bitmapData's transform matrix, which is derived by parsing
* the _contentRectangle's properties.
*
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
viewRect.width = width;
viewRect.height = height;
if (_bitmap == null)
{
// if there's no bitmapData fill the component with black
graphics.beginFill(0xFFFFF9,1)
graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
} else if (viewRect != null)
{
//Modified for restrict zoom out limit
//{
if(_contentRectangle.height<viewRect.height || _contentRectangle.width<viewRect.width)
{
centerView();
return;
}
//}
var __bitmapTransform:Matrix = new Matrix(_contentRectangle.width / _bitmap.width,
0,
0,
_contentRectangle.height / _bitmap.height,
_contentRectangle.topLeft.x,
_contentRectangle.topLeft.y
);
var offsetWidth:Number = viewRect.width / 2;
var offsetHeight:Number = viewRect.height / 2;
__bitmapTransform.translate(-offsetWidth, -offsetHeight);
var radians:Number = _angle * (Math.PI / 180);
__bitmapTransform.rotate(radians);
__bitmapTransform.translate(+offsetWidth, +offsetHeight);
// fill the component with the bitmap.
graphics.clear()
graphics.beginBitmapFill(_bitmap.bitmapData, // bitmapData
__bitmapTransform, // matrix
false, // tile?
_smoothBitmap // smooth?
)
graphics.drawRect(0,0,unscaledWidth, unscaledHeight);
// if the edge of the bitmap transition into view
// we paint in the negative area.
if (_contentRectangle.left > viewRect.topLeft.x)
{
//Modified first line for restrict zoom out limit
// _contentRectangle.x=0;
graphics.beginFill(0x000000,1)
graphics.drawRect(0,0, _contentRectangle.x, unscaledHeight);
}
if (_contentRectangle.top > viewRect.topLeft.y)
{
//Modified first line for restrict zoom out limit
//_contentRectangle.y=0;
graphics.beginFill(0x000000,1)
graphics.drawRect(0,0,unscaledWidth, _contentRectangle.y);
}
if (_contentRectangle.right < viewRect.width)
{
//Modified first line for restrict zoom out limit
//_contentRectangle.right=viewRect.width;
graphics.beginFill(0x000000,1)
graphics.drawRect(_contentRectangle.right,0, viewRect.width - _contentRectangle.right , viewRect.height );
}
if (_contentRectangle.bottom < viewRect.height)
{
//Modified first line for restrict zoom out limit
//_contentRectangle.bottom=viewRect.height;
graphics.beginFill(0x000000,1)
graphics.drawRect(0,_contentRectangle.bottom, viewRect.width , viewRect.height - _contentRectangle.bottom );
}
}
}
public function RotateImage(angle:Number):void
{
_angle = _angle+angle;
var __bitmapTransform:Matrix = new Matrix(_contentRectangle.width / _bitmap.width,
0,
0,
_contentRectangle.height / _bitmap.height,
_contentRectangle.topLeft.x,
_contentRectangle.topLeft.y
);
var offsetWidth:Number = viewRect.width / 2;
var offsetHeight:Number = viewRect.height / 2;
__bitmapTransform.translate(-offsetWidth, -offsetHeight);
var radians:Number = _angle * (Math.PI / 180);
__bitmapTransform.rotate(radians);
__bitmapTransform.translate(+offsetWidth, +offsetHeight);
// fill the component with the bitmap.
graphics.clear()
graphics.beginBitmapFill(_bitmap.bitmapData, // bitmapData
__bitmapTransform, // matrix
false, // tile?
_smoothBitmap // smooth?
)
graphics.drawRect(0,0,unscaledWidth, unscaledHeight);
}
public function updateDisplayImage(x:Number, y:Number,width:Number, height:Number,bitmapwidth:Number, bitmapheight:Number,angle:Number):void
{
if (_bitmap == null)
{
// if there's no bitmapData fill the component with black
graphics.beginFill(0xFFFFF9,1)
graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
} else if (viewRect != null)
{
_bitmap.width=bitmapwidth;
_bitmap.height=bitmapheight;
_contentRectangle.width=width;
_contentRectangle.height=height;
_contentRectangle.topLeft.x=x;
_contentRectangle.topLeft.y=y;
var __bitmapTransform:Matrix = new Matrix(_contentRectangle.width / _bitmap.width,
0,
0,
_contentRectangle.height / _bitmap.height,
_contentRectangle.topLeft.x,
_contentRectangle.topLeft.y
);
var offsetWidth:Number = viewRect.width / 2;
var offsetHeight:Number = viewRect.height / 2;
__bitmapTransform.translate(-offsetWidth, -offsetHeight);
var radians:Number = _angle * (Math.PI / 180);
__bitmapTransform.rotate(radians);
__bitmapTransform.translate(+offsetWidth, +offsetHeight);
// fill the component with the bitmap.
graphics.clear()
graphics.beginBitmapFill(_bitmap.bitmapData, // bitmapData
__bitmapTransform, // matrix
false, // tile?
_smoothBitmap // smooth?
)
graphics.drawRect(0,0,unscaledWidth, unscaledHeight);
// if the edge of the bitmap transition into view
// we paint in the negative area.
if (_contentRectangle.left > viewRect.topLeft.x)
{
//Modified first line for restrict zoom out limit
//_contentRectangle.x=0;
graphics.beginFill(0x000000,1)
graphics.drawRect(0,0, _contentRectangle.x, unscaledHeight);
}
if (_contentRectangle.top > viewRect.topLeft.y)
{
//Modified first line for restrict zoom out limit
//_contentRectangle.y=0;
graphics.beginFill(0x000000,1)
graphics.drawRect(0,0,unscaledWidth, _contentRectangle.y);
}
if (_contentRectangle.right < viewRect.width)
{
//Modified first line for restrict zoom out limit
//_contentRectangle.right=viewRect.width;
graphics.beginFill(0x000000,1)
graphics.drawRect(_contentRectangle.right,0, viewRect.width - _contentRectangle.right , viewRect.height );
}
if (_contentRectangle.bottom < viewRect.height)
{
//Modified first line for restrict zoom out limit
//_contentRectangle.bottom=viewRect.height;
graphics.beginFill(0x000000,1)
graphics.drawRect(0,_contentRectangle.bottom, viewRect.width , viewRect.height - _contentRectangle.bottom );
}
}
}
/////////////////////////////////////////////////////////
//
// ui
//
/////////////////////////////////////////////////////////
/**
* @private
*/
private function formatUI():void
{
_progressSWF = new SWFLoader();
_progressSWF.source = _progressThrobber;
_progressSWF.width = 16;
_progressSWF.height = 16;
_progressSWF.x = 40;
_progressSWF.y = 15;
addChild(_progressSWF);
_percentLoadedLabel = new Label();
_percentLoadedLabel.width = 300;
_percentLoadedLabel.height = 32;
_percentLoadedLabel.x = 55;
_percentLoadedLabel.y = 15;
_percentLoadedLabel.blendMode = BlendMode.INVERT;
addChild(_percentLoadedLabel);
}
/**
* @private
*/
// load handlers
private function handleLoadComplete(e:Event):void
{
bitmap = Bitmap(_loader.content);
removeChild(_progressSWF);
removeChild(_percentLoadedLabel);
loadingImage = false;
_percentLoadedLabel.text = "Complete";
trace(e.type)
}
/**
* @private
*/
private function handleLoadIOError(e:Event):void
{
removeChild(_progressSWF);
loadingImage = false;
_percentLoadedLabel.text = "failed to load image";
}
/**
* @private
*/
private function handleLoadProgress(e:Event):void
{
_percentLoadedLabel.text = String(
Math.round(
(ProgressEvent(e).bytesLoaded / ProgressEvent(e).bytesTotal)
* 100
) + "%"
);
}
}
}
14
you cannot use the image component to display video , or drag drop video.
First of all I tell you the flow and the reason why.
When you drop any image , this package extracts the bitmap data of image and paste it on the page. This is similar to taking screen shot of anything and pasting as image. So even if you try to drop a video it will take screen shot of bitmap data of that video and paste it as image. Hope you understand.
Better try some other way out , this class is not for video at all .
check this url of flex book
http://demo.quietlyscheming.com/book/app.html
it shows video playing , its source code might be useful to you.
right click select view source to download the zip source file of this sample.
First of all I tell you the flow and the reason why.
When you drop any image , this package extracts the bitmap data of image and paste it on the page. This is similar to taking screen shot of anything and pasting as image. So even if you try to drop a video it will take screen shot of bitmap data of that video and paste it as image. Hope you understand.
Better try some other way out , this class is not for video at all .
check this url of flex book
http://demo.quietlyscheming.com/book/app.html
it shows video playing , its source code might be useful to you.
right click select view source to download the zip source file of this sample.
15
hai Ronald,
Actually if image using bitmap we convert the and display.but we convert the video into bitmap or what format pls reply ASAP it is very urgent for my project.
Actually if image using bitmap we convert the and display.but we convert the video into bitmap or what format pls reply ASAP it is very urgent for my project.
Post your Reply