Multimedia - Flash
March 30, 2006 | Leave a Comment
Today’s Topic…Flash! w00t. This lab is due next Friday (04/07) @ midnight
Before we get started, here are some terms you should know:
Tween: In animation, it is used to describe intermediate frames often added by an assistant animator or by computer. See tweening.
Motion Tween: In animation, refers to movement of an object along a path.
Shape Tween: In animation, refers to changing the shape of an object.
Export Movie: With Flash, when you save your movie, you are actually saving a file that allows you to open the movie again and edit it later on. If you want the flash movie to be viewable on the web, you must export the movie (which essentially saves it as a .swf file). To export a movie, simply click File > Export > Export Movie, select the folder you want to save the movie in, then click the Save button.
Lets get to it!
Lab (part 1): Working with Macromedia Flash (Do sections 1 and 2)
What to turn in for this tutorial:
You can place each of the following shapes/images on separate frames of the same movie…or create a separate movie file for each. It’s up to you ;)
- Your custom shape…found here
- Your layered shapes…found here
- Your masked image…found here
- Your symbolized image…found here
In this section, you will learn:
* Creating graphics in Flash
* Importing graphics
* Using color effectively
* Creating a color swatch
* Layering Flash elements
* Masking content
* Organizing content in Flash
* Reusing graphics as symbolsNOTE: This tutorial starts on page 1 of a whole series of tutorials and continues on to page to 26.
Lab (part 2): Moving Objects along a Path
What to turn in for this tutorial:
- You will have created a simple animation by the end of this tutorial…save and export it, then submit it to WebCT
- Note: Have a little fun with this if you want…customize it to your hearts content…remember, you are preparing yourself for more Flash next week, so everything you learn will help
In this tutorial you will learn how Flash allows us to to gain further control of the movement of an object by the use of guide layers. This method enables to you to draw a complex path or guide which the object will follow.
Note: if you get stumped with steps 11 & 12..This is the guide layer:
…the steps should be combined into one.
Lab (part 3): Creating Animations with Shape Tween
What to turn in for this tutorial:
- You will have created a simple animation by the end of this tutorial…save and export it, then submit it to WebCT
- Note: Same as above…have a little fun with this if you want…
In this tutorial you will learn how Flash can also ‘tween’ the shape of an object. This allows the shape to change between keyframes.
What to turn in
Upload your 3 flash movies (don’t forget to export them first) to WebCT.
Why just Tutorials this week?
Well, the goal of these tutorials is simply to familiarize yourself with the application and terminology in preparation for the more in-depth lab (due on the 14th). Tonight I will be posting your assigned reading and Flash Lab 2
(Next week’s lab will be posted on Thursday of next week)
The Case For JSON: What Is It and Why Use It?
March 29, 2006 | 8 Comments
Contents:
A Little Background
After my post titled Look Ma, Cross Domain Scripting! a while back, I received a comment that was seeking more information. The commenter posts:
I’m looking at your code and it doesn’t explain exactly how this works, it just provides us with code to use. I’m curious as to what makes JSON work and what differences JSON has from XML. Is there any draw-backs or negative effects of using your solution? Is it a hack that will be fixed in the future?
If you know all about JSON and are wondering why to use it...I'll tell you right now. Speed. But...if you are curious, I'll attempt to answer the above questions, show some examples and then I'll re-iterate Cross-Domain Scripting.
What is JSON?
JSON (or JavaScript Object Notation) is a highly portable data interchange format. While its structure is recognized natively by Javascript (as it is Javascript), its formatting conventions are easily recognized by other C-like languages. JSON.org has an excellent description:
JSON is built on two structures:
- A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
- An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangable with programming languages also be based on these structures.
In JSON, they take on these forms:
- An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).
- An array is an ordered collection of values. An array begins with [ (left bracket) and ends with ] (right bracket). Values are separated by , (comma).
- A value can be a string in double quotes, or a number, or true or false or null, or an object or an array. These structures can be nested.
- A string is a collection of zero or more Unicode characters, wrapped in double quotes, using backslash escapes. A character is represented as a single character string.
Excepting a few encoding details, that completely describes the language.
JSON Structure
Here is a graphical representation of the formatting structure (image from JSON.org):

