11 Soft Synths to Add to Your Rack

Synthesizers are amazing instruments. I used to love watching videos of Vangelis, Rick Wakeman, Keith Emerson and Jean Michel Jarre play their racks of synths in the 70s and 80s. Their arms would jump from keyboard to keyboard with practiced precision, their fingers hitting buttons, moving sliders and changing patches between phrases. What I love most about synthesizers is the way you can use them to create new sounds, or emulate existing sounds. Creating a new sound can require just as much inspiration (and perspiration) as creating a new melody or groove. Subtle variations or combinations can make all the difference. Watch the masters at work in these Youtube videos. First is Rick Wakeman performing an amazing solo on several racks of synths. Rick Wakeman solo. Second, you can watch Vangelis in the studio as he is recording "China". While his fingers spend most of the time pounding on his favourite CS80, he is surrounded by an incredible number of keyboards, and utilizes some of them in his playing. Vangelis: The Making of China. Audiotuts has run quite a few synthesizer tutorials in the last month. Times have changed. We can now have a huge stack of software synthesizers on a laptop we can carry with us anywhere, and control them with a MIDI controller keyboard like the M-Audio Axiom that has a generous helping of knobs and sliders for controlling the synthesizers' parameters. You no longer need to own a music store or have an army of roadies to have a great synth setup. A large range of soft synths and virtual instruments are available, and most DAWs include at least one. What is your favorite? While we can hardly scratch the surface in this article, here is a handful to get us started. Please add to the list in the comments. 1. ES2 ES2 is Logic Pro's synthesizer. Featuring three oscillators, two filters, and 32-voice polyphony, it is a powerful and versatile subtractive synthesizer. Davide Di Bucchianico shows us around the synth in his tutorial How to Design Reeses and Hoovers . 2. Malström Reason's Malström soft synth uses "Graintable" synthesis invented by Propellerhead, making it capable of creating unusual sounds. Propellerhead explain: "The Malström Graintable synthesizer features all imaginable filtering and modulation options, and a couple of unimaginable ones too; Try some real-time waveform stretching, some spectral modulation, or some awesome wavetable sweeping. "Malström comes with a wide range of meaty and exotic Graintables, letting you create anything from lush pads to scary squeals, from the pretty to the gritty. And that's just the sounds coming from Malström itself; try using this monster's audio inputs to filter other Reason devices, and let some of Malström's magic rub off on your drums or sampled vocals. With a device like this, no one can accuse your sound of being ordinary." 3. Metasynth Metasynth by U&I Software is a very different soft synth only available for Mac OSX, effectively allowing you to "paint" sound. For more details, see Robert Pitman's tutorial An Introduction to Metasynth. 4. Prologue Prologue is included in Cubase 5. It is a subtractive synthesizer with three oscillators, powerful multi-mode filter, four envelopes, two LFOs, a powerful modulation matrix, and on-board effects.. It comes with hundreds of presets covering a wide range of sounds. 5. Rapture LE Rapture LE is included in Cakewalk's SONAR 8.5. It includes over 200 programs & hundreds of oscillator shapes. 6. Reaktor Reaktor is an expensive, complex, modular soft synth (or rack of synths) by Native Instruments. It makes use of both FM and subtractive synthesis. Programming Reaktor isn't simple, but it does come with a long list of useful pre-programmed patches. 7. Subtractor Subtractor is a subtractive synthesizer for Reason. It is an analog type polyphonic synthesizer. See it in action in Mo Volan's screencast A Basic Guide to Subtractive Synthesis (Part 1). 8. Thor Thor is another of Propellerhead Reason's soft synths. It includes four different filter types and six forms of synthesis. 9. Vacuum Pro Tools's Vacuum monophonic vacuum tube synthesizer is designed like an old-fashioned synth, and has all the knobs and parameters Rick Wakeman would expect. It even looks dusty. If you prefer not to program, it comes with around 200 presets. 10. Xpand! Pro Tools's Xpand! is "a free RTAS® sample-playback/synthesis workstation plug-in that provides fast, efficient ways to access and manipulate thousands of high-quality sounds directly from within Pro Tools." The webpage lists the following features: Comprehensive sound factory for all musical styles and applications More than 1,000 factory patches and 500 combinable part presets Four layer-able parts for millions of combinations Subtractive synthesis, wavetable, FM synthesis, sample playback, virtual tonewheels, and effects 64-note polyphony Quick and easy sound tweaking Two built-in effect sections and four arpeggiators/phrase generators Highly efficient — requires little CPU power per instance 11. ZynAddSubFX ZynAddSubFX is a free and open source software synthesizer. It is a polyphonic, multitimbral synthesizer with three synthesis engines: additive, subtractive and "pad". Which soft synth or virtual instrument do you prefer? How much do you use soft synths? What do you love and what do you find frustrating? Let us know in the comments.

