Flex: Tiny axis labels with rotateLabels and canDropLabels - actionscript-3

I am using a AxisRenderer with rotateLabels canDropLabels for my CategoryAxis and the labels are appearing microscopic. I can show every other label just fine, but the labels do not enlarge. I have provided an full example below. If you need the Ubuntu font you can download it here or use your own. The CategoryAxis should show every 3 labels.
<?xml version="1.0"?>
<!-- Derrived From: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_06.html -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="init(event)" width="90%" height="60%">
<mx:Style>
#namespace mx "http://www.adobe.com/2006/mxml";
#font-face{
src: url("../assets/Ubuntu.ttf");
fontFamily:Ubuntu;
embedAsCFF:false;
advancedAntiAliasing:true;
}
mx|ColumnChart {
fontFamily:Ubuntu;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.formatters.DateFormatter;
public static const msPerSecond:uint = 1000;
public static const msPerMinute:uint = msPerSecond * 60;
public static const msPerHour:uint = msPerMinute * 60;
public static const msPerDay:uint = msPerHour * 24;
public static const msPerWeek:uint = msPerDay * 7;
protected var formatter:DateFormatter;
private var currIndex:uint = 0;
[Bindable]
public var expenses:ArrayCollection;
protected function init(event:FlexEvent):void {
formatter = new DateFormatter();
formatter.formatString = 'MM/DD';
generateExpenses();
}
private function generateExpenses():void {
var now:Date = new Date(), d:Date;
expenses = new ArrayCollection();
// The next 60 days inclusive
for (var i:uint = 0; i < 60; i++) {
d = new Date();
d.time = now.time+i*msPerDay;
var r:uint = rand(100, 1000);
var o:uint = rand(1, 100);
expenses.addItem({
'date':d,
'profit':r,
'expenses':rand(r-o, r+o)
});
}
}
public function categoryLabel(val:Object, prev:Object,
axis:CategoryAxis, item:Object):String {
var index:uint = currIndex;
currIndex++;
return showLabel(index, axis.dataProvider.length, 20) ?
formatter.format(val) : '';
}
private function rand(lb:int, ub:int):Number {
return Math.floor(Math.random() * (1 + ub - lb)) + lb;
}
private function showLabel(index:uint, max:uint, interval:uint):Boolean {
return index % int(Math.ceil(max/interval)) == 0;
}
]]>
</mx:Script>
<!-- Define custom colors for use as column fills. -->
<mx:SolidColor id="sc1" color="0x00FF00" alpha=".3"/>
<mx:SolidColor id="sc2" color="0xFF0000" alpha=".3"/>
<!-- Define custom Strokes for the columns. -->
<mx:SolidColorStroke id="s1" color="0x00FF00" weight="2"/>
<mx:SolidColorStroke id="s2" color="0xFF0000" weight="2"/>
<mx:Panel title="ColumnChart Control with Custom Column Styles"
width="100%" height="100%">
<mx:HBox width="100%" height="100%">
<mx:Legend dataProvider="{myChart}"/>
<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true"
width="100%" height="100%" gutterBottom="50">
<mx:horizontalAxis>
<mx:CategoryAxis id="cAxis" dataProvider="{expenses}"
categoryField="date" labelFunction="categoryLabel"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{cAxis}" labelRotation="{-25}"
canStagger="false" canDropLabels="true" fontSize="20"/>
</mx:horizontalAxisRenderers>
<mx:series>
<mx:ColumnSeries
xField="date"
yField="profit"
displayName="Profit"
fill="{sc1}"
stroke="{s1}"
/>
<mx:ColumnSeries
xField="date"
yField="expenses"
displayName="Expenses"
fill="{sc2}"
stroke="{s2}"
/>
</mx:series>
<mx:verticalAxis>
<mx:LinearAxis id="lAxis"/>
</mx:verticalAxis>
</mx:ColumnChart>
</mx:HBox>
</mx:Panel>
</mx:Application>

Hi Please modify your code as below:- The CategoryAxis will show every 3 labels.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
initialize="init(event)" >
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:SolidColor id="sc1" color="0x00FF00" alpha=".3"/>
<mx:SolidColor id="sc2" color="0xFF0000" alpha=".3"/>
<!-- Define custom Strokes for the columns. -->
<mx:SolidColorStroke id="s1" color="0x00FF00" weight="2"/>
<mx:SolidColorStroke id="s2" color="0xFF0000" weight="2"/>
</fx:Declarations>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face{
src: url("../assets/Ubuntu.ttf");
fontFamily:Ubuntu;
embedAsCFF:false;
advancedAntiAliasing:true;
}
mx|ColumnChart {
fontFamily:Ubuntu;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.formatters.DateFormatter;
public static const msPerSecond:uint = 1000;
public static const msPerMinute:uint = msPerSecond * 60;
public static const msPerHour:uint = msPerMinute * 60;
public static const msPerDay:uint = msPerHour * 24;
public static const msPerWeek:uint = msPerDay * 7;
protected var formatter:DateFormatter;
private var currIndex:uint = 0;
[Bindable]
public var expenses:ArrayCollection;
protected function init(event:FlexEvent):void {
formatter = new DateFormatter();
formatter.formatString = 'MM/DD';
generateExpenses();
}
private var dataToShow:uint = 60;
private function generateExpenses():void {
var now:Date = new Date(), d:Date;
expenses = new ArrayCollection();
// The next 60 days inclusive
for (var i:uint = 0; i < dataToShow; i++) {
d = new Date();
d.time = now.time+i*msPerDay;
var r:uint = rand(100, 1000);
var o:uint = rand(1, 100);
expenses.addItem({
'date':d,
'profit':r,
'expenses':rand(r-o, r+o)
});
}
}
public function categoryLabel(val:Object, prev:Object,
axis:CategoryAxis, item:Object):String {
var index:uint = currIndex;
currIndex++;
return showLabel(index, axis.dataProvider.length, dataToShow) ?
formatter.format(val) : '';
}
private function rand(lb:int, ub:int):Number {
return Math.floor(Math.random() * (1 + ub - lb)) + lb;
}
private function showLabel(index:uint, max:uint, interval:uint):Boolean {
return index % int(Math.ceil(max/interval)) == 0;
}
]]>
</fx:Script>
<mx:Panel title="ColumnChart Control with Custom Column Styles"
width="100%" height="100%">
<mx:HBox width="100%" height="100%">
<mx:Legend dataProvider="{myChart}"/>
<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true"
width="100%" height="100%" gutterBottom="50">
<mx:horizontalAxis>
<mx:CategoryAxis id="cAxis" dataProvider="{expenses}"
categoryField="date" labelFunction="categoryLabel"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{cAxis}" labelRotation="{-25}"
canStagger="false" canDropLabels="true" />
</mx:horizontalAxisRenderers>
<mx:series>
<mx:ColumnSeries
xField="date"
yField="profit"
displayName="Profit"
fill="{sc1}"
stroke="{s1}"
/>
<mx:ColumnSeries
xField="date"
yField="expenses"
displayName="Expenses"
fill="{sc2}"
stroke="{s2}"
/>
</mx:series>
<mx:verticalAxis>
<mx:LinearAxis id="lAxis"/>
</mx:verticalAxis>
</mx:ColumnChart>
</mx:HBox>
</mx:Panel>
</s:Application>

