Political Remix

Dear Class,

Here is a link to my remix: http://www.steph.composingdigitalmedia.org/students_2012/danalayne/remix.html

I hope you all enjoy it!  I made it to go along with the work I’m doing for my independent project.

 

Advertisements

Unexpected in surprises in Video Remixes from Everythingisterrible

Since the topic of my video remix will continue our theme of defamiliarization, I want to talk about a site that has helped me find ways to use quick transitions and audio effects to defamiliarize the components of the remix.  everythingisterrible.com is completely full of video remixes that riff on past culture through fast-paced videos that surprise and entertain.

Take the first video for example, which remixes ads and television specials from 1985, creating a wonky, drug-induced depiction of the commercialized media industry in the 80’s.  The quick-cut ads, overly energetic, flash through as if to mimic the changing of the television channel, but the effect is to overwhelm and surprise.  The montage of advertisement jingles juxtaposed next to the head “playing” the cassette tape suggests that viewers might be “plugging” their minds into media, essentially distorting and defamiliarizing the everyday ads that show up on our television screens, thereby forcing us to consider our relationship with media.

I just chose to talk about the first post, but http://www.everythingisterrible.com/ is filled with great examples of creative video remixes that cover a huge range of topics, all just as unique and unpredictable.


Animation Alternative to Flash, CSS3, but 1/2 as complex as Javascript

Flash doesn’t load on all browsers, CSS3 has serious limitations, and Javascript is like a foreign language.  Is there an alternative, something easier to digest, but just as effective?  I would say the answer to this situation is jQuery.  jQuery is a JavaScript library that simplifies code, and, did I mention that it’s a free resource found here:  http://jquery.com/ . It comes with tutorials and information that explains the concept better than I can understand it so far (this is ideal for those of us that are learning, as it is about as difficult as learning ActionScript, but seems to have lots more possibilities).  Learning jQuery is the same as learning CSS, and I’ve found that finding tutorials is the easiest way to explore the different kinds of animations that are possible with jQuery.

Right now, I’m working on an effect that forces the user to interact by hovering over an image to reveal text.  With this code, you can control the speed of the transition and the effect.  It modifies HTML elements, so it’s an easy plug in for a web site built from HTML and CSS, unlike flash, which often requires an entirely flash-made web page to involve elements over the entirety of the page.  With jQuery, I can make changes to already written code in order to get the exact effect I want.  Let’s look at some code that will allow us to get these elements interacting with our web users:
First, begin your document with the following code:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script&gt;

<script type="text/javascript">
$(function() {
 $('ul.hover_block li').hover(function(){
 $(this).find('img').animate({top:'350px'},{queue:false,duration:500});
 }, function(){
 $(this).find('img').animate({top:'0px'},{queue:false,duration:500});
 });
});
</script>
<style media="screen">

/*This looks complicated, but isn’t if we break it down. All jQuery starts with $, and the code tells the web site to function when the mouse hovers over ul (unordered list, this is a HTML basic), the image will move to a different position. This is basically like the animation commands I gave in CSS3 code last week. The third line of code tells (this) the web site to find “img” on the hover and animate it(in the page{from the top, move 182 px}. The duration measures how quickly the image will slide. To increase the speed, you should decrease the duration. To slow down the movement, you should increase the duration. The next part of this code is CSS:*/
ul.hover_block li{
list-style:none;
float:left;
background: #fff;
padding: 10px;
width:300px; position: relative;
margin-right: 20px;
}
ul.hover_block li a {
display: block;
position: relative;
overflow: hidden;
height: 474px;
width: 300px;
padding: 16px;
color: #000;
font: georgia;
}

ul.hover_block li a { text-decoration: none; }

ul.hover_block li img {
position: absolute;
top: 0;
left: 0;
border: 0;
}
/*This establishes the positioning of the page and the attributes of the elements. ul.hover_block li refers to each of the images on the web site that jQuery tells to move on hover*/

</style>
The last part is the easiest, the HTML:
<ul class=”hover_block”>
<li><a href=”index.html”><img src=”image1.gif” alt=”alttext” /> Words you want to appear on screen</a></li>
<li><a href=”index.html”><img src=”image2.gif” alt=”alttext” /> Text that you want to appear on screen</a></li>
</ul>
So you can see, with just a little extra code at the beginning and a reference to a very useful Javascript library, you can make any element on a page animated, providing an extra engaging experience for web goers that will work for almost every browser.


Wanna make your site WIGGLE!?

I know what you’re thinking… a late blog post!?  But sometimes learning really jazzy CSS3 animation effects takes a little time!

You can make a CSS rule that you can apply to your site elements.  Let’s look at some code:

@-webkit-keyframes:  Defines the various states of animations when the link is hovered.  For example, at 10%, move the image slightly (translate) and rotate (degree).

@-webkit-keyframes shakeHeader {
 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

Next, make an id that triggers the shakeHeader animation (defined above), as the user hovers or focuses on the element.  

#header-container:hover,
#header-container:focus {
 -webkit-animation-name: shakeHeader;
 -webkit-animation-duration: 0.8s; /* This is how long the animation runs */
 -webkit-animation-iteration-count: infinite; /* Continues animation infinitely until the user navigates away from the element */ 
 -webkit-animation-timing-function: linear; /* Moves through states of animation in linear fashion */

}