Why JSON over XML?
Alright...I can already see the hordes of people wanting to wrench my head from my neck and drive lollipop sticks up my nose. But take a step back, put down the weapons and hear me out.
XML is versatile. You can create tags to your hearts content and endlessly nest data in seemingly sensible ways. XML is well known and most savvy developers can manipulate it in all sorts of ways. So what isn't there to like about it? It just so happens that XML is like a fat tick after a good meal...bloated. Despite its ease of creation, the amount of busy tags makes it difficult to read with the human eye. Ok...don't get me wrong, its easier to read than a Comma Separated file, but when compared to JSON, XML makes my head hurt.
JSON is simple and can represent the exact same data with fewer characters. How? Well, there are no tags. You give a member a name and then a value. Lets compare some examples...
JSON Examples
Lets say I want to expose two quotes from my friends at Uber-Geeks in some way...lets compare them in XML and JSON.
-
<quotes>
-
<quote>"50 degrees all week today." - Ironmule</quote>
-
<quote>"He wasn't naked...he had sneakers on." -Jon Emmons</quote>
-
</quotes>
-
{quotes:[
-
"\"50 degrees all week today.\" - Ironmule",
-
"\"He wasn't naked...he had sneakers on.\" -Jon Emmons"
-
]
-
}
That doesn't seem too different...lets try something a little more complex. How about a Konfabulator Widget?
-
<widget>
-
<debug>on</debug>
-
<window title="Sample Konfabulator Widget">
-
<name>main_window</name>
-
<width>500</width>
-
<height>500</height>
-
</window>
-
<image src="Images/Sun.png" name="sun1">
-
<hoffset>250</hoffset>
-
<voffset>250</voffset>
-
<alignment>center</alignment>
-
</image>
-
<text data="Click Here" size="36" style="bold">
-
<name>text1</name>
-
<hoffset>250</hoffset>
-
<voffset>100</voffset>
-
<alignment>center</alignment>
-
<onmouseup>
-
sun1.opacity = (sun1.opacity / 100) * 90;
-
</onmouseup>
-
</text>
-
</widget>
-
{"widget": {
-
"debug": "on",
-
"window": {
-
"title": "Sample Konfabulator Widget",
-
"name": "main_window",
-
"width": 500,
-
"height": 500
-
},
-
"image": {
-
"src": "Images/Sun.png",
-
"name": "sun1",
-
"hOffset": 250,
-
"vOffset": 250,
-
"alignment": "center"
-
},
-
"text": {
-
"data": "Click Here",
-
"size": 36,
-
"style": "bold",
-
"name": "text1",
-
"hOffset": 250,
-
"vOffset": 100,
-
"alignment": "center",
-
"onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
-
}
-
}}
The more complex the data you are trying to represent, the sexier JSON looks in comparison. Check here for some more examples...one is really long and looks quite sexy and readable in JSON and not so much in XML.
JSON and the Ajax Buzz
Ok, so if JSON and XML are pretty much peas in a pod when it comes to what they can represent, why make the switch (or at least...provide JSON). Ajax is our reason! You see, in an Ajax environment where we make calls to web services we expect to get some data back in some form. Well, if we receive XML back as a direct result of an Ajax call, we have to send that data through an XML parser before we can even begin to manipulate the data to be useful to JavaScript. If we receive the data in JSON...we don't have to do anything but assign the results to a variable because JSON is already JavaScript. From there, we can manipulate the data as normal.
As Ajax methodologies (and even Cross Domain Scripting) become more commonplace, data format becomes vital to the efficiency of our applications. The Zimbra folks seem to have realized this and subsequently re-architected their entire application. Oh, and Script.aculo.us creator Thomas Fuchs seems to agree and states his opinion on XML in Ajax communication: Its dog slow...don't do it.
JSON and Cross Domain Scripting
In my article Look Ma, Cross Domain Scripting, I discuss a method for doing Ajax-like calls to remote domains. As many of you may or may not know, XMLHttpRequest is restricted from making requests to remote domains.
The way it works is this: Somewhere out there exists a server side script that you wish to access in an Asynchronous fashion. Rather than attempting an XMLHttpRequest (which we know won't work), all you do is dynamically create a <script> tag with its src set to the URL of the off-site page. When a script tag is inserted, browsers immediately execute the src! As long as the off-site page returns valid JSON, the JSON is executed locally.
For dynamically adding script tags, I use this library found over at Dan Theurer's Blog. Its pretty simple and prevents duplicate script tags (which is a necessity).
Yahoo! sets a good example. They allow you to pass in two parameters to any of their web services (which return XML by default) and get the results in JSON.
Get JSON Output with output=json
By default the Yahoo! Web Services return output in XML format. To get output in JSON format, use the output=json parameter in the request:
http://api.search.yahoo.com/ ImageSearchService/V1/ imageSearch?appid=YahooDemo &query=Madonna&results=2 &output=json
Add a Callback with callback=function
The callback parameter (callback=function) wraps the JSON output text in parentheses and a function name of your choosing. For example:
http://api.search.yahoo.com/ ImageSearchService/V1/ imageSearch?appid=YahooDemo &query=Madonna&results=2 &output=json&callback=ws_results
This request results in this output:
ws_results( ...json output... );
What is the drawback of this cross-domain solution? Well, I am relying on browsers to automatically execute the JavaScript in any dynamically created script tags. I have yet to find a mainstream browser that doesn't...but the same goes for XMLHttpRequest. This method is used within Plymouth State University's live portal for Savable State Channels and we have yet to receive a support call regarding problems :)
JSON Resources
- JSON.org: This site is the JSON site. It provides a description of what JSON is, provides some examples, and provides a list of JSON parsers for various languages.
- Wikipedia: Enough said.
- JSON Discussion Group
- Yahoo's JSON Web Services: Provides examples and suggestions on formatting your REST calls to return JSON as an option
Summary
XML works nicely. JSON works just as nicely and faster. This is why I'm a JSON fan. Speed is just as important as the data itself. Without speed...well, you've got crap.
Grooming Real Life Leadership Through Virtual Worlds
March 28, 2006 | 1 Comment
My friend Jon passed this article from Wired Magazine off to me as it suits my interests a bit more. This article reiterates what I have been chanting for some time now, real world lessons can be learned in virtual worlds like World of Warcraft.
Gaming tends to be regarded as a harmless diversion at best, a vile corruptor of youth at worst. But the usual critiques fail to recognize its potential for experiential learning. Unlike education acquired through textbooks, lectures, and classroom instruction, what takes place in massively multiplayer online games is what we call accidental learning. It's learning to be - a natural byproduct of adjusting to a new culture - as opposed to learning about. Where traditional learning is based on the execution of carefully graded challenges, accidental learning relies on failure. Virtual environments are safe platforms for trial and error. The chance of failure is high, but the cost is low and the lessons learned are immediate.
We see even now that MMORPGs are affecting the economy, laws, and communication. As the games become more social, they are introducing experiences and obstacles to end users where those users may have never had the opportunity to encounter them. And as with many experiences in the real world, those users grow and alter behavior patterns to suit these diverse situations in the virtual world. Wired's article focuses on MMORPGs grooming managers as a direct correlation to holding the position of Guild Master. They write:
[T]he process of becoming an effective World of Warcraft guild master amounts to a total-immersion course in leadership. A guild is a collection of players who come together to share knowledge, resources, and manpower. To run a large one, a guild master must be adept at many skills: attracting, evaluating, and recruiting new members; creating apprenticeship programs; orchestrating group strategy; and adjudicating disputes. Guilds routinely splinter over petty squabbles and other basic failures of management; the master must resolve them without losing valuable members, who can easily quit and join a rival guild. Never mind the virtual surroundings; these conditions provide real-world training a manager can apply directly in the workplace.
Heh. It may sound corny, but in my stint as an officer of a World of Warcraft guild, I was able to garner some knowledge of mangement with regards to conflict resolution, player management, evaluation of applicants, advertisement, and extra-guild relations; each lesson has allowed me to grow as a person on both a personal and professional level (oddly enough). Despite my appreciation for the acquisition of knowledge through virtual methods, the artcle's last line is still laughable. They say:
The day may not be far off when companies receive résumés that include a line reading "level 60 tauren shaman in World of Warcraft."
While that seems unlikely, will there come a time where I'll be filling in my Guild management experiences on my resume?
Multimedia - Animation and Authoring Tools
March 28, 2006 | Leave a Comment
Today we'll be discussing Animation and Authoring Tools in preparation for our lab on Flash w/ ActionScripting!
Groovy Creative Cow Action
March 28, 2006 | 1 Comment
It was a bad case of the Fridays. What is a guy to do when he needs his 15 minutes of procrastination? He googles. Yup. I did a Google image search for 'Cow' and came across Ben & Jerry's Action Toy Cow. Ecstatic, I promptly printed out 10 copies and passed them around the office. Very soon we had a few head-bobbing cows sitting around ITS, each with their own creative flair...my cow was green with a yellow head and udder. Awesome.
Dee, one of my co-workers enjoyed it so much that she used it as an assignment in class! The cows turned out to be a nice introduction to the peer review process. Dee writes:
I was skeptical that my students would berate me for giving them an adolescent project such as this. I was wrong, their efforts and participation in the activity downright amazed me! The assignment was to make a cow and to be as creative as possible. Many different cows made a showing including, a glitter cow, a cow with a fro, a cow with a Van Dyke, a studded cow, etc. The in-class activity, a cow judging contest where cows would be rated on a scale from 1 to 10 (1 being worst, 10 being best) in the following categories:
- Overall Design
- Originality, Creativity and Innovation
- Shows Significant Time and Effort
Check out her blog for the rest of the pictures and winners! There were some interesting creations :) Oh, and day after her assignment, I came to work and found about 25 cows on my desk. w00t. Here's a few of them:

