Author Archive

December 16, 2013

Learning with Creative Cloud Learn Central

Adobe recently restructured the Creative Cloud learning resources area into the new Creative Cloud Learn Central gateway which provides a plethora of tutorials for getting started with Creative Cloud apps. These videos are sourced from a number of resources, including videos from various community leaders working through Adobe, Infinite Skills, Lynda.com, Kelby Training, Train Simple, and Peachpit.tutorials

These are organized by product, with most having a series of levels; “Get Started”, “Fundamentals”, “What’s New”, and “Master Class”. You can access the product tutorials by category like this… or simply view them all at once. One of the really neat things about this relaunch is that anyone can use this resource now – meaning you no longer have to be a Creative Cloud subscriber. These videos make great supplemental viewing for students – and a number of the presenters are actually AELs!categories

Check it out!

11:20 PM Permalink
October 7, 2013

Another update to LevelUp for Photoshop CC: Level 5

LevelUp

LevelUp for Photoshop is a game of missions — and points and rewards — that guide you along the way of learning basic Adobe® Photoshop® CC software skills. If you are just starting to use Photoshop, this is the game for you.

We just shipped an updated version of LevelUp that contains a new, fifth, level. This new level has missions to help you create a poster, which is a bit different from the first four, which are all related to photography.

New in this version (1.1.0) of LevelUp for Photoshop CC:

  • An additional level to attain – Level 5: Create a Poster
  • Level 5 has three missions: Create a Poster, Add Text, and Add a Picture.
  • A new set of Quiz questions
  • Freeform Bonus Round

To install this update, navigate to Window > Extensions > Adobe Exchange:
Extension Panel

Then simply perform a search within the panel for “LevelUp”:
LevelUp

2:07 AM Permalink
June 27, 2013

Create Now!

Adobe has been holding a series of online creativity events over at http://createnow.adobe.com/ and I cannot help but think that these would be great events for students to participate in – and can also serve as a foundation for various assignments and projects after the fact. The previous event was an assignment to remix an Eames chair however you like and post it to Behance. There are also a good number of other resources at the website aside from these activities.

Create Now

Create Now

The latest of these events was “Claim your Frame” in which Adobe requests individuals to reserve a frame for which they will use a template to draw out a sort of self-portrait for submission. The idea is that after all of the user-generated frames are submitted, that they are they re-purposed into a full video artifact.

The first step in this case was to go through and register a frame after a specific date and time. You then receive an email which includes a Photoshop document with a specific name (ID) to it along with instructions, an assigned primary color, and a guide layer which indicates where the eyes and mouth should be drawn. The template needed to be downloaded within 3 hours else the frame would go to someone else! I’m including an image of the template I received, below.

Pretty simple, no?

Pretty simple, no?

After getting the template – the fun part starts. Now you just open it up in Photoshop and draw out your frame. I used a lot of layers, blend modes, and brushes for my submission. One thing that consistently amazes me about Photoshop is how closely it can come to “real” painting when you have the mixer brush and a nice, big Intuos tablet at your side. Such fun.

Painting with Photoshop CC!

Painting with Photoshop CC!

This project reminds me of a painting class I took for my undergraduate degree. We took a painting, School of Athens, and divided up into a grid. Each student was then given a set of coordinates along the grid with which to create a replica of that portion of the painting. At the end of the class, everyone brought their individual portion back together to form a complete whole. It was very interesting and not unlike this particular exercise.

This particular Create Now event is all over – but there are more coming up, including Kulest City in July. See the final result of this creative experiment playing live in Times Square below!

2:02 PM Permalink
June 18, 2013

LevelUp for Photoshop – Updated for CC!

With the release of Photoshop CC as part of the Creative Cloud, Adobe has also updated the LevelUp for Photoshop extension with a ton of enhancements which focus on new Photoshop CC features!

LevelUp for Photoshop CC

LevelUp for Photoshop is a game of missions — and points and rewards — that guide you along the way of learning basic Adobe® Photoshop® CC software skills. If you are a photographer and are just starting to use Photoshop, this is the game for you.

This extension for Photoshop has been very popular with educators and educational institutions across k-12 and higher education for use in teaching and learning some of the core concepts around using the application. It’s a great way to get familiar with the product and teach others through an integrated learning experience.

New in LevelUp for Photoshop CC:

  • An additional level to attain – Level 4
  • A new set of Quiz questions
  • 4 new PhotoShop CC inspired Missions (below)

New Missions

It was a truly interesting experience working on enhancing this project with Adobe and it really is a unique resource for educators – I encourage anyone learning Photoshop CC to check it out!

1:33 PM Permalink
January 27, 2013

Building a Memory Game: Time Lapse Video

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!

It’s easy to get started.

2:33 PM Permalink
January 16, 2013

Building a 30-second Adobe MAX Session Ad with Creative Suite

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.

BTW: Happy 20th, After Effects!

So… what did I need to do to get all of this together?

Initial Assets on hand:

  1. Static session info panel built in Photoshop
  2. Soundtrack already created in Sonar X2 Producer for another project
  3. The Edge Animate logo

 

What I need to build:

  1. Build up the assets into a nice, 30 second motion video composition
  2. Record and master the voiceover track
  3. 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!
aftereffects

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.
audition

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.
premierepro

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!

4:45 PM Permalink
November 27, 2012

Charity Game Jam with Citrus + Starling + Box2D targeting Flash Player and Stage3D

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 :)

Play the game: BABBY MUST NEEDS SLEEP! PARENTAL NIGHTMARE

Download the source files: SOURCE

Video Playthrough:


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

2:51 PM Permalink
November 21, 2012

Adobe Education Exchange Live – Toronto 2012

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.

[full recording here]

6:41 PM Permalink
August 28, 2012

Getting your Flash on with Ludum Dare!

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.

Check out my game – D’evilution!

5:38 PM Permalink
July 20, 2012

Adobe Education Leader Institute and Adobe Edge


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.”

2:53 PM Permalink