Slidedown transition with scaleY

Here’s another “non-height” approach to slide down transitions: use scaleY (I haven’t checked this for browser support yet, I think IE9 at least will need a prefix for transform-origin).

Neat, I kinda like this one too. The overshoot on the slide down (where it goes a bit further and bounces back) is a touch of exaggeration, easily achieved with cubic-bezier timing. That sounds confusing! But it isn’t all that hard! Use Lea Verou’s amazing preview tool. Here’s the curve I came up with: http://cubic-bezier.com/#.2,.38,.72,1.3

So this approach is still different to animating the height. The jquery slidedown adjusts the box height, revealing more content. The scaleY property squeezes the content which may look weird. Again, a little fade in while sliding may help. Also, scale is more attuned to squash and stretch so, you know, that’s something to play with!

The new life of Ben!

Today I took a leap of faith (no, I’m not playing Assassin’s Creed) at work and resigned. I’ve been a “UI Specialist” in Queensland Government since 2008 (with a stint off in a management role, then project, in 2010) and it’s been an interesting time. Great people, great flexibility (hard to beat working from home 2 days a week!) and some interesting challenges (supporting IE6 was not one of them).

I have known for a long time that it was a great job, and not a career. Some folks can step up to the challenge of middle management in the public service. I’m part awed, part horrified, by their willingness to make the shift—but it’s not for me. I love coding, I love mentoring and now I’m loving animating. I really want to work in that kind of creative space. (You say management is creative? Um. Ok. In the public service? Not my cup of tea, thanks.)

The new life of Ben begins in TWO WEEKS! I’m hunting for the next job—wish me luck 🙂

ps: Resign from a job. Bucket list: tick!

Now, off to throw a frisbee…

Slidedown transition with margin/padding

I’ve been playing with a possible alternative approach to slide down transitions using CSS3 only, by animating the margin (or padding). The opacity eases in as well to make it a little softer.

What do you think?

Where does your eye focus?

See the Pen Slide down margin transition by Ben Boyle (@bboyle) on CodePen.

Animation Mentor term 2: Body Mechanics!

That’s right, Animation Mentor is back on and it’s term 2: Body Mechanics! Term 1 flew by, here’s my progress reel:

First week of term 2 is posing, then we get into full body walks and really learn body mechanics—how people move. Fascinating stuff. If you catch me staring at you, I’m probably watching your balance and weight shifts and filing it all away for future animating. And if you catch me wobbling about like a bit of a puppet, I’m probably trying to get a feel for some sort of imagined mechanic. All perfectly normal behaviour for an animator—do not be alarmed!

Here are the week 2 poses. Oh yeah, new rig: Stella!

Surface Pro 3 in 24 hours

I’ve been intrigued by Microsoft Surface for a while. The mix of tablet, laptop and sketch pad is a compelling combo! I have an iPad 2. It’s fine, but I’d like a retina display (for comics) and I’d like to be able to code on it! The restriction on which apps you can install bugs me. Also, no flash means no watching Animation Mentor lectures. I have a MacBook Pro, and it’s nice but it’s heavy and has destroyed more than one backpack with it’s weight.

So I was keen to try a Surface and finally nabbed the deal to get the mid-tier model (i5, 8GB RAM 256GB SSD), with $50 store credit and an xbox controller thrown in for $10 more. Good deal. Got a type cover too of course. (Yes, I know it’s not a gaming laptop, but some casual games would play ok!)

It arrived yesterday and was pretty nice. Lovely screen. Good solid feel, nice light weight. Heavier than an iPad, but larger too. Actually a really good size for a tablet. Comics look fantastic—sadly the Comixology on Windows 8 is buggy (like, you must reinstall to download new comics buggy!), which is entirely unlike the excellent iOS and android apps.

Spent an afternoon setting it up and an evening playing with a few things. Tried sketching very briefly with the pen. It’s no pencil and paper, but was interesting. More practice and could be pretty good maybe. Ran Transformers Universe ok for a game which is pretty cool. And I had all my coding apps ready to rock: Sublime, github, browsers for testing…

But today it all went horribly wrong. I turned it on and … nope. I didn’t even get that far. It can’t be turned on. I don’t know what happened overnight (it was fine when I left it), but today it’s a brick. An expensive brick at that. Surface Pro won’t turn on has troubleshooting steps, but was no help in my case.

So I rang up to report the issue. It would take 2–3 weeks for a replacement Surface. Same amount of time for a refund. I took the refund option. Very disappointing, I was hoping to use it on my commute when I go back to work next week.

I agree with Microsoft that there’s room for a device that can replace a MacBook Pro and iPad, but I guess I’m gonna have to wait for another solution.

Update 5 October

Well, my refund came in early and I picked up a new surface from JB HiFi. They gave me a discount too, sweet! It survived overnight and still turns on so that’s a great start. Comics look more awesome than I remember 😉 I also quite like the touch input (with keyboard detached). Still need to learn how to use the pen 🙂

Interacting with digital signs

Been musing about what it might be like to interact with digital signs.

Unlike other devices, a digital sign is more active while idling (not being directly controlled). It should be doing interesting things. At quite a distance too. Even though signs are large, people may be far away from them so it may not be that different to designing for tablets and mobile really. Even more than the “10-foot UI” touted for TVs at home. Need nice large text and images. But if people came up close, that could change.

