Building the Web With 14Four and Seven2 Interactive
Animation in Photoshop
On 22, Feb 2012 | No Comments | In Motion Graphics | By Mitch Davis
Animation In Photoshop
Wanna learn how to use the Animation Timeline in Photoshop? Then read on Dummy!
Git with it! Use git for website deployment.
On 15, Feb 2012 | No Comments | In Web Development | By jareddarr
Git Started
Git is distributed version control system focused on speed, effectivity and real-world usability on large projects.
Become a Master Masker with the Refine Edge Tool in Photoshop CS5
On 08, Feb 2012 | No Comments | In Graphic Design, Process Tools | By Katie Shamberg
If you work within layered Photoshop files, you know that you spend a good chunk of your life cutting out, masking and editing images. We all know how time consuming this can be, especially if you’re working with fine details such as human hair or complex photographs. The Refine Edge tool is new to CS5 and is a lifesaver – this tool has probably saved me hours on projects and the quality of work you can produce in such a short time is exceptional. Read more…
Illustrator to After Effects workflow
On 07, Feb 2012 | No Comments | In Animation, Motion Graphics, Process Tools, Uncategorized | By Joel Barbour
This is a simple workflow that can save a lot of time when importing graphics from Illustrator into After Effects. Read more…
A Simple AS3 Resource.
On 01, Feb 2012 | No Comments | In Animation, Game Development, Web Development | By Sebastian Lopez
Documentation about AS3 can be found scattered all over the internet, and sometimes with our busy jobs and other things in our life we don’t really have the time to sit down a read a book about methods to use software and not really interact with it.
It was by luck that i ran into the TRAIN SIMPLE site and their series of AS3 tutorial education resources.
CSS3 Pseudo-Classes
On 01, Feb 2012 | No Comments | In Process Tools, Web Development | By dustin
Today I’m going to cover another bit of CSS3 magic. They’re called CSS3 Pseudo-Classes.
You may be familiar with the typical CSS pseudo-classes that we have been using for years:
- :link
- :hover
- :active
- :focus
But now that we are moving in to CSS3, there are a bunch of new ones that have been added. I will go through each of them and briefly explain what they do. I have created an example that you can download here: CSS3 Pseudo-Classes Example
Basic Classes
:root
Root will almost always (as long as you set up your HTML correctly) be the <html> tag. In my example I used :root to set a background for the document, though I can’t see much better use of this.
:root {
background: #eee;
}
:before & :after
Before and after are generally used with the “content” css attribute. You can use this to add non-semantic elements to your site that you don’t want making your html messy. This could be useful for adding icons before items without adding a span or something similar for it.
p#before:before {
background: #24E0A8;
content: \\\\\\'Inserted by CSS (:before)\\\\\\';
}
p#after:after {
background: #24E0A8;
content: \\\\\\'Inserted by CSS (:after)\\\\\\';
}
:empty
Empty can be used to style elements that have no children and no content. It could be a good way to debug your html to find empty tags.
p:empty {
background: red;
}
:target
Target is a strange one. Basically you can style an element a certain way if it’s ID corresponds to the ID in your url (e.g. whatever.com/index.html#target). So if you have a p tag with the id “target” and you go to a url with #target on the end and have the following CSS, it will affect that item.
p:target {
background: #ff6600;
}
:checked
With Checked, you can style a radio button or checkbox only when they are actually checked. There isn’t too much you can do to style a checkbox, but with some fancy css, you might be able to pull something off.
:enabled & :disabled
Enabled and disabled can be used to style a text input field when it either has the attribute disabled=”disabled” or not. This is a nice step up from the default greyed out box it normally creates. In all reality, I don’t see much use for :enabled, since this is related to no attribute and would be the same as just setting a default style.
input:enabled {
background: #24E0A8;
}
input:disabled {
background: red;
}
:not()
With not, you can select items that do not apply to whatever is in the parentheses. In this example, we select all inputs that are not a checkbox and add a border to it.
input:not([type=\\\\"checkbox\\\\"]) {
border: solid 1px #000;
}
Here is a visual representation of the above “basic” pseudo-classes with some notes on what is going on:
“nth” Classes
:nth-child()
Nth-child has multiple uses. It all depends on what you put in the parentheses. Here are some options, and what they do:
- 2 – This will select the second item
- 2n+5 – This will start by selecting the 5th child and then select every 2nd child after that (every other one)
- 2n or even – These will both select every other even item (2, 4, 6…)
- 2n+1 or odd – These will both select every other odd item (1, 3, 5…)
- 3n-1 – This will select every 3rd item, offsetting backward by 1 (Starting with 2)
There is a good nth-child tester in the links at the bottom of this post.
:nth-last-child()
Nth-last-child works exactly the same as nth-child, except instead of starting from the first child, it will start from the last child and go backward
:first-child & :last-child
These two do exactly what you would think they would. They select the first child or the last child in a parent. They are the equivalent of doing :nth-child(1) (first) and :nth-last-child(1) (last).
/******************************************************************
/ Selecting a single element
/*****************************************************************/
ol li:nth-child(2),
ol li:nth-last-child(2) {
background: #ff3399;
}
ol li:first-child,
ol li:last-child {
background: #6633cc;
}
/******************************************************************
/ Selecting multiple elements
/*****************************************************************/
ol li:nth-child(2n+3) {
background: #ff3399;
}
Here is a visual representation of these:
-of-type Classes
:nth-of-type, :nth-last-of-type, :first-of-type, & :last-of-type
These all work almost identically to the ones above, except they take in to account the type of item you are selecting.
For example, say you had the following HTML/CSS:
<p>This is a P</p> <p>This is a P</p> <p>This is a P</p> <p>This is a P</p> <span>This is a Span</span> <span>This is a Span</span> <span>This is a Span</span> <span>This is a Span</span>
p:last-of-type {
background: #6633cc;
}
The 4th <p> tag would be selected, whereas if you had simply used p:last-child, the 4th <span> would have been selected. This is useful for when you have additional items inside your parent, but you don’t want them to be considered in your selector.
All of the -of-type selectors will work exactly the same as their regular counterparts, but only using the type specified.
Here is a visual representation of these:
: only-of-type
Only-of-type is a unique selector that will only select an element if it is the only of it’s type in it’s parent. For example, take the following HTML/CSS:
<div> <strong>This is a Strong</strong> </div> <div> <strong>This is a Strong</strong> <strong>This is a Strong</strong> </div>
strong:only-of-type {
background: #ff3399;
}
The first div has only one strong, so it will be selected. The second has 2 and they will be ignored. If you had any other type of element in these divs (say a p or a span) they would not affect the selection and would also be ignored.
Here is a visual representation:
Useful Links
http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/ - This article goes into detail for each of the pseudo-classes I mentioned
http://css-tricks.com/examples/nth-child-tester/ - This is a great way to test your nth-child selectors
http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/ - These are some examples of what can be achieved using pseudo-classes
Rapid Development for Cross Platform HTML5 Browser Targeting Dynamic Native iOS/Android App Deployment
On 25, Jan 2012 | No Comments | In Mobile | By Joe Moore
The trend in mobile development is moving toward a cross platform application that will run on mobile browsers as well as natively. The goal is to cut down on development cost/time and have one easy to maintain code base that can be used to deploy to any device. I researched a variety of software development kits that were based on this strategy. I decided to focus on appMobi Impact GameDev XDK. This platform is easy to setup, built using common web programming languages (javascript, HTML5), simple to deploy to app stores, and has a lot of sample code and references.
Sprites to Flash AIR Application
On 24, Jan 2012 | No Comments | In Animation, Game Development | By Levi Eggert
What this Application does
In short, this AIR Application will convert an un cropped png sequence into a cropped png sequence that is correctly placed on the Flash timeline.
This is beneficial in a number of ways.
First, by removing transparent pixels, rendering speeds increase improving performance.
Secondly, the amount of time it would take to manually import all cropped images and position them on the Flash timeline would be enormous. Bonus!
Under the hood – JSFL Extending FLash CS5
This Application takes advantage of JSFL. Flash Javascript allows us to manipulate a .fla (Flash Document) just as we would if we were using the Flash interface.
Documentation can be found here –> Extending Flash CS5 JSFL
To write your own scripts simply create a .jsfl file, write some javascript, and execute the file.
This Application does all of that behind the scenes.
How to use this Application
First, download SpritesToFlash and install the .dmg and Zoe.air applications. You will need to use both.
Open SpritesToFlashV2 and you should see an application like this.
It’s pretty straight forward following the steps from here, however, here’s the steps in further detail.
Step 1: Selecting a directory of un cropped .pngs.
- The best way to create this directory is to export your flash animation as a .mov.
- Using photoshop or after affects you can export frames of the movie giving you a .png sequence.
- Now select the directory of .pngs and press build. What this does is import all images onto the flash timeline, set’s them to lossy compression, and exports a swf file named ZOE.swf to the desktop. This swf is required for step 2.
Step 2: Open the installed Zoe.air and load the published ZOE.swf created from step 1.
- Zoe is going to export the ZOE.swf as png sequence, however, the images will get cropped and a .json file is exported giving the image positions. This is how step 3 imports the images correctly positioned on the timeline.
- Set some settings in Zoe.
- In the Source Tab select an output directory to export the png sequence created from Zoe.
- In the Settings Tab check variable frame.
- In the Export Tab select the Image Format drop down and choose Frames.
- Now select Export in the top right. This will export a .png sequence to the output directory.
Step 3: In the last step select the directory containing the .png’s exported from Zoe and press Build. Now all images are imported to the Flash timeline correctly positioned.
Files:
“Where do we go when we don’t work here anymore?”
On 18, Jan 2012 | No Comments | In Presentations | By Matt Cardoza
Preface: This presentation was given not as a response to any one thing, but as a chance to share some insights as to how our actions can have consequences we might not anticipate.
10 Handy Photoshop Shortcuts
On 17, Jan 2012 | No Comments | In Graphic Design, Process Tools | By Eric Smith
Photoshop shortcuts are rad. They make it much easier to do certain tasks, and speed up your productivity in a big way. Here’s a collection of some of my favorites:
1. Kerning
Click between the two letters that you’d like to tweak
Hold Option + Right or Left arrow key
(Right = increase / Left = decrease)
(Add one increment points between characters)
_
2. Brush Size & Hardness
Select your brush tool
Control + Option + Click
Drag your mouse right/left to change the brush size, up/down to change the hardness
(Increase or decrease your brush size and hardness)
_
3. Opacity and Fill
Numeric Keys = Changes opacity of selected layer
Shift + Numeric Keys = Changes fill of selected layer
Read more…
Collaborators
