3ds Max Reactor Basics

Make a car crash into a pile of bricks....nuff said.

3DS Max Tutorial-Reactor Basics from sanjay somnath on Vimeo.

Turning Objects to Skittles

Create Skittles with Particle Flow, and apply multiple materials to a particle system, then composite the final animation in After Effects. Part 1 Part 2

16 Great Photoshop Light Effect Tutorials

I’ve selected various Photoshop tutorials that I’m liking at the moment for light effects, some have quite cool techniques on how to achieve the end result that can be applied to a million different designs (try and experiment with them), check them out below.

You might also enjoy:

• 25 Examples of Light and Space Effects In Web Design
• 25 Examples of Light Effects In Web Design

Design a Vista Styled Wallpaper

Windows Vista Aurora Effect

Design a Vibrant Blackberry Inspired Ad

NoPattern “Jumper” Effect

Mysterious Lighting Effect

How to Create Brilliant Light Streaks

Creating a Mac-Type Background

Luminescent Lines

Create a Glowing Light Painting Effect

Abstract Dust And Spray Effect

Make a dreamy abstract background

Digital Bokeh effect

Abstract Lines Background

Abstract Light Rays

Drawing an Abstract Lightbulb

How to create 3D abstract circles

Comments

Blogged with the Flock Browser

30+ Fresh & Amazing jQuery Plugins & Tutorials

jQuery is slowly becoming ubiquitous in the web development arena all due to its easy to learn, easy to use and easy to extend nature. Here are 30+ fresh and amazing jQuery plugins and tutorials which i have hand-picked from jQuery articles or plugins published in last 30 days on the interwebs. If you are looking for latest on jQuery, then this is a must read for you.

Tutorials

1. How to add preloader with loading image in a gallery using jQuery

Use a jQuery preloader while images are loading in the gallery.
» View Demo | » View Tutorial

2. Simple Lava Lamp Menu Tutorial With jQuery

Create a unique lava lamp animated jQuery navigation menu
» View Demo | » View Tutorial

3. How To Create a 3D Tag Cloud in jQuery

Amazing tutorial on creating a flash like 3D tag cloud using jQuery.
» View Demo | » View Tutorial

4. Drag & Drop With jQuery

Drag & Drop facility in a web application provides for a rich user interface, learn how to create one using jQuery UI.
» View Demo | » View Tutorial

5. Awesome Horizontal Animated menu using Kwicks for jQuery

Build a customizable and versatile horizontal animated menu using jQuery Kwicks plugin.
» View Demo | » View Tutorial

6. Create a Thumbnail Gallery With Slick Heading & Caption effect

» View Demo | » View Tutorial

7. Create an Attractive jQuery Menu with fade in and out effects

Nice tutorial on creating an attractive jquery menu with fade in background change on hover.
» View Demo | » View Tutorial

8. jQuery PHP AJAX Autosuggest

Autosuggest is one of the useful features of present web applications. Learn how to create one using jQuery and PHP.
» View Demo | » View Tutorial

9. Perfect Login Drop Down Box Like Twitter

Nice tutorial on imitating the new twitter login dropdown box using jquery.
» View Demo | » View Tutorial

10. Crafting an Animated Postcard With jQuery

Create a flashy postcard using just jQuery and no flash.
» View Demo | » View Tutorial

11. Twitter like Search With jQuery & AJAX

Create a twitter like search box that loads results using AJAX on same page.
» View Demo | » View Tutorial

12. Voting System With jQuery, AJAX, PHP

Learn how to create dzone like voting system.
» View Demo | » View Tutorial

13. AJAXed Sliding Shopping Cart Using jQuery

Amazing tutorial on creating a sliding AJAX Shopping basket that slides in and updates the cart when new item is added and auto-hides after some time. It also supports manual show hide option to view shopping cart at any time.
» View Demo | » View Tutorial

14. How To Build Animated Header in jQuery

Add motion to your header by animating its background. Amazing animation tutorial using jQuery.
» View Demo | » View Tutorial

15. Hide and Seek With jQuery

Use jQuery to display multiple modules of an application on a single page based on the event occurred.
» View Demo | » View Tutorial

16. jQuery Comment Preview

Provide comment preview to your users as they type in their comment using jQuery.
» View Demo | » View Tutorial

17. Styling Drop Down Boxes With jQuery

Since select boxes are hard to style using CSS, this tutorial shows you how to replace a select box with a textbox and an unordered list and then style them according to your choice.
» View Demo | » View Tutorial

18. Scrolling Dynamic Content Box

Load content into a div on scroll using AJAX just like Google reader loads more items as you scroll down to view more items of a feed.
» View Demo | » View Tutorial