Related

How to disable a component inside Datagrid which is rendered using inline item renderer

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private var myTimer:Timer;
[Bindable] public var isEnabled:Boolean = true;
public function getDetails():void {
Alert.show("Got it!!");
isEnabled = false;
myTimer = new Timer(5000, 1);
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
myTimer.start();
}
public function timerHandler(event:TimerEvent):void {
isEnabled = true;
}
]]>
</mx:Script>
<mx:ArrayCollection id="myAc">
<mx:source>
<mx:Object version="1.0" telephone="9875454214" />
<mx:Object version="2.0" telephone="8794568784" />
<mx:Object version="3.0" telephone="8796454487" />
</mx:source>
</mx:ArrayCollection>
<mx:HBox>
<mx:DataGrid verticalScrollPolicy="on" focusEnabled="false" name="Version" id="Version" width="100%" height="65" dataProvider="{myAc}" >
<mx:columns >
<mx:DataGridColumn width="150" dataField="version" headerText="Version" />
<mx:DataGridColumn width="70" dataField="telephone" headerText="Telephone" />
<mx:DataGridColumn width="90" paddingLeft="20" headerText="Download">
<mx:itemRenderer>
<mx:Component>
<mx:Image height="10%" source="css/page_excel.png" click = "outerDocument.getDetails()" enabled = "{outerDocument.isEnabled}" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
</mx:Application>
This application is programmed to disable the Image when it is clicked and Enable the same after 5 sec. But it is disabling whole Column. I want it to disable only the clicked Image.
Change your mxml
<!--<mx:Image height="10%" source="css/page_excel.png" click = "outerDocument.getDetails()" enabled = "{outerDocument.isEnabled}" />-->
<mx:Image height="10%" source="css/page_excel.png" click = "outerDocument.getDetails(event)" />
And here is the AS code.
public function getDetails(event: MouseEvent):void {
Alert.show("Got it!!");
//isEnabled = false;
event.target.enabled = false; // Disable clicked Object.
myTimer = new Timer(5000, 1);
//myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, nextfuncWithParams(timerHandler, event.target)); // Pass clicked object.
myTimer.start();
}
public function nextfuncWithParams(nextfunc: Function, params: Object): Function {
return function(event:TimerEvent): void{
nextfunc(event, params);
}
}
public function timerHandler(event: TimerEvent, MouseEventTarget: Object):void {
//isEnabled = true;
MouseEventTarget.enabled = true; // Enable passed object.
}
Working Example: http://wonderfl.net/c/Gv9k
Update
For using Image.
public function getDetails(event: MouseEvent):void {
//Alert.show("Got it!!");
//event.target.enabled = false; // event.target was Loader...
var obj: Object = event.target;
while (obj.parent)
{
if (obj is Image)
{
Image(obj).enabled = false;
break;
}
obj = obj.parent;
}
myTimer = new Timer(5000, 1);
//myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, nextfuncWithParams(timerHandler, obj));
myTimer.start();
}

Flex 4 Spark List Itemrender

