Webmasters Gallery

This article was submitted by Enric Godes, project manager at Vasava, a design studio. Godes and Vasava were commissioned by Adobe Software to create this tutorial.

Today we’re going to develop a virtual fireworks display in Flash.

To follow along, you’ll need:

• Tweener caurina Stable version 1.33.74, Action Script 3 (Flash 9+) library. This library can be downloaded from Google Code: http://code.google.com/p/tweener/downloads/list
• Adobe Flash CS4 Professional.
• Also, you can grab the finished project to check your work (SWF download)

How to Proceed

Step 1: Change the Flash movie to 800×600 and 65 fps.

Step 2: Draw a 4 px circle and transform it on symbol by pushing F8.

Step 3: Edit the MovieClip and animate it from left to right on a straight line. These are the sparks eminating from the center of the individual fireworks.

We used a shape interpolation for this. Later, you can also try varying animation types and change the timing to create different results. Insert a stop on the last frame.

Step 4: Find the MovieClip on the library and right click to open the properties window on the class field and change it to “Particle"

Step 5: Make a new symbol and put it on the scene. On the properties window, change it to "nightSky." This is where we will put the fireworks.

Step 6: And now the coding. First, import the classes we are going to use

import caurina.transitions.Tweener;
import flash.events.*;

Step 7: Next, define the movie vars.

var fwParticlesCount:uint=200; // particles in each explosion
var fwTimer:uint=2000; // time between explosions
var timer:Timer = new Timer(fwTimer);
// this adds a timer, in each step of the timer it will call fire() function
timer.addEventListener(TimerEvent.TIMER, fire);
timer.start();

Step 8: We want to use a lot of random numbers, so we created the following function to save some time.

function randRange(min:Number, max:Number):Number {var randomNum:Number = Math.random() * (max – min + 1) + min;    return randomNum;}

Step 9: And now the main function, which is putting the particles in a circle, animating them and setting their opacity and position.