19. Ways To Debug your jQuery or JavaScript Code

This article explains how you can easily debug javascript code using jquery console logging.
» View Tutorial

20. 5 Ways To Make AJAX Calls with jQuery

Nice tutorial from NetTuts+ about different ways of making AJAX calls using jQuery. It is even useful for those who are already familiar with jQuery as in depth coverage of various methods of making AJAX calls has been done.
» View Demo | » View Tutorial

Plugins

1. Tipsy

Display Facebook style tooltip plugins based on anchor tag’s title attribute
» View Demo | » Plugin Page

2. jQuery YouTube PlayList

Convert a list of YouTube links into playlist which allows user to see videos right on the page itself.
» View Demo | » Plugin Page

3. SuperFish Menus

Superfish Menus is an easy to use jquery plugin that converts unordered HTML lists into nice drop down menus.
» Plugin Page

4. Elastic

Elastic is a lightweight jQuery plugin that makes textareas adjust their size according to the size of content.
» View Demo | » Plugin Page

5. OverScroll

Implement iphone like click and drag to scroll behavior on your web page.
» Plugin Page

6. Tweetable

Display Twitter feed on your website easily and quickly with tweetable. Gives you option to convert twitter usernames and URLs into hyperlinks
» View Demo | » Plugin Page

7. jQuery Link nudge

Make links notorious just like ones on David Walsh blog using this jQuery Link Nudge plugin.
» View Demo | » Plugin Page

8. TimePickr

If you need to get time as input from user, then use this plugin to provide a rich UI to input time.
» Plugin Page

9. Truncatable

Truncatable lets you hide blocks of text on page and show them if user requires.
» View Demo | » Plugin Page

10. Incremental Search For Select Boxes

This plugin converts ordinary select boxes into combo boxes with incremental search, very useful if you have lots of options in the select box.
» View Demo | » Plugin Page

11. Anything Slider

Anything Slider is a full featured slider that is pretty easy to customize and adapt into your website.
» View Demo | » Plugin Page

Blogged with the Flock Browser

Creating Transparent PNG’s in IE 6

As if Internet Explorer 6 doesn’t have enough issues, it also doesn’t support full PNG alpha channel transparency. While many would like to ignore IE 6, it is still being used by millions of internet users, thus we as designers still need to keep them in mind. This can make designing a website to work with IE 6 even more difficult than it already is. However, thanks to some creative and skilled minds and a few scripts, the problem can be resolved.

-

The Problem with IE 6 and Transparent PNG’s

Unlike GIFs’s, images in PNG format carry a seperate alpha channel for each pixel. This allows each pixel in a PNG image to be opaque, not opaque, and most importantly, anywhere in between the two. This is much different from than GIF images, which do support transparency, but each pixel is either transparent or a solid color.

Luckily, with the release of IE 7, the issue was resolved. Unluckily, this means earlier versions of Internet Explorer before will need to “hacked”.

-

The Fix

There are a few ways to go about fixing this issue, we are going to focus on Drews McLellan’s fix.

While IE 6 and lower versions do not support full PNG transparencty, Microsoft did include a proprietary filter: The AlphaImageLoader. The AlphaImageLoader can be applied directly to your css (inline or external), as well as with the help of JavaScript:

-

CSS example

view plaincopy to clipboardprint?

1. </strong><code>img {
3. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
5. }

</strong><code>img {  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);  } 

-

JavaScript Example

img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";

It is important to note that there is no filter property in the W3 CSS Specs, so this will not validate. It is for this reason that it is recommended you selectively embed the AlhpaImageLoader for only Internet Explorer versions 5.5 and 6, remember to use conditional statements, for example:

<!--[if lte IE 6]-->

-

Issues with this fix

Though the AlphaImageLoader is of some help, it is not without some major issues as detailed below:

There is no Filter property

Ive mentioned this, but a lot of people, like myself, strive for valid code. This can still be achieved as noted but requires more work and can become a headache.

Background images will not be repeated or positioned.

While the filter supports background images, the support is mediocre at best. It will not support background images that repeat or images that have been positioned using the background-position: property. Ouch.

Slow loading and excessive use of resources

You wont notice much of a lag in your page load time, but add 5 or six AlphaImageLoaders and you will certainly noticed a delayed response in loading time. Try to cut down the use of the filter as much as possible, you can also reduce the file size of your image be removing unused colors.

-

Real Solutions

Now that we have read the horros of dealing with transparent PNG’s we have a few options:

• Use the AlphaImageLoader above with the “problem” image and selectivley target the filter with JavaScript for IE 6 and lower.
• Replace the PNG with a GIF or JPG that is tolerable and works with your layout, and use Conditional Comments to target and replace the image for IE 5.5 and 6 only.
• Use Drew McLellans JavaScript ans let it do the work for you!

