[Calculating Turn Count of ThrowProps Dial]

Hi Jack,

 

I can't update to the new version at the moment as my subscription has run out.

Could you add the rotation snap code to your throwProps_rotation_demo.fla anyway

and I'll update at a later date.

 

Thanks.

[Calculating Turn Count of ThrowProps Dial]

I'm using Greensock 12 Beta, throwProps v12.0.9, what's the newest version of Greensock?

 

The snapping code works with the example code, just not in your new throwProps_rotation_demo.fla.zip

/**
 * VERSION: 12.0.9
 * DATE: 2013-06-25
 * AS3
 * UPDATES AND DOCS AT: http://www.greensock.com
 **/

[Calculating Turn Count of ThrowProps Dial]

Hi Jack,

 

That's just what I was looking for, a big thanks. The dial shows 10 rotations as 3600º

 

I've had a go at linking some rotation snap code I received from another post of mine.

http://forums.greensock.com/topic/8204-throwprops-90-degrees-rotation-snap/

 

Is it possible to take a look as I can't seem figure it out. I'm getting

'ERROR: No velocity was defined in the throwProps tween of [object Object] property: end'

 

It amends the following code to the bottom of the original AS3 throwProps example.

 

It uses 

velocity:rVelocity

 and 

getEnd

 in throwPropsPlugin.to() after the line

var rVelocity:Number = dif / time;

 

//New line of code below
ThrowPropsPlugin.to(dial, {throwProps:{rotation:{velocity:rVelocity, resistance:250, end:getEnd}}, ease:Strong.easeOut}, 10, 0.25, 2);
}


//New Function
function getEnd(endValue) {
var rotationSnap = 90; //Flash needs degrees. No need to convert to radians
return Math.round(endValue / rotationSnap) * rotationSnap;
}

[Calculating Turn Count of ThrowProps Dial]

Hi Jack,

 

I'm using Greensock 12 Beta with the throwProps code below.

 

I knew there would be an easier way than my ott code.

 

How would the numberofRotations code be applied to the throwProps code?

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.utils.getTimer;
import flash.display.*;

TweenPlugin.activate([ThrowPropsPlugin]);

var RAD2DEG:Number = 180 / Math.PI;
var t1:uint, t2:uint, r1:Number, r2:Number, offset:Number;

