At this event we highlighted the best student work created in Digital Media classes for the calendar year 2008.

The event was a success with approximately 125 guests, including: students, faculty, family and friends.

Samples from the show can be seen at http://www.digm.drexel.edu/2009_annual_review

Create Button

The first step is to create the button with the up and over states. Since I want my button to switch between the universal Play icon (the right pointing triangle) and the universal Pause icon (two vertical posts). I am going to create a button symbol with a generic gradation that shifts colors in its up and over states.

Create Movie Clip

Next, crate a Movie Clip with three layers, each containing only two frames.

Name Layer 1 “actions” both frames should be keyframes with the stop(); command.

Name Layer 2 “icons” again both frames should be key frames.

Frame 1 will include the Play icon Frame 2 will include the Pause icon Name layer 3 “button” this layer has the button symbol.

Drag the movie_clip from the library to the stage (if not already there) and in the Properties Inspector give the movie clip and instance name of play_mc.

Import Sound

Go File > Import > Import to Library

Locate the audio file you want to play (preferably aif, mp3 or wav). In this case I will refer to mine as importedSound.mp3.

Click OK.

You should now see importedSound.mp3 in the library. Click once on it to select it. Now that it is highlighted you should see the wave form in the top of the library panel (you can click play to test to make sure you imported the right sound). With sound file selected, click on the properties button at the bottom of the library panel (it looks like a black circle with a white i).

In the new window that pops up, click Advanced button.

Next check the “Export for ActionScript” box. It should automatically pre-populate some info for you. The one you need to check is the class name. Make sure it fits with ActionScript naming conventions (starts with lower case letter, has letters and numbers only, no spaces, no punctuation). I will name just remove the .mp3 from mine so that is it importedSound.

Now click OK. (If you click the close window button you changes will not be saved). Once you click you should receive a warning window stating that the class does not previously exist ad that Flash is going to create one. Click OK. We want Flash to do this.

We are now ready to write our script.

Write Script

Add a new layer to the main timeline and name it actions.click on frame 1 and open your actionscript window.The first thing we need to do is to substantiate the Instance of the Sound subclass importedSound as we specified in the Linkage dialog for audio file: importedSound.mp3 in the library.

var myAudio:importedSound = new importedSound();

next we set up the sound channel

var myChannel:SoundChannel = new SoundChannel();

Since we want to pause the sound on the click we need a variable to remember where the play head is in the audio file when the button is clicked.

var myPausePosition:uint;

next we start the sound playing, I am also going to the pre existing class of buttonMode to true to signify that the sound is playing and tell the movie clip to go to frame two where the pause icon is.

play_mc.buttonMode = true;

myChannel = myAudio.play();

play_mc.gotoAndStop(2);

now we need an event listener to check if the button is clicked, and a function to check if the sound is playing or not, and do the opposite

play_mc.addEventListener(MouseEvent.MOUSE_UP, myStartSound);

function myStartSound(event:MouseEvent):void {

if (play_mc.buttonMode == false) {

play_mc.buttonMode = true;

myChannel = myAudio.play(myPausePosition);

play_mc.gotoAndStop(2);

} else {

myPausePosition = myChannel.position;

play_mc.buttonMode = false;

myChannel.stop();

play_mc.gotoAndStop(1);

}

}

since the audio will not automatically loop, I will put an event listener on the channel and listen for the end of the audio. when it ends trigger a function that will stat it again from the beginning.

myChannel.addEventListener(Event.SOUND_COMPLETE, myPlaybackComplete);

function myPlaybackComplete(event:Event):void {

myChannel = myAudio.play();

}

Here is what the completed ActionScript looks like:

And there you go. A button that will play and pause an audio track.

Note: This requires that your main timeline has only one frame. If you have more than one frame you will have multiple instances of the sound playing (one being triggered ever time the playhead returns to frame 1).

Yesterday
The WWW was released by CERN for public use in 1992. Instantly, it was used as a place where companies put information for ‘easy’ public access. Mission statements, product lists, press releases, etc. The original sites were entirely textual in nature, using hypertext links to navigate from page to page.

A year later the first graphics-based web browser, Mosaic, was introduced. And still images started finding their way to the web. As connectivity speeds gradually increased, graphics became a viable option, and websites started to get more and more sophisticated.

New programming languages like PHP, JavaScript, and MySQL started appearing. These increased what we could do with the medium, and we started seeing better quality still images, audio, and video, and on-line purchasing.

By the mid Nineties, branding started to play a bigger role in web design. Companies started to focus more on the user’s experience and how it related back to their corporate image. In order to achieve optimum branding, some sites opted for the ‘cool factor’ of technologies like shockwave and flash. But this came at a price. Larger files meant slower download times, and there was the plug-in issue. Few people wanted to download a plug-in installer, run the installer, restart their browser, then go back to the site only to sit and watch a loading bar. File size and download times was a big issue when dealing with a 9600bps modem. Even though modems were getting faster, people started to move away from flash-based sites.

