Unity 3.5 and SVN, now easy and free for all!

Having Subversion (SVN) control is key in any project, and in Unity it was previously a pain to setup and tough to work with. Now with Unity’s release of 3.5, they’ve simplified the process and made it available to all users! The process is as follows:

Read more…

Steady as she goes.

Have you ever attempted to shoot a video while walking or running? Every jarring footstep you take will send a shockwave through your body, jolting that little camera in your hand. The resulting footage will probably be shaky and unstable. Assuming you’re not filming The Blair Witch Project, that’s probably not a desired effect. You were probably just trying to follow your subject, or get a dynamic, moving shot.

So how does Hollywood do it? Check out these video clips, and try to figure it out:

Read more…

Box Modeling in Blender

 

Box modeling is a great way for beginners to understand 3D Modeling. Now I’m going to walk you through a simple hand model in Blender 2.6. I will be going through several extra steps in order to demonstrate basic blender hotkeys and practices that can trip you up if you aren’t familiar with 3d modeling or the interface.

Read more…

Live Preview and Debugging Your Webpages: Many Devices, Simultaneously

Writing code for a website is quick compared to other programming languages. The problem, though, is because what you build can look different on so many different browsers and platforms it can be huge pain when you are making many small changes to see what it looks like on screen. This gets even more frustrating when you have to test on mobile devices. All you fancy media query people know what I’m talkin’ about. Let’s look at a regular workflow:

1. Put your files on a web server (either remotely or on your computer)
2. Load up the page in a browser
3. See it isn’t quite right
4. Make a change
5. Hit save, switch to your browser, hit reload.
6. Not quite right. Repeat steps 4 and 5 about 100 times.

If you’re checking it out on a mobile phone steps 4 – 6 will, without fail, give you warm and fuzy “Hulk smash” feelings. If you’re debugging complicated javascript on a mobile device then you’re bound to pop a blood vessel…

Read more…

Tags | debugging, HTML5, JavaScript / HTML, mobile

Start Using Illustrator Symbols

Symbols are Illustrator’s version of smart objects in Photoshop and movie clips in Flash.

Let start by creating a circle and square shape.

Select a shape and open up the symbols panel–it looks like a club.  Choose New Symbol… from the menu.

Name your symbol.  If you’re going to take your art into Flash, you can choose whether the symbol should be a Movie Clip or Graphic.

Make the other shape a symbol.  You can also put symbols inside of symbols.  Select both of the shapes now and create a new symbol out of them.

You can see the three symbols you’ve created in the Symbols panel.

You can drag a symbol onto your art board.

To edit a symbol, double-click on it on your art board or in the Symbols panel list.  In the upper left, you can see the symbols you’re editing.

Change your circle to have an outline instead of a fill.  Get out of the symbol by pressing escape.  If you’re in a symbol within a symbol (within a symbol, etc) you can click on the symbol names in the upper left to get back to whatever level you need.  Once back on the art board, you can see that the both of the shape symbols have updated to show the new circle.

This is different and better than how Photoshop works.  Illustrator symbols will update no matter where they are, nested deep in other symbols, or on the artboard.  Photoshop smart objects only update on one level.  For example, a smart object on the stage and the same smart object nested inside another smart object won’t be connected, so editing one won’t change the other.

Pasting the symbols into Flash will also give you the symbols as movie clips (or graphics if that’s what you specified in Illustrator).

Tags | illustrator, symbols

Get Under the Hood with Terminal

Here is a collection of command-line tricks for boring, repetitive, and sometimes difficult tasks.

File tricks

show/hide hidden files

defaults write com.apple.finder AppleShowAllFiles true/false
killall Finder

 

Change a file’s modification date to now:

touch file

 

prevent .DSstore files

defaults write com.apple.desktopservices DSDontWriteNetworkStores true
killall Finder

Image manipulation

Rotate image 45 degrees clockwise

sips --rotate 45 image.jpg

 

Flip image horizontally or vertically

sips --flip horizontal|vertical image.jpg

 