HTML Color Codes: An Exhibit On Digital Color

The HTML Color Codes exhibition features a selection of internet based artwork that address the topic of digital color. The central question that the exhibition poses is whether or not artists working with the internet are in fact limited to a “ready-made” color palette, a premise that many artists working with film, photography, and mass produced, standardized paint sets have assumed. The rationale for this question stems from theories of perception that argue that color is a not ready-made object found in a paint set or machine, but rather it is an experience that results from a complex process of light interacting with the retina and human nervous system.
The exhibition begins and ends along a polemic. On one extreme, color is viewed exclusively in terms of its “ready-made” code, indicated by the programming language that the artist has used. In order to use color on the internet, one must adopt the standardized hexadecimal system of color values. This system involves designating a six-digit code combined of letters and numbers (such as 0000cc for a deep blue), which is then interpreted by HTML for online visualization. HTML (HyperText Markup Language) is a programming language conventionally used for coding and structuring the elements on a web page. Software applications such as Macromedia Dreamweaver or Adobe Flash automate coding so that designers or artists can manipulate the space and plug in graphics without memorizing code. The first four artists featured in the exhibition (Chris Ashley, Michael Demers, Brian Piana, and Owen Plotkin) demonstrate the some of the possibilities for hexadecimal values in color-based, visual, internet art.

Look, See by Chris Ashley

Project
Look, See is on an ongoing series of HTML drawings that Ashley begun in 2000. The drawings are made using HTML tables in the WYSIWYG editor in Dreamweaver, a software application used to create websites. The WYSIWYG editor (What Your See Is What You Get) is a tool used for editing a web content that, unlike writing source code, allows for the direct manipulation of the colors and shapes that will appear online. The HTML table is a grid with a designated number of rows and columns. After making the selections for the table, Ashley assigns a hexadecimal value to each square in the grid, giving it its color and code. A new HTML drawing is made every day. The selections for this exhibition are the set of drawings from April 2009. All the images vary to some degree. However, a general aesthetic is at work throughout---solid and mostly opaque colored squares and rectangles that create a larger square shaped image. At the same time, the trick is that there is no image. It is solely code and its execution. If a user tries to click on the “image” to save it, she will find this impossible. Look, See plays with the intrinsic grid that structures most content on online (vector based images are the exception). While still retaining reference to this constraint, Ashley also manages to make each drawing visually elegant.

How to distribute elements horizontally using CSS

In this post I want to reply to a frequently asked question that I receive from my readers about how to distribute horizontally a certain number of elements within a main container using CSS. This problem is not particularly complex and can be solved simply using the CSS selector :first-child.
Before to proceed I suggest you to download my CSS 2 Visual Cheat Sheet for a practical reference guide to CSS 2 properties that can help you understand concepts illustrated in this post. The picture below illustrates an example of horizontal distribution:

This is the HTML code you can use to define the structure of your document:

In order to distribute horizontally the three elements contained into the wrapper we have to use some lines of CSS code. At first sight, a practical solution could be to define a class (.section), with the properties width and margin-right set to a specific value, and apply it to each

element contained into the wrapper. The problem is the right margin of the last

element that exceeds the width of the wrapper:

This is a problem because web browsers render the page in this way:

The last

layer is moved below. The question is: How can you remove the external margin of the last element without using a different CSS class with the property margin-right sets to 0?

Solution

As I said at the beginning of this article, the simplest solution is to use the CSS selector :first-child and invert the position of the margin from right to left. :first-child allow you to get an element that is the first child of another element. In this way the selector allows you to remove the left margin easily.

The first step is to define the wrapper using the following CSS code:

#wrapper{
    width:320px;
    height:60px;
    background:#EFEFEF;
}

The following code define the class.section to apply to each element within the main wrapper.

.section{
    border:solid 1px #999;
    float:left;
    height:58px;
    margin-left:10px;
    width:98px;
}

In this example I used fixed values for the properties width and margin-left but you can also use relative value (percentage). Now we have to remove the left margin adding the following code:

#wrapper div:first-child{margin-left:0px;}

Browsers interpret the previous line in this way: get the first

