![actionscript 3 for adobe flash cs3 professional hands-on training actionscript 3 for adobe flash cs3 professional hands-on training](https://m.media-amazon.com/images/I/41O2cuMLFgL._SL500_.jpg)
Anyways, here’s the quick experiment, in just shy of 370 lines of non-engine code: The differences with the originalĪs previously mentioned, the grid pattern is regular.
![actionscript 3 for adobe flash cs3 professional hands-on training actionscript 3 for adobe flash cs3 professional hands-on training](https://i.ytimg.com/vi/LUJkqzCM3L4/hqdefault.jpg)
This experiment solely focuses on the use of physics simulation to recreate the effect, and yes, there’s way more to it in the real thing. The underlying grid pattern is not stretched and deformed as in the original (which I do realize is absolutely part of the awesomeness of it). What this little experiment is focusing on is the deformation of the grid when interacting. And as you’ll see, we’ll barely scratch the surface of it and yet have a peek at how technically and artistically refined the original interactive piece is. The Wonderwall is in my opinion a perfect example of that commitment. One of his topics was -if I remember well- about over sophistication, and how he relentlessly seeks to push boundaries emerging from a seemingly simple form. I had the chance to see Yugo’s talk at FITC in Toronto a few years ago, and the modesty and insight he showed was absolutely amazing. The incredible range, quality, and singularity of work on display at tha.jp (the studio’s site) is simply puzzling. There are so many reasons to admire Yugo Nakamura’s work I wouldn’t know where to start. Later we will stroke it and utilize standard properties to curve the border of our stroke for us. Next we create a smaller triangle within our first triangle. JavaScript uses the method quadraticCurveTo on the HTML5 canvas to create the control point. Create the triangular path (with rounded corners) var trianglePath:GraphicsPath = new GraphicsPath(new Vector.(), new Vector.()) // Top Corner trianglePath.moveTo(canvasWidth/2 - x, padding) trianglePath.curveTo(canvasWidth/2, padding - y, canvasWidth/2 + x, padding) // Right Corner trianglePath.lineTo((canvasWidth + iconWidth)/2 + gamma, padding + iconHeight - gamma) trianglePath.curveTo((canvasWidth + iconWidth)/2 + y, padding + iconHeight + innerBorder, (canvasWidth + iconWidth)/2, padding + iconHeight + innerBorder) // Left Corner trianglePath.lineTo((canvasWidth - iconWidth)/2, padding + iconHeight + innerBorder) trianglePath.curveTo((canvasWidth - iconWidth)/2 - y, padding + iconHeight + innerBorder, (canvasWidth - iconWidth)/2 - gamma, padding + iconHeight - gamma) // Close Path trianglePath.lineTo(canvasWidth/2 - x, padding) Quadradtic Bézier curves have two anchor points the curve of the line between them is defined by one control point (Cubic Bézier curves have two control points).Īdding a pair of control points at each corner will give a rounded effect. The type of Bézier curve will be quadratic (opposed to cubic). To round the corners we will use Bézier curves, which are supported by both languages. To add a little complexity, let's round the corners of the triangle (and we are not going to take the stroke shortcut I used in in my previous article: HTML 5 Canvas Example). Var trianglePath:GraphicsPath = new GraphicsPath(new Vector.(), new Vector.()) trianglePath.moveTo(canvasWidth/2 - x, padding) trianglePath.lineTo((canvasWidth + iconWidth)/2 + gamma, padding + iconHeight - gamma) trianglePath.lineTo((canvasWidth - iconWidth)/2, padding + iconHeight + innerBorder) trianglePath.lineTo(canvasWidth/2 - x, padding) Īlthough beginning a path is slightly different, both JS and AS3 use the methods moveTo and lineTo. It is a triangle consisting of three points. Since both JavaScript and ActionScript support paths, we will use paths to define our shapes. Exclamation Point: A bang character "!" inside the center of the icon. Inner Border: A smaller triangle border inside of the background. The icon we are drawing has three major components: Background: A triangle with rounded corners, a gradient fill, and a subtle shadow. You can do this is ActionScript, but it is optional. Use of the "this" keyword: In JavaScript you will see properties like width preceded by the keyword "this" as in this.keyword.
![actionscript 3 for adobe flash cs3 professional hands-on training actionscript 3 for adobe flash cs3 professional hands-on training](https://i.ytimg.com/vi/sCxeYDSnMuo/maxresdefault.jpg)
It's worth noting that ActionScript 3 does not require type declaration. Trying to assign it as anything else will throw an error.
![actionscript 3 for adobe flash cs3 professional hands-on training actionscript 3 for adobe flash cs3 professional hands-on training](https://s3.amazonaws.com/cartoonsmartstreaming/wp-content/uploads/2015/01/AS3_Strategy_Games_FaceRight.jpg)
Actionscript 3 for adobe flash cs3 professional hands on training code#
For example, in the code above: var phi:Number declares that variable phi is a number. The code is similar in both languages, but two differences appear immediately and will be consistent throughout this article: Type Declaration: JavaScript is loosely typed, so we can't declare a variable's data type, like we can in ActionScript. Var phi:Number = Math.tan((iconWidth/2) / iconHeight) var x:Number = innerBorder / s(phi) var y:Number = x / Math.tan(phi) var gamma:Number = Math.sqrt(Math.abs(innerBorder*innerBorder - x*x))