CMX Weekly Newsletter

Check the News!

Win a Full Year Subscription To Community MX!

Create a site from any of our JumpStarts and submit its URL to JScontest@communitymx.com. Anyone can enter to win. Non-members can use either Santorini or our other free JumpStart, North Pole. You can enter with either a newly created or previously created JumpStart site.

A panel of CMX partners will judge the entries by the following criteria:

  • Adaptation of the JumpStart design
  • Suitability of design to the site content
  • Validity of all CSS/XHTML code
  • Accessibility

The winner will receive a one year subscription to CMX and have the design featured on the front page of Community MX. We will also display the design of a runner up on our front page.

You can read a Santorini/contest article with the contest rules and deadlines, a rubric that clarifies the judging criteria, a Santorini modification, and valuable tips on adapting Santorini for your own designs.

Keep in mind that you're not limited to the free Santorini or North Pole Jumpstarts for the contest. You can use any of our fantastic JumpStarts. Head over to our CMX JumpStarts chart to see all of the great designs that are available to you. JumpStarts range in price from $19.99 to $45.00 and whether or not you win the contest, you'll have a winning JumpStart on your next website!

Our Newest JumpStart - And It's Free!

Whether or not you choose to use Santorini for your contest entry, it is itself a winner. Santorini is another perfect JumpStart for those who are beginners to CSS layouts. Because it is essentially hack-free, the commented style sheet makes for easy reading. Even the Fireworks PNG is very simple to edit and requires no complex techniques. This doesn't mean that this JumpStart is boring to look at, however. The left column provides a pod approach, and there is a creative use of z-index and negative margins to create an overlapping effect among the columns. Santorini also uses Gordon Mackay's icons in its "Quick Links" section.

Like all CMX JumpStarts, Santorini includes an extension, bundled articles, Fireworks source PNG, documentation, style sheets, and everything you need to get up and running with your own sites. And of course it validates and follows accessibility guidelines.

You can start reading and downloading from these links:

CMX JumpStart Santorini article with contest rules and a modified Santorini design
CMX JumpStart Santorini article and free download

FlashTracer: A Must Have Tool for Flash Developers

There's a new Firefox plugin by Sephiroth that allows you to see all the Trace() function outputs by any SWF as if played in the IDE. You need the Flash Debugger Player for it to work. Even though it seems easy to use, it might be a good idea to follow these steps, since the documentation is a little scarce:

  1. Download and install the Flash 9 Debug Player. More links to download debugger players on Adobe's website.
  2. Launch Firefox, and select View > Sidebar > Flash Tracer (Alt-A).
  3. Click "show settings."
  4. Select a target output file.

And that's it! Now you'll be able to see the Flash debug player trace outputs from your SWF in the sidebar.

Simple. Just Always Recommend Anything Not Starring Steve Guttenberg.

Netflix has a million bucks put aside for you if you can just figure out a better system for recommending movies on their website. According to NetFlixFan, their recommendation system accounts for about half of the rentals at Netflix. If their system were targeted more directly at each buyer, they'd stand to make a good amount of money. Netflix's current recommendation system is not as specific to each buyer as it could be, and some individual or team of individuals will get richer coming up with a solution. You can see the entry rules for the contest at Netflix.com.

YouTube On a Path To Destruction?

Forrester Research thinks that YouTube is bound to fail soon due to imminent lawsuits from entertainment outlets who see their copyrights being violated. In order to make money, YouTube must also woo advertisers, and those advertisers might not want to be associated with a website that may be peddling illegal wares. See the story at TechWeb.com. Mark Cuban has some views on this subject as well - including the belief that anyone who buys YouTube is a moron - at Adage.com. Mark indirectly points out that anyone in the entertainment industry who wants to sue YouTube over copyright infringement should probably wait until someone with deep pockets buys the company. Why sue a company that has no money when you can tackle their rich parent company? Oh - and while you can, you've got to check out the "phony phone booth" routine from Jay Leno's show.