element contained into the element with ID=wrapper and set the property margin-left to 0. And this is the result:

The only advice is the following: IE 6 doesn’t support the selector :first-child. You can use conditional comments to define a specific CSS file for IE6 and add a new class (for example .section-first) with the same properties of the class .section but the property margin-left sets to 0.

Creating a Reusable Flash Uploader with ActionScript 3.0 and PHP

In this tutorial I'll show you how to build a Flash uploader for uploading files from the user's computer. The result will be ideal for large file sizes as it will display a progress bar and the percentage left to upload. We'll even show the user the number of bytes uploaded per second.

Author: Bratu Sebastian

I am a 22 year old web developer and musician from Romania. I love php,jquery,flash,as3 and lose 80% of my nights with them. I also have a lot of business ideas that I never get to build. I like to build lots of websites.

Folder icon by Michael Ludwig.
Editor's note: I'm afraid there's no demo for this tut - you'll have to download the source.zip and play around with uploading files to your own server :)

Step 1: Button Design

Create a new ActionScript 3.0 Flash file and set the dimensions to 500 x 100 pixels. We'll begin by creating a select button. Draw a rounded rectangle, I've made mine with a 5px round corner, a blue gradient and a 2px gray stroke.

Press F8 to turn it into a button and give it the instance name "select". Name the button on the stage "select_btn".

Inside the button, fill the 3 states with a slightly different gradient. Create another layer above the first and add a static text field with the text "SELECT FILE". It's best to separate the assets because it's easier to edit them later.

Step 2: Progress Bar Design

Back to the main stage, create another rounded box with a white colour and a gray stroke. This will be the progress bar. I did mine like this:

Again, press F8 and turn it into a movieclip with the name "progress". Inside the progress movieclip, create 2 more layers above the first and move the white fill into the third, leaving only the stroke on the first layer.. Rename the first layer "margin", the second "bar" and the third "mask". We're going to turn the third layer into a mask.

On the "bar" layer, create a blue rectange with the same dimensions as the fill layer, but be carefull to make it slightly bigger so that when we apply the mask we don't have holes. Place it at 0,0 and turn it into a movieclip with the instance name "bar". This will be the bar that will show the progress.

Right-click the third layer and select "Mask" from the menu. You should have something like this:

Step 3: Duplicate Button

In the library, right-click on the select button we created earlier and select "Duplicate". Name the duplicate "cancel" and in the button change the textfield's text to "CANCEL". We're making a duplicate of the select button that will be the cancel button. We'll later show only one of them in the stage.

In the main scene, create another layer above the first and place the newly created cancel button exacly at the same position as the select button.

Step 4: Dynamic Label

We're almost done with the assets. Create another text field, this time a dynamic text field and give it the instance name "label_txt". This will show the user the success message, the error message, or the progress percent. Make sure the text is not selectable.

Test the file, to see how it's going.

Step 5: Document Class

We have only one more thing to do before we begin coding; set the document class to "Uploader".

Step 6: The cCoding

In the same folder as the Flash file, create a new ActionScript file with the name "Uploader.as". The name is important for the class to be found. Begin coding the default package and import the required classes. I've used "import Flash.display.*" for speed, but once we're done, we can include only the required classes to make the file smaller.

view plaincopy to clipboardprint?

1. package {  
2.       
3.     import Flash.display.*;  
4.     import Flash.events.*;  
5.     import Flash.text.*;  
6.       
7.     import Flash.net.FileReference;  
8.     import Flash.net.FileReferenceList;  
9.     import Flash.net.FileFilter;  
10.     import Flash.net.URLRequest;  
11.     import Flash.utils.Timer;  
12.     import Flash.events.TimerEvent;  
13.       
14.       
15.     public class Uploader extends MovieClip {  
16.           
17.     }     
18. }  

package {
 
 import Flash.display.*;
 import Flash.events.*;
 import Flash.text.*;
 
 import Flash.net.FileReference;
 import Flash.net.FileReferenceList;
 import Flash.net.FileFilter;
 import Flash.net.URLRequest;
 import Flash.utils.Timer;
 import Flash.events.TimerEvent;
 
 
 public class Uploader extends MovieClip {
  
 } 
}

Step 7: Variables

We'll begin by setting a few variables:

view plaincopy to clipboardprint?

1. public class Uploader extends MovieClip {  
2.           
3.         var file:FileReference;  
4.         var filefilters:Array;  
5.         var req:URLRequest;  
6.         var tm:Timer;  
7.         var speed:Number = 0;  
8.         var currbytes:Number = 0;  
9.         var lastbytes:Number = 0;  
10.           
11.           
12.           
13.     }  