Today
Today, the average user connects via a cable modem that runs at 10Mbps. Verizon is just now installing Fiber Optic systems directly into houses which runs at 50Mbps. That’s five times faster than what we are currently used to.

As our connectivity speeds increase, so does the number of users and sites. Every year the number of users and the number of sites seem to expand exponentially. A recent study by Internet World Stats shows that there are over 1.1 billion Internet users worldwide. According to Netcraft, there are over 108 million unique web sites. Technorati tracks 26.6 million blogs, and estimates that there are 75,000 new blogs being created every day. That’s almost one every second.

Surfing the web is no longer a novelty, it is a part of our daily life. While there is a certain amount of “recreational surfing” going on, mainly we are looking for information, and we want to find it quickly. We want the information to be as easily accessible as possible.

Accessibility has become one of the driving forces in web design. Originally, the topic of accessibility referred to making a site accessible to people with disabilities. People with disabilities use Assistive Technologies to accomplish tasks they could not do otherwise. These technologies rely on the content of the site. Unfortunately, most websites have accessibility barriers that make it difficult or impossible for people with disabilities to use the Web. In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Section 508 was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals. One way that we, as developers, can ensure that our sites are accessible is to use XHTML & CSS. XHTML and CSS allow us to separate content from presentation, thus ensuring that people with disabilities will have no problem accessing the site’s content.

As it turns out, this separation of content and presentation does more than just make a site accessible to the disabled. It aids in Search Engine Optimization by making the site easier for Web Crawlers to index. It allows sites to be compatible with browsers, both outdated and future versions. It also helps the sites to be browse-able on multiple devices from readers to cell phones to handhelds where screen size is an issue.

We have found that with properly structured XHTML you only need to write your content once. Then, by applying different CSS Style Sheets, you can format that content for multiple browsers, or even printing.

There is another facet to recent developments on the web. Through creative use of languages like XHTML, CSS, JavaScript, PHP, MySQL, XML, and ActionScript we have turned the Internet into a�truly interactive medium where the users generate content themselves. We do this by writing blog entries to commenting on other peoples’ blogs, contributing to discussions in forums (boards), and actually helping to write and edit the actual page contents themselves in the form of wikis

We text message, audio chat, video chat, even hold video forums with multiple users. I worked with an agency on a pitch to a client where they wanted to develop a live video broadcast of a debate that would run concurrently on the screen with two separate chat rooms where the viewers could textually argue the pros and cons of the topic being debated. (This is still under development).

While the web was originally a giant repository of information, I think one of the greatest benefits of the Internet has become its ability to connect people anywhere in the world.
Social Networking: MySpace, LinkedIn, ProgrammerMeetDesigner
Photo & Video Sharing: YouTube, Flickr
Dating: eHarmony, Match.com
Job Finding: Monster.com, CareerBuilder
Trading Books, CDs, DVDs: BookIns, TitleTrader
Favorites Lists: DEL.ICIO.US, Digg, StumbleUpon

Today XHTML 4, CSS 3, JavaScript 1.7, PHP 6, MySQL 5, XML 2.0, and ActionScript 3 are either recently released or currently under development. But when we look closely at these new iterations, what we realize is that they will not bring anything amazingly new to the table. What these new versions will do is make our jobs of programming and developing websites easier.

We can communicate with servers and databases in real time. We can make interfaces and navigational systems that update themselves. There is (almost) nothing that we can’t do in a web browser that we can do in a standard desktop application. With the proper combinations of the languages previously discussed, we can develop web applications that can do practically anything.

Tomorrow
So, what does the future hold? I don’t know, and I don’t think anyone knows for sure. But what I do know is that we are no longer waiting for technology. With dual-chip processors running in the gigahertz range, cable modems being replaced with fiber optics networks, cell phones with Internet access, and high-speed wireless connections in our laundromats, the advancement of technology is becoming commonplace.

What we are waiting for now is concepts. The future of the Internet lies more in the creative minds that put new ideas together rather than our ability to break into new technologies.

One good example of this is Google Maps. We had mapping websites in the past (most notably MapQuest), but by making their APIs public and allowing anyone to interface with their system, we are now seeing maps that track everything from the space shuttle to your friend’s European flight itinerary. We are now capable of doing anything from tracking apartment availability to housing values, mapping NYC potholes to tornado paths, and all of this is now done in real time.

Google also recently released a set of Web-Apps that mimic Microsoft Office which all run entirely within your web browser. You save your files to a centralized web server so you can access these apps and files from anywhere. These applications are free.

