Versions Compared

Old Version 16

changes.mady.by.user Peter Ent

Saved on

compared with

New Version Current

changes.mady.by.user Peter Ent

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Create a new directory for your FlexJS project and in that directory the directory make a sub-directory called src. Change to the src directory and create a file called, Demo.mxml. Open the file and add the following Application tag and content:

Code Block
languagexml
titleModify Application TagSkeleton
<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>

...

Code Block
languagexml
titleCreate the Circle
    <cjs:Circle id="circle" x="100" y="100" widthradius="100" height="10050">
		<js:fill>
			<js:SolidColor color="#26C9FF" />
		</js:fill>
	</cjs:Circle>

Save the file and compile it:

${FLEXJS_INSTALLDIR}/js/bin/mxmlc Demo.mxml

Once the compilation is complete, you will find a bin directory parallel to the src directory. Open ../bin/js-debug/index.html in a browser. You should . Open bin/js-debug/index.html in a browser. You should see a blue circle.

Using TweenJS

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:

...

Save the file and compile it:

${FLEXJS_INSTALLDIR}/js/bin/mxmlc Demo.mxml

Open the bin../bin/js-debug/index.html file in a browser. You will see the circle move and fade across the screen. The loop option on the Sequence will make it run continuously.

...

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 example looks like this: The example looks like this:

Code Block
languagexml
titleEaselJS Demo
<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
languagexml
titleFlexJS,
Code Block
languagexml
titleFlexJS, EaselJS Demo
<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" widthradius="100" height="10050">
				<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 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:

...

Code Block
languagexml
titleFlexJS, TweenJS Demo
<cjs:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:local="*"
                   xmlns:js="library://ns.apache.org/flexjs/basic" 
                   xmlns:cjs="library://ns.apache.org/flexjs/createjs"
                   applicationComplete="runEffectseq.play()"
                   >
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
    
    <js:beads>
        <js:ApplicationDataBinding />
    </js:beads>
    
    <fx:Declarations>
    	<cjs:Sequence id="seq" target="circle" loop="true">
			<cjs:Tween id="tween1" target="circle" xTo="400" duration="1000" easing="{Ease.getPowInOut(4)}" /> 
			<cjs:Tween id="tween2" target="circle" alphaTo="0" yTo="175" duration="500" easing="{Ease.getPowInOut(2)}" />
			<cjs:Tween id="tween3" target="circle" alphaTo="0" yTo="225" duration="100" />
			<cjs:Tween id="tween4" target="circle" alphaTo="1" yTo="200" duration="500" easing="{Ease.getPowInOut(2)}" />
			<cjs:Tween id="tween5" target="circle" xTo="100" duration="800" easing="{Ease.getPowInOut(2)}" />
    	</cjs:Sequence>
    </fx:Declarations>
    
    <fx:Script>
    	<![CDATA[
    		import org.apache.flex.createjs.tween.Ease;
    		
   // 		privatethe function runEffect():void {    			
    			// run the sequence of tweensimport is required by the Ease functions in the data binding
    			seq.play();
    		}import org.apache.flex.createjs.tween.Ease;
    	]]>
    </fx:Script>
    
    <js:initialView>
        <cjs:View>
			<cjs:Circle id="circle" x="100" y="100" widthradius="100" height="10050">
				<js:fill>
					<js:SolidColor color="#26C9FF" />
				</js:fill>
			</cjs:Circle>
   		    
        </cjs:View>
    </js:initialView>
</cjs:Application>

The Tweens are declared in an fx:Declarations block and correspond to the CreateJS "tween.to()" functions functions written in JavaScript. 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. Once again, you can quickly declare your Tweens and given them parameters, any of which can be specified using data binding.

FlexJS is a "pay as you go" system. The use of binding for the easing functions on the Tweens, Tweens necessitates the including of the js:ApplicationDataBinding bead. With Without the bead the data binding will not happen and should only be included in applications that use data binding to reduce their final footprint and runtime overhead.

...

From there, components use org.apache.flex.createjs.core.CreateJSBase as their foundation class. Other "higher level" components such as Circle, Rect, Label, and TextButton build from there. The key part is the createElement function. You can see how the CheckBox, for example, is composed from several different EaselJS elements. You would add any new components following this pattern.

Since CreateJS is an JavaScript-only framework, you can see that much many of the classes use the COMPILE::JS compiler tag to identify the code that only belongs on the JavaScript side (code that gets cross-compiled to JavaScript and does not have any relevance to the SWF). Any additional CreateJS structures or code should be wrapped in the COMPILE::JS tag.

Further, there must be an SWF-side presence in order for the components to be usable in ActionScript within a client application or even as MXML tags. In some cases you will see COMPILE::AS3 code blocks that are just empty or return NULL or use an existing equivalent. Extending the FlexJS CreateJS requires you to think on both sides.

Keep in mind however, that when you specify an API (public functions or properties) these items should not be limited to COMPILE::JS blocks but be universally visible. This is so the properties and functions are available in MXML tags.

Once Finally, once components are added, if they can be used from MXML, they must appear in the creates createjs-manifest.xml file. Classes should also appear in the CreateJSClasses.as file if they are not MXML components and can be used from ActionScript and need to be in the SWF.