Satisfied Customers Speak Out!

  • "Thanks for another great article. This article is a simple but very good example of what I appreciate about the overall editorial style of CMX: Even though I may already know the "how," i.e., I may already be familiar with a particular CSS technique, like this one, I must admit I often don't quite understand "why" the technique works the way it does. Even with basic, less complex articles like this, I learn. Keep up the good work."

    - Brian L., CMX Subscriber, commenting on Zoe Gillenwater's free article,
    Create Pages that Fill the Browser with CSS.

    Whether you're just starting out or need advanced support, Community MX will give you answers and ideas to work through your tough issues. Don't miss out. Learn more about CMX or sign up for a free trial today!

Great Quotes:

"The most exciting phrase to hear in science, the one that heralds new discoveries, is not 'Eureka!' (I found it!) but 'That's funny ..." - Isaac Asimov

Firefox Has Huge Security Flaws. Or Not.

You might have read some reports recently regarding a major exploit in Firefox - like this one at ShortNews.com. The exploit was said to be triggered simply by placing some javascript on a web page, which would make it unique, and extremely dangerous. Well, it turns out that was a joke by hackers. Tee hee? The jokers, Mischa Spiegelmock and Andrew Wbeelsoi, belatedly admitted that the exploit they spoke of didn't exist, but hinted that they did know of several javascript bugs that existed in the browser, but wouldn't let on what they were. More on this knee-slapper at TechNewsWorld.com.

Microsoft to Freeloaders: Log Off!

When Windows Vista comes to town, Microsoft wants to make sure that everyone is running legitimate copies. It will be necessary for everyone who uses the new OS to authenticate it. If it is not authenticated, Microsoft will be nice and send you messages for thirty days to remind you about authenticating your copy of Vista. After a while however, Vista will simply log you off your computer, only allowing access to the internet for an hour for the purposes of authentication. This is the toughest approach yet that Microsoft has used to keep Windows patrons honest, and it should be an interesting ride for pirates, as well as people who aren't savvy enough to authenticate their honest-to-gosh versions of Vista. To keep things interesting, within the previously mentioned thirty day period, Microsoft will limit features within Vista until Authentication is complete. Read more about it at ITWire.com.

Stay Connected Everywhere

A relatively new company, Helio, has just announced a new service that ties together the Sprint 3G network and Boingo's network of 55,000 hotspots to provide users with internet access just about anywhere they might happen to be. Their software will automatically find the strongest signal within its network and connect the user to it. The service runs $85 per month. For folks who need to always be connected, this seems like a pretty good option. You can read more about it at News.com.

Their Heart Is In The Right Place

SeoMoz.org has posted an article that gives you advice on how to talk your client out of using a "splash page" on their website. Some of the reasons for not using a splash page are obvious, but there are a couple you may not have considered. While we've seen some splash pages that are perfectly legitimate and work within the context of a specific website, the greater majority are of the "look what we can do!" variety. Read the article at SeoMoz.org and you might be better equipped to deal with splash-happy clients.

Wish We'd Thought Of This...

We ran out of room in the Fun and Freebies section, but we still wanted you to see this. Most people don't like to pull pranks on elevators since people get kind of uptight about being suspended in the air by a cable anyway. But what if they started to walk into the elevator and the floor appeared to be gone? Take a look at the pictures...

Dynamic Letter Anchors Extension

  • Frequently on a dynamic page that displays a long list of content, such as a list of names, you want to allow a user to jump down to a specific letter of the alphabet. On a static list, this is easy -- just insert anchor links at key places on your page where the first letter of a word changes. On a dynamic page, it is not as easy. Using this extension, you can create a list of links for your data AND create the dynamic anchors to go along with them.

    Take a look at this Extension by CMX Partner Tom Muck

Fun and Freebies!

Here's Something Weird

For your viewing pleasure: The Indian version of Michael Jackson, courtesy of YouTube.com.

Aaagghhh!! Why Do We Click On These Things?!

You never know when one day, somewhere, someone will walk up to you and ask "Say, how many different types of ketchup condiments exist?" And you'll have a good answer because you've been to the Condiment Package Museum. Completely useless? Some may say it is, but then again, one day, somewhere...

Better Than Most Two-Legged DDR Players

You'd think that in order to play the mega-popular Dance Dance Revolution, you'd need two legs. Not so. Check out the guy in this YouTube.com clip.