UC Berkeley is currently working on Web OS. An operating system that will run within a web browser so that you have access to all your files, and can even run your apps from anywhere. Accessing files and running software remotely is not a new idea. But doing it within a web browser is.

The amazing thing is that the technology to do this has been around for at least eight years, possibly more. All it took was for someone to concept it. We are beginning to see people stretch the boundaries of possibility. To look beyond the conventional box and use their tools in new and interesting ways.

The future of the web depends on creative ideas and open-mindedness.

Find solutions for browser specific bugs in Internet Explorer, Mozilla/Firefox, Opera or Safari or CSS property issues,including Backgrounds, Borders, Colors, Floats, Fonts, Margins, Padding, Positioning, Text and Width/Height.

Challenge: After discussions with the client, the goals for the new brand image and site were as follows: – Develop a corporate identity that could serve the dual purpose of being both the identity for the corporation named in the show and the identity for their website. – Develop a clear and consistent navigation system for the .tv site – The design must be easy to integrate with their existing database system. – Client wanted to add both a Blog, Forums, and a Store Front to the website.

Results: The website promotes the Genesis Inc. identity and is now a useful tool for generating revenue. The client now proudly promotes their content and are generating more and more hits every day.

Check it out…

How can I use RSS?

At GetUSB.info we receive emails from time-to-time asking about the RSS feed feature we provide and how it can be used. Today we are taking a few minutes to cover what an RSS feed is, how you can use it, what you need and how to validate the ones you subscribe too.

1. What are you going to communicate?
2. What is your criteria for success?
3. Who is the audience?
4. What technologies is the audience using?

The answers to these questions will help you stay focused on your end goal, building a successful website. Once you have these answered you can then move on to deciding how to develope the look and feel of your site.

Types of Web Design Layouts

Below are the basic design layouts that most websites adhere to. If you find a website that does not fall under any of these categories, please let me know.

• Classic Inverted L
  
• Top Header
  
• Side Navigation
  
• Box
  
• Header – Content – Footer
  
• Left or Right Justified
  
• White Space (No literal grid)
  
• Full Design (no room for white space)
  
• Middle (Top to bottom centered)
  
• Horizontal scrolling
  
• Unconventional
  

Principles of Design

1. Emphasis and Contrast
   This tells the viewer what is most important. They can help you persuade the viewer to pay more attention to one item over another. Here are a few ways to place emphasis on certain items.
   • bold
   • bigger
   • italics
   • contrasting color
   • effects
   • shapes
   • boarders
   • white space
2. Importance of a Grid
   Having a consistent and predictable design is vital to having a well-designed site. Grid systems provide an order to webpages so users can immediately identify how to interact with the site. It communicates to users that there is a master plan at work, that the developers of the site have spent time figuring out how to bring order to their information to best suit the viewer.
3. Visual Direction
   This describes the way the eye moves across the screen. Understanding how to control this will help you give impace to the items of importance on your page. On pages that have no contrasting elements, peopl typically follow the standard reading path of left to right, top to bottom. But by utilizing of the tools that allow you to emphasize items (making items larger than others, contrasting colors, etc…) you can break this folw and create your own.

   Ways to control Visual Direction:

   • When laying out a page and working on emphasis think about the path the eye will take.
   • Cluster similar items together (ads, navigation, text, etc.)
   • Think of text as visual art

Influence vs. Plagiarism

When designing a website, most people start surfing the web or browsing through web design books and annuals. This is fine, but flat out copying the layout and colors is plagarism. Instead, try to understand why a designer uses a specific layout, color scheme, or image style. Attempt to get inside the head of the designer and deconstruct the thinking process behind choosing that specific layout. Don’t just mimic the layout, apply the same thinking process when developing your website.

]]> http://www.finamoredesign.com/2006/06/29/a-guide-to-creating-a-successful-web-layout/feed/ 0 http://www.finamoredesign.com/2006/06/22/color-theory/ http://www.finamoredesign.com/2006/06/22/color-theory/#comments Thu, 22 Jun 2006 19:51:53 +0000 troy http://www.finamoredesign.com/FinaBlog/?p=20 Color Theory is one of those subjects that takes years to fully understand. Some people have even turned it into a career. Here I will try to cover some of the basics theories of Color Theory and show you some ideas you should think about when developing designs of your own.

Primary Colors

There are only three primary or true colors. Red, yellow, and blue. Mixtures of these three colors can produce almost any other color (excluding specialty colors like metallics, fluorescents, etc.)


Secondary Colors

A simple 50/50 mix of any two of the three primarys will result in what we call the Secondary colors; Orange, Green, and Purple.

Red + Yellow = Orange
Yellow + Blue = Green
Blue + Red = Purple


Tertiary Colors

The third step away we call the Tertiary colors. These are created by a 50%/50% mix of one Primary color and one of that Secondary Colors that resulted from a mix of that Primary Color. Therefore, there are 6 tertiary colors.