Here is my itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true"
width="100%" height="40"
click="adCanvas.selected=data.object;" mouseDown="adCanvas.selected=data.object;"
creationComplete="init()" initialize="trace('initializing')" activate="checkActions()" dataChange="checkActions()" render="checkActions()">
<fx:Script>
<![CDATA[
import adBuilder.*;
import components.AdCanvas;
import events.AdLoadEvent;
import flash.display.Bitmap;
import flash.events.MouseEvent;
import flash.utils.describeType;
import interfaces.IAdObject;
import mx.core.FlexGlobals;
import mx.core.UIComponent;
import mx.events.CollectionEvent;
import mx.utils.*;
[Bindable] private var desc:String;
private var adCanvas:AdCanvas;
private var adBuilder:AdBuilder;
[Bindable]private var myvis:Boolean=false;
private const MAX_NAME_LENGTH:Number = 19;
private function init():void {
trace("!!!!!!!!!!!!!!!!!!!!! LAYER RENDERER !!!!!!!!!!!!!!!!!!!!!");
if (!data) data = {};
if (data.hasOwnProperty("first")) {
toggleEnabled(FlexGlobals.topLevelApplication.btnUp);
}
if (data.hasOwnProperty("last")) {
toggleEnabled(FlexGlobals.topLevelApplication.btnDown);
}
adCanvas = data.adCanvas;
if(IAdObject(data.object as IAdObject)){
if(IAdObject(data.object).animationObjects){
IAdObject(data.object).animationObjects.addEventListener(CollectionEvent.COLLECTION_CHANGE, checkActions);
checkActions();
}
}
iconType.source = findSource();
}
private function checkActions(e:Event=null):void{
try{
if(data){
if(IAdObject(data.object as IAdObject)){
if(IAdObject(data.object as IAdObject).animationObjects){
if(data.object.animationObjects.length>0){
this.myvis=true;
}else{
this.myvis=false;
}
}
}
}
iconType.source = findSource();
}catch(error:Error){
trace("LayerRenderer.mxml - checkActions(): " + error.message);
}
}
private function toggleEnabled(obj:UIComponent):void {
if (data.hasOwnProperty("first")) {
obj.useHandCursor = false;
obj.enabled = false;
obj.alpha = 0.5;
} else {
obj.useHandCursor = true;
obj.enabled = true;
obj.alpha = 1;
}
iconType.source = findSource();
}
private function hideLayers():void{
//dispatchEvent(new Event("Layer_Visible"));
trace("CLICKED EYE");
FlexGlobals.topLevelApplication.dispatchEvent(new Event('Layer_Visible'));
if (hideLayer.alpha == 1){
hideLayer.alpha = .5;
}
else if (hideLayer.alpha == .5){
hideLayer.alpha = 1;
}
//trace("parameters are " + ObjectUtil.toString(data));
}
private function findSource():*{
if (data){
//iconType.source = "";
if (data.type == "Image"){
//trace("data.name: " + data.name);
//trace("data.bitmapinfo: " + data.bitmapinfo);
return new Bitmap(data.bitmapinfo);
}
if (data.type == "Text"){
return("assets/images/Text2.png");
}
if (data.type == "Application"){
return
//return("assets/images/App.png");
}
if (data.type == "Button"){
return("assets/images/Button.png");
}
if (data.type == "Shape"){
return("assets/images/shape.png");
}
if (data.type == "SWF"){
return("assets/images/SWF.png");
}
else{
return "assets/images/placeholder.png";
}
}
else {
return "assets/images/placeholder.png";
}
}
private function truncateName(nameStr:String):String
{
var returnVal:String = (nameStr.indexOf(".") > -1) ? nameStr.substr(0, nameStr.indexOf(".")) : nameStr;
var extension:String = (nameStr.indexOf(".") > -1) ? nameStr.substr(nameStr.indexOf("."),nameStr.length) : "";
//trace("nameStr: " + nameStr);
//trace("extension: " + extension);
if (returnVal.length > MAX_NAME_LENGTH){
returnVal = returnVal.substr(0,MAX_NAME_LENGTH) + "...";
}/*else{
returnVal += extension;
}*/
return returnVal;
}
]]>
</fx:Script>
<s:Group id="layerGroup" width="100%" height="100%" top="10" left="5" bottom="10" right="10">
<s:HGroup left="0" verticalAlign="middle" width="100%">
<s:HGroup paddingBottom="40" paddingRight="10">
<mx:Image id="iconType" smoothBitmapContent="true" scaleContent="true" source="" height="20" width="20"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label toolTip="{data.name}" text="{truncateName(data.name)}" id="labelText" height="50" top="5" width="100%" maxDisplayedLines="1" left="0" color="#101010"/>
<s:Label toolTip="" text="{Math.ceil(data.fileSize/1000)+' K'}" textAlign="right" id="sizeText" height="50" top="5" width="70" maxDisplayedLines="1" left="0" color="#101010"/>
</s:HGroup>
<s:HGroup paddingBottom="40">
<mx:Image horizontalAlign="right" bottom="10" alpha="1" right="2" id="hideLayer" verticalAlign="middle" source="assets/images/visible.png" click="hideLayers()" useHandCursor="true"/>
<mx:Image id="actLabel" includeInLayout="false" visible="{this.myvis}" source="assets/images/star.png" />
</s:HGroup>
</s:HGroup>
</s:Group>
</s:ItemRenderer>
Here is the class that uses said renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
left="5" top="10" bottom="0"
creationComplete="init();" rollOver="rolledOver(event)" rollOut="rolledOut(event)"
backgroundColor="#F0F0F0" backgroundAlpha="1" borderAlpha="0" borderColor="#3a3a3a" width="100%" height="60" currentState="out">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="over"/>
<s:State name="out" />
</s:states>
<fx:Script>
<![CDATA[
import components.*;
import components.AdCanvas;
import events.AdCanvasObjectEvent;
import flash.system.LoaderContext;
import mx.collections.ArrayCollection;
import mx.controls.Image;
import mx.core.Application;
import mx.core.DragSource;
import mx.core.FlexGlobals;
import mx.core.IUIComponent;
import mx.core.UIComponent;
import mx.events.DragEvent;
import mx.graphics.ImageSnapshot;
import mx.managers.DragManager;
import spark.components.Group;
import spark.layouts.*;
[Bindable]
private var _data: Object;
[Bindable]
private var context:LoaderContext;
[Bindable]
public var canvas: AdCanvas;
[Bindable]
public var index: int;
[Bindable]
public var maxPreviewWidth: int;
[Bindable]
public var maxPreviewHeight: int;
[Bindable]
public var isSelected: Boolean = false;
[Bindable]
private var adRect:Rectangle;
[Bindable]
private var ad:BitmapData;
[Bindable]
public var layerData:ArrayCollection = new ArrayCollection();
[Bindable]
private var application:Object = FlexGlobals.topLevelApplication;
//public var layerList:List;
private const MAX_HEIGHT:Number = 400;
private const MINIMUM_HEIGHT:Number = 60;
private var t:Timer;
private var t2:Timer;
private var t3:Timer;
[Bindable]private var siblings:Array = new Array();
/**
* Initialize the preview item
*/
public function init(obj: Object = null): void {
//layersList.data = FlexGlobals.topLevelApplication.getLayerList();
//trace("Layer data " + layersList.data);
canvas.screenPreview = this;
context = new LoaderContext(false);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.UPDATED, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.ADDED, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.DELETED, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.SELECTED_SINGLE, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.SELECTED_MULTIPLE, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.DESELECT, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener("updateThumbnail", updateThumbnail);
// This is to prevent the security error when there is a loaded swf trying to be accessed for bitmap
Security.loadPolicyFile(FlexGlobals.topLevelApplication.parameters.mediaUrl+"../crossdomain.xml");*/
//if(root.loaderInfo.url.indexOf('file://')==-1)img.loaderContext = new LoaderContext(true, ApplicationDomain.currentDomain, SecurityDomain.currentDomain);
canvas.updatePreview();
buildThumb();
titleBar.addEventListener(MouseEvent.CLICK, mouseClick);
(adCanvas.isDeletable || adCanvas.isDeletable == "true") ? screenDelete.addEventListener(MouseEvent.CLICK, mouseClick) : null;
//layersList.addEventListener(DragEvent.DRAG_ENTER, handleDragEnter);
//layersList.addEventListener(DragEvent.DRAG_DROP, handleDragDrop);
//layersList.addEventListener(DragEvent.DRAG_START, handleDragStart);
this.addEventListener(DragEvent.DRAG_ENTER, handleDragEnter);
this.addEventListener(DragEvent.DRAG_DROP, handleDragScreenDrop);
//setHeight();
//setYPos();
}
private function handleDragStart(event:DragEvent):void{
try{
var obj:Object = (event.dragInitiator as List).selectedItem;
canvas.selected = obj["object"];
}catch (error:Error){
trace("ERROR: ScreenPreview.mxml - handleDragStart() : " + error.message);
}
}
private function handleDragEnter(event:DragEvent):void {
trace("event.dragInitiator: " + event.dragInitiator);
if( event.dragInitiator is List){
DragManager.acceptDragDrop(this);
DragManager.showFeedback(DragManager.MOVE);
layersList.dropEnabled = true;
}else{
layersList.dropEnabled = false;
}
}
private function handleDragDrop(event:DragEvent):void {
t = new Timer(500);
t.addEventListener(TimerEvent.TIMER, checkLayerData);
t.start();
}
private function handleDragScreenDrop(event:DragEvent):void {
/*trace("\n");
trace("TEEEEE HEEEEEE");
trace("event.target: " + event.target);
trace("event.currentTarge: " + event.currentTarget);
trace("this: " + this);
trace("event.dragInitiator: " + (event.dragInitiator as List).selectedItem);
trace("event.draggedItem: " + event.draggedItem);
trace("event.dragSource: " + event.dragSource);
*/
try
{
var obj:Object = (event.dragInitiator as List).selectedItem;
var clone:UIComponent = obj["element"].clone();
/*for( var i:* in obj)
{
trace( "obj["+i+"]: " + obj[i]);
}
trace("obj: " + obj);
*/
this.canvas.addObjectToCanvas(clone);
obj["adCanvas"].removeScreenElement(obj);
}catch(error:Error){
trace("ERROR: ScreenPreview - handleDragDrop() : " + error.message);
}
//trace("\n");
}
private function checkLayerData(e:TimerEvent):void
{
t.stop();
t = null;
adCanvas.updateItemIndex();
}
public function setSizeText(val:Number):void
{
sizeText.text = (Math.ceil(val/1000) + " K");
if (isSelected)
{
t3 = new Timer(100);
t3.addEventListener(TimerEvent.TIMER, delayResize);
t3.start();
}
}
/**
* Update the bitmap data for the screen when something has changed.
*/
public function updateThumbnail(ev: AdCanvasObjectEvent = null): void {
try{
canvas.gridOff();
var adRect:Rectangle = canvas.adBox.getBounds(canvas);
var snapshot: BitmapData = ImageSnapshot.captureBitmapData((canvas as IBitmapDrawable));
var ad:BitmapData = new BitmapData(adRect.width, adRect.height);
ad.copyPixels(snapshot, adRect, new Point());
img.source = new Bitmap(ad);
canvas.gridOn();
}catch(e:Error){
trace(e+"System can't convert external swf files to bitmap.");
canvas.gridOn();
}
}
/**
* Controls visuals for when the button is selected.
*/
public function set selected(state: Boolean): void
{
isSelected = state;
trace("MY STATE IS: " + state);
if (isSelected)
{
layersList.includeInLayout=true;
stroke.color=0x878787;
strokeColor.color=0x878787;
bg.color = 0x979fa7;
layersList.visible = true;
//layersList.percentHeight = 100;
screenSettings.visible = true;
(adCanvas.isDeletable || adCanvas.isDeletable == "true") ? screenDelete.visible = true : screenDelete.visible = false;
//percentHeight=100;
siblings.splice(0,siblings.length);
siblings = new Array();
try
{
for(var i:int=0; i < Group(parent).numChildren; i++)
{
siblings.push(Group(parent).getElementAt(i));
}
}
catch (e:Error) {}
t2 = new Timer(100);
t2.addEventListener(TimerEvent.TIMER, delayResize);
t2.start();
}
else
{
stroke.color=0x3C3C3C;
strokeColor.color=0x3C3C3C;
bg.color = 0x636B73;
currentState="out";
layersList.includeInLayout=false;
}
}
private function delayResize(evt:TimerEvent):void{
if(t2){
t2.stop();
t2.removeEventListener(TimerEvent.TIMER, delayResize);
t2 = null;
}
if(t3){
t3.stop();
t3.removeEventListener(TimerEvent.TIMER, delayResize);
t3 = null;
}
setHeight();
setYPos();
}
public function setYPos():void
{
for(var i:int = 0; i < siblings.length; i++)
{
if(i>0)
{
siblings[i].y = ( siblings[i-1].y + siblings[i-1].height);
}
if (siblings[i] != this){
ScreenPreview(siblings[i]).selected = false;
ScreenPreview(siblings[i]).checkLayer();
}
}
}
public function setHeight():void
{
for(var i:int = 0; i < siblings.length; i++)
{
if( siblings[i] == this )
{
if( (MINIMUM_HEIGHT + totLayersHeight()) > MAX_HEIGHT){
height = MAX_HEIGHT;
}else{
height = MINIMUM_HEIGHT + totLayersHeight();
}
}
trace("###################################################");
trace("ScreenPreview - canvas: " + canvas);
trace("ScreenPreview - canvas.href: " + canvas.href);
trace("ScreenPreview - canvas.click_label: " + canvas.click_label);
trace("###################################################");
FlexGlobals.topLevelApplication.setMouseActionsFromObject();
}
}
private function totLayersHeight():Number{
trace("this.layerData.length: " + this.layerData.length);
var val:Number = 0;
//multiply by 40 because that is the height of each layer item
if( this.layerData.length > 0) val = (this.layerData.length + 1) * 40;
return val;
}
public function checkLayer ():void{
screenSettings.visible = false;
screenDelete.visible = false;
layersList.visible = false;
//percentHeight=15;
height = 60;
}
/**
* Controls visuals for when the button is rolled over.
*/
private function rolledOver(e:Event):void
{
str.color=0xffc423;
bg.color=0xBAC2CA;
}
/**
* Controls visuals for when the button is rolledout.
*/
private function rolledOut(e:Event):void{
if(!isSelected){
bg.color=0x636B73;
/*g1.color=0xCBCBCB;
g2.color=0xD9D9D9;
str.color=0xCBCBCB;
lg.rotation=-90;*/
}else{
bg.color=0x979fa7;
/*g1.color=0xCBCBCB;
g2.color=0xCBCBCB;
str.color=0xCBCBCB;
lg.rotation=90*/
}
}
/**
* Set up the canvas and SWF sizes, as well as label, for the screen thumbnail.
*/
public function buildThumb():void{
adRect = new Rectangle(15, 15, canvas.adBox.width, canvas.adBox.height);
ad = new BitmapData(adRect.width + 100, adRect.height + 100, true, 0);
setImageSize();
labelText.text = "Screen "+canvas.index;//+": "+canvas.adWidth+"x"+canvas.adHeight;
updateThumbnail();
}
/**
* Get the scaled-down screen size.
*/
private function getScaledDimensions(targetHeight:int=100, targetWidth:int=100): Object {
var xScaleFactor: Number = (maxPreviewWidth > targetWidth) ? (targetWidth/maxPreviewWidth) : 1;
var yScaleFactor: Number = (maxPreviewHeight > targetHeight) ? (targetHeight/maxPreviewHeight) : 1;
var scaleFactor: Number = (xScaleFactor < yScaleFactor) ? xScaleFactor : yScaleFactor;
var dimensions: Object = {
width: Math.round(adRect.width * scaleFactor),
height: Math.round(adRect.width * scaleFactor)
}
return dimensions;
}
/**
* Change the the thumb size and position based on the ad size.
*/
private function setImageSize():void
{
var w:Number = adRect.width + 100;
var h:Number = adRect.height + 100;
var scaler:Number = (w>h)?40/w:27/h;
img.width = w*scaler;
img.height = h*scaler;
rolledOut(null);
imgBox.left = 10;
if (w > (h*2)){
imgBox.top=15;
}
if (h > (w*2)){
imgBox.top = 5;
}
}
private function mouseClick(e:MouseEvent):void
{
trace("did the click");
e.stopImmediatePropagation();
if( e.currentTarget == screenDelete)
{
trace("DISPATCH DELETE SCREEN");
dispatchEvent(new Event('delete_screen_click'));
}else{
trace("DISPATCH MOUSE CLICK");
dispatchEvent(new Event('mouse_click'));
FlexGlobals.topLevelApplication.dispatchEvent(new AdCanvasObjectEvent(AdCanvasObjectEvent.DESELECT));
}
//FlexGlobals.topLevelApplication.updateLayerScreens();
}
private function deleteThisScreen(e:MouseEvent):void
{
dispatchEvent(new Event('delete_screen_click'));
}
/**
* Getter and setter for adcanvas that we are using for the thumbnail
*/
public function set adCanvas(canv: AdCanvas): void {
canvas = canv;
index = canv.index;
}
public function get adCanvas(): AdCanvas {
return canvas;
}
/**
* Getter for checking if this button has been selected.
*/
public function get selected(): Boolean {
return isSelected;
}
private function settingsMenu():void{
FlexGlobals.topLevelApplication.dispatchEvent(new AdCanvasObjectEvent(AdCanvasObjectEvent.DESELECT));
FlexGlobals.topLevelApplication.openSettings();
}
]]>
</fx:Script>
<s:VGroup left="1" right="1" top="1" height="100%" width="100%" paddingBottom="5">
<s:VGroup id="titleBar" height="55" top="20" width="100%">
<s:HGroup top="5" left="5" height="100%" width="100%">
<s:Group width="55" height="50">
<s:Rect id="fill" left="5" right="0" top="0" bottom="0" radiusX="0">
<s:fill>
<s:SolidColor id="bg" color="0x979fa7"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke id="stroke" color="0x3C3C3C" alpha="1"/>
</s:stroke>
</s:Rect>
<s:HGroup id="vg" height="50" width="100%" gap="0">
<s:Group height="15" top="2" width="100%">
<s:VGroup top="5" id="imgBox" width="15">
<mx:Image left="5" id="img" scaleContent="true" height="50" width="50" top="10" />
</s:VGroup>
</s:Group>
</s:HGroup>
<s:Rect left="1" right="1" top="1" bottom="1" radiusX="0" >
<s:stroke>
<s:SolidColorStroke id="str" color="0x979fa7" weight="2" alpha="0" />
</s:stroke>
</s:Rect>
</s:Group>
<s:Group left="0" top="0" height="60" width="100%">
<s:Rect top="0" left="5" right="0" bottom="0" bottomLeftRadiusX="0" bottomRightRadiusX="0">
<s:fill>
<s:SolidColor id="bg2" color="0xDCE4EC" alpha="0"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke id="strokeColor" color="0x3C3C3C" alpha="0"/>
</s:stroke>
</s:Rect>
<s:HGroup verticalAlign="middle" top="15" width="100%">
<mx:Text id="labelText" text="" selectable="false" color="#3a3a3a" width="100%" fontSize="10" textAlign="center" />
<mx:Text id="sizeText" text="" selectable="false" color="#3a3a3a" width="100%" fontSize="10" textAlign="right" />
</s:HGroup>
</s:Group>
<s:Group>
<mx:Image source="assets/images/trashcan-delete.png" visible="false" toolTip="Delete This Screen" id="screenDelete" top="15" right="45" useHandCursor="true"/>
<mx:Image source="assets/images/cog.png" visible="false" toolTip="Edit Screen Settings" top="15" right="11" id="screenSettings" click="settingsMenu()" useHandCursor="true"/>
</s:Group>
</s:HGroup>
</s:VGroup>
<s:VGroup id="layerPanel" includeInLayout="true" paddingBottom="1" height="100%" width="100%">
<s:List creationComplete="{trace('TEEEEEEEEEEEEE HEEEEEEEEEEEEEEE')}"
id="layersList"
dragStart="{handleDragStart(event)}" dragEnter="{handleDragEnter(event)}" dragDrop="{handleDragDrop(event)}"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
includeInLayout="true"
visible="true"
initialize="application.setUpLayers()"
dataProvider='{layerData}'
selectedIndex="{application.getLayerListIndex()}"
render='{layersList.selectedIndex=application.getLayerListIndex()}'
itemRenderer="renderers.LayerRenderer"
width="100%"
height="100%"
bottom="50"
alternatingItemColors="[#e2e2e2, #dedede]"
selectionColor="#787878"
rollOverColor="#949494"
borderVisible="false"
/>
</s:VGroup>
</s:VGroup>
</s:BorderContainer>
The problem I'm having is the itemRenderer never gets called. I put trace statements just to be sure and nothing. These two files once used mx:canvas and were converted. I've been beating my head against a wall for 2 days with this issue. Help is much appreciated.

