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).

Read the text in his notebooks via Project Gutenberg or on Interconnected.org

Identity design (logos, letterhead, web sites, etc.) is one of the most popular topics in design books, and Identity Crisis takes a fresh look at this common subject by exploring the process of redesigning existing identities to help businesses refine their images, communicate with customers, and find success. Readers will get an inside look at the challenges of redesigning identities. They’ll see the creative and strategic thinking behind fresh design work as well as have a powerful tool to show clients what a difference a professional can make to their image.

I am also happy to announce that one of Finamore Design’s re-branding projects, New Triad for Collaborative Arts is featured in the book.

Needless to say, we had an extraordinary experience in dealing with Finamore Design, not only because of an awesome outcome on the project, but because of the tireless, creative, proactive, professionalism Finamore Design provided throughout the process.”

-Dechelle Damien
Director
Wreckio Ensemble Theater Company

DIGM-240: Introduction to Interactivity
This course explores principles and techniques for creating effective interactive media-rich web sites. It includes aesthetics of human-computer interaction; bandwidth; project planning, budgeting and management; prototyping, testing and revision management.

DIGM-241: Multimedia Authoring
Focuses attention on learning multimedia-authorthing tools to create self-contained delivery programs, includes consideration and discussion of social impact of digital technology.

DIGM-242: Advanced Interactivity for the Internet
Students work with concepts and software for better integration of Internet multimedia-authoring programs with assorted browsers and server side databases. This course builds on basic knowledge of HTML, JavaScript, and Flash.

These images may be freely downloaded for personal, research, and study purposes only. As the physical rights holder of this material, most of which is in the public domain for copyright purposes, the Library charges a usage fee to license an image for commercial use (defined above). The usage fee is not a copyright fee. You are free to obtain a copy of these images from a source other than NYPL. Usage fees help ensure that the Library is able to continue to acquire, preserve and provide access to its collections.

See their new logo and website at www.wreckio.com

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.