Red + Orange = Vermillion
Red + Purple = Maroon
Blue + Purple = Violet
Blue + Green = Aquamarine
Yellow + Green = Chartreuse
Yellow + Orange = Marigold
The names of the tertiary colors are subjective)


Black & White

Contrary to popular belief. Black and White are not colors. White is a tint. Black is a shade. We do not use them to create new colors, only to lighten and darken existing colors.

Color Schemes
While there are an unlimited number of color combinations you can use, there are 6 basic categories of color schemes that most people will agree usually net in a harmonious color system.

Analogous

Analogous color refers to colors that are adjacent on the color wheel that show only a slight variance, like; yellow, chartreuse, and green.


Complementary

A complimentary color system uses the two colors that are directly opposite each other on the color wheel (red & green or blue and orange)


Split Complementary
A split compliment utilizes one color and the analogous colors of it’s compliment. An example of this would be using Red, Aquamarine and Chartreuse.


Monochromatic

A monochromatic color system uses a single hue that varies in value, by adding various amounts of black and white.


Tetradic

A tetradic color scheme is a combination of four colors equally spaced on the color wheel. Starting with any color and moving 90 degrees along the color wheel you will produce 4 colors that are well matched.


Triadic
Tetradic color schemes use three colors equally spaced on the color wheel. The mos common used triadic color system is the primary colors. But by starting with any color on the wheel and moving 120 degrees to select your other two colors, you are guaranteed a well balanced palette.


Psychology of Color

Color means different things to different people, knowing the culture of your audience will can help you establish how the site will be interpreted by your viewer.

In America, blue is for boys and pink is for girls, but in China, blue is for girls, black is for boys. Green makes people think of money, health, and tranquility, and in Japan yellow means cheap. Pretty much universally, orange and red make most people hungry while blue is an appetite suppressant.

An independent study was done asking thousands of people world wide their reactions to color. The majority of the people surveyed had the following reactions to color (remember, these results are majority rules for the world, not for every specific culture):

Yellow: Happy?Red: Sexy, Powerful, Good-tasting
Blue: Dependable, Favorite Color
Purple: Dignity?Green: Good Luck, Nausea
Orange: Least Favorite Color
Brown: Inexpensive
White: Pure, Deity
Black: Mourning, High Quality, Bad Luck
Silver: High Tech
Gold: Expensive

Designing for the color blind
Most people don’t realize this, but 1 in 12 have a color deficiency (8% of males & .5% of women) The most common form of color blindness is red green color blindness, which is the inability to distinguish between them. This is a good reason to avoid putting red type on a green background. Aside from being hard to read, if you do use this combination, it is likely that 1/12 of you audience will only see a solid color field and not see the text at all.

The higher the contrast between the text and the background the easier it will be for your audience to read. To determine if you have enough contrast between text and background, view your layout in grayscale or make a black and white printout.

Websafe Colors
All of the information above regarding color mixing is great for mixing paints, but now that you are on the computer how does it apply? Your monitor displays RGB color. This means that your monitor’s pixels use a combination or Red, Green, and Blue to create the color spectrum visible on the screen.

If you play with your color sliders you will see that 100% Red and 100% Green actually creates Yellow and 100% Red and 100% Blue creates Pink. This seems a bit contrary to what we have previously discussed, right?

In reality, color is visible to us in two ways, as light, and as a pigment (the reflection of light). While the mixing of pigments results in darker colors, mixing light results lighter colors. Stated another way, White light is a combination of all colors, and black is the absence of light.

Every monitor produces colors differently, every computer changes the way the monitor displays it’s color, and every web browser again changes the way color is displayed. Now, with all this variance how do we guarantee that the specific color of, say, vermillion, that i want on my webpage will look the same on every computer, every monitor, and every web browser? The truthful answer is, you can’t. But, the web community has developed a system call WebSafe Colors that breaks down RGB mixes into 216 uniquely identifiable colors. Based on the hexidecimal system, we can use pairs of 0, 3, 6, 9, C, or F for each of the three RGB colors to identify which color we want to use, and rest knowing that the color variance will be so minimal, it should be nearly unrecognizable to the naked human eye. For example, Orange=FF9900 (Red=FF, Green=99, Blue=00), and to simplify things, since websafe colors are all pairs, in CSS to identify the same Orange we could just write F90.


The only real problem I see with this system is that we are knocking a palette of millions of colors down to 216. This is a very limited color palette.

There are some issues to keep in mind wether using websafe color codes or not. While color codes in html and css will net the same result as an index color coded into a gif image, jpg files use rgb and you may get color shifts if you are trying to match up a solid color in a jpg with a solid color in a gif or in html.

]]> http://www.finamoredesign.com/2006/06/22/color-theory/feed/ 0