Problem to rotate picture in counterclockwise direction in Action Script 3
https://stackoverflow.com/questions/4602461
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
in a .swf object, i rotate pictures in one direction : clockwise (+90°), with the eventRotateHit function. It works!
I need to create a counterclockwise (-90°) function : eventRotateHit2. This function doesn't work : the picture disappear. I think it's because the rotation center is false, but i'm not sure. And i don't know how to change it.
Can you help me please?
Frederic
My code :
package Classes.image
{
import fl.controls.Button;
import flash.display.Bitmap;
import flash.display.MovieClip;
import Classes.utils.*;
import Classes.*;
import flash.events.*;
import flash.text.TextField;
import flash.text.StyleSheet;
import flash.utils.ByteArray;
import flash.display.BitmapData;
import com.adobe.images.JPGEncoder;
public class imgBox extends MovieClip
{
public var _img : imgHelper;
private var _MAX_WIDTH : Number;
private var _MAX_HEIGHT : Number;
private var boxFrame:MovieClip;
private var statusMsg:TextField;
public var byteData:ByteArray;
public function imgBox(w:Number,h:Number,_bitmap:Bitmap)
{
_MAX_WIDTH = w;
_MAX_HEIGHT = h;
var borderColor:uint = 0x666666;
var borderSize:uint = 1;
var vMenu:verticalMenu;
_img = new imgHelper(_bitmap);
_img.addEventListener("invalidate", eventImageInvalidated);
if ( _bitmap.width > _MAX_WIDTH || _bitmap.height > _MAX_HEIGHT )
_img.resizePic(_MAX_WIDTH, _MAX_HEIGHT, false);
boxFrame = new MovieClip;
boxFrame.graphics.lineStyle(borderSize, borderColor);
boxFrame.graphics.drawRect(0, 0, _img.width+4,_img.height+4);
addChild(boxFrame);
addChild(_img);
boxFrame.x = 60 + _img.theImage.x;
boxFrame.y = _img.theImage.y;
_img.x = 62;
_img.y = 2;
//vMenu = new verticalMenu();
//var myMenu:Array = new Array( { label:'Rotate', _function:eventRotateHit } );// ,
// { label:'Upload', _function:eventUploadHit } );
//vMenu.buildMenu(myMenu);
var button:Button = new Button();
button.label = Local.getInstance().getString("rotate");
button.width = 50;
button.addEventListener(MouseEvent.CLICK, eventRotateHit);
addChild(button);
var buttonbis:Button = new Button();
buttonbis.label = Local.getInstance().getString("rotate");
buttonbis.width = 50;
buttonbis.y = 50;
buttonbis.addEventListener(MouseEvent.CLICK, eventRotateHit2);
addChild(buttonbis);
}
private function eventImageInvalidated(e:Event) {
e.stopImmediatePropagation();
dispatchEvent(new Event("invalidate", true, true));// invalidate for re-encoding the image.
}
private function eventUploadHit(e:*) {
trace('Upload Hit');
this.dispatchEvent(new Event("uploadImage"));
}
public function showStatus(msg:String) {
TweenLite.to(boxFrame, 0.5, { height: _img.height + 24 } );
var vMenu:verticalMenu = new verticalMenu();;
if (statusMsg){
removeChild(statusMsg);
statusMsg = null;
}
statusMsg = new TextField();
statusMsg.htmlText = msg;
statusMsg.styleSheet = vMenu._textStyleSheet;
statusMsg.width = _img.width;
addChild(statusMsg);
statusMsg.y = _img.height + 2;
statusMsg.x = boxFrame.x + 10;
}
public function hideStatus(msg:String = "") {
if (statusMsg){
removeChild(statusMsg);
statusMsg = null;
}
TweenLite.to(boxFrame, 0.5, { height: _img.height + 4 } );
}
private function eventRotateHit(e:*) {
trace('rotate Image');
if (statusMsg){
removeChild(statusMsg);
statusMsg = null;
}
_img.rotate(Math.PI / 2);
_img.resizePic(_MAX_WIDTH, _MAX_HEIGHT, false);
boxFrame.width = _img.width + 4;
boxFrame.height = _img.height + 4;
boxFrame.x = 60 + _img.theImage.x;
boxFrame.y = _img.theImage.y;
}
private function eventRotateHit2(e:*) {
trace('rotate Image');
if (statusMsg){
removeChild(statusMsg);
statusMsg = null;
}
_img.rotate((-1)*Math.PI/2);
_img.resizePic(_MAX_WIDTH, _MAX_HEIGHT, false);
boxFrame.width = _img.width + 4;
boxFrame.height = _img.height + 4;
boxFrame.x = 60 + _img.theImage.x;
boxFrame.y = _img.theImage.y;
}
public function dispose() {
}
public function prepare(w:Number, h:Number, q:Number) {
var btData:BitmapData = _img.resizeBitmapData(w, h);
byteData = new JPGEncoder(q).encode(btData);
}
}
}
here the rotate function:
package Classes.utils
{
import flash.display.Bitmap;
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.net.*;
import flash.display.Loader;
import flash.events.*;
import flash.system.LoaderContext;
import flash.text.TextField;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.display.BitmapData;
import Classes.*;
import flash.utils.ByteArray;
public class imgHelper extends MovieClip
{
public var tt:TextField;
public var theImage:Bitmap;
private var myMask:MovieClip;
private var _boxDimW:Number;
private var _boxDimH:Number;
public function imgHelper(img:Bitmap=null)
{
theImage = img;
if (theImage)
addChild(theImage);
tt = new TextField;
tt.text = '0%';
/* addChild(tt);*/
}
public override function get width():Number {
return theImage.width;
}
public override function get height():Number {
return theImage.height;
}
public function get _scaleX():Number {
return theImage.scaleX;
}
public function set _scaleX(sx) {
theImage.scaleX = sx;
}
public function get _scaleY():Number {
return theImage.scaleY;
}
public function set _scaleY(sy:Number) {
theImage.scaleY = sy;
}
public function load(url:String)
{
//trace('loading : ' + url);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, picLoaded);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errLoading);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progress);
var lContext:LoaderContext = new LoaderContext(true);
var request:URLRequest = new URLRequest(url);
try {
loader.load(request,lContext);
} catch (error:Error) {
trace("Unable to load requested document.");
}
}
private function progress(e:ProgressEvent)
{
tt.text = Math.round(e.bytesLoaded /e.bytesTotal *100) + '%';
}
private function errLoading(e:*)
{
tt.visible = false;
dispatchEvent(new Event("imgLoaded",true,true));
}
private function picLoaded(e:*)
{
var picLoader:Loader = Loader(e.target.loader);
theImage = Bitmap(picLoader.content);
addChild(theImage);
tt.visible = false;
dispatchEvent(new Event("imgLoaded",true,true));
}
public function resizePic(rW:Number,rH:Number,crop:Boolean=false)
{
var img = theImage;
_boxDimW = rW;
_boxDimH = rH;
if (img.width > img.height)
{
img.width = rW;
img.height = img.height * img.scaleX;
}
else
{
img.height = rH;
img.width = img.width * img.scaleY;
}
if (crop)
{
if (img.width < img.height)
{
var oldScaleX = img.scaleX;
img.width = rW;
img.scaleY += img.scaleX-oldScaleX;
}
else
{
var oldScaleY = img.scaleY;
img.height = rH;
img.scaleX += img.scaleY-oldScaleY;
}
maskIt(rW, rH);
}
else {
if (img.height < img.width) {
img.y=(rH-img.height)/2
}
else {
img.x=(rW-img.width)/2
}
}
}
public function resizeBitmapData (rW:Number, rH:Number):BitmapData {
var img:Bitmap = new Bitmap(theImage.bitmapData);
trace('resize bitmap : ' + img.height + '-' + img.width);
trace('resize bitmap : ' + rH + '-' + rW);
if (img.width > img.height) {
if (img.height>rH)
rH = img.height * (rW / img.width);
else{ // do not resize
rH = img.height;
rW = img.width;
}
}
else {
if (img.width>rW)
rW = img.width * (rH / img.height);
else{ // do not resize
rH = img.height;
rW = img.width;
}
}
var bmpData:BitmapData = new BitmapData(rW, rH);
var scaleMatrix:Matrix = new Matrix( rW / img.width , 0, 0, rH / img.height , 0,0);
var colorTransform:ColorTransform = new ColorTransform();
bmpData.draw(theImage, scaleMatrix , colorTransform, null, null, true);
return (bmpData);
}
public function rotate(dir:Number) {
var workingImage:Bitmap = new Bitmap(theImage.bitmapData.clone());
var bmpData:BitmapData = new BitmapData(workingImage.height, workingImage.width);
var transMatrix:Matrix = new Matrix(Math.cos(dir),Math.sin(dir),-Math.sin(dir),Math.cos(dir), workingImage.height,0);
var colorTransform:ColorTransform = new ColorTransform();
bmpData.draw(workingImage, transMatrix, colorTransform, null, null, true);
TweenLite.to(theImage, 0.5, { autoAlpha:0 } );
//removeChild(theImage);
theImage = new Bitmap(bmpData);
addChild(theImage);
//trace(theImage.y + '--' + theImage.x+'--'+theImage.height+'--'+theImage.width);
if (theImage.height < theImage.width) {
theImage.y += (_boxDimH - theImage.height) / 2
}
else {
theImage.x +=(_boxDimW-theImage.width)/2
}
theImage.alpha = 0;
TweenLite.to(theImage, 1, { autoAlpha:1 } );
trace('sending event !');
dispatchEvent(new Event("invalidate", true, true));// invalidate for re-encoding the image.
}
public function maskIt(w:Number, h:Number)
{
if (myMask) {
removeChild(myMask);
myMask = null;
}
myMask = new MovieClip();
myMask.graphics.beginFill(0xFFCC00);
myMask.graphics.drawRect(0, 0, w,h);
addChild(myMask);
this.mask = myMask;
}
public function dispose() {
}
}
}
thanks for all!!!
Solution
Your problem is in the rotation matrix:
Your Bitmap rotates around its origin (0,0), so at 90 degrees, it is located outside of the viewable area to the left. For this reason, you have translated it along the x axis by the original image's height - and it works.
Now when you rotate the image to 270 degrees (or -90 degrees, just the same), it is located ABOVE the viewable area . So you will now have to translate it along the y axis by the original image's width:
var dir:Number = Math.PI*1.5; // the same as 3*Math.PI/2
var a:Number = Math.cos(dir);
var b:Number = Math.sin(dir);
var c:Number = -b;
var d:Number = a;
var transMatrix:Matrix = new Matrix(a,b,c,d,0,workingImage.width);
OTHER TIPS
I think you are in need of short rotation, this is a formula to find the shortest way to the new direction. Problem with rotation is if you rotate (using normal rotation property) from 0 to -90 with a speed of 1, it will need (360-90=) 270 steps. With short rotation you will only need 90 steps (since most circles are 360 degrees).
I hope you this piece of code will help exploring short rotation:
var startValue:int = targetMC.rotation = 0;
var endValue:int = -90;
var position:Number = 0; // should always be ratio betweeen 0-1
addEventListener(Event.ENTER_FRAME, update);
function update(e:Event=null):void
{
if (position < 1)
{
position += 0.05;
targetMC.rotation = startValue + (((endValue - startValue + 540) % 360) - 180) * position;
}
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
