About Me

Sitting at the intersection of Facilitation, User Experience, Innovation & Design, I have spent the better part of the last 20 years working with organizations to define, design and develop strategies or solutions to fit their organization’s challenges and then implement them. I’ve worked with organizations from small sole-proprietorships up to some of the largest organizations within Canada, across a broad range of industries.

I currently lead Technology Experience Strategy where I'm helping redefine how we deliver IT services & technologies to employees at a major Canadian bank, a proud father of two boys and an avid photographer.

Archives

Categories

Three Simple Steps to Creating Amazing Flixels

A few weeks ago a fun little app launched called “Flixel” – this little app gives you the ability to capture a short sequence of images and then control what is animated on screen. The app is free, fun and I highly recommend you try it out.

The tool itself is really straight forward to use and start creating with but there’s a few things you can do to help make the best possible flixels, so I thought I’d throw a quick post together and share what I’ve learned in playing with the app for a little while now. Feel free to share your tips in the comments too!

1. Choose the Right Setting / Scene

I find there’s two types of settings/images that work really well as flixels:

a. Isolated Motion - The real magic of Flixels is when there’s a dynamic scene where the bulk of the image is static but a single element stands out from the rest (ie a beach scene where all the people are still but the waves are always lapping at the sand – a race track where the cars are static but the crowd is animated clapping or a busy intersection but only the traffic lights move, etc.)

b. Endless Loops – The other, more straight forward and accessible kind are those shots that simply capture a scene that can be looped endlessly. It doesn’t matter so much that the movement is isolated and contrasted with static elements in the image, just that the animation itself is visually interesting.

2. Make sure you’re steady!

Motion of the whole frame basically ruins any hope of getting a decent looking Flixel and iPhones are almost impossible to hold steady. (feature request: stabilization!)

I try to brace my phone against a stable object when I’m shooting if at all possible (wall, post, newspaper box, the floor, etc.) to keep the framing itself as stable as possible.

That said there are a couple of cheats/tricks you can use:

a. Simple backgrounds

Avoid having other objects/patterns behind the thing you want to animate. the fewer ‘landmarks’ behind the animation the more likely any subtle jitters will be. For example, no one will notice if part of a plain white wall shifts behind the subject but if it’s a tiled wall and the lines get disjointed and broken during the loop it’ll be very obvious. And whatever you do – don’t have something else moving in the background of the item you want to animate. If you’re not careful, you could get that perfect seamless loop captured but then there’s some other thing moving in the background that ruins.

b. Hide the motion

The other trick is to frame your image so there’s elements that can serve as a buffer to “absorb the motion”. For example, in the Flixel at right I used the black frame of the window as a solid object to absorb the motion. If nothing else in the area is moving you could also expand the animated area out to something that has fewer features/landmarks or makes a natural barrier to hid the motion at. (cloudless blue skies are great for this)

3. Capture and tweak your image to create SEAMLESS looping

This is by far the most challenging part of capturing great Flixels but for them to truly work they need to be seamless. The app itself gives you a few easy tools to help teak your capture and smooth things out but unless you take the loop into consideration before you shoot, it won’t fix everything.

a. Passing through the frame

If something you intend to keep animated is moving across or up or down the frame make sure it enters and leaves the frame within the short capture time. If it doesn’t, your options for creating a seamless loop become very limited (see b. below) as they/it will change size or position significantly and cause a noticeable jump when then loop resets. Generally the best results are loops where the object stays in one spot and the object moving returns back to the same spot (or appears to move back to the same spot) at the end of the cycle.

b. Using the Forward-Reverse Loop

Your only way out of the challenge above is the forward-reverse loop (access through the “looping” tab). Basically this feature changes the loop from the default, which goes from Point A (Start) to Point B (End) and then jumps back to Point A again into a loop that instead reverses itself when it hits Point B and runs the animation backwards to return to Point A.

This can be used to great effect, but be aware of how the animation will look in reverse. In the swing example it’s a motion that is naturally perfect for this style of loop but if there’s a person with long hair on that swing it’ll look pretty strange when it’s blowing backwards away from them when the animation runs backwards to return them to Point A – you can see a similar issue in my Flixel at right but I felt at the end of the day, it didn’t ruin the shot.

c. Set Your Start & End Points Deliberately

This is the mistake I see most often and usually in Flixels that, for want of another minute of tweaking where the animation starts & ends, would have been perfect. It’s dead easy in Flixel to tweak these points through the “Start/End” tab and they make all the difference in how an animation loops.

The best example for these is the subway/endless train shots. Use the start/end frames to ensure the gap between the cars lines up between Point A and Point B. I can’t count how many great shots I’ve seen of an endless subway or train going by, only to have the doors or gap between the cars jump half a car length when the loop resets. You don’t have to use all the frames, if something is moving fast enough you may only need 3 or 4! I try to make frame B be just slightly behind frame A so there isn’t a slight pause/stop in the animation as it rolls through.

Also be aware with the reversing loop style – objects have natural motions, use the start & end frames to ensure that you make the transition from forward to reverse (and reverse to forward) as natural as possible. one single frame can make a huge difference. Flick back and forth between “Starting Frame” and “Ending Frame” to get a sense of how they line up/compare.

In Summary

So there you have it remember to choose the right setting, keep your camera steady and capture & tweak your image to create a seamless loop – you’ll be on your way to creating a well-loved (& probably featured) Flixel in no time!

(I’m ryancoleman on the Flixel service by the way – look me up & let me know if you get some great results, I’d love to see them!)

Just signed up for Flixeltips yesterday, and this post is definitely helpful! Love the app, but it will definitely take some practice. Drained my iPhone battery yesterday just playing with it! Would love to see “pinch/zoom” functionality in the editing phase to allow more precise selections. Thanks again!

http://twitter.com/Bretton Bretton MacLean

Thanks for the great writeup Ryan! While I’d planned to include a tutorial for Flixel creation, sadly it didn’t make it in for v1. In the meantime, I’ll try to get the boys to feature the related Flixel for this post

@Zann: pinch/zoom is already there! :)

Markus

Excellent work Ryan!!!

http://twitter.com/wordsfromphil Philippe LeBlanc

Hi Zann, There is a pinch/zoom function in the App. You use the two fingers to move around in the image once you have zoomed in. Please view the promo video for now to see it in action. Working on a demo video.

Thanks Ryan for your dedication in educating the community. Really well done, I would simply add the pinch/zoom feature in explanation.

http://twitter.com/kenseto Ken Seto

Great post Ryan!

http://ryancoleman.ca/ ryancoleman

Thx Philippe! I’ll figure out how to add the pinch/zoom… Hadn’t uncovered it yet (has it always been there? Could have sworn I tried it before…)

http://ryancoleman.ca/ ryancoleman

Thx Ken!

http://ryancoleman.ca/ ryancoleman

Thx for the comment Zann! Glad you enjoyed it (& glad to see there’s pinch/zoom… Was on my wish list too and hadn’t discovered it yet ;) )

http://twitter.com/Bretton Bretton MacLean

Yup, it’s always been there – it needs a bit of tweaking because right now it zooms in on the center of the image rather than the center of the pinch-point, but in the meantime you can pan with 2 fingers to compensate

Another discoverable for ya: you can swipe left & right when viewing Flixels to view all of the related Flixels in the list you’re viewing.