public class Uploader extends MovieClip {
  
  var file:FileReference;
  var filefilters:Array;
  var req:URLRequest;
  var tm:Timer;
  var speed:Number = 0;
  var currbytes:Number = 0;
  var lastbytes:Number = 0;
  
  
  
 }

Step 8: Constructor Function

Create the constructor function and add the following:

view plaincopy to clipboardprint?

1. public function Uploader(){  
2.     req = new URLRequest();  
3.     req.url = ( stage.loaderInfo.parameters.f )? stage.loaderInfo.parameters.f : 'http://www.cbesslabs.com'; //'http://cbess.ro/templates/Flashtuts/Flash_uploader/upload.php';  
4.     file = new FileReference();  
5.     setup( file );  
6.     select_btn.addEventListener( MouseEvent.CLICK, browse );  
7.     progress_mc.bar.scaleX = 0;  
8.     cancel_btn.addEventListener( MouseEvent.CLICK, cancelUpload );  
9.     cancel_btn.visible = false;  
10. }  

public function Uploader(){
  req = new URLRequest();
  req.url = ( stage.loaderInfo.parameters.f )? stage.loaderInfo.parameters.f : 'http://www.cbesslabs.com'; //'http://cbess.ro/templates/Flashtuts/Flash_uploader/upload.php';
  file = new FileReference();
  setup( file );
  select_btn.addEventListener( MouseEvent.CLICK, browse );
  progress_mc.bar.scaleX = 0;
  cancel_btn.addEventListener( MouseEvent.CLICK, cancelUpload );
  cancel_btn.visible = false;
 }

Let me explain what's going on here:
We're creating a new URLRequest class and set the url to the upload php file.
The line "( stage.loaderInfo.parameters.f )? stage.loaderInfo.parameters.f : 'http://www.google.com'" is a conditional, meaning that if we provide the movie the parameter f, it will set the url to the f parameter. Otherwise it will use the string hardcoded here, good ol' Google, for testing only.
We're doing the conditional so we can reuse the file. This way, we can change only the f parameter with a path to the url and it will upload to the specified url.
Next we're creating a new FileReference Object, the class handling the upload process. We're passing the FileReference Object to the function setup() which we'll later code to set up the various listeners.
Finally, we add click listeners to the select and cancel buttons, set the scale of the progressbar to 0 and hide the cancel button.

Step 9: Events

We're now creating the setup() function.

view plaincopy to clipboardprint?

1. private function setup( file:FileReference ){  
2.     file.addEventListener( Event.CANCEL, cancel_func );  
3.     file.addEventListener( Event.COMPLETE, complete_func );  
4.     file.addEventListener( IOErrorEvent.IO_ERROR, io_error );  
5.     file.addEventListener( Event.OPEN, open_func );  
6.     file.addEventListener( ProgressEvent.PROGRESS, progress_func );  
7.     file.addEventListener( Event.SELECT, selectHandler );  
8.     file.addEventListener( DataEvent.UPLOAD_COMPLETE_DATA, show_message );        
9. }  

private function setup( file:FileReference ){
 file.addEventListener( Event.CANCEL, cancel_func );
 file.addEventListener( Event.COMPLETE, complete_func );
 file.addEventListener( IOErrorEvent.IO_ERROR, io_error );
 file.addEventListener( Event.OPEN, open_func );
 file.addEventListener( ProgressEvent.PROGRESS, progress_func );
 file.addEventListener( Event.SELECT, selectHandler );
 file.addEventListener( DataEvent.UPLOAD_COMPLETE_DATA, show_message );  
}

We could omit the Event.COMPLETE and Event.CANCEL event, but I have added them just for testing. We're setting up a CANCEL event for when the user cancels the selection dialog. We have:

• an IO_ERROR event in case the file cannot be uploaded
• an OPEN event for when the upload begins
• the PROGRESS event that will update the percent uploaded
• the SELECT event for when the user has selected a file and we automatically begin uploading
• and an UPLOAD_COMPLETE_DATA event, which is a custom event triggered when the file has been uploaded and the php file has responded to the request.

Make sure you create all the event functions otherwise you'll get an error compiling.

Step 10: Browse

We're continuing with the browse function, triggered when the select button has been clicked. We have to show the dialog box so the user can select a file:

view plaincopy to clipboardprint?

