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.play(); 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
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: <! mikechambers.com/files/html5/easeljs/PixelFlow/ 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.
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 Graphics.store() / 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