New Media Archive '97

Student Gallery

Zytkiewickz

Tijerino

Breaux

Clark | senior project description

i Video

We will be watching videos by Bill Viola, Gary Hill, Cheryl Doneagain, Tony Oursler, and Sadie Benning, among others as examples of fine arts video. We will also be watching segments from HBO and commercial televison and cinema for formal critique.Due to the small format and target venue, titles are not recommended.Begin by spending as much time as possible with the camera. Experiment. Shoot what interests you, what is around you. Remember the drifting, floating bag in the movie 'American Beauty'?Download/offload segments of this footage and experiment in Premiere or Final Cut Pro. Utilize compositing techniques, fades, cuts, dissolves, slow and fast motion effects and transitions.
Ultimately only use an effect if it enhances the content.The duration, content, and style of the video is up to you. There can be a series of related shorts, or one longer piece. Audio is an often overlooked element, and will make or break your work. 3 excellent links:
ifilm.com
newvenue.com
vdb.org Your final step is to compress the video for the web and place it on a webpage. The user should be able to select an link and see the movie open up in a fitted window, preferably in the center of the screen.

The link for DHTML fitted windows is here at www.dhtmlshock.com

Desktop Project

Subject matter: desktop iconography,forms,menus, rollovers, perhaps in a subversive or unpredictable way (see the handout for examples- visit the sites mentioned as well).

Use screen shots to gather source material. Be creative.Requirements/options:3 to 5 robust flashed web pages, linked. Minimum 5 rollovers with animation, dropdown menus, links.5 to 10 more basic flash or html pages linked.10 to 15 images put together in photoshop and printed, exhibition quality. Include an artist statement, and a list of 5 artists you can discuss in terms of their influence.

Related Artists

 

Gamet Hertz | from Web Work : A History of Internet Art Artforum May 2000

Natalie Bookchin | from Web Work : A History of Internet Art Artforum May 2000

 

Exquisite Corpse

Look up the definition of exquisite corpse. Note the context in which the first surrealist drawings were made.

Each course level will have limitations or specific technical objectives, such as the use of scrollers, video, and audio.

Interpret the body part you have selected: Possibilities include video stills, animation, lateral and hierarchical web links, text, abstraction, metaphors, and a mix of traditional and electronic media - such as video, audio, photography, drawing, painting, printmaking, and collage.

Individual student bodypart links will be displayed on a macro interface for the final.

NOTE: the links below link directly to a swf...This will not work in exlorer

Environs

Each section will interpret this differently depending on skill level, number of people in your group, and time constraints.Your section will decide on the interface, the macro/micro elements, linking, and navigation.Your microenvironments will be web-rooms, areas of distinct mood, feeling, and appearance. The user must navigate through these actively or passively, from environment to environment, from macro level to micro. Reference Tufte for ideas on flatness, layering, and macro/micro relationships, and note use of lateral and/or hierarchical navigation.Consider animation, video, and audio. Level 1 starts on this midterm.
Level 2 students start on this at midterm as well, after developing web spaces.
Level 3 and 4 start immediately.

Interior/exterior

Create two environments, either representational or abstract, that deal with contrasting exterior and interior environments. Level

1: consider adding the elements of motion graphics, speed, acceleration, and tempo, to the concepts covered in the first half of the semester.

A good way to begin would be to create two images/environments in Photoshop, and bring them into Flash.

Size is a consideration: proportions should not exceed 550 x 400 (the default stage size in Flash) but you can alter this to be any format – long, skinny, tiny…use your imagination.
Imported jpgs should be no more than 30k; Try to keep the size of your final movie to 100k or less.

Load and unload movie commands will aid you in linking smaller movies into larger user experiences.

Consider contrast: Interior/exterior, top/bottom. Wet/dry, dark/light, up/down - and process: collage, creating images from scratch, using a camera or camcorder. Hunt for ideas and images.

Student artist Statement/Alex Podesta "Pine" New Media 1, Semester 1. I tried to explore the interior/exterior theme of this assignment in a number of ways. The most obvious is the dichotomy of the scenes - the first is of the exterior of a house and the second is of the interior of the same house. Eachscene focuses on a physical window - the first framing and then zooming in on an exterior view of the window and the second sticking on the interior view of the window. Each scene reinforces the window focus by using "window-like" framing elements. These "window-like" framing elements become buttons that further explore the interior/exterior interplay by acting as the links or doorways between scenes. To a minimal degree, the interior/exterior theme is reinforced by the presence of differing soundtracks for each scene. Influences for this piece are a little difficult to talk about because they are not really all that evident in the finished product. Aesthetically I was trying to borrow from the same visual vocabulary used by Vincent Gallo in "Buffalo 66" - i.e. cold exteriors, dusty interiors and extensive use of stills. Thematically the piece grows out of the melancholy affinity that people often form for certain periods of their past but I think this part is at best only hinted at.

Webspace

Create a home base/webspace/website/ for research and experimentation.
Consider this site as a sketchbook or idea warehouse. _levels 1 and 2Site contents must include an index, statement, portfolio, contact and links pages.
Do not use flash until the page works graphically, without animation. Examine how pages are created on other sites.
Analyze the navigation strategies. Define the site’s emotional center using Hillman Curtis’ method presented in his book,
Flash Web Design. Experiment with bg images, rollovers, drop down menus, named anchors, email links, image maps,

For the initial demonstration we will define a site in Dreamweaver, and create an empty, titled, index.html page. Rename and save this page as links.html, portfolio.html, contact.html and statement.html. Link them together with simple text/html links so you can navigate from one to another. I will demonstrate this in class, along with other template techniques.

The more simple sites you create, the faster you will learn, and the easier it will be to incorporate more sophisticated techniques._all levels: Investigate the links in my link section. Think about the the web/virtual/monitor environment as an installation space or exhibition venue. Consider working outside the computer monitor in installation, broadcast, audio projects.