Crop image to a height of 100px and a width of 150px. fit specified size.

sips --cropToHeightWidth 100 150 image.jpg

 

Pad image to a height of 100px and a width of 150px, use red as the padding color (default is black).

sips --padToHeightWidth 100 150 --padColor FF0000 image.jpg

 

Resample image to a height of 100px and a width of 150px. Image apsect ratio may be altered.

sips --resampleHeightWidth 100 150 image.jpg

 

Resample image to width of 300px.

sips --resampleWidth 300 image.jpg

 

Resample image to height of 200px.

sips --resampleHeight 200 image.jpg

 

Resample image so height isn’t greater than 100px and width isn’t greater than 150px.

sips --resampleHeightWidthMax 100x150 image.jpg

Text Trickery

Count number of words in the text in the Clipboard:

pbpaste | wc -w

 

Sort lines of text in the Clipboard and copy them back to the Clipboard:

pbpaste | sort | pbcopy

 

Strip duplicate lines from lines of text in the Clipboard and copy only one instance of each duplicate line back to the Clipboard (output is sorted):

pbpaste | sort | uniq | pbcopy

 

Find duplicate lines from lines of text in the Clipboard and copy only one instance of each duplicate line (stripping non-duplicates) back to the Clipboard (output is sorted):

pbpaste | sort | uniq -d | pbcopy

 

Strip duplicate lines from lines of text in the Clipboard and copy only one instance of each line (stripping duplicates entirely) back to the Clipboard (output is sorted):

pbpaste | sort | uniq -u | pbcopy

 

Tidy up HTML in the Clipboard and copy it back to the Clipboard:

pbpaste | tidy | pbcopy

 

Convert tabs to spaces for the lines in the Clipboard:

pbpaste | expand | pbcopy

 

Convert spaces to tabs for the lines in the Clipboard:

pbpaste | unexpand | pbcopy

Responsive Web Development Theory

In the past few months I’ve built two fully responsive sites and have learned many things because of it. The main being to adapt a change in mindset. For many reasons, the whole concept of responsive design forces pages to be constructed in a way that was new to me. It is true that everybody builds web pages differently now, and always will. There is no definite “right way” to go about it but I’ve learned some things I find to be worth sharing. I’m not pretending these techniques are best practices and am I’m fully open to the fact that better ways to achieve the same results may exist.

Constructing responsive pages adds behavior to the list of things to pay attention to when marking up and styling the elements of a web page. Controlling the way things respond to screen size requires a shift from fixed, pixel value based, layout to percentages. It can also be advantageous to rearrange and even remove content when the size and orientation of screen real estate changes.

Read more…

Make hot vector illustrations, fast-like

Here’s a few quick tips to make the illustrating faster so you can spend more time enjoying your end product and less time crying at the feet of your project manager, begging for just ONE MORE HOUR of budget time to perfect the twinkle in your animated characters eye.

CREATING STROKE WIDTH PROFILES

So you’ve drawn your basic outlines and strokes. It’s pretty much the best freaking outline of anything you’ve ever drawn, and you’re taking a minute to bask in it’s awesomeness. You realize that while you couldn’t have done anything more perfect than what you just did, you’re also the type of illustrator that constantly ramps up the awesome to unexpected levels. You also have about -4 hours of time left to inject a little power into your illustrations. Here’s a quick, neat way to not only add stroke modulation to your outlines, but to do it quickly and consistently throughout the illustration.

1) Use the width tool on your tool bar or press Shift + W to access it (Unless you’ve remapped that key combination to something else, in which case, good luck, buddy. )  Create the line modulation you prefer on a single piece of your illustration until you’re satisfied with the result.

2) Once you get the stroke the way you want it, open the stroke panel with your modified stroke selected and click “Add to Profiles”.

 

 

3)  This will create a stroke “profile” that’ll allow you to apply this same modulation to all strokes in your illustration quickly and easily.

Try not to be overwhelmed by the majesty of my illustrative abilities.