Understanding Classpaths

  • All objects in recent versions of ActionScript are defined by something called classes. Think of classes as blueprints that determine the unique combination of characteristics, actions, and reactions that comprises a particular object of a certain type. By "object," we are talking about the familiar things a Flash developer deals with every day: movie clips (the MovieClip class), text fields (the TextField class), buttons, sounds, math functions, components, you name it. They are all defined by classes. Out of the box, Flash provides hundreds of built-in ActionScript classes. The great part is, you can even write your own! But there's a catch: the Flash compiler, which converts ActionScript into Flash Player bytecode, must be told where new classes are located, or it won't be able to find them. That's what this article is about.

    This free article by CMX Partner David Stiller can be found here.

Weekly Content Listing

photoshop

Home Renovations with Photoshop CS2

Jim Babbage

So you say you're tired of watching all those home renovation programs, but you have this fine piece of real estate that just needs a little TLC.

To sell a house, you need to have curb appeal, which this old place clearly lacks. So on our to-do list we have:

  • Get rid of the No Trespassing sign
  • Fix the torn metal roof and brighten it up
  • Brighten up the siding a bit
  • Demolish the decrepit addition out back
  • Clean up the front yard
  • Add new sod
  • Make it a prettier day in general

I'm here to tell you that with the help of Photoshop, the aptly named Patch tool, and a couple of other do-it-yourself features such as the Clone Stamp and the Replace Color tool, this little fixer-upper can be upgraded from condemned to just plain derelict. We will also be making use of Layer Masks, and selective contrast adjustments. Sounds pretty technical, doesn't it?

When the job is done, we should have something similar to this:

Supplied with this tutorial is the project image, "fixer_upper.jpg."

fl

Working with Shared Libraries - Part 4: Sharing Fonts with Dynamic Text [FREE]

Robert Reinhardt

In this "Working with" series, you learn how to create and use shared libraries with your Flash movies. Shared libraries can help you optimize your workflow, making it easier to update assets across several Flash movies used for any type of project.

In the last tutorial of this series, you learned how to create a runtime shared library (RSL) file and share its font assets with static text in other Flash movies. In this tutorial, you learn how to reuse the fonts with dynamic text fields in other Flash movies. Sharing fonts is one of the best ways to trim down SWF file sizes for large projects involving many SWF files.

The Working with Shared Libraries Series:
Working with Shared Libraries - Part 1: Sharing Symbols in Authortime Libraries
Working with Shared Libraries - Part 2: Sharing Symbols in a Runtime Shared Library
Working with Shared Libraries - Part 3: Sharing Fonts with Static Text
Working with Shared Libraries - Part 4: Sharing Fonts with Dynamic Text
Working with Shared Libraries - Part 5: Sharing Fonts with Runtime-Created Text Fields Coming Soon
Working with Shared Libraries - Part 6: Using CSS with Shared Fonts Coming Soon
Working with Shared Libraries - Part 7: Sharing Components Coming Soon

css

From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation

Adrian Senior

In Part 4 of this series you will learn how to build a good solid site structure and optimise and export your Fireworks images; This section completes our work in Fireworks.

In Part 5 of this series the real fun begins as we start to lay out our site for the screen media type and look at the problems that various browsers present to us and how we can work around these problems.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Slicing the Drawing
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation

illust

A Text Effect Using Illustrator and Masks [FREE]

Kim Dudley

Illustrator and its masking tool can create some very nice effects. Like other applications Illustrator's masking tool uses shapes to hide or mask other artwork. In this tutorial we will use text as the masking object. Once the mask is created Illustrator's drop shadow effect will be applied to produce artwork suitable for web page banners or page headers.

fl

Creating a Soft Mask in Flash - Part 2: Flash Player 8 and Later

David Stiller

Masking has been available in Flash for as long as I can remember. This feature can be very useful and is easy to implement, either by hand or with ActionScript. The only regrettable point, in fact, is that soft masking (where the edges are blurry) has always required a tricky and tedious workaround ... until now.

This two-part series examines both the historical workaround — that's the tedious one — and a new (as of Flash 8) approach that is much easier. Knowing both will allow you to apply soft masks in SWFs published to just about any version of the Flash Player. Here in Part 2, we'll learn the approach for SWFs published for Flash Player 8 and later.

