background preloader



Viable Technology Choice Below, I describe my experiences with Ext JS after the Sencha Fast Track training, my challenges with doing browser based work in a consulting context, and my thoughts on why it matters to Flex Developers. I’m in a hurry. I don’t want a history lesson. Get comfortable, this is long. Preface I had the pleasure of attending a 5 day fast track for Sencha’s Ext JS 4 in New York last week with my partners from Web App Solution. While the technical future of Flex is extremely bright and exciting, the business and marketing future of it is over. Adobe has also ensured, intentionally and unintentionally, it has a limited future which will ensure Flex is no longer invested in any technical capacity from small, medium, and large businesses unless absolutely essential, or under the radar. Bottom line, Flex Developers are between a rock and a hard place in the industry right now. … except Ext JS. As stated by John Yanarella at the training last week: Background The Challenges of the New Platform

Orbit APIs To Use In Your Movie Movie Controls Stop and play a movie; movie.stop(); movie.pause(); Control movie timeline movie.goto(2); // Goto frame 2 movie.goto('10s'); // Goto 10 seconds after start Stage Set background color stage.setBackgroundColor('red'); Set Framerate of the movie (frames per second) stage.setFramerate(30); Freeze and unfreeze the movie stage.freeze(); stage.unfreeze(); Draw a Path Create a new shape with a specified path. shape = new Path(); shape.moveTo(0, 0).lineTo(100, 0); shape.addTo(stage); Use SVG-like paths to create the same shape. Draw a rectangle Overview new Rect(x, y, width, height, cornerRadius) Draw a rectangle, at 0x0 of size 100x100 (still invisible) new Rect(0, 0, 100, 100).addTo(stage); Rectangle, with rounded corners of radius 5px (still invisible) new Rect(0, 0, 100, 100, 5).addTo(stage); Red rectangle with green border, 10px wide (visible) Rectangle with 1px borders of color 0xFFAABB, no fill color Half opaque rectangle of color rgba(100,100,255,0.5) Bitmap

Strobe Designing Docs for Developers Last week we re-designed our documentation, primarily in terms of organization and content, but we also made the visual design fit in with our homepage. I decided to write about our experiences to get your feedback to inform future updates and also to share the recipe we came up with for designing docs for developers. What do you think of the results? How do you like to see docs organized and presented? Our current recipe is: 4 top-level categories3 questions the front-page must answerNo social features or promotional materials It’s a work in progress and we’d love your feedback. Here’s where we started from… The good news was that we knew the very basics of the content were sound – plenty of users are building on our platform using this content. But we could tell something needed to change since we were getting support requests that seemed to point to a difficulty finding the right information with this design. What we did Fewer top-level categories Visual design fitting in with homepage

Creating spirals I have been having fun playing around with JavaScript, the HTML5 Canvas element and EaselJS lately, and have been building a lot of small experiments. I wanted to share a simple one I created, which creates spiral designs. The example was pretty simple to put together, but is fun to play with, and can make some pretty nice patterns / spirals. I have uploaded a couple of images that I have created using the example: <! and put together a time lapse video showing a spiral being created: You can view the example at: I have also posted all of the code in my GitHub Repository. There is no UI to change settings, but you can tweak the designs you create by passing in some URL params, like so: /index.html? minradius : The minimum radius of the circle that will be drawn.maxradius : The maximum radius of the circle that will be drawn. If minradius and maxradius are different, the circle radius will tween back and forth between the sizes. Click the screen to start / pause the drawing.