1. public function browse( e:MouseEvent ){  
2.     filefilters = [ new FileFilter('Images', '*.jpg') ]; // add other file filters  
3.     file.browse( filefilters );  
4. }  

public function browse( e:MouseEvent ){
 filefilters = [ new FileFilter('Images', '*.jpg') ]; // add other file filters
 file.browse( filefilters );
}

Notice that I've added a FileFilter object inside an array and added the array to the FileReference's browse method. You can add another file type by adding another FileFilter object with a different extension. This will filter the file extensions on the select dialog so the user can only select correct file types. This is only a filename check and doesn't check whether the image file is indeed an image.

Step 11: Upload

When the user has selected a file to upload, the SELECT event is triggered. We're now calling FileReference's upload() method to upload the file to the php file on the server with the url request argument.

view plaincopy to clipboardprint?

1. private function selectHandler( e:Event ){  
2.     file.upload( req );  
3. }  

private function selectHandler( e:Event ){
 file.upload( req );
}

Step 12: Button Visibility

Les's create the open_func function. This function is triggered when the upload begins. We'll hide the select button and show the cancel button.

view plaincopy to clipboardprint?

1. private function open_func( e:Event ){  
2.     cancel_btn.visible = true;  
3.     select_btn.visible = false;  
4. }  

private function open_func( e:Event ){
 cancel_btn.visible = true;
 select_btn.visible = false;
}

Step 13: Progress

Create the progress function:

view plaincopy to clipboardprint?

1. private function progress_func( e:ProgressEvent ){  
2.     progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal;  
3.     var tf = new TextFormat();  
4.     tf.color = 0x000000;  
5.     label_txt.defaultTextFormat = tf;  
6.     label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded';  
7. }  

private function progress_func( e:ProgressEvent ){
 progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal;
 var tf = new TextFormat();
 tf.color = 0x000000;
 label_txt.defaultTextFormat = tf;
 label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded';
}

Let me explain what's going on here. We're setting the scale of the bar movieclip showing the percent uploaded. This is accomplished by dividing the bytesLoaded to bytesTotal properties of the event object. The progress event provides us with the amount of uploaded bytes and total bytes of the file.
Next, we create a TextFormat object and set the colour to black ( 0x000000 ) for the text label. We'll need this step because later we'll change the colour of the text to green or red according to the message.
Finally, we set the text field's text with the percentage uploaded.

Step 14: Error

We'll create the error function:

view plaincopy to clipboardprint?

1. private function io_error( e:IOErrorEvent ){  
2.     var tf = new TextFormat();  
3.     tf.color = 0xff0000;  
4.     label_txt.defaultTextFormat = tf;  
5.     label_txt.text = 'The file could not be uploaded.';  
6.     cancel_btn.visible = false;  
7.     select_btn.visible = true;  
8. }  

private function io_error( e:IOErrorEvent ){
 var tf = new TextFormat();
 tf.color = 0xff0000;
 label_txt.defaultTextFormat = tf;
 label_txt.text = 'The file could not be uploaded.';
 cancel_btn.visible = false;
 select_btn.visible = true;
}

Basically, we change the colour of the label text, set it to an error message and then swap the cancel and select buttons again.

Step 15: Show Message

Let's create the show_message function which will check whether the upload has been successful:

view plaincopy to clipboardprint?

1. private function show_message( e:DataEvent ){  
2.     var tf = new TextFormat();  
3.     if( e.data == 'ok' ){  
4.         tf.color = 0x009900;  
5.         label_txt.defaultTextFormat = tf;  
6.         label_txt.text = 'The file has been uploaded.';  
7.     } else if( e.data == 'error'){  
8.         tf.color = 0xff0000;  
9.         label_txt.defaultTextFormat = tf;  
10.         label_txt.text = 'The file could not be uploaded.';  
11.     }  
12. }  

private function show_message( e:DataEvent ){
 var tf = new TextFormat();
 if( e.data == 'ok' ){
  tf.color = 0x009900;
  label_txt.defaultTextFormat = tf;
  label_txt.text = 'The file has been uploaded.';
 } else if( e.data == 'error'){
  tf.color = 0xff0000;
  label_txt.defaultTextFormat = tf;
  label_txt.text = 'The file could not be uploaded.';
 }
}

Here, we're testing if the data property of the UPLOAD_COMPLETE_DATA event is 'ok' or 'error' and show a message appropriately. The data property of this event contains the server response from the php script.

Step 16: Cancel

