ART420 Viscom III: Demos

Popup Windows

Hello Class,

I'll try and give more instructions later, but you can download the HTML & Java Script code to make your own popup windows.

Download popup.zip

Posted at 05:28 PM in Demos | Permalink | Comments (0) | TrackBack (0)

What you'll need for 04.24.09

Hello Class,

You will need the following files for today's short demos. Also, thank Megan for these examples.

Download Movie_Demo.zip (53045.6K)

Download Preloader_Demo.zip (2332.6K)

See the working example

Posted at 11:57 AM in Demos | Permalink | Comments (0) | TrackBack (0)

Stuff you will need for 04/20/09

Hello Class,

You'll need to download the following files for today.

Download Demo4_flash.zip

Posted at 11:54 AM in Demos | Permalink | Comments (0) | TrackBack (0)

In class assignment (sort of)

Hello Class,

DUE before the start of the next class! You will need to do the following:

Create a Flash animation that has 50 Frames.
Initial text must rotate into the screen on a path and be resized.
Fade the initial text to 0% after it has come into the screen.
Fade new text already in the screen from 0% to 100%.
Shape tween the text to a solid color background.
Transition in the word "FIN".

I will briefly re-demonstrate how to do each of these functions today in class. Also, if Everyone in class actually makes up some kind of interesting story in those 50 frames, I'll bake cookies again.

Posted at 11:42 AM in Demos | Permalink | TrackBack (0)

What you will need for 2.1's class

Hello Class,

Download THIS FILE and have it ready for when we finish critiquing the initial pages.

Posted at 01:00 PM in Demos | Permalink | TrackBack (0)

Stuff to reference for 1.30

<html>
<head>
<title>Centered Image</title>
<style>
div.wrap {
width:500px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
/* notice the following numbers are exactly half of the width and height listed above. this needs to stay equal. for example if your div box width was 800px and height was 600px, you need change the margin left and margin top to -400px and -300px respectively */
margin-left: -250px;
margin-top: -100px;
background: #ff0000;
}
</style>
</head>

Posted at 09:49 AM in Demos | Permalink | TrackBack (0)

Stuff you'll want to reference for 1.28's class

<html>
<head>
<title>Div Tag Demo</title>
<style>
body, html {
text-align:center;
margin: 0;
height: 100%;
background: url('http://students.garyrozanc.com/backgrounds/repeat.jpg');
}

div.container {
width: 500px;
height: 100%;
background-color: #FFFFCC;
margin-top: auto;
margin-left: auto;
margin-right: auto;
position: relative;
}

div.header {
width: 500px;
height: 150px;
position: absolute;
background-color:#000000;
color: #FFFFFF;
text-align: left;
background: url('http://students.garyrozanc.com/backgrounds/banner.jpg');
background-repeat: no-repeat;
}

div.nav {
width: 100px;
height: 300px;
background-color:#000000;
margin-left: 400px;
margin-top: 150px;
position: absolute;
color: #FFFFFF;
text-align: right;
}
</style>
</head>

<body>
<div class="container">
<div class="header">HEADER</div>
<div class="nav">NAV</div>
</div>
</body>
</html>

Property	Description	Values
margin	A shorthand property for setting the margin properties in one declaration	margin-top margin-right margin-bottom margin-left
margin-bottom	Sets the bottom margin of an element	auto length %
margin-left	Sets the left margin of an element	auto length %
margin-right	Sets the right margin of an element	auto length %
margin-top	Sets the top margin of an element	auto length %

Value	Description
static	Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations)
relative	An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
absolute	An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties
fixed	An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

Posted at 10:00 PM in Demos | Permalink | TrackBack (0)

Things you'll need for 1.23

Download these files to your desktop for today's demo. You'll find completed HTML files as well as images. These HTML files are for reference only! If you don't following along with the demo you aren't going to pick this stuff up!

Download Demo2.zip (84.8K)

Posted at 09:18 AM in Demos | Permalink | TrackBack (0)

Demo files from 1.21's class

Hello Class,

You can download the files from today's class, including complete HTML and CSS code to look at if you had problems with your page today.

Download demo1.zip (8.6K)

Posted at 10:25 PM in Demos | Permalink | TrackBack (0)