This quick little trick will not only add interest and weight to your illustrative lines but may also only take about 5 minutes.  FREEDOM!

ADDING TEXTURE TO FLAT VECTOR SHAPES

One of the challenges we faced recently was creating high detail objects that matched a clients 3D texture and brand in a short span of time.   Illustrator isn’t widely known for being as sensitive as Photoshop is to the variable texture, light, and shadow needs that a detailed image may require (although we don’t say that out loud because we may get punched in the face.)

A quick and sometimes useful trick that I ended up using was switching between drawing modes and using textured brushes within a shape.  If I want to create a mossy overhang on the top of a low wall, I can give it a rougher texture to make it stand out and give it a sense of realism.

1) Create your simple shapes that you want to texturize

 

 

 

 

 

 

 

In this case, we’ve created a simple wall with a piece of moss hanging over the side. Looks great. We’re done!

 

…just kidding.

 

2) Add shadows and highlights to give illusion of depth.  You know, like an artist would.

 

 

 

 

 

 

 

3) At this point, it still has a very flat, “smooth” feeling to it reminiscent of most vector art.  To give it that chunky bit o’ moss some texture we’re going to duplicate it’s shape.  On the duplicate, we’ll remove all shadows, highlights, bells, whistles, and color until it’s completely naked.

 

 

Awkward.

 

 

 

4) Once you’ve got this empty shell, you’re going to slide on over underneath your color swatch on the toolbar and click the icon below, labeled Drawing Modes; “Draw Inside” is what you’ll want to select.

 

 

 

 

 

 

 

 

 

5) Select a bristle or other textured type of brush from your brush palette.  You can adjust the width of the bristles, size of the brush, etc, in the brush menu, so play around and get a stroke that’ll translate well as a texture.

 

 

 

 

 

 

 

 

 

 

6) You’ll now be able to paint over the top of your empty shape, and the Draw Inside mode will neatly mask the edges of your wild artistic strokes into the shape, creating a “texture” shape that can be layered over your original drawing.

 

 

 

 

 

 

You can play with blend modes to get the texture to blend in, but the end result is a nice variation of that flat smoothness we don’t always like getting with vector drawings.

 

 

I textured the crap out of the wall, too. How do you like that?

 

 

 

Ultimately this tool could help create a more “illustrated” feel to background and object elements with a minimal amount of time.  And the nice part is, it’s already vector!

Hopefully both of these quick tips will help you slide in under budget with even sexier designs and illustrations than before.

FIN

Creating Greensock Plugins

Creating a plugin for Greensock’s Tweening System is very easy. The following slides show some tips and examples how this can be done.
Read more…

Tags | ActionScript, Animation, AS3, Flash / Flex

Shape Tween Tip 01: Bounding Box Cheat

Flash first introduced the shape tween in 1842 [citation needed], allowing one group of vector shapes to morph into another over a length of frames. It was an awesome tool then, and remains one today … when/if it works. For a shape on frame 01 to smoothly transition to a different shape on frame 10, everything has to be (obnoxiously) just right. There is no one catch-all method that will work for every situation, as a shape tweens behavior is largely  unpredictable, especially when using complex shapes with more than one color. That said – the FX that are possible with the ‘ol green tween are very impressive and run extremely light on the file-size frontier — it’s worth the time to get familiar with the tool and hopefully this tip can save you a headache, or at least decrease its duration…

 

STEP ONE: Select the vector points you’d like to shape tween and duplicate them onto their own layer. Using a stroke with no fill, draw a rectangle outside the bounds of your shape. Now paint bucket fill (set to ‘Dont Close Gaps’) the empty space with a solid color fill and delete all strokes.

 

 

STEP TWO: Create your second keyframe, modify the graphics as desired, and create the tween. Scrub through your timeline, you’ll see the difference.

STEP THREE: When your tween is where ya want it, go ahead and make that color fill a #CCCCCC w/1% opacity on every frame. You can always make it this 1% neutral gray color from the onset as well.

Tags | Animation, Flash / Flex, shape, shape tweens, tween