Cannot correctly resize an image via action script

Hi I am trying to add an image when I click on a thumbnail.
I know I have to use a listener (Event.COMPLETE ?), but the image is not resizing correctly when I rotate the tablet.
I believe the problem is that I cannot resize the image within the addImage1() function, as the image has not yet loaded, but I cannot use newImg.width within the listener function to reset the image width.
Any help would be most appreciated.
Code follows:-)
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="ZOOM Pictues with Tap"
resize="view1_resizeHandler(event)">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
public var hasImageBeenAdded:Boolean = false;
private var imageLastWidth:Number;
private var imageLastHeight:Number;
private var zoomFactor:Number;
private var imageNumber:Number;
private var rhsKeepWidth:int;
private var rhsKeepHeight:int;
private var rhsKeep:Boolean = false;
protected function view1_resizeHandler(event:ResizeEvent):void
{
if(rhsKeepWidth > rhsKeepHeight) // Was Landscape is now Portrait
{
var tmpWidth2:int = rhsKeepWidth;
var tmpHeight2:int = rhsKeepHeight;
rhsKeepWidth = tmpHeight2-lhs.width;
rhsKeepHeight = tmpWidth2+lhs.width;
}
else //Was Portrait is now Landscape
{
var tmpWidth1:int = rhsKeepWidth;
var tmpHeight1:int = rhsKeepHeight;
rhsKeepWidth = tmpHeight1-lhs.width;
rhsKeepHeight = tmpWidth1+lhs.width;
}
addImage1();
}
protected function removeAllImages():void
{
var totalElements : int = rhs.numElements;
for(var i:int=totalElements-1;i>=0;i--)
{
rhs.removeElementAt(i);
}
}
private function onImageLoaded(e:Event):void
{
var zoomFactor1:Number;
var zoomFactor2:Number;
imageLastWidth = e.target.sourceWidth;
imageLastHeight = e.target.sourceHeight;
if(rhsKeep != true) //Need to set the rhs VGroup dimensions
{
rhs.width = hGroup1.width-lhs.width;
rhs.height = hGroup1.height;
rhsKeep = true;
rhsKeepWidth = rhs.width;
rhsKeepHeight = rhs.height;
}
zoomFactor1 = rhsKeepWidth/imageLastWidth;
zoomFactor2 = rhsKeepHeight/imageLastHeight;
if(zoomFactor1 < zoomFactor2)
{
zoomFactor = zoomFactor1;
}
else
{
zoomFactor = zoomFactor2;
}
trace("zoomFactor=" + zoomFactor);
}
public function addImage1():void
{
var i:int;
var newImg:Image = new Image();
removeAllImages();
newImg.source = "images/1.jpg";
newImg.x = 0;
newImg.y = 0;
newImg.addEventListener(Event.COMPLETE,onImageLoaded);
rhs.addElementAt(newImg,0);
hasImageBeenAdded = true;
imageNumber = 1;
trace("Image Width= " + newImg.width);
newImg.scaleX = newImg.scaleY = zoomFactor;
}
]]>
</fx:Script>
<s:HGroup id="hGroup1" width="100%" height="100%">
<s:Scroller id="scrollerL" height="100%">
<s:VGroup id="lhs" width="15%" height="100%" gap="10"
horizontalAlign="center" verticalAlign="top">
<s:Image width="100" height="100" source="thumbs/1.jpg" click="addImage1()"/>
</s:VGroup>
</s:Scroller>
<s:Scroller id="scroller1" height="100%" width="100%">
<s:VGroup id="rhs" height="100%">
</s:VGroup>
</s:Scroller>
</s:HGroup>
</s:View>
Regarding the device orientation, you should use:
trace(Stage.deviceOrientation);
trace(Stage.orientation);
They are read-only strings outputting information regarding the device's and the screen's orientation. You may manually set the stage's orientation:
Stage.setOrientation(StageOrientation.DEFAULT);
Regarding the image loading, you need an eventListener for Event.COMPLETE and you should also cast the content as Image:
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(event:Event):void {
trace("Image loaded");
// Handle code here
// Use: (loader.content as Image)
});
loader.load(new URLRequest("images/1.jpg"));