This is the last function which will be triggered when the cancel button is clicked. This calls the FileReference's cancel() function to cancel the upload. We're also calling reset() to clean up.

view plaincopy to clipboardprint?

1. private function cancelUpload( e:MouseEvent ){  
2.     file.cancel();  
3.     reset();  
4. }  

private function cancelUpload( e:MouseEvent ){
 file.cancel();
 reset();
}

We trigger a reset() function to clean up the assets, set the text to "" and swap the cancel and select buttons:

view plaincopy to clipboardprint?

1. private function reset(){  
2.     cancel_btn.visible = false;  
3.     select_btn.visible = true;  
4.     label_txt.text = '';  
5.     progress_mc.bar.scaleX = 0;  
6. }  

private function reset(){
 cancel_btn.visible = false;
 select_btn.visible = true;
 label_txt.text = '';
 progress_mc.bar.scaleX = 0;
}

Go ahead and test the file in Flash.
For now, the upload works, but at the end we get the error message. This is because we haven't provided the path parameter, so the swf takes the hardcoded google page. As that page doesn't return us 'ok' , we get the error. We have to build the php file..

Step 17: Upload Speed - Timer

Let's show the user the speed he is uploading with. In the constructor function add the lines:

view plaincopy to clipboardprint?

1. tm = new Timer( 1000 );  
2. tm.addEventListener( TimerEvent.TIMER, updateSpeed );  

tm = new Timer( 1000 );
tm.addEventListener( TimerEvent.TIMER, updateSpeed );

We're creating a timer that will run every second and will check the speed.

Step 18: Upload Speed - Method

In the open_func() function add this line:

1. tm.start();  

tm.start();

This will start the timer when the upload begins. We'll now create the updateSpeed() method:

view plaincopy to clipboardprint?

1. private function updateSpeed( e:TimerEvent ){  
2.     speed = Math.floor( (currbytes - lastbytes)/1024 );  
3.     lastbytes = currbytes;  
4. }  

private function updateSpeed( e:TimerEvent ){
 speed = Math.floor( (currbytes - lastbytes)/1024 );
 lastbytes = currbytes;
}

This is what happens here: we're calculating the speed by subtracting the variable lastbytes from currbytes. The lastbytes variable is afterwards set to the currbytes. So, when both variables are 0, the speed is 0. The currbytes variable will hold the current number of bytes uploaded. We cannot access this directly, that's why we've created the currbytes variable. This variable will be set from our PROGRESS event where we can access the bytesLoaded property.
Lastly, we divide everything by 1024 to get the result in kilobytes and round the value for display with Math.floor().

Step 19: Final Modification

Let's add the last modification so we can go on to the php script. In the progress_func() modify the line:

view plaincopy to clipboardprint?

1. label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded';  

label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded';

with this:

view plaincopy to clipboardprint?

1. label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded '+speed+' kb/s';  

label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded '+speed+' kb/s';

Step 20: Full Code

Here is the full code for the Flash uploader:

view plaincopy to clipboardprint?

