With global collaboration and a flat world in mind, this group of Adobe Education Leaders (primary through post secondary education) is sharing their expertise and thoughts on the use of technology in the school classroom and at districts and college/university campuses around the world.
This is inspirational. Watch developer Jesse Warden build out a game in 12 hours using Flash Professional, Audition, Fireworks, Photoshop, and Sublime Text. He is using the Corona SDK for development targeting mobile.
It’s great to see that the Creative Suite workflow is applicable even when targeting something non-Adobe like Corona! The big take-away though is what can be accomplished in such a short amount of time. I’ve learned much from short game jams and such – students can gain lots of experience across applications doing the same. Game development is a great way to teach workflow and get students familiar with the tools and platforms.
I built a Memory game (like Simon Says) in Corona SDK in 12 hours over Memorial Day weekend, recorded it, and compressed it to 7 minutes here. I used Adobe Flash, Fireworks, and Photoshop to do the artwork, Audition to do the audio, and Sublime Text 2 to code the Lua in with Ansca Mobile’s Corona SDK. I use Tower to check the code into Github.
If you want to get involved immediately – join the One Game A Month initiative! You don’t have to make anything complex… just hone your skills by building simple concept games. That’s what I’m doing. I know there are a few other AELs who have joined #1GAM / #OneGameAMonth as well – be heard in the comments and tell everyone how useful an effort like this is!
I announced a few days back on my personal blog that I am speaking on Edge Animate at Adobe MAX this year. Also included in that post is a quick, 30-second video ad for the session. For those who are unaware, Adobe actually solicits these videos from speakers as part of the speaker tasks and have done so for at least three years now. It is an optional task and I’ve never bothered to build one out in previous years but thought it might be fun to actually do it this time.
I prepared for a lengthy process of planning, recording, editing, compositing, and all the turmoil that normally comes with a project like this. I figured that I might be able to get it done in 3 or 4 days. Using Photoshop, Premiere Pro, Audition, and After Effects… I was able to do it all in less than 2 hours.
So… what did I need to do to get all of this together?
Initial Assets on hand:
Static session info panel built in Photoshop
Soundtrack already created in Sonar X2 Producer for another project
The Edge Animate logo
What I need to build:
Build up the assets into a nice, 30 second motion video composition
Record and master the voiceover track
Integrate the After Effects composition, VO and BG tracks, and add company branding
The first thing I needed to do was build the core of the ad, which is based upon the Edge Animate logo. I basically plopped the logo in the center of the screen and then had it scale smoothly from far away up until the frame was entirely filled. Upon filling the frame, I employed a glow and burn effect to remove the logo and reveal the session information. Finally, I added some fractal background animation upon a solid fill behind everything whose colors were sampled from the Edge Animate logo. This composition is dynamically linked to Premiere Pro so I didn’t even have to render it!
In Audition, I set about recording the voiceover track and performing some mastering upon it so I wouldn’t have to fiddle with it at all in Premiere Pro. I’ve never had a good time playing with audio in Premiere Pro directly. Incidentally, Jason Levine has an excellent video tutorial on using Audition to generate broadcast-safe audio tracks.
The final step is to glue it all together in Premiere Pro. The After Effects comp was already present via the excellent dynamic link functionality present in the Creative Suite video production apps but I wanted to add the logo for my company, Fractured Vision Media, LLC, to the tail. It’s also simple to throw in some dissolves so that it all flows nicely. All I needed to do then was drop in the two audio tracks and trim the background to the length of the sequence. Done.
The result is included below. It took barely two hours to create and get up on YouTube and I think it gets the message across quite well. Cannot imagine doing this in any other toolset so quickly!
Over the US holiday weekend, I participated in the Charity Game Jam organized by Christer Kaitila, author of Adobe Flash 11 Stage3D (Molehill) Game Programming Beginner’s Guide and The Game Jam Survival Guide (for which I was able to serve as technical reviewer). The idea was to make a game inspired by the technical limitations of the NES (Nintendo Entertainment System). This means 256×224 pixels and 64 colors… though the pixel resolution was doubled and any constraints were made optional. The charity bit comes in where anyone participating would donate to either Make-A-Wish – which performs tangible acts of kindness for children who are suffering with terminal illness, or Kiva – which I’m still unsure exactly how they operate… I went with Make-A-Wish!
As expressed in the recent Adobe education article, Better Learning Through Game Design [alternate version], gaming and the skills involved in the creation of games are important to education. With the current focus on gaming for engineering behind the Flash runtimes, gaming is very important for Adobe. Take these two factors together and gaming is very, very important for the Adobe education team. As an Adobe Education Leader and lover of all things Flash: it is my absolute duty to dive into this stuff head first
The game I created was built using the Citrus game engine targeting Flash runtimes (Flash player/AIR). If you haven’t heard of Citrus before, it is a GPU-accelerated gaming engine (strongly directed at platforming) which sits atop your choice of view renderers, physics engines, and so forth. I chose to use Citrus + Starling + Box2D for my game. The engine is being actively contributed to, is free to use, and holds great promise for integration with tooling in the future.
I started off using Flash Professional and the Starling Sprite Sheet exporter for texture atlases – but considering the amount of time it would take to properly animate my characters, decided to use single-frame sprites instead. For this I fell back to Photoshop. Most of my assets included screens, overlays, characters and objects, plus one huge background image. Something super-cool about using a big background image like this is that it made it pretty simple to figure out platform and object placement through the Info panel.
In the figure above, you can see that I am using the Move Tool and hovering over various parts of my image (game stage) to determine coordinates using the Info panel. Cool, right? I chose to not even bother with some of the tooling integration with Flash Professional that exists and just go straight code using Flash Builder 4.7 beta – so this was a tremendous help!
What I got out of it I got to pick up and learn another great gaming framework! For the previous game jam, I went with Flixel and the traditional display list. I’ve been wanting to try my hand at something that utilized Stage3D and after a few conversations with Tom Krcha about Citrus, thought that it would be the logical choice. Funnily enough, I wasn’t going to even participate in this game jam but since I planned to look at Citrus over the weekend, and it sounded like a really good cause, I decided to throw my hat in. After all, despite admonishments to the contrary – I’ve found game jams to be great opportunities for picking up new stuff and just diving right in. A warning though: that is the sort of learner I am… so it works for me. I can see how this approach could be disastrous for some people; so “know thyself”, kids.
What went well Citrus was great to use. It has all sorts of base classes all ready to go for players, enemys, pickups, physics objects, sensors, platforms, et cetera. They are all easily skinnable and can be extended to override functionality and behavior. Similar to Flixel and other engines, Citrus has the concept of states which I employed to wire up the various game screens. The API documentation is great and there is a very active user support forum as well. The ability to use a variety of 2D and 3D render views along with swappable physics engines is such a great model. This could very well be my go-to engine for any future game work!
The game concept came together pretty easily this time as well. Friday evening I was able to get the basics of an unskinned platformer together. Overnight, I got the idea for what it became – basically a fetch quest for an infant who just won’t go to sleep. Parents of young children – we all share this nightmare together… now we can relive these early memories over and over and over and over… lovely, right?
In case you are wondering, the title and intentional misspellings originate with this meme.
What went wrong
Almost nothing! The entire thing went really quite smooth until the very end. As I mentioned before, I was using Flash Builder 4.7 beta for all of my development. Everything worked awesome when testing inside of the dev environment… but when I completed the game and began to prepare everything for publication… I encountered my one major issue. Performing a release build rendered a .swf which CRASHED HARD. Absolutely unplayable… no amount of debugging or profiling seemed to create any suspicions either. Google searches… commenting out entire portions of code… no solution whatsoever. Until I thought to myself: “Joseph, you are using a beta version of the new ActionScript Comipiler 2.0 to perform a release build.” Establishing the project within Flash Builder 4.6 and performing a release build created a perfectly functioning .swf file. Thank goodness!
Only other issue is that when people approach the game for the first time, they don’t know how to play. I should have placed some quick instructions in-game. For reference; SPACEBAR = jump, L/R ARROW to move.
Conclusion
Happy I was able to participate. Christer is badass. Goal was set at $250 and we hit over $1500!!! Love the game I made. Love Citrus. Please play the game, learn from the source code, and share it with your friends
Adobe tooling and runtimes make this all possible!
BTW: If you want to learn more about using Starling, Feathers, and Flash Professional for multi-screen layout… I have a new article up on the Adobe Developer Connection I encourage you to check out: Designing for a multi-device, multi-resolution world
I was fortunate enough to be able to attend, and speak at, the Adobe Education Exchange Live event in Toronto, Ontario back on November 9th. The event piggy-backed onto the larger DesignThinkers conference being held at the same time and both events led up the Adobe Design Achievement Awards (ADAA) ceremony.
The session I gave at the event was around the University of Denver and our work with enabling our community members to take charge of and deliver encoded video streams through tooling and services built in both HTML and Flash Platform technologies. We’ve always been about using whatever tools are appropriate for accomplishing specific needs and oftentimes this involves using a number of different technologies together. As someone who works in both web standards and Flash – it irritates me beyond belief when the two are placed in an adversarial context. That just isn’t reality – and is harmful to the creative process.
The talk was recorded – but don’t think it is available publicly. Slides are below.
Another hi-light for me was getting the chance to chat with gaming evangelist Tom Krcha about Flash, gaming, education, and a number of related topics. Tom gave a great overview of “The Future of Flash” to close out the event and I think it really opened a lot of people’s eyes. Flash is a complex platform consisting of many tools, services, frameworks, targets, runtimes, and people doing extraordinary things all the time. It is a shame that so many see it as just a web animation tool as it really is so much more. Having sessions like this should definitely help!
The ADAA ceremony was interesting… this is the second ADAA awards I was able to attend in person and it really is quite an event. To see the truly great works produced by these students is truly something incredible. Please do have a look at the winners and finalists over at http://www.adaagallery.com/.
A week or so after getting back, I was asked by the Adobe Media Server User Group whether I’d want to speak at their November meeting. For that talk, I modified my Adobe Education talk to focus on AIR and AMS – and the processes used to have it all work. The slides of this talk are below.
Looking at getting into gaming using Flash or HTML5 technologies? Want to see some great examples of gaming using these and other tech? Want full source code for all these examples to learn from or adapt to your lessons? If any of this interests you – you’ll be happy to have a look at the 1400+ games developed during Ludum Dare #24 this past weekend.
With the current Flash Platform emphasis on gaming, an event like Ludum Dare is the perfect opportunity to get up to speed on some of the neat libraries and techniques offered by the platform. I did a lot of warm up excercises previous to the start of this event using Starling, Away3D, and some other gaming engines. Flash offers a TON of options no matter what type of game you are developing – so be sure and check a few of them out before making a decision. A bunch of GPU accelerated Stage3D engines are listed on the Adobe Gaming site.
Ludum Dare (Latin: “to give a game“) is a regular accelerated game development event which takes place over 48 hours. A theme is voted on in the days following up to the event and the chosen theme is revealed at the event start time. Participants basically are going into these 48 hours with nothing prepared since the theme is secret… and all assets and code (aside from external libraries and such) must be created during those 48 hours. Anything that isn’t must be declared beforehand – making for a pretty intense experience for the participants.
This was my first Ludum Dare (although I have contemplated joining previous ones) and I really enjoyed the experience. Ever since I had the pleasure of tech editing Christer Kaitila’s ”The Game Jam Survival Guide“, I’ve been wanting to give something like this a shot.
My motivation for this round was to force familiarity with a specific ActionScript gaming engine. I wasn’t sure what I would use until the theme was announced and settled on the popular Flixel engine. I’m happy that I did – as this engine really makes everything quite simple when throwing a game together. Initially I was put off by the theme (“Evolution”), having absolutely zero ideas on where to begin, but that all worked out as I put time into developing the concept. I learned a ton about Flixel – which was my main goal. Picked up a lot of other new experiences and had fun doing it!
Some of the final game is a bit rough… I know there are some spelling errors, for instance. Some of the game logic could be fixed and there is certainly room for cleaning up the code. here could also be a bit of challenge added to the game as right now it is COMPLETELY story-driven in a minimalistic fashion. The soundtrack could also be cleaned up as well as the sprites.
I’m really happy with the way it all came together.
Tools used:
Adobe Flash Builder 4.6
Adobe Flash Professional CS6
Flixel
DAME
FL Studio
Native Instruments Komplete 7
Adobe Photoshop Extended CS6
Adobe Media Encoder CS6
Adobe Audition CS6
Had a great time doing this even with limitations imposed by family, clients, publishers, and the rest. I’d encourage anyone to give it a go – even if they don’t think 48 hours is enough time.
This coming week, from July 23rd through July 26th, myself and a whole bunch of other Adobe Education Leaders [K12] [HED] will gather at Adobe headquarters in San Jose for our annual institute.
During the gathering this year, there is sure to be a lot of discussion in regard to to both older and newer technologies and toolsets. I’m presenting a couple of sessions which revolve around the Adobe Flash Platform and gaming, there will be discussions around Creative Cloud, Touch Apps, et cetera. There will surely be sessions on Adobe Edge as well – roadmap discussions, workshops, and other activities will abound. In the afternoon on Thursday, AEL Tom Green will be presenting a 90-minute session on Edge which is sure to gather a large audience among attendees.
Over the past few days, I’ve been working on a giveaway with my publisher to coincide with the institute:
For those in the wider community that will not be at the institute, I’m going to provide a way to get familiar with Edge for the price of a mere tweet! I’m giving away three ebook copies of my Adobe Edge Quickstart Guide published by Packt. All you need to do is tweet your favorite feature of Adobe Edge with both the hashtags #AEL12 and #EdgeGuide – pretty simple, no? We’ll close the giveaway on Friday the 27th and choose 3 random tweets from the pool! Winners will be contacted through Twitter.
Here is the Adobe Edge Quickstart Guide: “As a visual designer who loves to make things move and not spend my time coding, I found this book provided what I needed to get up and running in Adobe Edge. I even enjoyed building out some interactivity, discovering it isn’t all that difficult when taken one step at a time!” – K. St Amant
Also be sure and check out the FREE video2brain feature tour from Tom Green: “Adobe Edge is a robust motion graphics and interactivity tool designed for the web universe, and in this workshop author and expert Tom Green shows you what it can do. You’ll learn how to create animations, add moving elements to a static HTML page, and create and use symbols. You’ll also see how Edge integrates with Photoshop, Illustrator, and Fireworks and how to use to use the Edge Code panel to add interactivity, looping, and code. A tutorial on using web fonts to apply typographic techniques to your work rounds out this quick but rich course.”
With the announcement of Adobe Creative Suite 6 and the Creative Cloud, the Adobe Education Exchange is brimming with great new content produced by Adobe, Adobe Education Leaders, and other contributors. Much of this content is featured on a special page dedicated to CS6 for easy access. With CS6 and the supporting resources, you can be fully equipped to engage students in learning, unleash creativity, and prepare them for career success.
The materials cover an assortment of CS6 products and topics. For example, here is a video overview of the Flash Professional CS6 Mobile Content Simulator:
Rich, topical content like this is typical of what you will find in the Education Exchange. Here are some others:
There are also a variety of product-focused technical guides to quickly get up to speed on how to use CS6 and links to other great content surrounding this new collection of professional software.
All you need to join the Education Exchange is a free Adobe ID. Anyone can contribute. Let’s go!
Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.
In preparation for the release of Adobe Edge Preview 4 [download!] – I’ve created some videos demonstrating a few of the new features available in this build. A number of AELs are creating videos, articles, and books around this exciting new product and I imagine more will be posted here as time goes on…
Apache Flex is undergoing a re-branding initiative and your logo design could be chosen!
On the 31th of December, 2011, the Apache Software Foundation has accepted the Flex SDK into incubation. Apache Flex is now a community project managed by Apache (ASF). The migration from Adobe to Apache involves a re-branding and you can contribute by proposing the new Apache Flex logo.
Have a look at some of the submitted proposals here (scroll down).
Instructors: Let your design students know about this excellent opportunity. Students: Good luck!!!
Wondering why Flex is under the care of Apache Software Foundation now? Here is the low-down.
I strongly suggest that if you are interested in digital artistry (including; installations, app development, browser-based design, mobile, animation, game design, print, et cetera) you head over and check out the Adobe Design Achievement Awards finalists for 2011.
You can read about each finalist, view team members, see samples of the work, and even comment or share via social media. Really amazing work from people all over the globe can be seen over at http://www.adaagallery.com/.
Plus, if you want to attend the awards ceremony in Taipei, there is an open invitation this year!
I got to pick up and learn another great gaming framework! For the previous game jam, I went with 
Citrus was great to use. It has all sorts of base classes all ready to go for players, enemys, pickups, physics objects, sensors, platforms, et cetera. They are all easily skinnable and can be extended to override functionality and behavior. Similar to Flixel and other engines, Citrus has the concept of states which I employed to wire up the various game screens. The API documentation is great and there is a very active user support forum as well. The ability to use a variety of 2D and 3D render views along with swappable physics engines is such a great model. This could very well be my go-to engine for any future game work!
Performing a release build rendered a .swf which CRASHED HARD. Absolutely unplayable… no amount of debugging or profiling seemed to create any suspicions either. Google searches… commenting out entire portions of code… no solution whatsoever. Until I thought to myself: “Joseph, you are using a beta version of the new ActionScript Comipiler 2.0 to perform a release build.” Establishing the project within Flash Builder 4.6 and performing a release build created a perfectly functioning .swf file. Thank goodness!
