Remix Rough Draft

Hey guys, sorry it’s a little bare right now. I haven’t had access to premiere with all the bomb threats, but I’ll be finishing the remix in Movie Maker (sigh).


Removing or isolating vocals using Adobe Audition

When creating a mash-up, as we will do for our video remix assignment, it can be helpful to begin with a base beat. Unfortunately, it isn’t always easy to find a naturally occurring sample that lends itself well to looping. Even in a song with a basic four bar structure, vocals often begin on an even beat, and drum tracks include fills that sound silly when looped. Adobe Audition makes it easy to remove specific aspects of a track (like vocals or percussive sounds), which makes every song a potential sample for our remixes. Check out the video below…

Under the fx tab, select Stereo Imagery –> Center Channel Extractor. Here you get the option of attenuating vocals, isolating them or boosting them separately. The center channel level adjustment bar (measured in decibels) makes it easy to play with the track levels until they are just right.

The purpose of the video was not to instruct on mashing audio tracks, but you can see how vocal removal can be a useful tool. Before you actually begin mashing, use Adobe Audition and Premiere to build a library of audio and video samples. When you’re working on a piece, it’s nice to have a palette of samples to choose from.  Happy Mashing!

Using Adobe Premier’s leave color tool

Adobe Premier comes stocked with a number of useful audio and video effects, but it can be difficult to sift through and find one that is useful in a specific instance. The Leave Color tool can be useful in circumstances which require some object exaggeration or to create a striking contrast with a gray scale background. Additionally, it can create a clean, polished look to your video without adding hours to editing time.

Essentially, the leave color tool removes (or isolates) a chosen color from the video. You begin by creating beginning and ending time markers in your video, which will designate how long the effect will take hold. Next, use the eye dropper tool, which is provided in the leave color effect toolbox to select the colors you wish to isolate. Finally, change the “match colors” option to hue rather than RGB. In real videos, colors are not very consistent in any one object. The RGB Cartesian color model assumes that one red object will have a consistent amount of red throughout the entire object, while the cylindrical HSV (hue, saturation and value) model provides better association of similarly perceived colors.

Try using the leave color tool in your videos. I think you’ll be surprised how easy and effective it can be.

Creating Fluid Flash Animation

Adobe Flash animated scenes are one way to add life and motion to your website without spending days learning new software. Each scene is built frame by frame (similar to a flip book), which makes designing your own scene a very simple process. I’ll introduce flash by using stick figures, as even the most artistically inept (like me) can create entertaining scenes using a few simple techniques. Take a look at the video below.

Adobe Flash uses layers, so if you’re familiar with Adobe Photoshop or Illustrator, mastering a few Flash techniques should be a breeze. In the video, the artist uses a separate layer for each body part of the stick figure character. This layering technique lets you treat each body part separately, which makes animating a run or any other natural motion much easier. He also uses the onion skin tool, which gives you a shadow of the previous frames. It’s easy to lose track of your character’s position when you’re twenty frames into the scene, so the onion skin tool becomes really handy for long or complex scenes.

Take a look at the flash videos I’ve posted on my website. Given, they’re not very impressive, but they do add some moving components to your site, which helps keep the interest of viewers. For the sound flash animation, i animated the head and the equalizer in the background using separate layers. This scene only required about thirty frames, but it seems fluid because it ends where it starts, with the head at the top of its path and an empty equalizer. When creating your flash scenes, make sure that your scenes have a circular design so that it seems continuous when looped.

Narrative Video, meet Quantum Physics

I chose this “Imagining the Tenth Dimension” because it uses visual tools to transform what may have been a confusing and frustrating piece of subject matter into an interesting venture into the unknown. For the majority of us, quantum physics and the concept of dimensions beyond the typical three becomes cumbersome without some way to keep track and express it. This video uses objects that are familiar to us to refer to unknown objects by highlighting the commonalities between them. Take a look:

Notice that the creators not only turned a two dimensional drawing board into a multidimensional  palette, but they also made it interesting by writing a story into the video. They tap into centuries of science fiction to transform something bizarre into something manageable, albeit still a little strange. By referencing stories that we know well, the video also makes it easy to retain subject matter that would be too dense on its own.

The sound effects used in the video also serve important purposes. They ingrain characteristics of objects in different dimensions by connecting them to action sounds. For example, when a three dimensional object is imagined at one point in time (the 4th dimension), we hear the sound of an arrow finding its mark. Whether we notice it consciously or not, the sound reinforces what we are being told; that one object is planted in time. Similarly, the sound of crimping paper is used when folding one dimension through another as in time travel (skipping in the fourth dimension by folding through the fifth dimension) to reinforce the idea of acting on a dimension.

“Imagining the Tenth Dimension” uses a narrative video format to demystify a medium which we access everyday, and leaves us some familiarity with infrequently used methods of travel through it.

Fun Flash Animation