1. package {  
2.       
3.     import Flash.display.*;  
4.     import Flash.events.*;  
5.     import Flash.text.*;  
6.       
7.     import Flash.net.FileReference;  
8.     import Flash.net.FileReferenceList;  
9.     import Flash.net.FileFilter;  
10.     import Flash.net.URLRequest;  
11.     import Flash.utils.Timer;  
12.     import Flash.events.TimerEvent;  
13.       
14.       
15.     public class Uploader extends MovieClip {  
16.           
17.         var file:FileReference;  
18.         var filefilters:Array;  
19.         var req:URLRequest;  
20.         var tm:Timer;  
21.         var speed:Number = 0;  
22.         var currbytes:Number = 0;  
23.         var lastbytes:Number = 0;  
24.           
25.         public function Uploader(){  
26.             req = new URLRequest();  
27.             req.url = ( stage.loaderInfo.parameters.f )? stage.loaderInfo.parameters.f : 'http://www.google.com';  
28.             file = new FileReference();  
29.             setup( file );  
30.             select_btn.addEventListener( MouseEvent.CLICK, browse );  
31.             progress_mc.bar.scaleX = 0;  
32.             tm = new Timer( 1000 );  
33.             tm.addEventListener( TimerEvent.TIMER, updateSpeed );  
34.             cancel_btn.addEventListener( MouseEvent.CLICK, cancelUpload );  
35.             cancel_btn.visible = false;  
36.         }  
37.           
38.         public function browse( e:MouseEvent ){  
39.             filefilters = [ new FileFilter('Images', '*.jpg') ]; // add other file filters  
40.             file.browse( filefilters );  
41.         }  
42.           
43.         private function setup( file:FileReference ){  
44.             file.addEventListener( Event.CANCEL, cancel_func );  
45.             file.addEventListener( Event.COMPLETE, complete_func );  
46.             file.addEventListener( IOErrorEvent.IO_ERROR, io_error );  
47.             file.addEventListener( Event.OPEN, open_func );  
48.             file.addEventListener( ProgressEvent.PROGRESS, progress_func );  
49.             file.addEventListener( Event.SELECT, selectHandler );  
50.             file.addEventListener( DataEvent.UPLOAD_COMPLETE_DATA, show_message );        
51.         }  
52.           
53.         private function cancel_func( e:Event ){  
54.             trace( 'canceled !' );  
55.         }  
56.           
57.         private function complete_func( e:Event ){  
58.             trace( 'complete !' );  
59.         }  
60.           
61.         private function io_error( e:IOErrorEvent ){  
62.             var tf = new TextFormat();  
63.             tf.color = 0xff0000;  
64.             label_txt.defaultTextFormat = tf;  
65.             label_txt.text = 'The file could not be uploaded.';  
66.             tm.stop();  
67.             cancel_btn.visible = false;  
68.             select_btn.visible = true;  
69.         }  
70.           
71.         private function open_func( e:Event ){  
72.             //trace( 'opened !' );  
73.             tm.start();  
74.             cancel_btn.visible = true;  
75.             select_btn.visible = false;  
76.         }  
77.           
78.         private function progress_func( e:ProgressEvent ){  
79.             progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal;  
80.             var tf = new TextFormat();  
81.             tf.color = 0x000000;  
82.             label_txt.defaultTextFormat = tf;  
83.             label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded '+speed+' kb/s';  
84.             currbytes = e.bytesLoaded;  
85.         }  
86.           
87.         private function selectHandler( e:Event ){  
88.             file.upload( req );  
89.               
90.         }  
91.           
92.         private function show_message( e:DataEvent ){  
93.             tm.stop();  
94.             var tf = new TextFormat();  
95.             if( e.data == 'ok' ){  
96.                 tf.color = 0x009900;  
97.                 label_txt.defaultTextFormat = tf;  
98.                 label_txt.text = 'The file has been uploaded.';  
99.             } else if( e.data == 'error'){  
100.                 tf.color = 0xff0000;  
101.                 label_txt.defaultTextFormat = tf;  
102.                 label_txt.text = 'The file could not be uploaded.';  
103.             }  
104.         }  
105.           
106.         private function updateSpeed( e:TimerEvent ){  
107.             speed = Math.round( (currbytes - lastbytes)/1024 );  
108.             lastbytes = currbytes;  
109.         }  
110.           
111.         private function cancelUpload( e:MouseEvent ){  
112.             file.cancel();  
113.             reset();  
114.         }  
115.           
116.         private function reset(){  
117.             cancel_btn.visible = false;  
118.             select_btn.visible = true;  
119.             label_txt.text = '';  
120.             progress_mc.bar.scaleX = 0;  
121.         }  
122.           
123.     }     
124. }  