Should people come up close and interact? Should people at a distance still be part of the experience then? A multi-audience experience? Does the person standing at the sign block that view? What about left- vs right-handed? 🙂

Can people pause what they see? What if something grabbed their attention and when they reach the sign it’s gone. How easy is it to go back? What if an idea sparks them but they want to follow up later? Is there some kind of handoff to their phone or tablet? (Maybe QR codes or NFC, or something else?)

It’s such an interesting medium. Platform? Form factor? I didn’t know it was ready for front-end developers until I came across Rise Vision’s post: Web Designer Guide to Digital Signage. Cool stuff!

Imma take your gramma’s style

A few months ago, The Herd came back with another t-shirt design request (you may remember Baby Don’t Herd Me from an earlier post)

Concept this time is a mix’n’match vintage/thrift shop theme. I’m thinking something along the lines of a big burly biker type guy – hairy, tattoo’s, big gut, massive beard – who is wearing what is essentially grandma’s sunday best. I’m thinking matching floral top and skirt to the knees, with the stereotypical lace collar etc. and his biker boots at the bottom.
At this stage I see him wearing one of those beer helmets, the ones with the cans attached that you drink through a straw?
Would be cool if he had one leg bent up with his foot resting on the words “IMMA TAKE YOUR GRANDMA’S STYLE” in a very confronting don’t-care kind of style

Oh, and I got a colour—Safety Orange. It’s bright!

Here’s the final result!

https://www.flickr.com/photos/benjamins-boyle/14616322364/
https://www.flickr.com/photos/benjamins-boyle/14638340793/

Design process

It all starts with a couple of initial sketches. Bit of staging and posing 😉

https://www.flickr.com/photos/benjamins-boyle/14431806099/

Ben!! It is looking fantastic already, REALLY impressed!
My thoughts at this stage are perhaps adding in a ladies umbrella/parasol in his right hand, similar to the below picture but a bit more frilly, perhaps with the parasol on more of an angle in towards his foot. With his arm up, we can also add in some copious amounts of lovely underarm hair haha.

I made some suggestions: ‘thongs, instead of boots. Show off those hairy legs and toes!’ and ‘sunnies … maybe, if you want the guy to be more nonchalant and less angry (your call)’

https://www.flickr.com/photos/benjamins-boyle/14616316994/
https://www.flickr.com/photos/benjamins-boyle/14431807089/
https://www.flickr.com/photos/benjamins-boyle/14431808159/

The sketches came together really quickly—much simpler than sheep in a heart shape drinking beer. The umbrella was a great touch. Who doesn’t like drawing umbrellas? (If you’ve never drawn one, go ahead. Draw one now!)

On to digital work! Inkscape, of course.

https://www.flickr.com/photos/benjamins-boyle/14638339343/

Looking really good! I’m finding the black face, arms and legs with varying black and orange details a bit odd – wondering if it would it look a bit cleaner/more consistent if he was just all orange with the outline and details in the black? Like how the dress and hat are laid out?

I see what you’re saying about the arm and I have a suggestion, though I’m not sure how much work it would entail…
We could replace the beer hat with a nice grandma straw hat and then have him holding a beer up with his pinky out – very delicate 😉

https://www.flickr.com/photos/benjamins-boyle/14616319304/

This reworked the contrast. The hat was another great idea, but the whole head/face was bothering me. I went back to sketch out some more personality! And a new arm. Yes, this is how I tackle digital arm transplants!

https://www.flickr.com/photos/benjamins-boyle/14431809109/
https://www.flickr.com/photos/benjamins-boyle/14638340093/

Looks awesome! Great result 😀

Win! There was some work to do on the words but that’s the final image right there!

Was a lot of fun, and once again—not something I’d have thought to draw myself. Neat 🙂

Maya Workshop COMPLETE!

When I first opened Maya, I remember looking around and going “yep” and closing it. It was pretty complex software and I had no idea what any of the controls did. Even moving the view around was beyond my ken. I’m pleased to say I can do lots now! (Though I can tell there’s so much more Maya does!) Oh, and moving around: tapping space brings up a nifty menu to switch between the perspective and orthographic views (so glad I studied graphics in high school!) and holding Alt while in perspective view will help with panning, rotating and zooming in the view (when combined with the 3 mouse buttons and mouse movements).

So here’s what we got up to over 6 weeks! (I’m shamelessly copying the first 4 weeks from a previous post).

Basic modelling

Basic staging and motion (rolling)

Orbits and shading

Bouncing and lighting

Robot arm, create a character (basic rigging)

Hop

Four weeks in Maya Workshop

Time to share some progress! The Maya Workshop at AnimationMentor is excellent, there is plenty to learn! I’ve been playing with lighting, shading and rendering this weekend. It’s good to get the basics down and overindulge a bit now so I can focus on character animation when the time comes!

Basic modelling

Basic staging and motion (rolling)

Orbits and shading

Bouncing and lighting

The next 2 weeks cover working with rigs: a robot arm and a one-legged ball. Bring it! 🙂

Playing bass, two years on

It probably won’t catch on as an ANZAC Day tradition, but last year I posted a comparison of me playing Hey Ya! on the bass from 2012 and 2013.

Here they are again with a 2014 update. I can’t really tell if I’m improving, but I still love playing 🙂

So here I am, in 2012, fumbling away at a bass line after a few days practice…

And here I am, in 2013, fumbling away at that same bass line after a year of practice…

And here I am, today, still fumbling 🙂

Enjoy!