Script.aculo.us v1.6 Released
March 27, 2006 | Leave a Comment
Great news over at Mir.aculo.us. It appears as if version 1.6 of my favorite DOM manipulation library, Script.aculo.us has been released! Thankfully the new version of Script.aculo.us uses Prototype v1.5.
This is sexy because now I can revert to downloading both Prototype and Script.aculo.us right from the Script.aculo.us site. (Hooray for being lazy)
Here's an excerpt from the original post:
script.aculo.us 1.6 marks the switch over to Prototype 1.5 (1.4 will no longer be supported), which has really great new features and has undergone some refactoring to take advantage of the Prototype 1.5 niceties.
Other new stuff includes window-scrolling while dragging, performance optimizations and various bug fixes.
They are urging people to test out 1.6. Get on it!
Hamster Fighting Machine
March 27, 2006 | Leave a Comment
I stumbled upon this piece of work. It seems there are some amazing tutorials out in the world! This one instructs you on the creation of your very own Hamster Fighting Machine! The instructions are fairly complex, so attempt ONLY if you are a Hamster Modding Expert. For easier reading of the step-by-step instructions, click on the following image:

MasterWish - Practicing What I Preach
March 24, 2006 | 6 Comments
MasterWish, my labor of love (created with my friends Zach Tirrell and Jon Emmons) is my playground for Ajax and Web 2.0 experiments.
If you haven't been acquainted with the site, its a wishlist site with a schlew of features. The high point is the ability to secure down lists and grant access to specific buddy groups. I'm pleased to say that we have gained a decent member base in the past 8 months and I am also happy to say that things are going to change around shortly!
MasterWish was built using SAJAX as the tool of choice for Ajax communication but as I've mentioned in the past, I am a Prototype convert. My knowledge of Ajax, JSON, and general application structure has been morphing so much in recent weeks that I have held off in completely revamping the wish list site.
Things are changing. I have begun the work to implement the following:
- Creation of more "hackable" Web Service APIs using SOAP and REST
- Representation of data using both XML and JSON
- Ajax powered by Prototype
- Sweet DOM manipulation powered by Script.aculo.us
- Separation of Layout and Logic with event:Selectors
- and of course, we're already doing: Server-Side Templating for greater separation of Layout and Logic.
Sign up. Stay tuned. Get gifts.
Writing Your Server-Side Ajax Handler
March 22, 2006 | 19 Comments
Contents:
In my recent post on 'Ajax; Templating; and the Separation of Layout and Logic,' I refer to an Ajax Handler that sits server side to handle Ajax calls. Some elaboration is in order.
As I have stated in the past, I'm a huge fan of Prototype AND I choose PHP as my language of choice...so my examples will be using both, but the idea is portable.
Set up your Functions
Before you create a handler, you need a set of functions that the handler can reference. Here's an example:
-
<?php
-
function world($params='')
-
{
-
return 'Goodbye Cruel World.';
-
}//end world
-
-
function sweetWorldAction($params='')
-
{
-
//we expect params to be an array or a string similar to a parameter string from a GET..i.e. "bork=asdf&cheese=yes please"
-
//parse out the variables
-
{
-
}//end if
-
-
//do your logic here
-
}//end sweetWorldAction
-
?>
Now that we have the functions all set, we'll set up a handler that receives Ajax calls and calls the appropriate functions.
The Eval Method - A Dynamic Handler
This method is one that I toyed around with for a while and I'll admit that its pretty simple and clean but there are some drawbacks. We're going to make a few assumptions: All requests will be GET (this is to keep things simple for this example) and we will keep the complexity of .htaccess sweetness out of these examples and assume that each call will be passing a function variable that specifies the function we are calling. I'll get to those in a second...but first I'll show you the handler code in this Eval Method:
-
<?php
-
//if the user leaves the page or closes the browser prematurely, this will help prevent half completed statements
-
-
include('functions.php');
-
-
//list out your Ajax accessible functions
-
-
{
-
//get the get parameters
-
$params = $_GET;
-
//unset the function index from the params because we just don't need it there
-
-
//build your parameter string:
-
$param_string='';
-
foreach($params as $key=>$param)
-
{
-
$param_string.=(($param_string)?'&':'').$key.'='.$param;
-
}//end foreach
-
-
//make your function call
-
}//end if
-
-
?>
The Variable Variable Method - A Dynamic Handler
This method (compliments of PHPDeveloper) is simpler than the Eval Method and just as dynamic.
-
<?php
-
//if the user leaves the page or closes the browser prematurely, this will help prevent half completed statements
-
-
include('functions.php');
-
-
//list out your Ajax accessible functions
-
-
{
-
//get the get parameters
-
$params = $_GET;
-
//unset the function index from the params because we just don't need it there
-
//make your function call
-
$_GET['function']($params);
-
}//end if
-
-
?>
The Switch Method - A Basic Handler
This method handles each call individually. The reason for using switch rather than if-elses is simply because your application will most likely possess a large number of Ajax-ified functions and those if-elses would be ghastly to read and decrease performance...the Switch statement is much cleaner.
Make a Choice
Which are you going to use? While the Eval and Variable Variable Methods contain very small amounts of code in the handlers, the logic has simply been shifted to the functions themselves. Increased Ajax-geared logic within the functions themselves reduces portability. However, in the Switch Method, logic is organized in a fairly easy to follow manner while making use of very generic functions that can be used in multiple fashions. Obviously, the Switch Method is my preferred choice :)
In Closing
Handler scripts make the Ajax magic happen and the separation of handler logic from your application logic is just as important for robust development and debugging as the need for separation of layout and logic. Play around with the above methods and see which works for you. If you have a method all your own, I'd be interested to hear it!
Oooo event:Selectors for Prototype
March 21, 2006 | 1 Comment
My article on the Separation of Layout and Logic touched on a key point of heavy Javascript use in an Ajax rich environment...the need for separation of Javascript code - namely events - from the HTML. Behaviour was my suggested CSS/Javascript event selector framework.
Behaviour is a stand-alone event framework. You can use it regardless of whether or not you are using Prototype (or some other Ajax/Javascript library) - which is pretty cool. But...if you are using Prototype there is a lot of code duplication between the two libraries. Luckily, Mir.aculo.us has brought event:Selectors to my attention which is causing me to sing a different tune! Justin Palmer, event:Selector's creator is crediting Behaviour for the idea, but he's has what Behaviour has done a few steps further.
- event:Selectors is dependant on Prototype which reduces code duplication.
- It has reduced the layer of complexity of event selecting by one layer of abstraction.
- The framework allows concatenation of CSS elements for event assignment.
- Lastly, its added a loaded event that is triggered when an element loads.
Here's an example of Behaviour event handlining:
-
var rules = {
-
'#item li': function(element) {
-
Event.observe(element, 'click', function(event) {
-
var element = Event.element(element);
-
element.setStyle('color': '#c00');
-
});
-
},
-
-
'#otheritem li': function(element) {
-
Event.observe(element, 'click', function(event) {
-
var element = Event.element(element);
-
element.setStyle('color': '#c00');
-
});
-
}
-
};
-
Behaviour.register(rules);
Here's the equivalent in event:Selectors:
-
var Rules = {
-
'#item li:click, #otheritem li:click': function(element) {
-
element.setStyle('color': '#c00');
-
}
-
};
-
-
EventSelectors.start(Rules);
Simplification makes me happy. I'm a convert.
Syntax Highlighting in WordPress
March 15, 2006 | 5 Comments
Some of my most recent posts involving code have displayed the wonderful blocks of login in all its syntax highlighted glory. A week ago I stumbled on the sweet syntax highlighting plugin - iG:Syntax Highligher (here's the link to the actual plugin).
The highlighter uses GeSHi for the highlighting engine then wraps a bunch of sweet javascript functions around it to give it a bunch of features (i.e. viewing as syntax highlighted code or plain text toggle). Here's the supported language list:
-
[as] & [/as]
-
[asp] & [/asp]
-
[c] & [/c]
-
[cpp] & [/cpp]
-
[csharp] & [/csharp]
-
[css] & [/css]
-
[delphi] & [/delphi]
-
[html] & [/html]
-
[java] & [/java]
-
[js] & [/js]
-
[mysql] & [/mysql]
-
[perl] & [/perl]
-
[php] & [/php]
-
[python] & [/python]
-
[ruby] & [/ruby]
-
[smarty] & [/smarty]
-
[sql] & [/sql]
-
[vb] & [/vb]
-
[vbnet] & [/vbnet]
-
[xml] & [/xml]
Installation is super easy and simply requires you to edit the quicktags.js file in wp-admin. If you're looking for a syntax highlighter for your blog, I'd suggest you give this one a try. w00t.
Multimedia - Audio and Project Planning
March 14, 2006 | Leave a Comment
Today we're discussing Audio briefly, then we'll move right in to Project Planning...which prepares you for checking out the Final Project document!
RFID Passport Pilot Test
March 13, 2006 | 4 Comments
It seems that the United States' RFID Passports (which has privacy advocates scared) is finally becoming a reality. According to MSNBC:
The US has begun issuing passports that contain biometric information stored on remotely readable microchips, in spite of lingering security and privacy concerns.
[...]
The passport chips contain all the personal information printed inside the passport, as well as a digitised photograph of the passport holder. At ports of entry, scanners will access these data and compare them with a national database for identity verification.
The new "E-Passports" have so far been issued only to US diplomats, as part of a pilot programme conducted in collaboration with Singapore, New Zealand and Australia. They will be introduced nationwide by October.
Is our government this dense?!? I mean come on...a security firm already demonstrated that they were able to crack the encryption on the passport prototypes. October will be a sad month for us all if the US keeps to its deadline.
Scary Tarsier Video
March 13, 2006 | 6 Comments


…the steps should be combined into one.