function fire(event:TimerEvent){

    // the origin coordinate for the firework
    var x0:uint=randRange(100,700);
    var y0:uint=randRange(100,500);
    // now i’m going to create and define the properties of each particle in the firework
    for(var i:uint=0;i<fw Particles Count;i++){
           var tempParticle:Particle=new Particle();
           tempParticle.x=x0;
           tempParticle.y=y0;
           tempParticle.rotation=randRange(0,360)
           tempParticle.scaleX=tempParticle.scaleY=randRange(.3,1)
           //add to the stage
           nightSky.addChild(tempParticle)
           //the particle is going to start with the animation you prepared on the Movie Clip
           //then with a little delay the Tweener animates the y an opacity,
           //onComplete remove the mc from stage and deletes the particle
    Tweener.addTween(tempParticle,{y:y0+200+randRange(50,50),alpha:0,delay:1,time:2,transition:"easeInSine",onComplete:function(){nightSky.remove Child(this);delete this}});

                                  
 

That’s all you need to do. Now just sit back and enjoy the show!

  Enric Godes is a project manager at Vasava. Started in Barcelona in 1997, Vasava is a   communication studio with 18 young designers who specialize in cross-media projects: print, web, motion, 3D animation, and video. To unleash creativity and meet the deadline-driven demands of clients, Vasava relies on the integrated, cross-discipline tools found in Adobe Creative Suite Master Collection software.

Portfolios are a great way for web designers to show off their work and present to prospective employers what they can do. But with so many portfolios out there, it is hard to make yours stand out from rest.

In this showcase, you will see a few excellent examples of beautiful web designs which we hope will help inspire you.

A great new offer provided by the lovely people over at V7N. They are giving away 10 tickets to the Affiliate Summit East where you can see and meet some of the top names in today’s web industry.

For the official announcement and entry rules, please head on over to the announcement on the V7N forums:

As you use Google’s AdSense for more and more time you begin to learn from the mistakes of the past, and you slowly begin to realize which of your actions kept your site from reaching its full potential.

But an important part to making a mistake is telling people about it and teaching them how to avoid making the same mistake. So this is a list of the top five mistakes people using AdSense make.

You should read them well, and see if any of them is applicable to your contents. If it is, you must stop and attempt to fix such errors as quickly as possible.

The first major no-no that everyone seems to be hitting at one point or another has to do with breaking the rules. Google’s AdSense is a great program but it relies on you respecting a few set rules.

The most important thing is not to create “artificial clicks” through any means possible. Never click your own links, never ask your friends or close ones to click the links and never, by any means have your content encouraging the visitors to click the links. You run the risk of being permanently banned, and that will definitely damage your revenue.

Failing to comply with Google’s terms could have your AdSense account suspended. And this is why this rule is by all means the most important one of all. It’s because this is the difference between life or death.

The second thing users get wrong a lot of time is having a bad color palette for ads. Many times this happens because the publishers aren’t knowledgeable enough to change default color palettes.

Others just can’t seem to spend enough time in changing those defaults. Having bad ads that stand out is sure to push people away from clicking; whilst having something which is clearly visible yet distinctive will.

Third, of course, the position of the ads is probably the key element you should get right if you want to maximize your profits with AdSense. This is noted in a lot of places on the web and Google talks about this as well. Google can provide you with statistics which illustrate what positions work particularly well on your website.

Fourthly, banner ads are also a very bad idea if you’re using AdSense. 480×60 type ads are a sure way to drive many people away as most Internet surfers have developed a natural resistance to such means of advertising.

And last, but clearly not least, is not taking care of the site running the ads. Because ultimately it doesn’t matter how cool the site is itself. If it doesn’t have updated contents and a lot of daily visitors it will probably never earn you any serious AdSense revenues.

So these are the most important five things people get wrong while using the AdSense program. But of course if you don’t like this means of expressing the issues, here are the top five things you should do to ensure your AdSense ads are constantly bringing in that revenue.

Never break Google’s policy. Don’t make visitors create “artificial clicks” on your website regardless of the person doing so or the reason. Make sure your ads have the right colors that blend in with your site, and make sure they’re positioned in the right places to attract as many customers as possible. Always try to avoid using banner-like (480×60) adds unless you really know what you’re doing and constantly keep your site fresh and up to date.

So with that in mind you should be raising your AdSense revenues in no time.

Developers tend to tease MySpace for its look, but the insiders are incredibly impressed by some of the engineering behind the scenes (e.g. their internal monitoring tools are said to be second to none).

They have surprised us again with their new tool MSFast which is "a browser plugin that help developers to improve their code performance by capturing and measuring possible bottlenecks on their web pages."

The IE 8 tools are getting better, but in general no one has been able to touch Firebug (and the new WebKit Inspector improvements) but this tool is actually plugin for IE! It captures a lot:

• Measure the CPU hit and memory footprint of your pages as they render on the client’s browser
• Review screen shots of the page while it renders
• Review the rendered HTML on each point of the page’s lifecycle
• Measure and show estimates of the time it takes to render each section of the page in different connection speeds
• Validate the content of your page against a set of proven “best practice” rules of web development
  Review downloaded files and show download time estimation on different bandwidths

That is some impressive data, and great to be able to test on IE where it has been SO hard to do so in the past.

It is great to feel the good vibes at Mozilla HQ today as we launch Firefox 3.5! It is always an interesting ride to see a browser develop, and realize how complex and large the work is.

Congrats to the browser developers out there who are working hard to make the Web better. With final versions of Firefox 3.5, Safari 4, and Chrome 2 out in the wild…. things are picking up nicely.

The Firefox 3.5 release is exciting for me because it really benefits the developers. We get Open Video, @font-face, cross site XHR, Geo Location APIs, CSS Media Queries, Native JSON, Offline support, Web Workers, and so much more.

And, the world keeps moving. I have seen some very cool things in the nightly tree, and look forward to beign around as the team works on the next great Firefox.

Updates

Steve Souders has posted on Firefox 3.5 getting 10 out of 11 in his UA Profiler tests.

Watch the downloads come in with this cool download tracker that uses Canvas and SVG, all thanks to Justin Scott. The stats so far show that if the current rate trends hold we will beat the Firefox 3.0 download day, which is a surprise to all.

Internet usage measurement and marketing service providers Com Score recently reported that total global Internet users aged 15 and older who access the internet from home and work computers surpassed 1 billion for the first time in December 2008 based on data accumulated by them.

Top 15 countries ranked by Internet population:

1. China: 179.7 million
2. United States: 163.3 million
3. Japan: 60.0 million
4. Germany: 37.0 million
5. United Kingdom: 36.7 million
6. France: 34.0 million
7. India: 32.1 million
8. Russia: 29.0 million
9. Brazil: 27.7 million
10. South Korea: 27.3 million
11. Canada: 21.8 million
12. Italy: 20.8 million
13. Spain: 17.9 million
14. Mexico: 12.5 million
15. Netherlands: 11.8 million

Themes? Just what are we talking about here, a blog theme?

theme? Social network page theme? What, exactly?

If you have a page on the web and that page is owned by you, or represents you, you can present a “theme” coupled with the content. This will separate you from the masses and provide some stamp of uniqueness that represents you, or what you are trying to convey.

Now that you have decided that a theme is something that you want. You have the choice of a free theme, or a customized theme. A free theme, of course, is just that, free, and usually comes with the web page, or site you are dealing with. It will be limited in scope and will vary from single color backgrounds to multi-colored backgrounds, but it usually stops there. It may be quite sufficient for you and you need not look any further to get added impact. In fact there are some rich, and warm colors with free themes and you might want to stay with something simple. This will depend on the type of page the theme is going on.

If the page is very shallow in terms of showing the theme, then you do not need to be elaborate. If there is a dearth of space that needs to be filled up, or your entire page background is covered, then you might want to consider something with a little more pizzazz, a little more artistic flair. This you will get from a customized theme.

Now, not all customized themes are created equal. You might only get a choice from a limited package. A theme might be just a “skin”, or it might be more involved and provide buttons, motions and secondary actions when hitting links for instance. So it pays to shop around and look for the best choices based on the theme you are trying to project.

You will almost certainly have the choice of many customized themes when you make your decision.

A contributing actor when making the decision for free or customized is obviously price. A free theme is just that, no cost, and there are a lot of nice free themes available. Some are equal to, or better than premium price themes. For custom, or premium themes, you will get a multitude of choices ranging from a few dollars up to $100. You have to decide whether it is worth paying the premium, and that decision will be based on the audience you want to keep once they get to your site. Premium themes will generally give a clean and more professional look and will likely provide more functionality. The theme developer will usually be able to support the theme, especially the higher price ones. So although there is a cost involved, it may dividends to have that extra professionalism and functionality.

Make your decision based on your need. Don’t throw money away, but neither shy away from paying for a very professional look and feel. You are presenting yourself, your company, or an idea to a global audience. Make it look good and give the visitor a great experience!

As Web developers, we never stop hearing about the Mac. A lot of people love to talk about their Macs, but despite the “elite” status of the Apple computer, is there any need for a Web developer to splash money on one? A few weeks ago, Mark Nutter wrote here on Smashing Magazine in favor of swapping your PC for a Mac, and while some of his reasons are good, there are plenty of reasons to stick with (or switch back to!) Windows.

This article explores the best aspects of the Windows PC and, more importantly, the different apps that Web developers can use to become more efficient in their work. Every piece of software mentioned here is free to use.

Developer Tools

Notepad++ (code editor)

After looking at many text editors, Notepad++ is by far the best I’ve found. On top of the standard features you would expect from a great text editor, you can extend its functionality by installing any of the free plug-ins that suit you.

 

Some of the things that really make Notepad++ shine:

• FTP Synchronize
  Allows you to connect to a server by FTP and edit files in Notepad++. Then when you save the file, it is automatically uploaded back to the server. No more saving files in an editor and then firing up a separate FTP client! Bonus: the FTP sync has “Keep Alive,” which pings the server at regular intervals to stop the connection from being closed.
• Document Compare
  Open two versions of the same document and the differences between them are automatically highlighted. Great for finding out where a coding change has gone wrong!
• Code auto-completion
  Auto-completion is a fairly standard feature, but with Notepad++ the code libraries can be downloaded from the website and updated manually. Keeping up to date with changes in the languages is easy then, and you can even write your own library file.
• Panel Views
  Allows you to see two files at once, side by side. Hugely useful if you have a large monitor and want to make better use of all the space.
• Ctrl + D to duplicate a line
  It may sound simple but is surprisingly useful. As an example, it took two seconds to write out all the <li></li> tags for this list!

Texter (text expander)

Texter is a free app from Lifehacker. It allows you to type a few characters, then hit Tab and have those characters replaced with a string of text. This is great for a lot of computer tasks (answering email most of all!), but the real advantage for developers is that Texter lets you specify key presses. For example, {HOME} is interpreted as pressing the Home button.

Take the following hot string:

view plaincopy to clipboardprint?

1. {BACKSPACE}{HOME}<p>{END}</p>

{BACKSPACE}{HOME}<p>{END}</p>

When coding, I type the text of my paragraph, then add a space, press “p” and hit tab. Texter automatically puts the <p> at the start of the line and </p> at the end.

That’s just one example. I have about 35 different strings saved for use in coding, so the number of possible uses is huge.

WampServer (Apache, PHP and MySQL)

Installing a Web server on your local PC is great for development because you can test everything easily and instantly. No waiting on Web servers and dodgy Internet connections. WampServer packs an Apache, PHP and MySQl install all into one simple executable file, so your server will be up and running in five minutes tops.

Clipboard Manager

Clipboard Manager is a sidebar widget for Vista. It displays a snippet of the most recent items that you’ve copied. If you click one of the snippets, it is brought to the top of the clipboard, so when you hit Ctrl + V, you’ll paste that instead of what you copied last.

This is extremely useful when you are working on a document or script for re-arranging chunks of the page or copying properties from one object to another. Clipboard Manager cuts down drastically on the amount of time spent re-copying the same snippet again and again.

AutoHotkey (write your own shortcuts)

AutoHotkey allows you to create your own hot keys or remap existing ones. The scripts can be either extremely simple or quite complex. The Quickstart Guide walks you through everything you need to know.

One of the hot keys I use most is simple: pressing Caps Lock + W to close the current window. Anyone who is used to using Ctrl + W to close a tab in FireFox will find this very handy!

view plaincopy to clipboardprint?

1. ; Close Active Window 
2. Capslock & w:: 
3. WinClose, A 
4. return 

; Close Active Window
Capslock & w::
WinClose, A
return

Syncback (automatic back-ups)

Everyone’s hard drive fails eventually. Online tools like Mozy and Dropbox are ideal for backing up critical files that you’re currently working on, but backing up everything on your hard drive to one of these tools just isn’t feasible for most people.

Syncback is a free tool from 2BrightSparks that automatically backs up all your files to an external drive. (A paid version is available as well, but the freeware is more than enough.)

You select which folders to back up, set when you want back-ups to take place and let Syncback do the work. Back-ups can be done manually or automatically, and only files that have changed will be copied, so it is very efficient after the first run. It will even email you a report if any errors occur during the backup, such as certain files not being able to be copied.

Windows Live Writer (blog posting)

Not every developer needs this, but many of us have our own blogs now. Windows Live Writer is a free tool to help you write blog posts.

The main advantage of this is that it accesses your website and re-creates your design in the program. You can then write your post directly onto the website background, so you can see everything about your post’s presentation and fix it easily.

Is that image too big? Or that paragraph too long? Seeing it for yourself is the best way to catch these flaws.

The Best Parts Of The Mac

OS X does some things very nicely. Thankfully, the best bits can all be re-created in Windows free of charge.

The Dock ? RocketDock

The Dock is probably the most distinctive Mac feature. The large icons and easy access to them appeal to a lot of people

RocketDock brings the Dock to Windows beautifully. Drag and drop to re-arrange, position on any side of the monitor, minimize windows to the dock and more. The demo video from its website below shows RocketDock in action:

Quicksilver ? Launchy

Launching applications from your keyboard is an extremely fast way to work. Mac users use Quicksilver for this, but Windows users can use Launchy. Launchy can be set to index only programs or include files as well. You also choose which directories it indexes. One of the best uses for it is to set up a directory of utility scripts that you can execute from a few quick keystrokes in Launchy.

For example, iTuny is a set of free scripts to control iTunes from Launchy. Now, if I want to skip to the next song, I hit Alt + Space to bring up Launchy and type “inext” to launch the iTunes Next script from iTuny. You can set up scripts for whatever you like, including shutting down and locking your machine.

Leopard Stacks ? Stand-Alone Stack

Stacks are a great way to easily access your most commonly used files and programs.

 

Standalone Stack allows you to create your own stacks in Windows, either in the taskbar or on your desktop. And you can display the files in either a list or a grid, just like in Leopard. For anyone using Rocketdock, you can install the Stacks Docklet from Matonga to get stacks into your dock.

More Control Of Your Machine

Custom Visual Styles

VistaGlazz allows you to control the appearance of your Vista installation. You can create your own custom styles or download them for free. One of the best sources of styles is DeviantArt (which has some OS X styles, though they’re not as polished as the Vista versions!).

Another popular application for theming is WindowBlinds from Stardock, but you need to pay for it. You’ll find plenty of themes for it on DeviantArt as well.

More Hardware Options

Macs come with very few variations in hardware. You have a small selection and just have to choose whichever one is closest to what you need. Because anyone can develop hardware for Windows, the selection is much greater. And because of this competition between manufacturers, companies are forced to offer good value for your money.

That doesn’t just mean better specs for about half the price. Check out this new multi-touch HP laptop, which comes in under the cost of any MacBook. Search around and you will find the perfect machine for your needs.

Huge Range of Devices

On top of the core hardware, you have thousands of peripherals to choose from. For graphics designers, that means a massive selection of tablets. But there are a lot of other devices as well, right down to your mouse. I have a five-button mouse and just hit the extra buttons on either side for small tasks like going backward and forward in a Web browser and Windows Explorer. For developers who have to give regular presentations to clients, this nifty wireless mouse/remote control is ideal.

Conclusion

There are a lot of good things about the Mac, and it’s hard not to get a little excited about them each time you watch one of Apple’s big developer conferences.

What you have to remember is that at the end of the day, the operating system is a means to an end, not the end itself. Whichever system you choose should make your daily work (and play!) easier and more efficient. Windows combined with the great free software and tips I’ve found online allows me to work exactly the way I want. I wouldn’t dream of going back to a default Vista installation with no extras: the customized installation is worth so much more to me than either Windows or OS X on its own.

We would love to hear what aspects of your operating system made you choose it (but not the flaws in the other one that made you not choose it!) and how you use it to work at your best.

oday I’m happy to announce that I have launched a network of five niche gallery sites! Many of us visit design and CSS galleries on a consistent basis for design inspiration, and there is no shortage of galleries to choose from. Some of my favorite galleries are those that exist to showcase work of a specific kind (We Love WP is a good example, it is a showcase of WordPress-powered sites).

Niche galleries are especially useful for designers because they allow you to get the specific type of inspiration that you are looking for without being overwhelmed by too much that doesn’t interest you. You can go to a niche gallery and quickly find helpful and relevant inspiration that applies to your own situation. With that in mind, I have chosen five topics for galleries that I thought would be of use to many designers.

If you have any interest in some of these types of design, please check out what has been posted already and subscribe to the feed or follow on Twitter. Each gallery has been launched with more than 30 showcased items and they will be updated consistently (The amount of new additions will depend partly on how many quality submissions are received, so please feel free to submit your work for consideration. Ideally, there will be about 10 additions each week per gallery).