THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<cjs:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/flexjs/basic"
xmlns:cjs="library://ns.apache.org/flexjs/createjs"
>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:initialView>
<cjs:View>
</cjs:View>
</js:initialView>
</cjs:Application> |
...
Continue with the previous example where you already have a circle to work with. You will add some MXML declarations for the tweens and a bit of ActionScript code to trigger them. Copy the following MXML declarations and fx:Script block into the Demo.mxml file, above the js:initialView definition:
...
This section examines the demonstration code (above) in more detail and compares it with the original CreateJS demo code. To see this, there is a CreateJS example (see Getting Started Guide) that demonstrates how to use EaselJS to display a circle. The The example looks like this:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<html>
<head>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="200"></canvas>
</body>
</html> |
The corresponding FlexJS MXML file looks like this:original CreateJS example is an HTML page with a Canvas in the body of the page. A JavaScript function is used to programmatically create the circle and insert it onto the Stage (the CreateJS root of its own DOM structure or display list). The corresponding FlexJS MXML file looks like this:
| Code Block | ||||
|---|---|---|---|---|
| ||||
| Code Block | ||||
| ||||
<cjs:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/flexjs/basic"
xmlns:cjs="library://ns.apache.org/flexjs/createjs"
>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:initialView>
<cjs:View>
<cjs:Circle id="circle" x="100" y="100" width="100" height="100">
<js:fill>
<js:SolidColor color="#26C9FF" />
</js:fill>
</cjs:Circle>
</cjs:View>
</js:initialView>
</cjs:Application> |
Beneath Unlike the original HTML, the MXML elements (or tags) define the size, placement, and color of the circle without using any code.
Beneath the covers, the FlexJS application creates an HTML5 Canvas covers, the FlexJS application creates an HTML5 Canvas and sets up the drawing Stage; FlexJS has wrapper classes for the CreateJS and EaselJS constructs (note that today only a few exist but the pattern to add more has been established). Using either ActionScript or MXML, the CreateJS components can be added to the stage and displayed. In the example above, a CreateJS Circle is created using an MXML tag and specifying a fill color (a stroke can also be used to give the circle an outline)
An advantage to using the FlexJS MXML approach is that the compiler (or an IDE if you use one) can catch errors before you need to run the code. For instance, in the original JavaScript you could accidentally write, circle.c = 100 and the page would load fine and even execute, except the circle would not be where you thought it would be. Using FlexJS, if you mistyped "c" for "x" in the cjs:Circle tag, the compiler would immediately spot the problem. If you use an IDE with FlexJS, you have code-completion in addition to syntax checking which will also help avoid errors.
In addition to EaselJS, the FlexJS CreateJS framework also includes a bit of TweenJS, the animation package. There is a small TweenJS example on the CreateJS page which looks like this:
...
The Tweens are declared in an fx:Declarations block and correspond to the CreateJS "tween.to()" functions. You specify exactly the same things: target, duration, x position, y position, alpha value, and even easing functions. An event handler triggers the sequence of Tweens to run.
...