KempenFlash

=Kempenfest Flash Discoveries - compiled July 7th - September 21st=

Back to CLIPS Technical Discoveries or to Code Snippets The following items may be useful for e-developers working on CL004 activities, and have been compiled by the team throughout the week at Kempenfelt.

Accessing individual iterations or shapes created A) using the Pattern Creator B) using the Pattern Configurator Accessing individual points, lines or x- or y-axis scale numbers created using the Storyboard Grid tool Accessing Individual Position Number Objects created by UbPattern and UbFramed Text Creating a pattern using the Pattern Creator Configurator tool Modifying a pattern to change its number of growing or constant shapes based on input boxes. Using the SelectArea tool to define clickable rectangular hotspots Drawing a vertical arrowed line on the graphing boarrd using ubLine functions
 * Topics:**

Adding CLIPS uberCalc to existing activity

A . Objects created using the PATTERN CREATOR:
--> the following code (or reasonable facsimile thereof) will already be copied and pasted into the actions layer of your Activity Template: code format="actionscript" grid1_mc.addShape(120,75,{shape:'circ',size:30,colour:255,thickness:1,alph:100,berth:1,termType:'growing'}); grid1_mc.addShape(90,105,{shape:'squ',size:30,colour:255,thickness:1,alph:100,berth:1,termType:'growing'}); grid1_mc.addShape(60,120,{shape:'tri',size:30,colour:16776960,thickness:1,alph:100,berth:1,termType:'constant'}); code

**A1 . Changing the properties of an entire iteration.**
--> refer to the shapes_mc object of gridN_mc instance name and apply the property directly to it. e.g. code format="actionscript" grid1_mc.shapes_mc._alpha = 22; grid1_mc.shapes_mc._x = 200; code

**A2. Changing the properties of a specific shape.** --> refer to the shapeM object of shapes_mc of gridN_mc, and apply the property to that. The shapeM object names start at shape0 and go up (shape1, shape2, etc...) in the order in which they were created. Each gridN_mc object starts numbering shapes beginning at 0. e.g. code format="actionscript" grid1_mc.shapes_mc.shape0._alpha = 44; // changes the circle grid1_mc.shapes_mc["shape" + 1]._alpha = 11;// changes the square code //NOTE: You can refer to an object using "dot" notation (as in the first example) if you know the object name directly - OR - you can refer to an object using "bracket" notation if you wish to construct the object name using string concatenation. In the above example, the string concatenation was done using constants, but it could have been done using variables.// e.g. code format="actionscript" var i = 2; grid1_mc.shapes_mc["shape" + i]._alpha = 22; //changes the triangle// code

B . Objects created using the PATTERN CONFIGURATOR:
--> the following code (or reasonable facsimile thereof) will already be copied and pasted into the actions layer of your Activity Template: code format="actionscript" import edu.clips.CLIPSubPattern;

var pat1_mc_shapes:Array; var pat1_mc_inits:Array; var pat1_mc_grows:Array;