Since we defined this for #header-container, all headers across the pages will exhibit the SHAKE/WIGGLE animation effect!  Enjoy that wigglin’


Narrative Videos on Objects

For my narrative video, I was especially interested in how objects can be used to tell a story, but I found relatively little by way of example on the Internet.  My real question is how can an audience perceive a story intuitively from close up visuals and the tone or style of music playing in the background?  So in my first example, I found a video that takes beautiful shots of Pittsburgh to characterize the area:  http://vimeo.com/20939614

In this video, there are no characters, but rather composed shots and scenes that give viewers the feeling that they are exploring a city.  Instead of a traditional storyline, the audience must gather information from scenes and stitch them together to better understand a place.  The time lapse gives a feeling of timelessness that draws you out of any coherent storyline, but rather brings you into the scene and draws attention to the details and specificity that make Pittsburgh an interesting city.  Pittsburgh is the main character in this video.

The second example (http://vimeo.com/29938326) is different because it features a montague of fast-paced scientific “objects” that visually impress the viewer and a voiceover that ruminates on a quote that explains the wonder of science and technology.  We see character in the voiceover, but it is the objects and images that are defamiliarized in a way that makes them fascinating.  In a way, these objects and formulas and their fast-paced movement are meant to emulate the nature of technology to quickly change faster than most people can keep up with.  These objects are meant to mezmorize the viewer so that the quote (and the enthusiasm from the voiceover), really is astonishing.  Without them, the video would be boring and pointless.  But since the form the objects take in the piece follow their function, it works to keep an audience interested the whole time AND afterward. 

For my video, I’d like to find a way to use objects to tell or characterize a person or a relationship.  How can images monopolize the whole video, but still carry as much weight as a full-fledged traditional narrative?  By choosing the right objects (the kind that the viewer can infer a story from), and the right music for the mood of the piece, a video with few people/characters can have just as much emotional impact on an audience. 

 


Pretty Lights? Let’s talk about pretty sites!

Greetings free-media lovers! 

So, I’ve been thinking about the structure of my web site, and I’m obsessed with the concept of a full website on one web page, like Interview Magazine’s page, but I found a site that accomplishes this in an extrememly interactive way:  http://prettylightsmusic.com/#/home

Pretty Lights is an electronic hip hop artist/code artist that basically uses his web site as a platform to “sell” his music.  I say sell in quotations because like Radiohead’s In Rainbows, Pretty Lights offers his music for free (donations accepted), claiming all interested net-users as his audience.  He is a great example of how the media industry can function in the digital world with free distribution, but also gain financial success through festivals and fan bases built from the simple formula for real capitalism:  a good product and a way to get that product into the public eye.  Pretty Lights’ catch is his web site, which the viewer can explore in a nondistracting way.

My favorite part about the site is the way the links are set up in relation to the layers of art in the background that move according to where you hover your mouse.  The layers add depth to the site, and the tree and lamp posts, jutting out from the center, provide a vertical eyeline that balances the page, dividing it into two.  The links then shoot horizontally across the site.  When the viewer clicks the link, not only does the button shift color according to the tri-color scheme, but it drops down to show the page underneath.  This site is an interactive piece of art.  The surfer never has to leave the page if he or she doesnt’t want to, and all the site’s important information is easy to navigate, seamlessly floating down in front of your very eyes. 

Now when I looked at this page, I assumed the code would be a billion pages long of complex elements that I didn’t understand, but the souce code is short, and utilizes ShockwaveFlash to create an interactive experience.  I’m fascinated by this type of layout and find animation on web pages (if it’s done right), a great way to bring the viewer into the site.  Even the right eyeline can jar a web page surfer out of the monotonous experience of clicking through one-dimensional web sites.  It also helps that said web site offers tons of music with album art that you can flip through like iTunes… except that it’s all free.


A great web site!

The web site I want to talk about is Interview Magazine’s homepage, which can be found here:  http://www.interviewmagazine.com/#/

I like the way this homepage looks because it reflects the style of the magazine, which is very image-heavy, but I think some people may find the amount of content on one page overwhelming.  I think it works because there is still a side bar of links to navigate sections of the page (i.e. FASHION MUSIC GALLARIES FILM CULTURE ect), and they link to anchors in body of the web page, meaning it is one full menu page.  This is a nice feature because if you know exactly what section you’d like to read about, you can click a link and it takes you to that part of the page, but if you just want to browse, all you have to do is scroll.  Viewers might leave the page right off the bat if they just saw a page of links, but didn’t know where to go.  The pictures, which are beautifully shot, draw the eye right to the features.  I also like the direct links to profile articles, and the pictures do a great job of getting me to want to click further.

One of the best features of this site, in my opinion, is the news twitter scroller.  These are the magazine’s tweets, but in case you don’t follow @interviewmagazine, web site trollers can see up to date news and links.  There seems like there’s so much more I could talk about with this layout.  As you continue to scroll, big black boxes with section headers switch from the left to right side of the screen.  I think this is genius because your eye has to cross over the images down the center of the page.  This is a very interactive web site and it is absolutely filled with cool things to see.  I love the large video player because you don’t have to enlarge it to full screen.  It’s ready to go, embedded directly into the page.  The blocked images and text stick to a basic theme, and the black and white colors are not distracting.  The magazine itself is filled with often shocking and personal images of people, and the web page uses portraits in the same way, but has the advantage of one interactive layout… and no word count!