docco Docco is a quick-and-dirty, hundred-line-long, literate-programming-style documentation generator. It produces HTML that displays your comments alongside your code. Comments are passed through Markdown, and code is passed through Pygments syntax highlighting. This page is the result of running Docco against its own source file. If you install Docco, you can run it from the command-line: docco src/*.coffee ...will generate linked HTML documentation for the named source files, saving it into a docs folder. The source for Docco is available on GitHub, and released under the MIT license. To install Docco, first make sure you have Node.js, Pygments (install the latest dev version of Pygments from its Mercurial repo), and CoffeeScript. sudo npm install docco If Node.js doesn't run on your platform, or you'd prefer a more convenient package, get Rocco, the Ruby port that's available as a gem.

JS Game Engines PixelFlow If you have happen to have been watching my Flickr feed for the past week or two, you have probably noticed that I have been playing around with creating some graphics using Canvas and EaselJS. What started as a simple EaselJS experiment, quickly morphed into an excuse to build a mini app / example and play around with some of the new HTML5 and CSS3 features. The example I created (named PixelFlow) is a simple example / app that allows you to choose an image, and then create some designs using the colors from the image. The core drawing functionality is built about the HTML5 canvas element and the EaselJS library. You can play around with the example yourself at: <! I built the example with touch in mind, and thus it has support for touch on Android and iOS devices. Here is a video showing the example in action: As you can see, the multitouch works really well on the iPad. The example wont work on: There are a couple of known issues:

Biolab Disaster Impact Follow Drone As I posted the other day, I have been spending some time playing around with dynamic drawing with the HTML5 Canvas element and EaselJS. I have put together quite a few examples and experiments and will be posting them (along with what I learned from them) over the next couple of weeks. The first example I want to share is a simple one which I call "follow". Here is an inline version of the example that you can play with. You can view the example fullscreen (which looks better) here. You can view, as well as download all of the code from my GitHub repository (released under an MIT License). Im going to write a series of posts over the next couple of days on a couple of things I learned while building this example. I am drawing to a canvas, but telling EaselJS to not clear the canvas when it redraws. Again, you can view the full version of the example here, and view and download all of the code from here.

Getting Started with EaselJS One of the features of HTML5 that developers are most excited about is the Canvas element. The Canvas element essentials provides a bitmap canvas for dynamically rendering shapes and bitmap graphics. It is very similar to the Flash Player's Bitmap and BitmapData classes. However, working with the Canvas element can be difficult, especially if you need to manage, update and or / animate multiple shapes and bitmaps. Grant Skinner has release a JavaScript library named EaselJS, which attempts to provide a Flash like DisplayList API in order to make it easier to work with the Canvas element. In this post, I will show how to get started animating content in the Canvas element using the EaselJS JavaScript library. Here is a list of the main classes in the library: DisplayObject : Abstract base class for all display elements in EaselJS. You can view the complete api docs here. Now, before we get started, lets look at where you can actually use the Canvas element (and thus EaselJS).

EaselJS Recent Updates Follow @CreateJS November 2014 Updates in preparation for next release (coming soon).New class model, with big performance increases October 2014 Lots of bug fixes and pull requests.New 'Extras' folder in GitHub with useful tools and classes July 2014 Major overhaul of Graphics to include a useful command pattern, and a big performance increase.Added / unstore() The Story Why we built EaselJS About EaselJS EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. Featured Projects Community Show & Tell. Ion Drift A port of the Flash game Ion Drift, b10b was able to build a CreateJS version in less than a day that hit target framerates on even the lowest devices, and outperformed ports to other libraries. By b10b b10b

TypeScript for ActionScript Developers Introduction The following covers what the TypeScript language is compared to ActionScript 1, 2, and 3 with as much context as possible and compares the syntax side by side. This article should help serve as a reference while you learn TypeScript. Also, these articles always help me learn while writing them and I like to have documentation I can refer to later. You cannot really talk about ActionScript without talking about the Flash Player internals just like you can’t really talk about JavaScript for web development without also talking about browser internals. What is TypeScript? TypeScript is awesome. Optional TypingClassesPackages via Namespacessupports privatemoduleseverything compiles to JavaScripteverything using classes/packages/modules compiles to RequireJS/AMD/CommonJSYou can code in normal JavaScript; TypeScript is optional; you can mix and matchall the TypeScript features for typing aren’t compiled into JavaScript (no enforcement) so it’s normal JavaScript that gets outputted