pat1_mc_shapes = 1, "circ", 19, 16711680, 100], [2, "tri", 19, 16776960, 100], [3, "star", 19, 0x00FF00, 100], [4, "triangle", 19, 0xFF00FF, 100; pat1_mc_inits = 2, 0, 0, -1, 0; pat1_mc_grows = 1, 0, 0, -1, 1, 0, 0;

CLIPSubPattern.create(this,"pat1_mc",{_x:258.45, _y:216, lib_Array:pat1_mc_shapes, init_Array:pat1_mc_inits, grow_Array:pat1_mc_grows, unitLength:21, iterationWidth:5, iterationHeight:1, isShowingPosNums:true, showPosNumLabelLines:2, posNumBoxSize:25, posNumFontSize:14, posNumWidth:-0.5, posNumHeight:-2.5, n1:1, nN:3}); code

**B1 . Changing the properties of an entire iteration.**
--> refer to the iterationM object the pattern_mc object of gridN_mc instance name and apply the property directly to it. e.g. code format="actionscript" pat1_mc.pattern_mc.iteration2._alpha = 22; pat1_mc.pattern_mc["iteration" + 1]._alpha = 11; code //Note: The "M" refers to the position number according to the pattern rule setup - not the order on the screen. SO .. if you are displaying positions 4 to 6 of the pattern, the objects would be .iteration4, .iteration5 and .iteration6.//

**B2. Changing the properties of a specific shape.** --> refer to the shapeP object of shapes_mc of the iterationM object on the pattern_mc object of gridN_mc, and apply the property to that. The shapeP object names start at shape1 (for the first shape created in the first iteration on the screen) and go up (shape2, shape3, etc...) in the order in which they were created. The shape number continually increases and does not restart when switching up to the next iteration (next gridN_mc object). e.g. code format="actionscript" pat1_mc.pattern_mc.iteration1.shape2._alpha = 22; pat1_mc.pattern_mc["iteration" + 2]["shape" + 4]._alpha = 11; var p = 7; pat1_mc.pattern_mc.iteration3["shape" + p]._alpha = 22; code In the above example, position 1 has two shapes (shape1 and shape2), position 2 has three shapes (shape3 - shape5) and position 3 has four shapes (shape6 - shape9)

Combine Judi's action script animation techniques for setInterval or onEnterFrame to create a function that will animate the assembly of a pattern, or one position of a pattern.
 * AN INTERESTING CHALLENGE .. **.

Accessing individual objects created using the Storyboard Grid or the Graphing Board
The graphing board is is generally created with the code below and given the variable name board. Any references to movie clips on the board will need to be prefaced with board. code format="actionscript" var board:GraphingBoard = new GraphingBoard(70, 135, 152, 151, this, -1, false, false, 1); code


 The scale numbers are text fields which are created on a movie clip called mcAxes. Scale numbers on the positive x-axis are named "hortext"+scale number. Scale numbers on the negative x-axis are named "hortextn"+scale number. Scale numbers on the positive y-axis are named "vertextn"+scale number. Scale numbers on the negative y-axis are named "vertext"+scale number. e.g. code format="actionscript" // this will change +6 on the y-axis to a bold red six this.board.mcAxes.vertextn6.html = true; this.board.mcAxes.vertextn6.htmlText = "6 ";

// this code will flash +3 on the x-axis function flashInterval { count = 0; clearInterval(intervalId); intervalId = setInterval(this, "flashThree", 10); SetIntervalsArray.push(intervalId); }

function flashThree { if (!_global.animationPaused) { count++; if (this.board.mcAxes.hortext3._alpha >= 100) { alphaIncrement = -10; } else if (this.board.mcAxes.hortext3._alpha <= 0) { alphaIncrement = 10; }       this.board.mcAxes.hortext3._alpha += alphaIncrement; if (count > 40) { this.board.mcAxes.hortext3_mc._alpha = 100; clearInterval(intervalId); }   } }

code


 Calls to the functions createOrientTitle and createTitle will create text fields on a movie clip called mcTitles. The functions return the depth of the textfield. All text fields are named "title" + depth e.g. code format="actionscript" // code to initially create a textfield to label 0 on the board // depth of the text field is saved in depthZero so it can be referenced later on depthZero = board.createTitle(-15,190,11,"0","Arial",0x000000,12);

// at a later point, the font size is made smaller and the field is lowered board.mcTitles["title" + depthZero].html = true; board.mcTitles["title" + depthZero].htmlText = "0"; board.mcTitles["title" + depthZero]._y += 15;

code


 All points are created on a movie clip called mcCLIPSnewLayer[2]. The points are created as movie clips with names "point" + point number e.g. code format="actionscript" // import the as files import lib.actions.clipsgrapher.*;//graphing board class import edu.clips.CLIPSubShape;//uberShape class import edu.clips.CLIPSubLine;//uberLine class

// creates the movie clip to which points will be attached board.CLIPSAddLayer(2,"mcContainer",8);

// creates the point CLIPSubShape.create(this.board.mcCLIPSnewLayer[2],"point1",{_x:200, _y:100, shape:"circ", size:10, colour:255, alph:700, thickness:1});

// enlarge the points and disable it so it cannot be clicked on board.mcCLIPSnewLayer[2]["point1"]._xscale = 150; board.mcCLIPSnewLayer[2]["point1"]._yscale = 150; board.mcCLIPSnewLayer[2]["point1"].enabled = false;

code

<span style="color: rgb(38, 22, 212)">
<span style="color: rgb(38, 22, 212)"> All lines are created on a movie clip called mcCLIPSnewLayer[1]. The lines are created as movie clips with name which refers to the type of line which was created. e.g. code format="actionscript" // import the as files import lib.actions.clipsgrapher.*;//graphing board class import edu.clips.CLIPSubShape;//uberShape class import edu.clips.CLIPSubLine;//uberLine class

// creates the movie clip to which lines will be attached board.CLIPSAddLayer(1,"mcContainer",7);

// create the line movie clip for the line joining the first to the last point -name FirsttoLast CLIPSubLine.create(this.board.mcCLIPSnewLayer[1],"FirsttoLast",{_x:0, _y:0, colour:0, angle:30, angleOrientation:-1});

// set the endpoints for the line to be the coordinates of the first and last point x1 = board.mcCLIPSnewLayer[2]["point1"]._x; y1 = board.mcCLIPSnewLayer[2]["point1"]._y; x2 = board.mcCLIPSnewLayer[2]["point4"]._x; y2 = board.mcCLIPSnewLayer[2]["point4"]._y;

// set the style of the line and the draw it board.mcCLIPSnewLayer[1].FirsttoLast.SetStyle(0,1,100,"dash"); board.mcCLIPSnewLayer[1].FirsttoLast.SetLinePoints(x1,y1,x2,y2); code

<span style="color: rgb(0, 0, 0)">Accessing individual Position Number objects created by ubPattern calls to ubFramedText
The framed text is created by the ubPattern Generator so the naming convention above applies. If the name of the pattern is not overridden then it is called Pattern_mc code format="actionscript" import edu.clips.ubFramedText; ubFramedText.create(pattern_mc["iteration"+num],"currPosNum"+(num-1));

code

<span style="color: rgb(38, 22, 212)">
<span style="color: rgb(38, 22, 212)"> The frame and text fields are created on a movie clip called "currPosNum"+(iteration number - 1) e.g. code format="actionscript" this.Pattern_mc.pattern_mc.iteration1.currPosNum0._visible = false; // hide position number 1 this.Pattern_mc.pattern_mc.iteration2.currPosNum1._x -= 20; // slide position number 2 to the left this.Pattern_mc.pattern_mc.iteration3.currPosNum2._y += 30; // slide position number 3 up

code

<span style="color: rgb(38, 22, 212)">B Accessing the Properties of the Frame
The frame is given an instance name of box_mc e.g. code format="actionscript" this.Pattern_mc.pattern_mc.iteration4.currPosNum3.box_mc._alpha = 50; // dim the frame for position number 4 code

<span style="color: rgb(38, 22, 212)">C Accessing the Properties of the Text Field
<span style="color: rgb(38, 22, 212)"> The text field is given an instance name of Framed_txt e.g. code format="actionscript" // this will enlarge the font for positions 1 and 2 this.tower_mc.Pattern_mc.pattern_mc.iteration1.currPosNum0.Framed_txt.html = true; this.tower_mc.Pattern_mc.pattern_mc.iteration1.currPosNum0.Framed_txt.htmlText = "<font size='17'>1"; this.tower_mc.Pattern_mc.pattern_mc.iteration2.currPosNum1.Framed_txt.html = true; this.tower_mc.Pattern_mc.pattern_mc.iteration2.currPosNum1.Framed_txt.htmlText = "<font size='17'>2"; code

<span style="color: rgb(38, 22, 212)">D Accessing the Position Number Label
<span style="color: rgb(38, 22, 212)"> The position number label text field is given an instance name of posNum1Line_txt or posNum2Line_txt depending on whether the label is one or two lines long. e.g. code format="actionscript" // change the font for the position number title (one line long) to an embedded bold font this.Pattern_mc.pattern_mc.posNum1Line_txt.embedFonts = true; var newtxt_fmt:TextFormat = new TextFormat; newtxt_fmt.font = "ArialBoldEmbedded"; this.Pattern_mc.pattern_mc.posNum1Line_txt.setTextFormat(newtxt_fmt);

// adjust a one line label to accomodate two line label this.Pattern_mc.pattern_mc.posNum1Line_txt.multiline = true; this.Pattern_mc.pattern_mc.posNum1Line_txt._height = 40; this.Pattern_mc.pattern_mc.posNum1Line_txt.selectable = false; this.Pattern_mc.pattern_mc.posNum1Line_txt.html = true; this.Pattern_mc.pattern_mc.posNum1Line_txt.htmlText = "<font size='14'><font face = 'Arial'>Position Number";

code

Creating a pattern using the Pattern Creator Configurator tool
To create a pattern using the Pattern Creator Configurator tool, you will need to open up the most recent version of the Pattern Creator Configurator SWF which is found in the Updated Files folder of the FTP site ([|ftp://isenegger.ca)] - create the pattern in the Pattern Creator (first screen). You can use the star buttons to clear the grids, and the green arrow buttons to advance from one bin to the next (it will copy the previous pattern into the next grid so that only the changes (new growing shapes, plus any movements) need be done). - when the pattern is complete, and the Creator gives the TRUE result to a Linear Growing Pattern, you can now access the "Use Pattern for Config" boolean picker (change it to true) and then Advance to the Configurator screen - Use the Sizing and Spacing tab to change the location of the pattern. Click the checkbox when changing the unit length to uniformly change the size of all shapes at once. - To change the location, use the dashed rectangle resizers to draw a box enclosing the pattern, put on the pad lock, then use the drag arrows icon to relocate the box. When you release, the pattern will snap into its new location. - Use the Code tab to copy the necessary code to recreate this pattern into your Activity Template (usually in frame 1 of the actions layer) - Additional modifications can be made via the other tabs - experiment and explore and enjoy ! - [|CreatingPatternFromConfigurator.swf] - Watch this demo to see this tool in action (sorry about the sound quality - noise in the background)

Modifying a pattern to change its number of growing or constant shapes based on input boxes.
To modify a pattern so that it will change based on input box values, you need to access the individual functions in the CLIPSubPattern class that create and modify the pattern objects. To do this, the basic steps are this: - create the original pattern in the Pattern Creator - when you click on the Check Pattern button, the code to generate the pattern is copied to the Output window. (This assumes there is already an object called Pattern_mc created in frame 1 .. which there will be if you followed the procedure from above) - Copy this code from the Output window (all the lines that start with Pattern_mc. ) - Switch to the Activity Template you are working on - Paste this code into an empty keyframe (probably frame 3 or beyond) and modify it as required. - A simple setup might be as follows: Actions Layer - Frame 1 - initial setup - copy of code from Configurator - Code tab Actions Layer - Frame 2 - stop; showcontinue; --> input boxes created and on the stage and active Actions Layer - Frame 3 - pasted code from Output window - Each Pattern_mc.Add2Init( ... ) statement defines a single constant term. If the number of constant terms is variable, change this single statement into a for loop (ie put a for statement around it) - Likewise - each Pattern_mc.Add2Grow( .. ) statement defines a single growing term. (Each individual growing shape from bin 1 has its own rule ). Change a single Add2Grow into a for (var g = ...... ) { Add2Grow } type of loop.. - [|How2PatternsWithInputs.swf] - Watch this demo to see this procedure in action.

<span style="color: rgb(38, 22, 212)"><span style="color: rgb(15, 0, 0)">Using the Select Area tool to create clickable rectangular hotspots
- Basics of setting up a series of rectangular Select Areas using the CL004 UberTools file - Being more precise in setup - Examples of using Select Area

<span style="color: rgb(26, 50, 234)">Basics of setting up Select Area
The Select Area tool allows you to define a series of rectangles (in rows and columns) that can function as a hot spot which is clickable in an activity. The rectangles can be defined to act as a series of radio buttons - ie - only 1 can be selected at a time - OR - they can be defined to act as a series of checkboxes - ie - any or all of them can be selected simultaneously.

After the Select Areas have been setup, a listener is then attached which will respond with an onSelectArea "event", that can then be responded to based on the area(s) currently selected. Examples of this will be shown in the second part of this help.

To setup a Select Area, the easiest method is as follows: - start up the latest version of CL004 UberTools - from the opening menu, choose CLIPS ub SelectArea (scene 6) - drag the blue resizers in the dashed rectangle to define the size of one hotspot rectangular area. - use the input boxes at the top to define the # of rows, columns and areas in total. (The areas are numbered from top to bottom and left to right - all of row 1 rectangles counted first, then row 2 below it and so on...) If you define the # of areas to be less than rows x columns, it is the bottom row that would be incomplete (e.g. row = 2, columns = 3, areas = 5 ... see what happens). - use the drag icon in the top left corner to reposition the select areas - and a single click on the icon will force the select areas to redraw itself in case you need a screen refresh. - the alpha value is the visibility - the general rule of thumb is to leave it visible during development, but switch to 0 when ready for the final version - once the areas are setup the way you want them, choose the Code tab and click the copy button. - Paste the code that is now on your clipboard into frame 1 of the actions layer of the activity scene you are working on. - [|Setting up a Select Area] - Watch this demo to see this in action.

<span style="color: rgb(9, 46, 225)">To be more precise about the placement of the Select Areas
It is probably helpful to have the pattern on the screen when you are trying to customize the select areas for your activity. If this is desired, do the following: - create the pattern you wish to use in the PatternCreatorConfigurator and copy the code required to duplicate it. - open up the CL004 UberTools, and switch to scene 7 (Scene_6 copy in the library) - look at the layers - there is a new one that is not standard called "temporary patterns code" - on frame 1 of this new code layer, paste the code from the PatternCreatorConfigurator (if there is already code there from someone else's test pattern, erase it and replace it with your code) - test the Movie and run CL004 UberTools - go to Scene 7 directly (or click CLIPS ub SelectArea and advance one scene from there) - your pattern should appear on the stage .. and the setup tools for the Select Area. - use the dashed rectangle and other tools and input boxes to define the select areas you need for this pattern precisely - when done - choose the Code tab and click the copy button, then paste the resulting code into your activity scene in your own activitiy FLA (if you're putting this on frame 1 of the actions layer, make sure it is below / after the code on frame 1 that creates the pattern you are selecting) - [|Placing Select Area over a Pattern] - Watch this demo to see this in action.

<span style="color: rgb(10, 11, 178)">Now what do I do once I get the Select Area to highlight something on the screen?
The good news is that you've done the most difficult part - setting up the select areas to highlight what you want. The next part is to make the listener do what you need it to - and that depends on what type of response you're looking for. - when you copied the code from the Code tab box, it included the lines needed to setup the listener. (That's a special device that monitors the select area rectangles ... and if the status is ever changed - ie - if someone clicks on one of the rectangles - then a special function is triggered by that "event".) - also, that special function - "onSelectArea" is defined for you .. though currently the default setting is simple a trace in the Flash output window. - there are two special calls that the onSelectArea function can use to determine what happens next: --> evt.getSelectedArea will return a number based on the area that was just clicked (doesn't matter whether the click highlighted or unhighlighted the rectangle) --> evt.getChosenAreas will return an array of true/false values, each one corresponding to the selected / unselected status of the numerically corresponding area - you may wish to leave the trace statements while creating the scene for debugging purposes, but will probably comment them out. - use these special get statements in conjunction with if statements to determine the appropriate feedback for this scene - another feature you may wish to invoke is the ability to disable some or all of the select area object (either initially, if some of the rectangles don't actually cover a valid object - OR - at the end after the correct answer is given). Do this by using the disable function. e.g. SelectArea_mc.disable(1,3); or SelectArea_mc.disable(5); - [|Two examples of using the event listener to check for the correct response] - Watch this demo to see this in action.

<span style="color: rgb(38, 22, 212)"><span style="color: rgb(15, 0, 0)">Drawing a vertical arrowed line on the graphing board using ubLine functions
The graphing board's y-coordinates are opposite to those of the Flash Stage (ie in Flash down is positive). To prevent the arrowheads from displaying upside down change angleOrientation to 1 When using ubLine functions to draw on the graphing board if you find the line is moving the opposite way change angleOrientation to -1

code format="actionscript" // create a graphing board

// create the line with on mcCLIPSnewLayer[1]; hide the line so there will be no flashing CLIPSubLine.create(this.board.mcCLIPSnewLayer[1],"vertLine",{_x:0, _y:0, colour:0xff0000, angle:90, endpoint1:"arrow2", endpoint2:"arrow2", angleOrientation:1, style:"solid", thick:2}); board.mcCLIPSnewLayer[1].vertLine._visible = false;

// initialize the line to begin at (3,0) with an arrow on second end only board.mcCLIPSnewLayer[1].vertLine.SetLinePoints(board.xtoPix(3),board.ytoPix(0),board.xtoPix(3),board.ytoPix(0)); board.mcCLIPSnewLayer[1].vertLine.SetEndpoints("nil","arrow1",10); board.mcCLIPSnewLayer[1].vertLine._visible = true; y2 = 0; // initialize ending y-coordinate intervalId = setInterval(drawVertLine, 150);

// draw a vertical arrowed line from (3,0) to (3,6) function drawVertLine { if (!_global.animationPaused) { y2 -= 0.5; board.mcCLIPSnewLayer[1].vertLine.SetLinePoints(board.xtoPix(3),board.ytoPix(0),board.xtoPix(3),board.ytoPix(y2)); board.mcCLIPSnewLayer[1].vertLine.SetEndpoints("nil","arrow1",10); if (y2 <= -5.5) { y2 = -5.7; board.mcCLIPSnewLayer[1].vertLine.SetLinePoints(board.xtoPix(3),board.ytoPix(0),board.xtoPix(3),board.ytoPix(y2)); board.mcCLIPSnewLayer[1].vertLine.SetEndpoints("nil","arrow1",10); clearInterval(intervalId); board.mcCLIPSnewLayer[1].horzLine.SetLinePoints(board.xtoPix(3),board.ytoPix(6),board.xtoPix(3),board.ytoPix(6)); board.mcCLIPSnewLayer[1].horzLine.SetEndpoints("nil","arrow1",10); board.mcCLIPSnewLayer[1].horzLine._visible = true; x2 = 3; intervalId = setInterval(drawHorzLine, 150); SetIntervalsArray.push(intervalId); }   } }

code