rummy card placement on canvas

I am trying to place 5 cards overlapping 30% on one another. and trying to give a movement to it using mouse events . It should drop within the 5 cards only, not outside of that.
I have learned the drag and drop events and executed it, but i cannot place the card within the 5 cards .
Please somebody help me in this. Please Check the Below Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="carcan();">
<mx:Script>
<![CDATA[
import mx.containers.Canvas;
import mx.controls.Image;
private var images:Array;
private var images1:Array;
private const IMAGE_COUNT:uint = 5;
private var img:Image;
private var img1:Image;
private var points:flash.geom.Point;
private var offset_x:int;
private var offset_y:int;
private var canal:Canvas;
private var doDrag:Boolean;
[Embed(source='cards/2C.png')]
private var Image0:Class;
[Embed(source='cards/2D.png')]
private var Image1:Class;
[Embed(source='cards/2H.png')]
private var Image2:Class;
[Embed(source='cards/2S.png')]
private var Image3:Class;
[Embed(source='cards/3C.png')]
private var Image4:Class;
public function carcan():void
{
canal = new Canvas();
canal.setStyle("backgroundColor","blue");
canal.x=100;
canal.y=50;
canal.width=500;
canal.height=400;
this.addChild(canal);
init();
}
public function init():void
{
images = new Array(IMAGE_COUNT);
for (var i:int = 0; i < IMAGE_COUNT; i++)
{
img= new Image();
img1= new Image();
images[i] = this["Image" + i];
trace(images[i]);
img.x=(i*30)+50;
img.source=images[i];
img.id="Image"+i;
canal.addChild(img);
img.addEventListener(MouseEvent.MOUSE_DOWN, md);
img.addEventListener(MouseEvent.MOUSE_MOVE, mm);
canal.addEventListener(MouseEvent.MOUSE_OUT,smu);
img.addEventListener(MouseEvent.MOUSE_UP, mu);
}
}
public function smu(event:MouseEvent):void
{
img.alpha=1;
img.stopDrag();
doDrag=false;
setCards();
}
public function mo(event:MouseEvent):void
{
if(doDrag==true)
{
img.addEventListener(MouseEvent.MOUSE_DOWN, md);
img.addEventListener(MouseEvent.MOUSE_UP, mu);
img.stopDrag();
img.alpha=1;
img.removeEventListener(MouseEvent.MOUSE_MOVE, mm);
}
else
{
img.addEventListener(MouseEvent.MOUSE_MOVE, mm);
}
}
public function md(event:MouseEvent):void
{
img = new Image();
doDrag=true;
canal.setChildIndex(Image(event.target),images.length-1);
img.addEventListener(MouseEvent.MOUSE_MOVE, mm);
}
public function mm(event:MouseEvent):void
{
if(doDrag==true)
{
points = new Point();
images = new Array(IMAGE_COUNT);
img = new Image();
img = Image(event.target);
points.x=event.target.x;
points.y=event.target.y;
points = localToGlobal(points);
img.x=points.x;
img.y=points.y;
img.alpha=0.7;
img.addEventListener(MouseEvent.MOUSE_UP, mu);
var boundar:flash.geom.Rectangle = new Rectangle(this.x, this.y, 250, 100);
}
}
public function mu(event:MouseEvent):void
{
img.alpha=1;
canal.stopDrag();
doDrag=false;
canal.stopDrag();
doDrag=false;
var current:Image = event.currentTarget as Image;
var num1:int = current.x;
if(num1 < 50){
canal.setChildIndex(current, images.length-5);
current.y=0;
setCards();
}
if(num1 > 50 && num1 < 80){
canal.setChildIndex(current, images.length-4);
current.y=0;
setCards();
}
if(num1 > 80 && num1 < 110){
canal.setChildIndex(current, images.length-3);
current.y=0;
setCards();
}
if(num1 > 110 && num1 < 140){
canal.setChildIndex(current, images.length-2);
current.y=0;
setCards();
}
if(num1 > 140 && num1 < 170){
canal.setChildIndex(current, images.length-2);
current.y=0;
setCards();
}
if(num1 > 170){
canal.setChildIndex(current, images.length-1);
current.y=0;
setCards();
}
}
private function setCards():void{
var b:int = 0;
var a:int;
var cardsArray:Array = canal.getChildren();
for(a = 0;a < cardsArray.length; a++)
{
canal.getChildAt(a).x = 50+b;
b=b+30;
canal.getChildAt(a).y=0;
}
}
]]>
</mx:Script>
</mx:Application>
PS: I am trying to replace the drag and drop events with mouse events and get the same functionality using mouse events. Please somebody help me in this.
Hope Below Code may help you: - You can use Drag and drop as per below code and create it in AS. I have created it in MXML which will give you some idea what you are looking for: -
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.core.DragSource;
import mx.core.UIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
private function doDragEnter(event:DragEvent):void
{
DragManager.acceptDragDrop(UIComponent(event.target));
}
private function doDragDrop(event:DragEvent):void
{
var img:RummyItemRenderer;
if (event.dragInitiator.parent == mainCanvas)
{
img = event.dragInitiator as RummyItemRenderer;
//mainCanvas.swapChildren(img, event.currentTarget as RummyItemRenderer);
var index:Number = mainCanvas.getChildIndex(event.currentTarget as RummyItemRenderer);
mainCanvas.removeChild(img);
mainCanvas.addChildAt(img,index);
setCardsPosition();
}
}
private function setCardsPosition():void{
var b:int = 0;
var a:int;
var cardsArray:Array = mainCanvas.getChildren();
for(a = 0;a < cardsArray.length; a++)
{
mainCanvas.getChildAt(a).x = 50+b;
b = b+30;
mainCanvas.getChildAt(a).y=20;
}
}
private function doDragStart(event:MouseEvent):void
{
var dragInitiator:RummyItemRenderer = event.currentTarget as RummyItemRenderer;
var dragSource:DragSource = new DragSource();
DragManager.doDrag(dragInitiator, dragSource, event);
}
]]>
</fx:Script>
<mx:Canvas id="mainCanvas" backgroundColor="#DDDDDD" width="400" height="200" x="50" y="50">
<local:RummyItemRenderer id="firstID" x="{mainCanvas.x}" y="20" width="200" height="80%" backgroundColor="#FF0000"
mouseDown="doDragStart(event)" dragEnter="doDragEnter(event)" dragDrop="doDragDrop(event)"
setImageSource="myImageURL"/>
<local:RummyItemRenderer id="secondID" x="{mainCanvas.x + 30}" y="20" width="200" height="80%" backgroundColor="#00FF00"
mouseDown="doDragStart(event)" dragEnter="doDragEnter(event)" dragDrop="doDragDrop(event)"
setImageSource="myImageURL"/>
<local:RummyItemRenderer id="thirdID" x="{mainCanvas.x + 60}" y="20" width="200" height="80%" backgroundColor="#0000FF"
mouseDown="doDragStart(event)" dragEnter="doDragEnter(event)" dragDrop="doDragDrop(event)"
setImageSource="myImageURL"/>
</mx:Canvas>
</s:Application>
RummyItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
private var _setImageSource:String;
public function get setImageSource():String
{
return _setImageSource;
}
public function set setImageSource(sourceURL:String):void
{
_setImageSource = sourceURL;
}
]]>
</fx:Script>
<s:Image id="imageID" source="{_setImageSource}"/>
</mx:Canvas>