The Creating a Soft Mask in Flash Series:
Creating a Soft Mask in Flash - Part 1: Flash Player 7 and Earlier
Creating a Soft Mask in Flash - Part 2: Flash Player 8 and Later

photoshop

Shadow/Highlight Control Moves Indoors

Knut Kubenz

Most of the time we use Shadow/Highlight, in the Image > Adjustment menu, to control a naturally back lit subject and we forget about the times we're indoors and not under naturally lit environments. This great tool, Shadow/Highlight, can have new creative meaning as well as functionality, in situations which are set up as well as spontaneous. This tip will allow you to look at the Shadow/Highlight control in a completely different light (pardon the pun).

php

Previewing and Submitting User Content

Gordon Mackay

Often when you allow users to send data to a database it's a good idea to allow them to preview their text before it's committed, especially if the data is going to be queried and outputted onto a live HTML document. This is a common feature of many forum, CMS and blogging applications. In this tutorial I will show you how to acheive this using PHP.

css

Faux Image Maps - Part One

John Gallant, Holly Bergevin

With this tutorial, we begin a new series covering the many available CSS methods for replacing image maps with better and more versatile code. We'll start with a very basic but highly useful technique, and build upon that to show you fancier tricks as the series progresses. It's pretty handy stuff to know.

js

JavaScript 201: Functions

Paul Davis

Graduated from the JavaScript 101 articles and looking for more JavaScript to sink your teeth into? This article delves into the JavaScript functions. Learn about putting them together and making them do something.

bridge

Getting Organized with Adobe Bridge - Part 4: Rating and Labeling

Jim Babbage

As a commercial photographer, one of my ongoing challenges is to keep my images organized so that I can sort and find images quickly for myself or a client. This is a concept that is—in my opinion—important for anyone involved in the professional graphics industry: graphic and web designers, retouchers, artists ... we can all benefit from a little more organization and structure.

This is where Adobe's Bridge comes in very handy. This piece of software comes bundled with Adobe Photoshop® CS2, Illustrator® CS2, InDesign® CS2, and GoLive® CS2 or any of Adobe's Creative Suites. In fact it's one of the few—if not the only—Adobe software product which cannot be purchased as a standalone item.

The Bridge is based on the File Browser that was part of Photoshop 7.0, but goes much further than a simple file searching utility. In previous articles of this series, we have looked at Batch Renaming, Working with Metadata and Creating Keywords, Searches and Collections. In this article, we will look at how to sort and "soft-edit" your images using ratings and labels to make them easier to manage, segregate into folders or burn to a CD or other media. We'll also learn how powerful rating and labeling can be when combined with keywords.

The Getting Organized with Adobe Bridge Series:
Getting Organized with Adobe Bridge - Part 1: Batch Renaming
Getting Organized with Adobe Bridge - Part 2: Working with Metadata
Getting Organized with Adobe Bridge - Part 3: Keywords and Searches and Collections - Oh My!
Gettting Organized with Adobe Bridge - Part 4: Rating and Labeling

Previewing and Submitting User Content

  • Often when you allow users to send data to a database it's a good idea to allow them to preview their text before it's committed, especially if the data is going to be queried and outputted onto a live HTML document. This is a common feature of many forum, CMS and blogging applications. In this tutorial I will show you how to acheive this using PHP.

    Check out the Article by CMX Partner Gordon Mackay

Tips, Tricks and Dirty Cheats!

This week's Tip, Trick or Dirty Cheat is courtesy of Jim Babbage , CMX Partner.

A Fireworks Quickie

Want to quickly export any part of your Fireworks design as a single graphic without actually cropping the design or drawing a slice? Choose the Export Area tool (underneath the Crop tool). Draw and adjust your crop with with this tool, then double-click inside the bounding box. You'll be brought right to the Export Preview dialog, and only the selected area will show in the preview window.

You can still adjust optimization settings and even output dimensions. Make sure to give your cropped file a different file name from anything you previously exported.

Would you like your tip published? Submit it to tips@communitymx.com.

That's it for this week. Stay tuned for the next CMX newsletter!