One way to add some dynamic objects to your web site is by using Flash animation. Essentially, Flash is just a digital version of a flip book, all compiled into one stream of continuous motion. Originally, the majority of animation on the web was created using Adobe Flash. Web sites like HomeStarRunner used vector graphics and Flash to animate entire web shows, which accounted for the majority of their online content.

To begin creating your own animation, the first step is to sketch an overall motion plan for the scene. For the animation to look smooth, you’ll have to create a frame for every small change your object makes. I’ve decided to animate a stick figure man. In my scene, he will kick once, crouch and then leap up and fly away. Start by selecting the brush tool from the tools menu bar on the right and draw your object. This tool is most useful for free form drawing, as it auto smoothes your stroke to make it look more natural (no jagged edges from unsteady hands).

Selecting the Brush Tool

Next, we’ll create a new frame by pressing F6. The newly selected frame contains an exact copy of your first frame, allowing for easy editing and assuring that your object is stationary. One useful tool for building a scene frame by frame is the onion skin tool. It creates a darkened area that corresponds to the previous frame. The rest is fairly straight forward. Continue appending frames until you have a full scene, bearing in mind that the swf file will loop upon completion.

Onion Skin for Preceding Frames

To preview the entire scene (as it will appear in your browser), use the shortcut Ctrl+Enter. This will render the scene and save a copy as an swf file, which can be embedded directly into your HTML code. You can see the entire scene on my personal website.

Create Your Own Forms!

Earlier, I mentioned that you could use JavaScript to interact with forms created in HTML. “What are forms?” you may ask. Well, you just used one to log into WordPress. They’re those awesome little input/output boxes that let you talk directly to your web page (or someone else’s web page). Without forms, your web experience would be one-sided and ultimately boring. Today, we’ll quickly introduce forms by taking  a look at the Gmail login page.

Gmail Login Prompt

Below is a snippet from the source code of gmail’s login page. Clearly, I’ve removed some of the error checking and privacy settings, but the real purpose of the login page remains.



            <strong class=”email-label”>Username</strong>

             <input type=”text” spellcheck=”false”  name=”Email” id=”Email” value=””>



              <strong class=”passwd-label”>Password</strong>

              <input type=”password” name=”Passwd” id=”Passwd”>



If any or all of it is confusing, hang in there. It’s much less complex than it appears. Let’s break it down.

We already know that any object in an HTML page, whether it be a paragraph, list, etc. requires an opening and a closing, denoted by and .  The case with forms is no different. Although, notice that we can group forms together into one form and give each unique object a different name, which can be referenced in JavaScript. Each unique text form within the larger form is created within a <label> object, which allows the text box form to be selected either by clicking the label title or by clicking the text box form itself. Take the gmail login page as an example: If you click on the text “Username” or “Password,” their corresponding text box is highlighted, just as if you were to click the text box itself.

Each label also has a few attributes that have been given, like the class name (“passwod-label” and “email-label”), input type(“text” or “password,” which censors the text you enter), and the name and id (“Passwd” and “Email,” which will allow us to reference the forms in JavaScript). It is also worth noting that the form type could easily be changed to a button, checkbox or submit button (like the “Sign In” button) by changing the type to equal something else (e.g. type=”button”). Form is just a general term that refers to objects in a web page which are interactive.

Now that the HTML code has been established, we can reference them within a couple <script> tags in the source code. In the code below, we perform the simple operation of getting the text from each text box and saving them to a variable.


      function printEmail(form) {

           var text = form.Email.value;

           alert(“Email: ” + text);



This basic script creates a function which takes a form as a parameter, gets the value typed into the form (using the form Class) and creates an alert which will pop up on the screen and print the message “Email: stuffYouTyped.” In order for it to actually pop up on the screen, we have to reference the function somewhere. To keep things relatively simple, we’ll just create a simple button form below our text forms and call the printEmail() function every time the button is clicked.

         <input type=”button” name=”button1″ value=”Display Email” onClick=”printEmail(this.form)”>

Essentially, we’ve created a button, named it, given it a value (which will show up as a label for the button as in the “Sign In” button), and called our function printEmail() whenever the button is clicked. The onClick is just a feature of HTML that lets us reference our script from within HTML tags. It’s what gives your JavaScript and HTML the ability and desire to talk to each other, and good communication is essential for any relationship. Am I right? The printEmail function created earlier takes in a form as a parameter, and for this reason, we have to use the reference “this.form,” which is a simple as it appears to be. It refers to the form which is calling the function printEmail(). Now, every time you click button1, your web page will display an alert which will print whatever is entered into the Email text box. Congratulations, JavaScript has just breathed life into your web page.

Ok, so maybe it’s not all that simple, but I promise it gets easier with practice. JavaScript has the potential to make your web page interactive and unique, not to mention downright nifty. Spend a little time with it and you’ll be coding in no time.