mx:TileList : Why drag doesn't works if allowMultipleSelection is activate

I work with TileList to display image like a gallery.
At start, I activate only drag option.
<mx:TileList xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
columnWidth="120"
rowHeight="150"
paddingLeft="2"
paddingRight="2"
paddingTop="2"
paddingBottom="2"
itemRenderer="fr.ui.display._43Imagerie.TileUnit2"
doubleClickEnabled="true"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
verticalScrollPolicy="on"
>
Now I try to add multiple selection possibility.
ItemRenderer is :
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
width="120"
height="150"
borderVisible="false"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="onEvent()"
>
<mx:Script>
<![CDATA[
import fr.util.imageTransform;
import mx.controls.Image;
import mx.core.UIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
import org.osmf.utils.URL;
import spark.effects.Rotate;
[Bindable]
[Embed(source="icon/imagerie/rotate.png")]
private var rotationArrowClass:Class;
private var _file:File;
private var _selected:Boolean;
private var _sauvBMD:BitmapData;
public var wasScaled:Boolean = false;
public var deleted:Boolean = false;
private var bgCenterX:Number;
private var bgCenterY:Number;
private var _dragDownPt:Point;
[Bindable]
public var angle:int = 0;
private var dragBitmapData : BitmapData;
private function onEvent():void
{
// iconCanvas.addEventListener(MouseEvent.DOUBLE_CLICK, onDoubleClick);
// double click gere ds wPlanchePhoto3
}
private function rotationImage(e:MouseEvent):void
{
var rot:Rotate = new Rotate();
rot.angleBy = 90;
rot.duration = 1000;
rot.autoCenterTransform = true;
rot.target = iconCanvas;
rot.play();
}
private function radiansToDegrees(radians:Number):Number {
var degrees:Number = radians * (180 / Math.PI);
return degrees;
}
private function degreesToRadians(degrees:Number):Number {
var radians:Number = degrees * (Math.PI / 180);
return radians;
}
public function set image(im:BitmapData):void
{
this._sauvBMD=im;
}
public function get image() :BitmapData
{
return this._sauvBMD;
}
protected function iconCanvas_mouseDownHandler(event:MouseEvent):void
{
// on enregistre la point de départ
_dragDownPt = new Point(mouseX,mouseY);
// puis on écoute l'éventuel déplacement de la souris
this.addEventListener(MouseEvent.MOUSE_MOVE,_onMouseMoveDuringDrag);
}
private function _onMouseMoveDuringDrag(evt:MouseEvent):void {
// astuce pour s'assurer que la souris a vraiment bougee volontairement
if(Math.abs(_dragDownPt.x - mouseX) <= 2 && Math.abs(_dragDownPt.y - mouseY) <= 2)
return;
else{
dragBitmapData = new BitmapData(iconCanvas.width, iconCanvas.height,true, 1);
dragBitmapData.draw(iconCanvas);
var transfert:Clipboard = new Clipboard();
transfert.setData(ClipboardFormats.BITMAP_FORMAT,Bitmap(iconCanvas.content).bitmapData);
// only allow the file to be copied
var dragOptions:NativeDragOptions = new NativeDragOptions();
dragOptions.allowMove=false;
dragOptions.allowCopy = true;
dragOptions.allowLink = false;
// begin the drag
NativeDragManager.doDrag(this, transfert, dragBitmapData, null, dragOptions);
}
// dispatch de l'event depuis le parent pour pouvoir écouter cet event dans l'application
}
]]>
</mx:Script>
<s:BorderContainer
id="bcImage"
width="120"
height="99%"
borderVisible="true"
borderColor="#FFFFFF"
borderWeight="1"
cornerRadius="6"
backgroundAlpha=".4"
backgroundColor="#5f5f5f"
>
<mx:Canvas id="cvsImage" width="100%">
<mx:SWFLoader id="rotationArrow" source="{rotationArrowClass}" height="18" width="18" x="3" y="3" visible="true" click="rotationImage(event);" alpha=".5"/>
<s:Label x="23" y="3" width="82" fontSize="11" fontWeight="normal" text="{data.imDate}"
textAlign="right" color="#000000"/>
<mx:Image id="iconCanvas" x="10" y="20" width="99" height="99" horizontalAlign="center"
maintainAspectRatio="true" scaleContent="true"
source="{data.imURL}"
verticalAlign="middle" mouseDown="iconCanvas_mouseDownHandler(event)"
>
</mx:Image>
</mx:Canvas>
<s:VGroup width="100%" y="124" height="25" bottom="1" left="3" right="3" paddingBottom="0" paddingTop="4" gap="0">
<s:Label text="{data.imType}" height="50%" fontSize="10" paddingBottom="1"
fontWeight="normal" width="99%" textAlign="center" color="#000000"/>
<s:Label text="{data.imStade}" fontSize="10" textAlign="center" paddingTop="1"
fontWeight="normal" width="99%" color="#000000"/>
</s:VGroup>
</s:BorderContainer>
If this option is true (allowMultipleSelection), drag stop to work, do you know why?
Thanks for helping.
Adding allowMultipleSelection="true" worked just fine for me. I am running on a Mac with latest version of Flash Player. It seemed a bit flaky at first but after refreshing the page it worked just fine. Only thing I didn't have in my project was your data provider and item renderer. I really doubt your item renderer would cause an issue unless you are doing something crazy in there. Check to see if you have the latest Flash Player.