package {
 
 import Flash.display.*;
 import Flash.events.*;
 import Flash.text.*;
 
 import Flash.net.FileReference;
 import Flash.net.FileReferenceList;
 import Flash.net.FileFilter;
 import Flash.net.URLRequest;
 import Flash.utils.Timer;
 import Flash.events.TimerEvent;
 
 
 public class Uploader extends MovieClip {
  
  var file:FileReference;
  var filefilters:Array;
  var req:URLRequest;
  var tm:Timer;
  var speed:Number = 0;
  var currbytes:Number = 0;
  var lastbytes:Number = 0;
  
  public function Uploader(){
   req = new URLRequest();
   req.url = ( stage.loaderInfo.parameters.f )? stage.loaderInfo.parameters.f : 'http://www.google.com';
   file = new FileReference();
   setup( file );
   select_btn.addEventListener( MouseEvent.CLICK, browse );
   progress_mc.bar.scaleX = 0;
   tm = new Timer( 1000 );
   tm.addEventListener( TimerEvent.TIMER, updateSpeed );
   cancel_btn.addEventListener( MouseEvent.CLICK, cancelUpload );
   cancel_btn.visible = false;
  }
  
  public function browse( e:MouseEvent ){
   filefilters = [ new FileFilter('Images', '*.jpg') ]; // add other file filters
   file.browse( filefilters );
  }
  
  private function setup( file:FileReference ){
   file.addEventListener( Event.CANCEL, cancel_func );
   file.addEventListener( Event.COMPLETE, complete_func );
   file.addEventListener( IOErrorEvent.IO_ERROR, io_error );
   file.addEventListener( Event.OPEN, open_func );
   file.addEventListener( ProgressEvent.PROGRESS, progress_func );
   file.addEventListener( Event.SELECT, selectHandler );
   file.addEventListener( DataEvent.UPLOAD_COMPLETE_DATA, show_message );  
  }
  
  private function cancel_func( e:Event ){
   trace( 'canceled !' );
  }
  
  private function complete_func( e:Event ){
   trace( 'complete !' );
  }
  
  private function io_error( e:IOErrorEvent ){
   var tf = new TextFormat();
   tf.color = 0xff0000;
   label_txt.defaultTextFormat = tf;
   label_txt.text = 'The file could not be uploaded.';
   tm.stop();
   cancel_btn.visible = false;
   select_btn.visible = true;
  }
  
  private function open_func( e:Event ){
   //trace( 'opened !' );
   tm.start();
   cancel_btn.visible = true;
   select_btn.visible = false;
  }
  
  private function progress_func( e:ProgressEvent ){
   progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal;
   var tf = new TextFormat();
   tf.color = 0x000000;
   label_txt.defaultTextFormat = tf;
   label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded '+speed+' kb/s';
   currbytes = e.bytesLoaded;
  }
  
  private function selectHandler( e:Event ){
   file.upload( req );
   
  }
  
  private function show_message( e:DataEvent ){
   tm.stop();
   var tf = new TextFormat();
   if( e.data == 'ok' ){
    tf.color = 0x009900;
    label_txt.defaultTextFormat = tf;
    label_txt.text = 'The file has been uploaded.';
   } else if( e.data == 'error'){
    tf.color = 0xff0000;
    label_txt.defaultTextFormat = tf;
    label_txt.text = 'The file could not be uploaded.';
   }
  }
  
  private function updateSpeed( e:TimerEvent ){
   speed = Math.round( (currbytes - lastbytes)/1024 );
   lastbytes = currbytes;
  }
  
  private function cancelUpload( e:MouseEvent ){
   file.cancel();
   reset();
  }
  
  private function reset(){
   cancel_btn.visible = false;
   select_btn.visible = true;
   label_txt.text = '';
   progress_mc.bar.scaleX = 0;
  }
  
 } 
}

Step 21: The PHP Script

Let's build our php script quickly:

view plaincopy to clipboardprint?

2.   
3. $uploads_dir = './uploads/';  
4.   
5. if( $_FILES['Filedata']['error'] == 0 ){  
6.   
7.   if( move_uploaded_file( $_FILES['Filedata']['tmp_name'], $uploads_dir.$_FILES['Filedata']['name'] ) ){  
8.   
9.   echo 'ok';  
10.   
11.   exit();  
12.   
13.   }  
14.   
15.   }  
16.   
17.   echo 'error';  
18.   
19.   exit();  
20.   
21. ?>  

I'll just quickly sum this up (PHP isn't strictly within the scope of this tut). We define a path where we will put the file, then we check whether the $_FILES['Filedata']['error'] is 0 ( if there are no errors ). We then check if move_uploaded_file() has successfully transferred the file in the folder and we show "ok" or "error" depending on the result.
One last point: you'll have to make sure that the folder exists and it is writable before running the script.

This is the end of our tutorial. Thank you for reading, I hope you learned something!

Making of “Robot Earth 3009″ Typographic Illustration – Vector Plus Tutorial

This Vector Plus Tutorial is Filled with Creative Techniques

During this tutorial, I'll show you the process for creating one of my illustrated type posters. I love to work type into all of my illustrations for the balance and rhythm it provides to a layout, but I especially love creating images out of type itself...the graphic designer inside of me compels me to do it!

Tutorial Details

• Tools: Mechanical Pencil + Sketchbook
• Programs: Adobe Illustrator CS4 and Adobe Photoshop CS4
• Difficulty: Advanced
• Estimated Completion Time: 3-4 hours

Plus members can Log in and Download! If you're not a member, you can of course join today! You can view the final illustration below.

This is a Detailed and Professional Tutorial

Plus members can Log in and Download! Otherwise, Join Now! Below are sample images, which show some of the development of this tutorial.