-

The JavaScript fix by Drew McLellan

Thank the internet for Drew McLellan, for he has brought us a “SuperSleight” that does fantastic work at solving this issue. Even better, this is all you will need to include on your page:

view plaincopy to clipboardprint?

1. <!--[if lte IE 6]>
2. <mce:script type="text/javascript" src="supersleight-min.js" mce_src="supersleight-min.js"></mce:script>
3. <![endif]-->

<!--[if lte IE 6]> <mce:script type="text/javascript" src="supersleight-min.js" mce_src="supersleight-min.js"></mce:script> <![endif]--> 

I think it would be easiest to quote Drew’s Explanation of the script:

Supplied with the JavaScript is a simple transparent GIF file. The script replaces the existing PNG with this before re-layering the PNG over the top using AlphaImageLoaded. You can change the name or path of the image in the top of the JavaScript file, where you’ll also find the option to turn off the adding of position: relative to links and fields if you don’t want that.

The script is kicked off with a call to supersleight.init() at the bottom. The scope of the script can be limited to just one part of the page by passing an ID of an element to supersleight.limitTo(). And that’s all there is to it.

-

Sources and Downloads

Ready to get the script and read a little more about it?

• Drew McLellans SuperSleight Script
• Download the Script

Article Sources

• 24Ways.org
• W3.org
• PNG in Windows IE

Blogged with the Flock Browser

Loading the background image first

When loading images on a website the background image could be the last to load which doesn’t look too professional. In this very short tutorial (more a tip I suppose) I will show you how to load the background image before anything else, you can apply this to any image that you wish, it is achieved by a bit of javascript in the head section.

In between the <head> and </head> tags of your html file, add the script tags:

view plaincopy to clipboardprint?

1. <script type="text/javascript">
2. 
   
3. </script>

<script type="text/javascript">  </script> 

It is worth mentioning that this wont work in browsers without javascript enabled, but the majority do so there shouldn’t be any real problems. If a browser doesn’t have javascript then it will continue to load as normal.

Now add the following code in between the script tags like this:

view plaincopy to clipboardprint?

1. <script type="text/javascript">
2. ImageA = new Image(width,height)
3. ImageA.src = "URL of Image"
4. </script>

<script type="text/javascript"> ImageA = new Image(width,height) ImageA.src = "URL of Image" </script> 

Replace the (width,height) with the dimensions of your image, eg (100,100) and the “URL of Image” to the URL of the image eg “http://help-developer.com/image.jpg”. Now it should load before all other images on the page.

To add more than one image you can do something like this:

view plaincopy to clipboardprint?

1. <script type="text/javascript">
2. 
   
3. ImageA = new Image(100,100)
4. ImageA.src = "http://help-developer.com/imageA.jpg"
5. 
   
6. ImageB = new Image(100,100)
7. ImageB.src = "http://help-developer.com/imageB.jpg" </script>
8. 
   
9. ImageC = new Image(100,100)
10. ImageC.src = "http://help-developer.com/imageC.jpg" </script>

<script type="text/javascript">  ImageA = new Image(100,100) ImageA.src = "http://help-developer.com/imageA.jpg"  ImageB = new Image(100,100) ImageB.src = "http://help-developer.com/imageB.jpg" </script>  ImageC = new Image(100,100) ImageC.src = "http://help-developer.com/imageC.jpg" </script> 

There you have it, how to load an image first, this works because javascript (and the content between the <head> and </head> tags) is loaded in the browser before the content, hence before any other images or CSS styles.

Blogged with the Flock Browser

jQuery UI - Configure your download

Build Your Download

Customize your jQuery UI download by selecting the version and specific modules you need in the form below or select a quick download package. A range of current and historical jQuery UI releases are also hosted on Google's CDN.

Quick downloads: Current (stable) (1.7.2: for jQuery 1.3+) | Legacy (1.6: for jQuery 1.2.6)

Blogged with the Flock Browser

jQuery UI - Demos & Documentation

Demos & Documentation

jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessiblity, flexible styling, and user-friendly design. All plugins are tested for compatibility in IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome.

Interactions

Complex behaviors like drag and drop, resizing, selection and sorting.

• Draggable
• Droppable
• Resizable
• Selectable
• Sortable

Widgets

Full-featured UI controls — each has a range of options and is fully themeable.

• Accordion
• Datepicker
• Dialog
• Progressbar
• Slider
• Tabs

Effects

Animated transitions and easing for rich interactions.

Effect Methods

Effect, Show, Hide, Toggle, Color animation, Add class, Remove class, Toggle class, Switch class

Blogged with the Flock Browser