_notes Having a web presence necessitates an understanding of many different technologies and WYSIWYG programs: Macromedia and Adobe products, javascripting, actionscripting (Flash), Browser characteristics and limitations, and platforms. This requires constant research, experimentation. development, and application. _popup windows Sooner or later you need to open an image, a movie, in another window. Getting rid of borders, having the window appear in a particular place, having the image or movie fit correctly in the window...these are issues addressed by different technologies. the DHTML link below is a nice solution, but is designed for a text link, and it takes some knowledge and tweaking to make it work for an IMAGE MAP or THUMBNAIL image. OPEN PICTURE WINDOW FEVER is a dreamweaver extension that works well for thumbnails.

http://www.dhtmlshock.com
1 Keep in mind this creates a text link. Clickable thumbs, image maps will have to be tweaked
2 the correct pathname to the file is important. remember, you can change this in dreamweaver.

_dreamweaver notes 1 The best resource to begin with is the macromedia site. There you will find extensions, tutorials, and forums.

2. Extensions will augment the standard toolbox that came with the program. Learning to download and use extensions will increase your productivity.

3. The new media enterprise is often one of working alone, using tutorials, manuals, and experimentation in order to learn.
When you have a problem the best thing to do is go to an online resource, a forum, where you can post your question. Usually, within a day or so you will get answers from the group.

4. Information on this page will continue to expand. It is Dreamweaver specific. Information on javascripting, xml, browsers, will be found on the notes/web section of this site. _text Style sheets (CSS) provide the most control. The cleanest generic html font I have used is geneva 1 point. It does not blur like verdana does in some resolutions. PC does not support geneva, and converts to arial. _image maps potential problem. If you create library items using image maps, name them with unique names. If you do not, then upon dragging them into a page, they will be confused with image maps already on that page, resulting in image maps placed in the wrong areas or not working. You can name image maps in the properties window. You can name tables and layers as well to avoid confusion. _remove underline on links put the following code in between the head tags:
<style><!--
A { text-decoration:none }
//--></style> _Change color on rollover put the following code in between the head tags:<STYLE type="text/css">
<!--
A:hover { color:red }
-->
</STYLE>for more on this go to:
www.smartwebby.com/web_site_design

_back-to-top anchor not taking you all the way to the top? remove the 'paragraph' format at the top and change it to 'none'

_library items and templates using these can save you immense amounts of time. Learn to use them.

_define your audience This will affect your design decisions, connection speeds, page sizes, browser limitations.

_define the emotional center of the site Use Hillman Curtis' method of defining the three most important ideas driving your work. This allows you to coordinate the elements and principles of design present in your site : emphasis, unity, contrast, movement....

www.macromedia.com/support general support area.
macromedia.com/dreamweaver/ Forum for designer/developer.
/webmonkey/ developer resource. tips.
www.adobe.com/web/tips tips from adobe software co.
javascript.internet.com/ free javascripts 

_tips 1. Build up your font library and obtain a font juggler of some sort for your system at home.

2. Get a copy of the extension used to get rid of the line created around a link that has been clicked - my copy is called IE Link scrubber and came with "Dreamweaver 4 Magic". This does wonders for the look of your site.

3. Visit linkdup.com frequently and get on their mailing list.

4. Sign up for user forums and daily mailings on the Macromedia and Adobe webistes, for example Dreamweaver, Flash, and Photoshop. The sooner you overcome the technical learning curve, the sooner you can spend your time making art. This involves an investment in time and effort. Some of the most noted new media artists and theorists have worked as web designers and programmers. The integration and understanding of design, fine art, scripting, 3rd party software, multiple platforms, and many other elements allows you to communicate effectively.

5. Research typography and page layout. Experiment with javascripting, actionscripting, and css styles. Learn as much as you can about video, audio, and 3d.

6. Read theory to contextualize your artwork. Write and re-write your artist statement. This section does not try to take the place of the many online resources that provide tutorials and downloads. It is a place for notes on various things that come up during class or working with Flash. _flash is used not just for effects and animation that provides visual interest, but for the layering of information, as described by Edward Tufte in Envisioning Information.

Example: Folder tabs instead of scrolling down long html pages. Or panel scrollers. Or sliding panels, or the text scroller you may be using throughout this site.

What we will discuss is the application of these technologies. Are they appropriate to the work? Trendy eye candy or efficient navigation aids? _flash text

1 Use a pixal font and follow directions that come with the font or are on the font website (listed on the previous teaching page under fonts) 2 if it is blurry on one side, try center justifying the alignment, or snap to pixal/object. Make sure there are no fractions when you select the text and view the placement coordinates. Sometimes however - you can break this rule and add .5 to the placement if the 0 0 coordinates still apppear fuzzy.3 In some instances you make it dynamic and save the outline4 Scrolling text fields are dynamic text. The cleanest dynamic font is geneva 10 pt for mac. Unfortunately, PC doesn't have geneva, so it converts to arial, which nis less pleasing. You can also make the scroller using a panel. See components in the flash library. _preloaders When you do incorporate flash into your web experience, you will need a preloader to let your audience know the loading status of the page content.

There are many recipes for preloaders. I use two on this site, one from Flash MX magic and one from flashcomponents.net (there are 2 at that site: one called loader, the other preloader). There is also one listed in the Peachpit Press Advanced Flash bookRegardless of which you select, be sure it utilizes the new 'get bytes loaded' command, and not the 'if frame loaded' command previously in use, and now not supported. Once you create one that works, it becomes a library element that you can drag into the first frame of every movie you make.instructor note: see hypermedia_spring_2002/grodner, jarrel, reneau for examples of student sites