web animation 2 :: scripting

ShareThis

Posted using ShareThis

final project // object of your choosing ::

• submit url in comments
• upload the source files to FTP on edu.danielmackey.com (see below)
• get ready to present your project to the class
• turn in your notes/diagrams/paper

presentations

• walk us through your project
• how is it built? what classes did you make? how do they work?
• explain how you used the 2 technology requirements

homework

• project two due next week
• class feedback email

source code

• week 14 source code

what’s an RIA?

before we get into what flex is and what it can do, we should take some time to examine what a RIA is – a rich internet application. the term RIA has been around for years and carries a lot of baggage with it, but essentially what an RIA stands for is a web-based (browser) application (tool) that behaves more like a desktop application than a website. so that covers the IA (internet application), but what makes it rich?

the word “rich” in relation to the online world does not refer to the total net worth of google, but rather it’s “rich” interface – ie. lots of graphics, animation, video, audio. another calling sign of an RIA is it’s ability to perform updates to the display (screen refresh, new data) without making a full new page load. it provides a much faster, responsive user experience that can mimick the speed of a desktop application.

now, not all RIA’s are flash/flex based. AJAX, a combination of asynchronous page loads, javascript libraries, and XML http headers, can provide a similar RIA experience without using flash at all. there are AJAX libraries out there, such as script.acoul.us, prototype, yahoo user interface (yui), google web toolkit (gwt) that can provide similar features/components that a flash/flex RIA can, so it’s possible to pull off a similar application experience in AJAX. some web frameworks, such as Ruby on Rails have built-in hookups to these libraries (scriptacoulus and prototype) to make using them easier

it’s worth noting at this point that when you venture out into the web world, you will find two general camps of people – those who push flash, and those who push non-flash. there are valid arguments on each side of the fence, and there are projects that lean themselves to one form over the other. here’s a simple redux of some of the pros/cons of each technology.

flash/flex

• pros: really rich, consistent across all browsers, self-contained, advanced effects, can handle more complex application logic on client-side.
• cons: very difficult to search index (SEO), complex solutions for “deep-linking”, lack of built-in support for back-button functionality.

ajax

• pros: easy to search index (SEO), uses existing browser-based technologies (back-button works, linking works), no additional plug-ins needed (ie. flash player installation).
• cons: limited richness, can be buggy in different browsers, limited effects, application logic must be stored on backend because source is viewable.

so, now that we know what an RIA is, let’s see some examples.
• adobe’s kuler (flash)
• google docs/maps/gmail (ajax)

more…

homework

• read Animation AS3, chapter 7 (pdf)
• work on project two

source code

• Source Code - Week 13

advanced animation

easing
oh, the blessed ease – making our transitions ever so softer. last week we lightly touched on the built-in easing equations/classes originally developed by Robert Penner. the easing classes that are built-in work wonderfully with the Tween class as well as other 3rd party tweening classes (TweenLite/Max or Tweener), but fall short when it comes to any custom motion you plan on defining with your application.

the key to easing is proportion – moving a smaller amount of the total distance over time, or a percentage of the total distance over time. the key to easing is in that sentence - difference over time. we can calculate the difference by subtracting the current location from the target location. then we take a fraction (percentage) of that distance, and move that amount. the next frame/second, we calculate the next difference and move a fraction of that. since we’re dealing with time, we can use an ENTER_FRAME event or a TIMER event.

 more…


			

homework

• homework: read “Animation” Ch 6, 8 & 9. (pdf)
• work on final project

source code

• week 12 source code

principles of animation

it may be a gross simplification of true animation, but from a purely technical point-of-view, animation can be boiled down to the movement and transformation of some object over time. it’s purpose is to convey motion that may mimic or exaggerate real-world motion. most of you have worked with the flash timeline using motion and shape tweens, guides and keyframes to handle animation. some of you have even already ventured into the world of controlling animation with code using the Tween class or simple ENTER_FRAME event listeners.

more…

homework ::

• read Animation chapters 1, 2, & 5
• PDF of chapters

source code ::

• week 10 source code

so, we’ve talked about making our objects more independent and having them communicate using events. we’ve talked about having them have their properties and methods be encapsulated inside themselves only. we’ve made some great ground on making our flash projects much more flexible and reusable. today, we’re going to add even more flexibility by feeding our projects with data from XML, styling it with CSS, and adding params/variables to the SWF from HTML. each of these tools will give us greater control of what our flash project shows without having to reopen our flash files and re-compile the applications.

more…

homework ::

• read Foundation AS chapter 11
• project two planning work
• please post a link to your video player extension in the comments
• please scan/digitize your planning for your final project and email them to me at dmackey@colum.edu, or post in the FTP dropbox / week 10. check your email for FTP info.

source code ::

• week 10 source code

so, we’ve talked about making our objects more independent and having them communicate using events. we’ve talked about having them have their properties and methods be encapsulated inside themselves only. we’ve made some great ground on making our flash projects much more flexible and reusable. today, we’re going to add even more flexibility by feeding our projects with data from XML, styling it with CSS, and adding params/variables to the SWF from HTML. each of these tools will give us greater control of what our flash project shows without having to reopen our flash files and re-compile the applications.

more…

homework ::

• read Foundation AS3 chapter 7
• continue working on the video player built in class
• project two planning notes/documents

source code

• week 9 starting files
• week 9 end files

working with media

as we learned last week, both audio and video assets, if not very small, should be loaded externally, meaning that they are not compiled into the original .swf file, but are loaded in once the SWF requests them. we use the NetStream and NetConnection objects in order to access and control these media files. let’s spend a little bit of time understanding each object’s role when dealing with external media.

more…

homework ::

• read Foundation AS3 chapter 8
• project two proposal due week 9 (after spring break)

source code ::

• starting files
• class revised files

working with media

the flash player owes much of its existence to it’s ability to playback media (audio and video) in the browser. when web first got audio, it was usually in the form of cheesy MIDI files being autoplayed on Geocities websites. i remember the first time i went to a webpage that had audio, i had forgotten i even had speakers attached to my computer (most of my music played through my boombox or cd walkman). MIDI was chosen because it had a very small file size but lacked in it’s authenticity to the actual audio file it was pretending to be. other means of early web audio were wav files embedded with quicktime players.

both of these early forms, however, had one fatal flaw – the exposed the actual audio file. as more people plugged into the web, getting music from a webpage was a simple as right-click > view source and grab the audio URL.

flash media players took that option away from “would-be” takers. since the .SWF file did not expose any code or assets, users couldn’t find where the audio files resided, whether they were embedded internally or streamed externally. all of a sudden, bands jumped on the bandwagon (ha) and made flash websites that contained audio players to showcase their music without “giving it away.” there are now tons of audio (and video) flash media players that offer a variety of interfaces, functionality, and flexibility. sites like myspace, virb, last.fm and purevolume all use flash as their main tool of distribution of music without exposing their artists to “pirated music.”

more…