A “multimedia developer” at Ecampus typically creates three or four interactive web pages or animations each quarter. Here is a walkthrough of how one cool project was created which shows the variety of tools we often leverage.

1. Project start (MS Word)
The instructor sent us a one page word document describing three different formulas they hoped to explore with three different interactive exercises. Basically this was one paragraph per formula with some links to older examples and a some ideas for introducing anatomy or sports components. They explained how to manipulate parts of the formula, and drew an example of a teeter totter with boxes and circles.

2. Quick sketches (Photoshop)
I discussed the document with my creative coworkers, and sketched up some ideas. It would be nice to offer a simple teeter-totter made with office supplies to start, so they could get the basic idea (and have a sense of every thing’s weight in the real world). Then when ready, they could reveal more complicated examples of the concept by interacting with a weight lifter or all the muscles involved when someone squats.

This took less than a week and brought up some questions I could take back to the instructor. Normally we would set a meeting, but in this case we went with a skype chat.

3. Concept art (Adobe Illustrator)
Creating a polished image of what the final product could look like is important – so we can lock down colors, layout, and make sure the controls are intuitive BEFORE we put weeks of work into making them functional. I ended up creating a lot of concepts for this project in Illustrator, because many people had input, ideas, and concerns about possible confusion.

Initially I hoped to make a dense complicated interface that echoed the display in popular movies like Iron Man (but in our exercise all the spinning circles, numbers, and lines would mean something!). I had fun tweaking the control designs to echo what I’ve seen on websites and other software, so you’d know immediately that a slider wants to be dragged left and right, or where exactly you can click to type in your own numbers. But it quickly became clear we wanted to make this as simple and non-threatening as possible, so a lot of clutter was removed or combined as we leaned towards the simple clean experience of checking your Fitbit app.

(note: We are often asked to call this this the “mockup” phase, and we try to get it back to the instructor within 2 weeks of our initial meeting)

4. Rough Prototype (Autodesk Maya, Adobe Fuse, Mixamo, Sketchfab, Unity3D)
There are a lot of ways to make 3D people. Usually we would takes weeks to craft them in a program called Maya, carefully sculpting each detail of the surface, painting textures and materials onto that surface, and then inserting an animation “rig” so we can puppet them around without weird distortions.

In this case, we knew that Adobe had released a Beta (not finished) version of a program called Fuse. This lets you click through options for heads, arms, torso, and legs, along with selecting some basic clothing, to make a 3D person in a minutes! You can also go back and adjust proportions (to make them look more muscled), and change any of the colors (to make the hem of their shorts stand out from skin and background). I was able to use this program’s 3D people for the concept art (above), and then take them all the way into the final product (below).

Fuse was made by a company called Mixamo, which had blown my team’s socks off with various demos back at a UNITE conference in 2014. Some of their magical tools were left available for free use after Adobe acquired the company. So I took this 3D person from Fuse and uploaded it at mixamo.com to make it animation ready, and then searched through their library of free animation clips to find some i could re-purpose quickly. The weight lifter is using a simple walk-in clip which blends into a fist-pump clip that I cut off right as the fist reaches it’s highest point. Downloading those two clips from this website saved me probably a week of work.

I also stopped by a website called SketchFab, which is kind of like a Google image search for 3D models. I turned on the free-to-download filter, and searched up a stapler, coffee mug and ruler. We just need to give the original artist credit (under a creative commons license), and again we’ve saved days of work.

Finally I took all this into Unity3D. This is a popular tool for making video games, but I use it because it lets me export my project as a web page. This is where I did the bulk of my work. To keep it brief: Unity3D has a built in physics engine, so i was able to apply weights and fulcrums around the 3D objects I’d collected (and change their values with programming when the user changes things on the web page). I was also able to override part of that fist pump animation, so that the weight lifter’s hand reaches for an object and their head turns to look at it. That object is a circle that moves left and right on the barbell, and once i make the object invisible it appears the weight lifter is interacting with the barbell. I’d hoped to make their muscles strain, mouth grimace, and maybe have sweat appear on their forehead – but there wasn’t time.

After a couple weeks, we had something functional I could send out. I incorporated some feedback from the instructor about using proper units of measurement, and worked with a teammate to make the final web page scale to any browser size. Basically it was done, and I moved on to similar exercises for the other formulas.

(note: We are now calling this phase the “alpha build,” a term from the software world which means something hasn’t been announced publicly, but is technically working and ready for testing).

5. Project end
The core takeaway is that a multimedia developer often dips their toes into multiple programs. It might seem like we’re crazy technical and have mastered hundreds of programs, but really we learn just enough to get what we want out of a tool. I might only understand half of Adobe Illustrator’s features, but I can ask another teammate who knows nearly all of it when I get stuck (or hand a task off to a different teammate who’s never used the program but wants to get their feet wet). We spend a lot of time googling things. In a way we’re rabidly learning all the time, which is what makes multimedia development so fun.

Hopefully you can lean on us in this way, so we can all make something quick and magical together which will engage students around the world.

(p.s. here is the second project for this class, and the third).