CreateJS – EaselJS Boilerplate Setup
As I have been exploring more about HTML5 and the various ways to work with HTML5 Canvas and CSS3, I wanted to play more with what I really loved about Flash–creating screen graphics with code and building interactivity. With that, I decided to dive into EaselJS and start picking away at it and sharing more about what I learn about EaselJS as I try to create some basic interactivity examples and mini-games.
As with any web framework, there is the required boilerplate code that is needed to get everything up and running. After looking at the basic examples, I distilled this down to the very basic essentials that you can use to jump start your own project.
Folder Structure
The basic structure I have in this example has the base HTML file in the root folder, and a “js” folder containing the easel.js framework file, and my project’s JavaScript file, which I have called project.js.
The Markup
As with any HTML5 project, you need to have an HTML base file that contains the semantics for creating the canvas region using the <canvas> tag. This tag needs to have an id attribute so you can find it using JavaScript to attach to the EaselJS stage object. The canvas also contains a width and height attribute to give it dimension.
Also within the HTML file, you need to load in the EaselJS framework and your external JavaScript code. Finally, a simple onLoad handler for the body tag will ne needed to get things up and running. There are other ways to test for when the document is ready, but this works for initial projects and can be replaced later when needed.
Optionally, you can add a CSS file to style your canvas tag or it’s container. For simple projects, you may want to consider placing the canvas in a container element and giving it a background color or border, since a canvas has a default transparent background, making the edges hard to distinguish when running in the browser.
Here is the basic HTML boilerplate code:
In this case, my canvas has an id of “canvasStage” that I’ll use in the project.js file to link with the framework to create the stage. I also have defined the width and height of the canvas as 400×300. In the head section of the HTML, I have loaded the easel.js framework and my own project.js JavaScript code. In the body tag, I am calling an init() function that I have defined in my project.js file when the body has loaded.
The JavaScript
The JavaScript is a little more complex, but once you get understand the essence of what is going on, it is easy to create a snippet or sample file that you can use as a template to get right into working.
Here is the basic JavaScript boilerplate code:
At the beginning, you need to establish some globally scoped values that will contain the stage that you are working with, as well as any objects or shapes that you need to retain within the outermost scope. In addition, I like to create variables that contain the width and height of the canvas since the stage object does not include a width and height property.
I like to include a simple shape object as well so I can run this quickly in the browser to make sure everything is working correctly. I usually remove it immediately after testing everything with the confidence that the rednering is working as expected.
All of the initialization takes place in an init method that is triggered by the body onload event. I create a simple test message for the browser console to triple-check that everything works, then within this method, I need to create the stage. To do this, you need to access the canvas element from the DOM. I use the standard getElementByID method and grab the canvas element from the DOM and assign this to the locally scoped variable, “canvas”. While I now have access to this object, I access the width and height using the same method and assign them to their respective variables.
Next, I need to connect the canvas to the EaselJS framework and create a stage, which I have created a globally scoped variable for. I take the canvas variable I created earlier and assign this to the stage as a new stage object.
Then, to test that the drawing is working, I use the simple shape object I created at the top and draw something pretty simple. I then add this object to the stage.
Since canvas elements don’t automatically render, I need to update the stage to display my simple shape.
If you are animating in your project, you’ll need to at some point work with the Ticker object. To get the basic functionality working I add the current scope to the Ticker object, and create a callback tick method at the end that will pick up the tick event and update the stage rendering.
Running It
When you load the HTML file in the browser, you should see a message in the browser console and a small rectangle appear on screen:
Once everything is up and running, I can then remove the sample object, the drawing code for it, and I can then start working on my own project.
Download the Code
I have posted the boilerplate code on github: https://gist.github.com/2290015 I also have a link to a compressed ZIP version of it, along with the EaselJS framework (version 0.4).
Can Consumers Keep Up?
Last week I posted about the new Metro user interface in Windows 8. The article had quite a few comments and started a healthy discussion around the integration of Metro alongside classic Desktop mode and questions regarding Microsoft’s user interface strategy. But this got me thinking—for a community of professionals, this debate is natural. Within the web and mobile industry there is a desire to iterate faster to keep ahead of competition and to sure that your platform, device or technology is at the forefront of the industry. When we consider the fast evolving state of HTML5, mobile platforms and frameworks that ease the developer’s effort to publish to new targets, there is a constant demand we place on the design and development community to consider where to make investments in training and education to provide the best skills to our clients, companies and products.
But has anyone asked if the consumers of these technologies are ready for them? How can the ordinary consumer keep up?
iPhone, iPhone 3G, iPhone 3GS, iPhone 4, iPhone 4S, iPad 1, iPad 2 iPad 3, Snow Leopard, Lion, Mountain Lion, Windows 8, 3G, 4G, LTE, Froyo, Gingerbread, Honeycomb, Ice Cream Sandwich, Jelly Bean, Key Lime Pie—the list is long—and it is getting longer.
As professionals in this organization we are able to adapt to these changes and evolutions, but when it comes to the consumer that is going to adopt hardware and software—are they really ready for it?
Consider when you are in a room with hundreds of people talking. There is a natural desire to find chaos within the noise and make a connection. The consumer is within this room, with Microsoft, Google, Apple, Adobe, Amazon and tons of other companies all talking at once. Through their desire to find a single voice that they can focus on and filter out the background noise, the consumer has largely opted to listen to Apple. They speak directly to the consumer in a way that other companies can’t, either through empathy or to provide simple solutions to how their combination of products and services can help them.
Because of this, Apple’s competitors have decided to raise their voice, and to attempt to be the new singular voice that a consumer will focus on—but as a result, it has made the room harder to hear anyone—let alone a single company trying to evangelize their solution.
It is even harder when companies like Google, who are iterating at an amazing rate, position their latest Android mobile platform, Ice Cream Sandwich, as a great solution for customers—but at the same time the number of devices that actually run it and are accessible to them are in the single digits. Behind this, with the knowledge that Jelly Bean and Key Lime Pie are not far behind, when do we ask ourselves if technology needs to settle before moving forward too much?
A family member recently wanted to get a tablet. She vacations away from home often, and she is not a heavy computer user, but she loves to read which led me to getting her an Amazon Kindle Fire. She asked why I didn’t get her an iPad—and the conclusion was that her love of reading and the desire to have tons of books available within an easy to use and understand device that was not more than it needed to be led me to that choice. She is very happy with her Kindle and uses it every day, but she would never have found that on her own.
With sales incentives, lack of knowledge of product roadmaps and sales associates that are motivated to push specific product due to partnerships, it is hard for the ordinary consumer to know where to go. Couple this with the nature of online shopping, the ability to ask—”What is the right device for me?” is difficult to answer unless you know someone that can assist. Let alone if they are able to make the purchase and they need to keep up with the user interface and functionality changes that come with software updates and operating system upgrades.
As hardware manufacturers consider the evolution of their product roadmap, they must take into consideration the saturation level of their customers. Offering promotion or marketing is only going to address the issue slightly. Ask your customer: Are you ready for something new?
With so many technology choices out there…it is a question that we need to ask more.
Windows 8 and Metro: Get Over It.
Microsoft recently released the new Consumer Preview for general availability. This new version of Windows introduces a new spin on the idea of Windows with the introduction of the new Metro user interface that is used in combination with the traditional Windows desktop. The general reaction to the new version has been mostly positive, but there are a number of people that have lamented at the new user interface and have requested that it be removed and that the Start button that the Metro Start screen replaced be returned.
When I saw all of the comments I thought one thing: Get over it.
Harsh, I know—but the thing is, change like this is not new, and for the most part, new items that have been introduced that people rely on today—had initial reactions like the Metro Start screen.
Even the Start button itself was initially received with the same tepid response. When Microsoft introduced the Start button in Windows 95, it was deemed too simplistic, too different and too unmanageable compared to the old Program Manager of Windows 3.1. But Microsoft kept with it and over time the Start button has become welcome.
When OS X was first announced, the lack of customization and new limited functionality of the Apple menu was considered deeply flawed. How could this functionality that was such a core part of OS 9 and earlier be removed? Because the desire to move forward and come up with something better presented itself, and was ultimately welcomed by consumers.
Further back still, consider the changes made when going from DOS to Windows. , Applications like WordPerfect and Lotus 1-2-3 needed to move from a “keyboard-first” interface, to a “mouse-first” one. Because they needed to support their existing customers, they needed to make significant concessions in the interface to placate their existing muscle memory from the old DOS versions. As a result, they were not able to take advantage of the GUI for Windows, Mac or even OS/2. The software that did take full advantage of the user interface, Microsoft Office, became the most popular.
In my opinion, what the new Metro Start experience provides is a different way to look at your computer. It is similar to the approach that they are taking with Windows Phone—it is a view to you, your friends, and what is important to you, not to a list of applications. When you look at iOS, and frankly with Windows Vista and earlier, you are presented a list of applications, which are entry points to get to information, as opposed to viewports to the data that is within these applications that let you get inside to find more. Android is a bit of a hybrid; however this is only accomplished with widgets that are not consistent across applications or with the various devices based on the platform customization du jour from the hardware manufacturers.
While we buy applications or apps, it is the data within them that we are the most interested with, or they are simply entry points for an entirely self-contained experience like a game or other interactive element. The old Start menu experience doesn’t capture this new level of integration and connection we have with the data that feeds our apps. Metro is syncing the user interface to meet this new level of interaction.
So, yes, Microsoft has made a big change—and as with a lot of similar changes like this, complaints and revolts will pass in time. In fact, at some point, when it changes again, we will demand that they keep the Metro Start screen too.
Update: For a different viewpoint on Windows 8, check out this post from Jeff Ammons.
The New Day 1
Starting over sucks—and this is what I feel like right now. I’m not talking about starting over with work, but instead about my workout regimen and lifestyle change.
The Impact of Change
What I underestimated was the impact that getting laid off was going to do to my routine and my emotional state. I thought that the time would allow me to “free up” and attack the gym with more determination and vigor. In fact, the very opposite happened. I stopped going, and I started falling into depression, even though I already had a new job lined up and was excited going into it.
Part of this could be the sudden loss that you experience in a layoff, or the feelings of panic that you go through that wake you up in the night or strike you during the day—but the impact to your confidence and your willingness to put yourself out there again is strong. Getting together with old friends was extremely hard and difficult, and I still am struggling with reestablishing connections today. Going to the gym, where I already feel less that confident was even harder. It felt like starting over.
Something that people don’t realize is that you never start over at the same point you originally were at. Time has passed, you have earned more experience and frankly—you are simply not the same person you were when you “started” the first time. You haven’t backtracked, you have taken a curve. This is because you are always moving forward, even if you slip in some of the metrics you are measuring yourself against.
I have been pretty quiet, and I am changing my blog structure to help make it easier to manage writing by merging my two blogs together into a single location. When I started this new path over a year ago, the increased accountability was going to be a driver to me to keep going. What I found though is that as I started to slip and was saddened by this, the accountability made it harder to be public about it. Because I felt like I have let so many people down, which made the struggle seem magnified.
So today, I start a new Day 1. This isn’t the original Day 1, but a new Day 1 that includes all of the experiences and education that I have learned over the last year.
Reaffirming the Goal
The goal is the same, but I want to summarize it into a single statement:
I will have the confidence, endurance and strength to provide for my family and community to help them solve their challenges, expand their minds, and enrich their lives.
To do this…I need to…
- Focus on building emotional strength
- Focus on building physical strength
- Focus on cutting away the personal, physical and emotional fat that impedes my success
- Have a narrower focus on what I do, and how I do it
So today I look back on some of my original inspiration for getting started:
I will never be at this point again. This is a promise that I can guarantee. When I was at this point I was neither confident, enduring nor strong. I had no focus, and no goals.
The path forward will be different than the one that I was on. It has to be. I’m not the same age, nor is my life around me the same as well. So while I may continue forward with some of the same workout and nutrition plans, they will over time evolve and change.
Thanks for your patience and your amazing support.
Is -webkit the New Standard?
This week was an unusual one if you are a web standards advocate. In an odd move, Firefox announced that they are going to alter their UA string to allow a subsection of “-webkit” prefixed CSS attributes to be recognized in Firefox. The issue was mostly around mobile use fases, but the move has a combination of implications. Mostly it puts more work on the developer to make sense of everything in the world of CSS and HTML.
What are prefixes for?
When the standards organization started to explore how to evolve the language, there were browser manufacturers that grew impatient with the time it took for adoption, so in an attempt to push the technology of the web faster, they implemented their own experimental extensions into their browser rendering engines. These extensions were implementations of draft proposals that were still undergoing debate or discussion within the standards orgnization. In other ways, there were new ideas that were being implemented to demonstrate technology that was to be introduced as draft proposals into the specficiation. All of the browser rendering engines, WebKit, Firefox, Opera, and Internet Explorer have prefixes that are used for custom implementations.
The plan was, at a certain point, the specifications would be formally adopted and made “law”, at which time the browsers would drop the prefixes and there would be a single, common implementation that would be consistent on the web.
So what happened?
To support all of the custom implementations for a CSS rule, all of the prefixes are needed to support this specific browsers:
a:hover {
color: red;
-webkit-transition: color .25s linear;
-o-transition: color .25s linear;
-moz-transition: color .25s linear;
-ms-transition: color .25s linear;
transition: color .25s linear;
}
The code above is directed to support each unique browser, but as you can see, the code is very lengthy in order to target everything. As the rule gets adopted, the browsers would drop their unique implementation and would then map to the non-prefixed rule at the end. To do this each time, for every rule, takes a lot of time on the effort of the web pro. Also, instructors (and I’m guilty of this as well) typically instruct with only the -webkit rule and speak to the need to do all of the unique implementations.
What has happened is that people have only implemented the -webkit version of this, either from training or for time, supporting only Safari and Chrome. Other browsers therefore don’t get the same support based on their unique implementations. The result is inconsistency and an experience that wasn’t originally intended.
In an effort to help normalize the experience with WebKit browsers, Firefox through changing the UA string will allow a number (but not all) -webkit prefixes to work in Firefox.
Is this wrong?
It isn’t necessarily wrong–Trying to provide the best experience possible is always the best goal a browser can achieve. The issue is that this is a workaround for a problem by the web pro. It also is supporting a bad practice that can add complexity later on as new capabilites are added like shaders and other new proposals to the specification process. Also since Firefox will only do this with a subset of -webkit properties, it can become complex to know exactly which will or will not work.
Even if Mozilla adopts this workaround, it should not be a crutch for web pros to rely on to support web standards. While it may be a burden to map to all of the prefix elements, to ensure the best experience for in-process properties and rules, we need to remember why and how these prefixed properites are intended to be used, and eventually retired in favor of the approved implementation.
What can I do?
So even if you are initially coding for WebKit, part of a web pro’s workflow should be to do a final pass before deploying to make sure that they have well balanced and bulletproof CSS rules in their markup. Browser fragmentation is a mess, I know, but by recognizing how prefixes were indented to be used will help ensure our web projects to work today–and tomorrow.
Slides from Converge-SF
Today I presented the first session of the new Converge-SF user group in San Francisco. As a user group that is about connecting people together and sharing information, I thought it would be relevant to talk about something that is on everyone’s mind—change.
Change is hard, but trying to get in front of that change and ride along with it is even harder. In my talk, I mentioned how technology that we used to work with is only a small sub-section of what is needed in the industry today. With this it is nearly impossible for us to have a full mastery of the technologies that are out there today. Instead, through a deep understanding of the principles and fundamental concepts behind what we do, like with content strategy, design patterns, interaction design, and others, we can build on top of these universal concepts with technical mastery. This technical mastery is a combination of what we love and are passionate about, as well as what we can build a business around based on what is in demand.
You can download my slides from my SkyDrive using the link below:
Assets for San Francisco Mobile Workshop
You can download my assets for my Flash for iOS and Android session and my materials for Designing For Mobile Using Fireworks session from the San Francisco Mobile Workshop hosted at Adobe San Francisco. Included are walkthrough tutorials, configuration guides for Android and iOS, plus a sample chapter from my book Fundamentals of ActionScript 3.0: Design and Develop, available from Amazon.com or your favorite bookseller.
I’m Joining Lynda.com
I’m happy to announce that in February, I’ll be joining the amazing team at Lynda.com as Senior Content Manager for Web and Interactive courses and programs. I’m extremely excited about the role, and look forward to working with great folks like Mordy Golding, James Williamson, David Gassner, Ray Villalobos and all of their amazing staff and community authors.
While my time at Adobe was cut short, it came after a change I wanted to take my career. I was a product manager for some of their great web, interactive and developer products, but when I took a step back and looked at what I was really passionate about, it was in working with the community and trying to educate them as best as I could. Whether it was through the half million people that viewed my ActionScript 1:1 series, my books, my blog, or in person at conferences and in the classroom at San Francisco State University, I wanted to educate, excite and help people in their careers or in finding new opportunities for growth in the amazing web, interactive and mobile worlds.
In addition, as the community is embroiled in a huge shift technologically through changes to the Flash Platform, the growth of HTML5, and the growing dominance of mobile development using a wide array of native development languages or cross-platform frameworks, I needed to decide with my heart what was the best way forward. I strongly considered going back to product management at another company to make tools to help customers, or to help agencies navigate through the technology rapids, but ultimately, I wanted to do what I always love doing–help people, and make cool shit.
With this new role that I will begin in February, I’ll be working with the community to find emerging technology areas, workflow gaps, or new products and provide the education and guidance that people need to make great things. With Lynda.com, I also have an opportunity to work with products and technologies from all over the industry, including Microsoft, Google, Apple, Adobe and the numerous community-driven projects that have helped propel HTML5 and mobile design and development.
In addition to Lynda.com, I will continue teaching at San Francisco State University this semester and I have three courses this semester starting with my ActionScript 3.0 class which was recently retooled to focus on mobile application development, Advanced HTML5 which focuses on understanding how CSS3 and HTML5 Canvas works and then how to use tools like Adobe Edge to make the process easier, and a new seminar course on mobile content development covering the mobile ecosystem, design constraints and best practices for efficient design workflows. Outside of the classroom, I have recently formed a mobile application startup to help take some of the games that I have been prototyping for years and make them a reality, and I’m also starting to brainstorm on my third book which I hope to publish this year.
I want to extend my thanks to everyone that reached out after my departure from Adobe. Your wishes, words of encouragement, and offers to help were amazing and overwhelming. I’m glad to be in an industry and community that is so loving and supporting. With this new role, I look forward to continuing to help you challenge your assumptions, achieve the amazing…and maybe make a buck or two in the process.
Be amazing!
Learning Native Mobile Application Development
It has been a few weeks since I last blogged about Flash, recent Adobe announcements, and my departure from Adobe. Over the last few weeks I have been doing a lot of research and thinking into what my next steps are and what I wanted to focus on. I knew that I wanted to learn something new, but didn’t know which direction to go.
A few months ago, when I changed roles at Adobe to become a web community manager, I wanted to shift my focus onto mobile and tablet user experience design and development. I have always been more fascinated by applications than websites, probably because of the ability to tie directly to the computer or device and create something very immersive. Adobe AIR is a great technology to go to multiple devices; however, there is a “normalization tax” you have to pay to get this. While the costs of developing are reduced through having a largely reusable code base, the user experience needs to be homogeneous across the devices, plus it needs to be custom designed from scratch. Apple, Google and Microsoft have spent millions of dollars of research, design and usability testing into their components and user interface design. I wanted to harness this more and create applications that look and feel more like the native ecosystems that they were on. My first step was to play with Titanium from Appcelerator. It provides a JavaScript API for building applications using native components across platforms. The technology is very cool and you can quickly create native applications that look and feel like the rest of the OS, but there is still a lot of branching of code to provide the exact user experience for the platform. So I decided to dive head first.
It’s time to learn native development.
Now, I have been an ActionScript and JavaScript person for over ten years, so the thought of starting over and learning native app development felt very daunting and overwhelming. But after doing some research, I found that my understanding of the fundamentals of how ActionScript works makes it much easier to learn native development. It is like learning a spoken language. If you learn Spanish, you understand how to conjugate verbs, how to work with feminine, masculine or neutral nouns and how to construct sentences, commands or questions. The vocabulary or syntax build on these basic fundamental items. After learning Spanish, you can make the jump to Italian, French, or Portuguese with a lot less difficulty than it took you to originally learn Spanish. The same applies to computer languages. Learning the fundamentals of ActionScript makes it much easier to learn Java, Objective-C, or C#. The concepts are the same, but the syntax is a little different. This is one reason why when I teach ActionScript I teach HOW the language works, and not just run through a bunch of code snippets. Knowing these fundamentals allow you to transfer these skills to other languages, which in this industry is a huge advantage to have.
So I have been working with a number of books that have been teaching me about my three favorite mobile and tablet platforms: Android, iOS and Windows Phone.
I like to learn in multiple ways…I go back and forth between video based training and written books. For topics like programming, I tend to prefer written books since it forces me to type and code to see the progress that happens in the book. I find it is too easy for me to watch the video, miss a step and then just watch the video through instead of stepping backwards and finding where I took a mis-step. When it comes to books, I am pretty mobile, so carrying around bunch of heavy programming books gets cumbersome. Also, when it comes to tech books, after a year the books can become dated and take up a lot of space, so I became a subscriber to Safari Books Online and use the iPad app. You get thousands of tech books and they are easy to work with in the iPad app.
In addition to learning how to author apps for these platforms (and hopefully make a buck or two), I wanted to see how the various authors that are teaching each platform start a user out at the beginning first steps to help define how I can teach these platforms in the classroom. I love teaching and would love to cover classes around these ecosystems in the coming future and seeing how different people introduce topics like application lifecycle, workflow, best practices, and other topics is helpful to know more about the platform.
I have been jumping first into Android, but I hope to go through all three of the platforms in time. Here is the book lineup that I have decided to go with:
Android
I wanted to start with Android. I have heard that Java is very similar to ActionScript in many ways and thought it was a good place to start. I have been working with the following book:
Sams Teach Yourself Android Application Development in 24 Hours, Second Edition; Lauren Darcey and Shane Conder
iOS
Clearly iOS is the most dominant platform in terms of app sales, so that was next on the list. I have heard that Objective-C is quite a bit different in terms of syntax than other C-style languages, so I wanted to start more at the basics and see where the path goes. I decided to go with this book:
iOS SDK Programming: A Beginner’s Guide; James Brannan and Blake Ward
Windows, Windows Phone and XBOX
I have a Windows Phone. I love my Windows Phone. I want to make apps for my Windows Phone. Clearly Microsoft is pushing big for Windows Phone, but when combined with Windows 8 and the XBOX 360 console, it is a pretty powerful ecosystem to author for. I decided to try and learn all of them, but start with the desktop first. I noticed that a lot of Windows Phone books ask that you already know C#, so I got a basic C# book to start, then cover Windows Phone, then dive into XBOX 360:
Stephen’s C# Programming with Visual Studio 2010 24-Hour Trainer; Rod Stephens
Windows Phone 7 Application Development 24-Hour Trainer; Brian Faucher
Microsoft XNA Game Studio 4.0; Rob Miles
Wrap-up
So with all of that, I have a lot of reading (and coding!) to do over the next few weeks. I really am excited about learning something new—and to do something that is purposefully not Adobe to try and fully immerse myself within mobile.
I’ll provide more information along the way on how I’m doing with all of this training. For now, it’s off to Android and Java!
