Animated Infographics with Flash Professional

Adobe is holding a number of neat professional development events for educators over the next few months. I’ll be hosting two sessions on Flash Professional CC at the end of October that I encourage you to attend.

The morning session will go over the basics of getting content from Adobe Illustrator into a Flash Project, animating that content, and publishing it as a single animated infographic in Flash Player. In the afternoon, we’ll see how to convert our Flash project to target HTML5 Canvas, build interactive elements, tween the entire infographic based upon user control, and more!


Easy animated infographics with Flash Professional
October 29, 2014 – 8.00am (PDT)

Make your own infographics—and supercharge them with animation! In this session you’ll learn how to use Adobe Flash Professional to add drawings, images, and text to your infographics, and then export them for playback on Adobe Flash Player.

Advanced animated infographics with Flash Professional
October 29, 2014 – 3.00pm (PDT)

Make your infographics even more engaging. In this more advanced session, you’ll learn how to use Adobe Flash Professional to include user-driven navigation along the Timeline.

Converting Flash Interactives to HTML5

Over the past two weeks, I’ve taken on a project to convert an old (OLD) Flash interactive tool to HTML5. My primary reason for doing this is not so that it will run on mobile browsers… but rather that it would be an easier task to rewrite the thing in HTML5 rather than get all of the old AS1/2 code together, grab an old version of Flash Professional, locate and configure the external remoting libraries, and sift through my crappy old non-OOP code to figure out how to make a couple of simple changes. No thank you!

Old Flash Version
Old Flash Version

The benefits to performing this conversion include; 1) making it better from a UI perspective, 2) yeah, it’ll run on iApples, 3) provides me with a chance to explore a direct conversion project.

I’ll spend a little time explaining technology choices, below.

Art Tosser
New HTML5 Version

AngularJS: for data binding and repeatable elements.

I’ve been using AngularJS for a good part of this year on a secret project I am working on with Adobe’s Creative Cloud team. It makes things like data binding and templating quite easy to work with – very similar to Flex in some regards. It’s also hyper-structural and enforces a good amount of organization into the code.

GreenSock Animation Platform: for transitions, draggables, and tweening.

I actually have used GreenSock AS2/AS3 libraries on a number of Flash projects so it was pretty easy to get their JavaScript library working with this project. The main difference being that we are no longer working with the Flash display list but rather the browser DOM and all of the inconsistencies in positioning and sizing elements that goes along with that. It’s just something to be aware of when figuring our coordinate systems for drag and drop and other items.

Bootstrap: for buttons and icons and such.

CourseMedia is already using Bootstrap (albeit version 2.3) – so it was pretty simple to just generate some buttons and icons based upon their styling system. No biggie.

Art Tosser - loaded
Art Tosser (HTML5)

This was my first foray into using CSS FlexBox on an actual project. Is it perfect? No. I was hoping the positioning and sizing of FlexBox elements would be closer in similarity to Flex (Apache Flex) but not quite. It’s still nice to have a more powerful way of positioning elements for browsers.

Fullscreen API is an absolute mess still. Having to check against each specific browser and dealing with those inconsistencies is one of the things that is so off putting when it comes to web development. It feels incredibly restrictive that something so simply done in ActionScript is such a cumbersome chore in JavaScript… and even then there are still browsers which do not function ideally, similarly, or at all… but this is bound to improve with time.

So what is the main takeaway from this? Simple interactives such as this one can be pretty easily converted from Flash to HTML5. It isn’t perfect… but what really is? My main goal is to keep things like this as simple as possible as with anything – the more complex a system becomes, the greater chance of fragility. – HTML5 Game Development with Phaser

HTML5 Game Development with Phaser
HTML5 Game Development with Phaser has published the long-awaited course on HTML5 Game Development with Phaser! Special thanks to Richard Davey for looking over the code and providing guidance in the development of this course.

Phaser is a cross-platform game development framework for both mobile and desktop games. This fast, fun, and free framework supports both JavaScript and TypeScript, targeting the open web via HTML5 Canvas. This course shows you how to put Phaser to work: creating a multi-state games that can be played on both desktop browsers and mobile devices. After you gather your assets, author Joseph Labrecque will help you start a new game project with the Brackets code editor, create a basic preloader and menu states, and then start building game entities and layering in functionality with Phaser’s sprites, groups, animations, tweens, emitters, and physics. He’ll also show you how to provide feedback to the player and add sounds effects for a more immersive gaming experience. When you’re done, Joseph shows you how to prep the game for a mobile launch.

I really like Phaser. It’s an awesome little framework for quickly building games using web standards and is quite similar to a lot of ActionScript-based frameworks like Flixel. Phaser has the concept of states – so you don’t end up placing all of your JavaScript inside one big file (but you can if you want to). It has particle systems, a group of physics libraries to choose from, rich audio support, and much more.

Why bunnies? Bunnies are cute. They are simple to draw and animate… and who doesn’t feel the need to defend such poor little creatures?

Am I giving up Flash? Of course not. I actually generate all of my visual assets and animations with Flash Professional CC in this course. I work with Flash just about every day – just as I have in the last 15 years or so. Concurrently, I’ve been working with HTML, CSS, and JavaScript for even longer than Flash. Just because I do work in one area doesn’t mean I abandon everything else. That’s foolish ;)

Packt Celebrates 10 Years

With Packt Publishing celebrating 10 years of delivering effective learning and information services to IT professionals… they are offering most digital copies of the books they publish for only $10 USD!

This offer is valid until July 5th if anyone wants to take advantage. They have a pretty huge library of titles to choose from… I highlight my books below – but they have quite a few authored by others in the community as well.

Flash Development for Android Cookbook

1420EXP_Flash CS5 Android Development CookbookThe Flash Development for Android Cookbook enables Flash developers to branch out into Android mobile applications through a set of essential, easily demonstrable recipes. It takes you through the entire development workflow: from setting up a local development environment, to developing and testing your application, to compiling for distribution to the ever-growing Android Market.

Learning Adobe Edge Animate

2427EXP_MockupCover_0Learning Adobe Edge Animate will detail how to use this professional authoring software to create highly engaging content which targets HTML5, CSS, and JavaScript. Content created in Adobe Edge Animate does not rely on a plugin – so it can be run within any standard browser– even on mobile.

Adobe Edge Quickstart Guide

3301EXP_Adobe Edge Mini BookWhether you are coming to Edge from Flash Professional or are totally new to motion graphics on the web, Adobe Edge Quickstart Guide provides a solid foundation of motion and interactivity concepts and techniques along with a set of demo assets to build upon.

Adobe Generation Professional: App Design

Do you have an interest in App development? Are you constantly being asked to show students how to create an App? Do you teach a computer class and have a desire to take your own class in a new direction through App development or are you simply intrigued to know how to build your first app? Either way, this intensive 2-week online Adobe Brackets Bootcamp is for you.

This course takes place on the Adobe Education Exchange from June 13th, 2014 – June 30th, 2014. It’s a great idea to have a sort of bootcamp-style introduction to app development like this. My understanding of the course is that each day, on the first week, a certain piece of application functionality is explored in a workshop-style environment. The second week is reserved for students to complete a full app with assistance from the course instructors. It’s actually very similar to the format I use for my PhoneGap courses – though these are dived across a 10 week quarter term.

I was asked (along with 9 other “guest experts”) to prepare a short, 20 minute presentation around my creative journey and some interesting projects I’ve worked on. The slide deck for this presentation is included below.

Thanks to all of the students who attended the session and had such nice things to say. Happy to present for you all.

I’m sure that is this is successful, that Adobe may offer the course again – so keep a eye on the Education Exchange if you are interested!