Repository: flex-asjs Updated Branches: refs/heads/develop 8cb2031ac -> 4e580e3e8
Added TweenJS features for simple animation. Updated CreateJS example to mimic CreateJS and TweenJS initial demos. Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/4e580e3e Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/4e580e3e Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/4e580e3e Branch: refs/heads/develop Commit: 4e580e3e81f94d12180ef5fab43c32d706ab2631 Parents: 8cb2031 Author: Peter Ent <[email protected]> Authored: Wed Apr 27 11:20:35 2016 -0400 Committer: Peter Ent <[email protected]> Committed: Wed Apr 27 11:20:35 2016 -0400 ---------------------------------------------------------------------- .../CreateJSExample/src/CreateJSExample.mxml | 40 ++++- .../CreateJS/src/main/flex/CreateJSClasses.as | 3 +- .../org/apache/flex/createjs/tween/Effect.as | 148 ++++++++++++++++ .../flex/org/apache/flex/createjs/tween/Move.as | 149 ---------------- .../org/apache/flex/createjs/tween/Sequence.as | 95 ++++++++++ .../org/apache/flex/createjs/tween/Tween.as | 177 +++++++++++++++++++ .../src/main/resources/createjs-manifest.xml | 3 +- 7 files changed, 458 insertions(+), 157 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4e580e3e/examples/flexjs/CreateJSExample/src/CreateJSExample.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/CreateJSExample/src/CreateJSExample.mxml b/examples/flexjs/CreateJSExample/src/CreateJSExample.mxml index a2a678c..bce0e15 100644 --- a/examples/flexjs/CreateJSExample/src/CreateJSExample.mxml +++ b/examples/flexjs/CreateJSExample/src/CreateJSExample.mxml @@ -30,20 +30,48 @@ limitations under the License. <fx:Script> <![CDATA[ - import org.apache.flex.createjs.tween.Move; + import org.apache.flex.createjs.tween.Tween; + import org.apache.flex.createjs.tween.Sequence; private function runEffect():void { - var mover:Move = new Move(circle); - mover.xTo = 400; - mover.yTo = 400; - mover.play(); + var move1:Tween = new Tween(circle); + move1.xTo = 400; + move1.duration = 1000; + + var move2:Tween = new Tween(circle); + move2.alphaTo = 0; + move2.yTo = 175; + move2.duration = 500; + + var move3:Tween = new Tween(circle); + move3.alphaTo = 0; + move3.yTo = 225; + move3.duration = 100; + + var move4:Tween = new Tween(circle); + move4.alphaTo = 1; + move4.yTo = 200; + move4.duration = 500; + + var move5:Tween = new Tween(circle); + move5.xTo = 100; + move5.duration = 800; + + var seq:Sequence = new Sequence(circle); + seq.loop = true; + seq.addEffect(move1); + seq.addEffect(move2); + seq.addEffect(move3); + seq.addEffect(move4); + seq.addEffect(move5); + seq.play(); } ]]> </fx:Script> <js:initialView> <cjs:View> - + <cjs:Circle id="circle" x="100" y="100" width="100" height="100"> <js:fill> <js:SolidColor color="#26C9FF" /> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4e580e3e/frameworks/projects/CreateJS/src/main/flex/CreateJSClasses.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/CreateJS/src/main/flex/CreateJSClasses.as b/frameworks/projects/CreateJS/src/main/flex/CreateJSClasses.as index a39aaee..74a4df6 100644 --- a/frameworks/projects/CreateJS/src/main/flex/CreateJSClasses.as +++ b/frameworks/projects/CreateJS/src/main/flex/CreateJSClasses.as @@ -30,7 +30,8 @@ internal class CreateJSClasses import org.apache.flex.createjs.core.UIBase; UIBase; import org.apache.flex.createjs.core.View; View; import org.apache.flex.createjs.graphics.GraphicShape; GraphicShape; - import org.apache.flex.createjs.tween.Move; Move; + import org.apache.flex.createjs.tween.Tween; Tween; + import org.apache.flex.createjs.tween.Sequence; Sequence; } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4e580e3e/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Effect.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Effect.as b/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Effect.as new file mode 100644 index 0000000..21686fb --- /dev/null +++ b/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Effect.as @@ -0,0 +1,148 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.createjs.tween +{ + import org.apache.flex.events.EventDispatcher; + import org.apache.flex.events.Event; + + import org.apache.flex.createjs.core.CreateJSBase; + + COMPILE::JS { + import createjs.Tween; + import createjs.Stage; + import createjs.Ease; + import createjs.Ticker; + } + + /** + * This is the base class for the CreateJS/TweenJS effects. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public class Effect extends EventDispatcher + { + /** + * Constructor + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function Effect(target:Object=null) + { + super(); + + _actualTarget = target; + } + + private var _target:Object; + + [Bindable("targetChanged")] + /** + * The object upon which the effect is being made. This can be either an + * actual object or the ID (String) of an object. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function get target():Object + { + return _target; + } + public function set target(value:Object):void + { + _target = value; + if (value != null) { + if (value is String) { + // if this is an id, then look it up somehow - don't know how yet + } + else { + _actualTarget = value; + } + + dispatchEvent(new Event("targetChanged")); + } + } + + + /** + * @private + */ + protected var _actualTarget:Object; + + /** + * The duration of the effect, defaults to 1000 (1 second). + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public var duration:Number = 1000; + + /** + * Determines if the effect should loop continuously or not. The default + * is false (do not loop). + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public var loop:Boolean = false; + + /** + * @private + * Returns the options necessary for an effect to take place. This is an + * internally used function. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function createTweenOptions():Object + { + // implement in subclass + return null; + } + + + /** + * Plays the effect on the target object + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + * @flexignorecoercion createjs.Shape + * @flexignorecoercion org.apache.flex.createjs.core.CreateJSBase + */ + public function play():void + { + // supply in subclass + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4e580e3e/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Move.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Move.as b/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Move.as deleted file mode 100644 index 4644ab1..0000000 --- a/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Move.as +++ /dev/null @@ -1,149 +0,0 @@ -//////////////////////////////////////////////////////////////////////////////// -// -// Licensed to the Apache Software Foundation (ASF) under one or more -// contributor license agreements. See the NOTICE file distributed with -// this work for additional information regarding copyright ownership. -// The ASF licenses this file to You under the Apache License, Version 2.0 -// (the "License"); you may not use this file except in compliance with -// the License. You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -// -//////////////////////////////////////////////////////////////////////////////// -package org.apache.flex.createjs.tween -{ - import org.apache.flex.events.EventDispatcher; - - import org.apache.flex.createjs.core.CreateJSBase; - - COMPILE::JS { - import createjs.Tween; - import createjs.Stage; - import createjs.Ease; - import createjs.Ticker; - } - - /** - * The Move effect animates an object from one place to another. Once the - * target object is set, its starting position may be given (or its current - * location will be used) and an ending position given, the play() function - * is used to make the animation have effect. - * - * @langversion 3.0 - * @playerversion Flash 9 - * @playerversion AIR 1.1 - * @productversion Flex 3 - */ - public class Move extends EventDispatcher - { - /** - * Constructor - * - * @langversion 3.0 - * @playerversion Flash 9 - * @playerversion AIR 1.1 - * @productversion Flex 3 - */ - public function Move(target:Object=null) - { - super(); - - actualTarget = target; - } - - - private var _actualTarget:Object; - - /** - * @private - * The actual target. - */ - public function get actualTarget():Object - { - return _actualTarget; - } - public function set actualTarget(value:Object):void - { - _actualTarget = value; - } - - - /** - * Starting x value. If NaN, the current x value is used - * - * @langversion 3.0 - * @playerversion Flash 9 - * @playerversion AIR 1.1 - * @productversion Flex 3 - */ - public var xFrom:Number; - - /** - * Ending x value. If NaN, the current x value is not changed - * - * @langversion 3.0 - * @playerversion Flash 9 - * @playerversion AIR 1.1 - * @productversion Flex 3 - */ - public var xTo:Number; - - /** - * Starting y value. If NaN, the current y value is used - * - * @langversion 3.0 - * @playerversion Flash 9 - * @playerversion AIR 1.1 - * @productversion Flex 3 - */ - public var yFrom:Number; - - /** - * Ending y value. If NaN, the current y value is not changed - * - * @langversion 3.0 - * @playerversion Flash 9 - * @playerversion AIR 1.1 - * @productversion Flex 3 - */ - public var yTo:Number; - - COMPILE::JS - private var tween:createjs.Tween; - - /** - * Causes the target object to move between its starting and ending positions. - * - * @langversion 3.0 - * @playerversion Flash 9 - * @playerversion AIR 1.1 - * @productversion Flex 3 - * @flexignorecoercion createjs.Shape - * @flexignorecoercion org.apache.flex.createjs.core.CreateJSBase - */ - public function play():void - { - COMPILE::JS { - var target:CreateJSBase = actualTarget as CreateJSBase; - var element:createjs.Shape = target.element as createjs.Shape; - tween = createjs.Tween.get(element, {loop: false}); - - var options:Object = {x:xTo, y:yTo}; - - if (!isNaN(xFrom)) target.x = xFrom; - if (!isNaN(yFrom)) target.y = yFrom; - - tween.to( options, 1000, createjs.Ease.getPowInOut(2)); - - var stage:createjs.Stage = element.getStage(); - createjs.Ticker.addEventListener("tick", stage); - } - } - } -} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4e580e3e/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Sequence.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Sequence.as b/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Sequence.as new file mode 100644 index 0000000..3e5cd6f --- /dev/null +++ b/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Sequence.as @@ -0,0 +1,95 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.createjs.tween +{ + import org.apache.flex.createjs.core.CreateJSBase; + + COMPILE::JS { + import createjs.Tween; + import createjs.Stage; + import createjs.Ease; + import createjs.Ticker; + } + + /** + * The Sequence effect plays a set of effects, one after the other. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public class Sequence extends Effect + { + /** + * Constructor + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function Sequence(target:Object=null) + { + super(target); + + _tweens = []; + } + + private var _tweens:Array; + + public function addEffect(effect:Effect):void + { + _tweens.push(effect); + } + + COMPILE::JS + private var _tween:createjs.Tween; + + /** + * Causes the effects in the tween list to be played, one after the other. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + * @flexignorecoercion createjs.Shape + * @flexignorecoercion org.apache.flex.createjs.core.CreateJSBase + */ + override public function play():void + { + COMPILE::JS { + var target:CreateJSBase = _actualTarget as CreateJSBase; + var element:createjs.Shape = target.element as createjs.Shape; + _tween = createjs.Tween.get(element, {loop: loop}); + _tween.setPaused(true); + + for (var i:int=0; i < _tweens.length; i++) { + var e:Effect = _tweens[i] as Effect; + var options:Object = e.createTweenOptions(); + _tween.to( options, e.duration, createjs.Ease.getPowInOut(2)); + } + + _tween.setPaused(false); + var stage:createjs.Stage = element.getStage(); + createjs.Ticker.addEventListener("tick", stage); + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4e580e3e/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Tween.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Tween.as b/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Tween.as new file mode 100644 index 0000000..ade06f5 --- /dev/null +++ b/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/tween/Tween.as @@ -0,0 +1,177 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.createjs.tween +{ + import org.apache.flex.createjs.core.CreateJSBase; + + COMPILE::JS { + import createjs.Tween; + import createjs.Stage; + import createjs.Ease; + import createjs.Ticker; + } + + /** + * The Tween effect animates an object from one place to another; it can also + * fade and object in and out by adjusting the object's alpha value. Once the + * target object is set, its starting position may be given (or its current + * location will be used) and an ending position given, the play() function + * is used to make the animation have effect. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public class Tween extends Effect + { + /** + * Constructor + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public function Tween(target:Object=null) + { + super(target); + } + + /** + * Starting x value. If NaN, the current x value is used + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public var xFrom:Number; + + /** + * Ending x value. If NaN, the current x value is not changed + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public var xTo:Number; + + /** + * Starting y value. If NaN, the current y value is used + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public var yFrom:Number; + + /** + * Ending y value. If NaN, the current y value is not changed + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public var yTo:Number; + + /** + * Starting alpha value. If NaN, the current alpha value is used + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public var alphaFrom:Number; + + /** + * Ending alpha value. If NaN, the current alpha value is not changed + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + */ + public var alphaTo:Number; + + COMPILE::JS + private var _tween:createjs.Tween; + + /** + * @private + * @flexignorecoercion createjs.Shape + * @flexignorecoercion createjs.Tween + * @flexignorecoercion org.apache.flex.createjs.core.CreateJSBase + */ + override public function createTweenOptions():Object + { + COMPILE::AS3 { + return null; + } + COMPILE::JS { + var target:CreateJSBase = _actualTarget as CreateJSBase; + var element:createjs.Shape = target.element as createjs.Shape; + + // initialize options with the original values. if target values + // are supplied, replace the original values with the targets. + var options:Object = {}; + if (!isNaN(xTo)) options["x"] = xTo; + if (!isNaN(yTo)) options["y"] = yTo; + if (!isNaN(alphaTo)) options["alpha"] = alphaTo; + + // if precondition values are set, move or set the target accordingly. + if (!isNaN(xFrom)) target.x = xFrom; + if (!isNaN(yFrom)) target.y = yFrom; + if (!isNaN(alphaFrom)) target.alpha = alphaFrom; + + return options; + } + } + + /** + * Causes the target object to move between its starting and ending positions. + * + * @langversion 3.0 + * @playerversion Flash 9 + * @playerversion AIR 1.1 + * @productversion Flex 3 + * @flexignorecoercion createjs.Shape + * @flexignorecoercion createjs.Tween + * @flexignorecoercion org.apache.flex.createjs.core.CreateJSBase + */ + override public function play():void + { + COMPILE::JS { + var target:CreateJSBase = _actualTarget as CreateJSBase; + var element:createjs.Shape = target.element as createjs.Shape; + _tween = createjs.Tween.get(element, {loop: loop}); + + var options:Object = createTweenOptions(); + _tween.to(options, duration, createjs.Ease.getPowInOut(2)); + + var stage:createjs.Stage = element.getStage(); + createjs.Ticker.addEventListener("tick", stage); + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4e580e3e/frameworks/projects/CreateJS/src/main/resources/createjs-manifest.xml ---------------------------------------------------------------------- diff --git a/frameworks/projects/CreateJS/src/main/resources/createjs-manifest.xml b/frameworks/projects/CreateJS/src/main/resources/createjs-manifest.xml index ec1414f..1440064 100644 --- a/frameworks/projects/CreateJS/src/main/resources/createjs-manifest.xml +++ b/frameworks/projects/CreateJS/src/main/resources/createjs-manifest.xml @@ -29,6 +29,7 @@ <component id="Label" class="org.apache.flex.createjs.Label"/> <component id="Circle" class="org.apache.flex.createjs.graphics.Circle" /> <component id="Rect" class="org.apache.flex.createjs.graphics.Rect" /> - <component id="Move" class="org.apache.flex.createjs.tween.Move" /> + <component id="Tween" class="org.apache.flex.createjs.tween.Tween" /> + <component id="Sequence" class="org.apache.flex.createjs.tween.Sequence" /> </componentPackage>