dial.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {
    TweenLite.killTweensOf(dial);
    offset = Math.atan2(dial.y - this.mouseY, this.mouseX - dial.x);
    r1 = r2 = dial.rotation;
    t1 = t2 = getTimer();
    dial.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
    dial.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

function enterFrameHandler(event:Event):void {
    r2 = r1;
    t2 = t1;
    var newOffset:Number = Math.atan2(dial.y - this.mouseY, this.mouseX - dial.x);
    dial.rotation += (offset - newOffset) * RAD2DEG;
    offset = newOffset;
    r1 = dial.rotation;
    t1 = getTimer();
}

function mouseUpHandler(event:MouseEvent):void {
    dial.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
    dial.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
    var time:Number = (getTimer() - t2) / 1000;
    var dif:Number = dial.rotation - r2;
    if (dif != dif % 180) {
        dif += (dif < 0) ? 360 : -360;
    }
    var rVelocity:Number = dif / time;
    ThrowPropsPlugin.to(dial, {throwProps:{rotation:rVelocity, resistance:250}, ease:Strong.easeOut}, 10, 0.25, 2);
}

[Calculating Turn Count of ThrowProps Dial]

Hi,

I'm using the throwProps dial code from the Greensock example.

 

I need to calculate which turn of the dial the user is on eg. turn 2 of 10

 

How would I do this?

 

At the moment I am trying to calculate whether the user is turning the dial clockwise or anti-clockwise.

 

Then either

adding 1 to the turn count if the turn is clockwise and the rotation value equals 359º

or

subtracting 1 from the turn count if the turn is anti-clockwise and the rotation value equals 0º

 

Is this the correct way or is there another way by adjusting the original sample code?

 

 

Here's my code in addition to the throwProps sample code.

The calculateDialDirection is wrong, so I need a delay of some sort when grabbing the old and the new rotation values. Maybe with an array.

    // Calculate Direction of Dial (Clockwise or anti-clockwise)
    // ---------------------------
    
    var oldDialRotation:Number;
    var newDialRotation:Number;
    var calculateDialDirection:Number;
    var dialRotationDirection:uint;
    
    // Grab first rotation value
     oldDialRotation = degFromDeg(dial.rotation); // i.e. 5º

    // Grab second rotation value
    newDialRotation = degFromDeg(dial.rotation); // i.e. 10º

    calculateDialDirection = newDialRotation - oldDialRotation;

    if (calculateDialDirection > 0 ){
        dialRotationDirection = 1; // Clockwise
    }
    else if (calculateDialDirection < 0 ){
        dialRotationDirection = 0; // Anti-Clockwise
    }
    else {
        // No Change
    }


    // Count How Many Times Dial Has Turned
    var wheelTurnNumber:int = 0;
        
    if (dialRotAFTERdegFromDeg == 359 && dialRotationDirection == 1){ // Clockwise
        wheelTurnNumber ++;
        }
        else if (dialRotAFTERdegFromDeg == 0 && dialRotationDirection == 0){ // Anti-Clockwise
        wheelTurnNumber --;
    }

[Greensock To Animated GIF]

Is there any way to output a Greensock animation to an Animated GIF, without going through an SWF to GIF Converter?

 

Exporting the animation from Flash CS6 using File > Export > Export Movie... > Animated GIF

 

results in a 1 frame animated gif as the code only resides on 1 frame.

[iOS 7 Control Center Background Blur Effect]

Hi Carl, thanks for taking time to answer my question.

 

I think we'll go with the array method for now.

[iOS 7 Control Center Background Blur Effect]

Hi,

 

Need help with adding blur to a background using GreenSock, in a similar way to the vertically swiping Control Center screen in iOS 7.

 

At the moment we're having to add blur to every single movie clip behind the main layer.

TweenMax.to(container.mc, 1, {blurFilter:{blurX:20, blurY:20}});

.

What we need is for the foreground layer to blur 'anything' that appears behind it, not just the elements we specify.

 

Is this even possible?

[Adjusting Greensock Perspective For Metro UI Tile Menu]

Here's the code I used.

var pp1:PerspectiveProjection = new PerspectiveProjection();
pp1.fieldOfView = 20;// 1 to 179. Default 55
pp1.projectionCenter = new Point(mc1.x,mc1.y);
mc1.transform.perspectiveProjection = pp1;

[Adjusting Greensock Perspective For Metro UI Tile Menu]

Thanks Carl, perspectiveProjection is just what I was looking for.

[Adjusting Greensock Perspective For Metro UI Tile Menu]

I am developing a Metro UI style tile menu.

 

How do I change Greensock's perspective, effectively flattening the camera zoom as you would in a 3D package?

 

Also, how would I give each movie clip it's own perspective instead of using the entire stage?

 

I have tried to illustrate what I mean in the screenshot.

import com.greensock.*;
import com.greensock.easing.*;

var myTimeline:TimelineLite = new TimelineLite();

myTimeline.insert(new TweenLite(mc, 1, {rotationY:90, delay:0}));
myTimeline.append(new TweenLite(mc, 1, {rotationY:0 , delay:0}));

myTimeline.play();

[ThrowProps 90 Degrees Rotation Snap]

How would I use the code on several dials without duplicating the entire code? Using an array maybe?

[ThrowProps 90 Degrees Rotation Snap]

Thanks again Carl. All is working now.

 

Must just have been one of those restart computer/Flash solutions.

[ThrowProps 90 Degrees Rotation Snap]

I'm using Greensock v12 Beta.

 

The dial rotates smoothly, but no snap.

[ThrowProps 90 Degrees Rotation Snap]

Thanks Carl.

 

I amended the new code into a clean version of the ThrowProps Rotation Demo code.fla

The snap code doesn't seem to work.

 

Something to do with the getEnd(endValue) maybe?

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.utils.getTimer;
import flash.display.*;

TweenPlugin.activate([ThrowPropsPlugin]);

var RAD2DEG:Number = 180 / Math.PI;
var t1:uint, t2:uint, r1:Number, r2:Number, offset:Number;

dial.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {
    TweenLite.killTweensOf(dial);
    offset = Math.atan2(dial.y - this.mouseY, this.mouseX - dial.x);
    r1 = r2 = dial.rotation;
    t1 = t2 = getTimer();
    dial.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
    dial.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

function enterFrameHandler(event:Event):void {
    r2 = r1;
    t2 = t1;
    var newOffset:Number = Math.atan2(dial.y - this.mouseY, this.mouseX - dial.x);
    dial.rotation += (offset - newOffset) * RAD2DEG;
    offset = newOffset;
    r1 = dial.rotation;
    t1 = getTimer();
}

function mouseUpHandler(event:MouseEvent):void {
dial.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
dial.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
var time:Number = (getTimer() - t2) / 1000;
var dif:Number = dial.rotation - r2;
if (dif != dif % 180) {
dif +=  (dif < 0) ? 360:-360;
}
var rVelocity:Number = dif / time;

//New line of code below
ThrowPropsPlugin.to(dial, {throwProps:{rotation:{velocity:rVelocity, resistance:250, end:getEnd}}, ease:Strong.easeOut}, 10, 0.25, 2);
}

//New Function
function getEnd(endValue) {
var rotationSnap = 90; //Flash needs degrees. No need to convert to radians
return Math.round(endValue / rotationSnap) * rotationSnap;
}

[ThrowProps Rotation Erratic Behaviour]

The ThrowProps Rotation demo code produces some erratic behaviour although it only happens when the dial is within a movie clip ie. nested movie clips.

 

Symptoms are that the dial;

1. lags behind the mouse pointer and

2. rotates in the correct direction, but only from 90 to 270 degrees, it then rotates in the opposite direction.

 

Is there any way to tweak the code to correct these problems?

[ThrowProps 90 Degrees Rotation Snap]

I'm using the ThrowProps rotation code, except it doesn't quite work how I want it to.

How would I get the AS3 ThrowProps Rotation Demo.fla code to snap to 90 degrees as in the Draggable js demo?

http://www.greensock.com/draggable/
http://www.greensock.com/js/demo/throwprops/spin.html

Need some AS3 code from the following .js code:

var rotationSnap = 90 * (Math.PI / 180); //90 degrees described in radians (for snapping
Draggable.create("#knob", {type:"rotation", //instead of "x,y" or "top,left", we can simply do "rotation" to make the object spinnable!
throwProps:true, //enables kinetic-based flicking (continuation of movement, decelerating after releasing the mouse/finger)
snap:function(endValue) { //this function gets called by ThrowPropsPlugin when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, we'll just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected. Keep in mind that rotation values are always defined in radians, not degrees!
return Math.round(endValue / rotationSnap) * rotationSnap;}});

[SplitTextField and TLFTextField]

Ok thanks.

[SplitTextField and TLFTextField]

Getting the following error when using SplitTextField.

 

"1067: Implicit coercion of a value of type fl.text:TLFTextField to an unrelated type flash.text:TextField."

 

I'm guessing that TLF Text isn't supported in version 11.

 

Any ideas?

[Nested Movie Clip Within For Loop]

I have three icons, icon_mc1, icon_mc2, icon_mc3 within page1_mc which is in pages_mc.

 

The following code works with icons on the stage, but this["pages_mc.page1_mc.icon_mc+i] doesn't.

 

Any idea how I can get this to work within a movie clip when the code is at the root?

 

for (var i:int = 0; i < 3; i++) {
this["icon_mc"+i].addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

function mouseUpHandler(event:MouseEvent):void {
myText.text = event.target.name;
}

[Accurate Timer Using Timekeeper Class]

Hi, does anyone have any experience with creating an accurate timer in AS3?

I have used the Timer class and also setInterval in conjunction with my TweenMax project but none are very accurate.

 

I have been reading about the Timekeeper class, but don't know exactly how to use it.

http://www.computus.org/journal/?p=25

[iPhone Swipe Menu]

I was just in the middle of working it out, so thank you for posting this.

[iPhone Swipe Menu]

Thanks,

 

yes I saw that, but I need it to be used with a movie clip menu instead of loading in using XML.

[iPhone Swipe Menu]

Need help creating an iPhone style menu, similar to Angry Birds or Cut the Rope.

It needs to use either Adobe Gesture Events or Greensock ThrowProps.

 

I tried using the ThrowProps example, but I need it to stop on each menu item.

 

The code below uses swipe left/right Gesture Events and TweenLite, but I need help adding an overshoot to the first and last menu item.

 

Maybe by adding an 'if else' statement.

 

import com.greensock.*;
import com.greensock.easing.*

var offsetX:Number = 440;


// Swipe Gesture
Multitouch.inputMode = MultitouchInputMode.GESTURE;

stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, swipeHandler);

function swipeHandler(event:TransformGestureEvent):void {

switch(event.offsetX){

// swipe left
case -1: {
TweenLite.to(mc, 1, {x:mc.x - offsetX, ease:Expo.easeOut});
break;
}

// swipe right
case 1: {
TweenLite.to(mc, 1, {x:mc.x + offsetX, ease:Expo.easeOut});
break;
}
}
}

stage.addEventListener(Event.ENTER_FRAME, traceXPosition);

function traceXPosition(evt:Event) {
trace("movieClip Position: " + mc.x);
}

[Adding Sprites To Stage From Library]

The link you posted to "loading movieclips with dynamic class names" works perfectly, thanks.

 

 

var container:Sprite = new Sprite ();
this.addChild(container);

var dynamicClass:String = "sign_mc" + i;
var classRef:Class = getDefinitionByName(dynamicClass) as Class;
var sign_mc:MovieClip = new classRef();
container.addChild(sign_mc);

trace("Loop No. " + i);

 

It was line 59 as you say.

 

Scene 1, Layer 'Actions', Frame 1, Line 154 1046: Type was not found or was not a compile-time constant: sign_mc.