Archive for the ‘code’ Category

Flash Media Server Made Easier – Unique Control – Quick Chat

July 30, 2008

I have been developing features since 2003 in a new area called Collective Control where multiple people control the same cursor to accomplish tasks.  There are excellent features you can make with collective control but more on that later perhaps.  The Flash Media Server is ideal for collective control because it gives you what is called a shared remote object.  You can share the position of a ball on the stage, for instance, and anybody looking at the application can move the ball and the others will magically see it move on their screens!

But what if you want to show other people your ball moving but do not want them to be able to move your ball themselves?  And each other person might want to move a ball of their own but not let others move it.  Or if you don’t want to share the same text field but rather have your own chat box.  This is the traditional multi-user game scenario or a chat scenario, etc.   You can do this with the Flash Media Server as well but it requires server side ActionScript and can get fairly complicated.

So I developed a Unique Control class and supporting server side ActionScript that lets you handle this all from within your regular client side ActionScript.  It still gets conceptually tricky but it is actually quite elegant and has helped a number of students quickly complete chats, video conferencing applications where each gets a streaming video which can be moved around, and shared drawing applications, etc.

Here is the ZIP file to the Unique Control Class and examples.  You will need the Flash Media Server from Adobe to run them.

-30-

If All the World Did Coding Rather than Sudoku – Programming, the Environmentally Friendly Puzzle

July 7, 2008
Flash vs Sudoku

Flash vs Sudoku

We have heard that puzzles are good to keep the brain healthy but it is too bad that all that brain power is producing nothing.

The thought of millions of people spending countless brain hours playing Sudoku, Solitaire, Crosswords, etc. makes me want to weep. Perhaps we are relaxing… but perhaps we just did not think about alternatives.

Alternatives are to turn to the puzzles of Physics, Philosophy, and Mathematics and the likes and use thinking power for the good of humanity.

Another good alternative is programming.  Programming is like a big fantastic puzzle with a solution that is useful for society. It might be a tool for creating, a social or e-learning application, an artistic exploration or visualization to help us understand the world.

Programming is the environmentally friendly puzzle – in addition to exercising your mind, your brain power produces a product!

WHAT IS IT LIKE TO PROGRAM?

In general, you apply certain techniques to solve problems. The cool thing is that while the techniques applied are similar from one feature to another, the feeling you get is really connected to what you are making. Here are the latest features I have made and you can tell that I am emotionally attached to what is being made. I feel like a sculptor, an artist, an inventor and even a wizard when I program.

BUILDING ORACLES
I have just built an oracle! It is a really cool interface that lets you drag the oracle’s eye towards certain attributes. Then based on the attributes, an answer is found. Its purpose is to find out which alien you have most in common. By building it with Object Oriented Programming it can easily be used to create soundscapes or to pick a resonating political party.

MAKING ENVIRONMENTAL STATEMENTS
A jet man who flies through beautiful clouds only to use them up to fuel his jet pack. Once a million clouds… now less. Object oriented programming let me easily extend code that someone from around the world wrote to make a JetParticle class to fly the rocket! Now you can use that class for your own rocket power – just tell it the direction and the thrust!

HELPING THE WORLD SEE SAY
YaSeeSay is currently being built and it lets you see what people are saying. Users can transcribe audio or video and time the highlight bar on the text so that others can read along. When they click the text, the audio or video jumps to that part. This one-week project has all sorts of twisty turns leading to several dozen absolutely rewarding moments! Imagine the feeling as you struggle with code and then finally having the success of click on a line of text and the audio playing – and to code it so that anyone has this power to be able to educate or entertain is so rewarding!

HOW DO I START PROGRAMMING?

Below is a rather wordy description of creating multimedia and in particular with Adobe Flash. We look at all these aspects in detail in the one year post grad Interactive Multimedia Program at Sheridan which condenses about five to ten years of experience learning on your own with books and help files plus gives you the advantage of a certificate, connections and better employment potential.

Pre-Programming

STEP 1: Determine what to make

“I want to provide buttons to make a picture flip directions”

  • This is a creative step where you find a need or imagine a story or artistic feature. There are a number of creative techniques that we teach in Interactive Multimedia to help come up with ideas. Some of these can be found at http://inventor.wordpress.com as inventing is generally an act of imagination, ingenuity and creation. If it is too hard to come up with something unique to start, then try making something you know and maybe along the way, you can add an improvement or something extra 😉 Or try something simple like showing a picture and when you click on the picture it flips.

STEP 2: Sketch what you are going to make

“Center the picture, put a logo at top and two buttons in the right corner”

  • Get a sketch book and a pack of Mirado HB pencils, and eraser and a pencil sharpener and keep them around your work area. Sketch out what you are wanting to make with little panels and flow arrows. Should just take fifteen minutes or so and will help you organize yourself. A hint for later… the arrows mean an event occurs. Something like a click to get from one state to another.

STEP 3: Make your assets

“I’ll take a picture, make the logo in Illustrator and buttons in Flash”

  • Make your assets in Photoshop, Illustrator, Flash, etc. These are pictures, illustrations, motion graphics, video, audio, MovieClips, panels, etc. Keep your audio and video and perhaps your pictures (if you have many) outside of Flash and import them dynamically. Make any static MovieClips or timeline animations in Flash in your library. You may end up making more after doing some programming but make enough to get started.

Programming

STEP 4: Set up where you are going to code

“I’ll just copy and paste the basic template in which I can start coding”

  • In Flash these days, programming is done in “Classes” (see below) in external text files with a .as extension. There is a special format with a rigid structure that is fairly complex but repeats itself so you get used to it. This format has made programming more difficult initially for people who have not programmed before. However, the structure provides for more consistency and that makes it easier in the end. In a Flash file, you provide a reference to what is called the Document Class. This Document class has a constructor and it is the constructor that will run first – so this is where we start coding!
    package project {
    	public class Project {
    		// below is the constructor
    		public function Project() {
    			// write code here
    		}
    	} // end class
    } // end package

    STEP 5: Ready your Object Oriented Programming

    “I’ll keep on reading this paragraph until I semi-understand!”

    • Flash ActionScript is an Object Oriented Programming (OOP) language which is the latest programming paradigm used by most current languages like Java, JavaScript, C#. OOP is cool because it is organized kind of like life. Every value (except null and undefined) is an Object that is made from a template called a Class. A Class is defined in a single .as file with that special format as mentioned. Common Classes are Number, String, Video, Date. There are a hundred more and you can even make your own – like a Monster Class! Classes hold Properties (attributes like color) and Methods (functions like play). For example, a Property of a String is its length and a Method is toUpperCase(). var myDate:Date = new Date(); creates a new Date Object from the Date Class and assigns the Object to a variable called myDate. We could then show the month of that date (which defaults to today’s date) by typing trace (myDate.month). Note that we can access Properties and Methods of an Object with the dot syntax. Objects can also have Events assigned to them so that, for instance, when a Button Object is clicked an Event will trigger and call some Method to set some Property. There are a couple other aspects about OOP like inheritance and encapsulation but above gets you 99% of the way there!
    Programming Constructs

    Programming Constructs

    STEP 6: Ready your language syntax!

    “Hmmm… it gives me an error unless I type it exactly right!”

    • Syntax is the format of what you type to make the ActionScript compiler understand what you want it to do. It is something that everyone struggles with at first – it is like learning a new language. There are certain language elements you are allowed to write in a certain way – you really only need to know a dozen or two to get you going. In general you write sequential statements with identifiers, operators and expressions, like: if (age >= 19) {myDrink = “beer”;} Here we have an if statement that checks an expression age > 19 and if this is true, executes the block of code between the {} to assign the String value (expression) of “beer” to the variable with the identifier myDrink. There might be multiple lines in the block of code between the {} and these would all run one after the other but they will not run if the value stored in the age variable is less than 19. Different statements let us apply programming logic as described next.

    STEP 7: Ready your programming logic

    “Ah… should the user flip the picture in two directions at once?”

    • Programming logic is what you use to enforce the rules of the environment or feature or application you are making. Here are the most common constructs: variables, which let you store values that change; conditionals, if statements that do blocks of code depending on certain conditions; functions, which let you do a block of code whenever you call it and as many times as you want; loops which repeat a block of code while a condition is true and can update a counter to help you handle repetitive tasks; and finally arrays which hold lists of data that can be accessed with index numbers. So you might have an array of pictures from Germany and an array from France. You could use a conditional to find out if we had stored France in a user-preference variable and if so loop through the France array to tile thumbnail pictures. Each time someone clicks a picture you call a function which holds a block of code that in this case makes the picture get bigger and the rest of the thumbnails fade out.

    STEP 8: Add in some interactivity

    “Oooo, now let’s make it do some cool stuff!”

    • Interactivity usually starts at the Events. Mouse clicks, rollovers, key presses, timer events, etc. And then you get to drag things, animate things and see if they hit other things! But interactivity is also between people by sharing data for instance, sharing collages, or layouts of rooms, or chats and forums, scores and positions in games. This is done by connecting Flash through server scripting – just enough to get the data back and forth! This is what makes the Internet great (or different than TV and books) – it is the sharing!

    STEP 9: Debug and test

    “Rats… when I do this and this it was supposed to do that and that!”

    • At every step of the way, you will run into problems – and it is in part these problems that make programming like a puzzle. I have coded millions of lines of code and still most bugs are unique! They fall into certain categories, yes, but I never seem to tire of the challenges they provide. I have never been thwarted – it seems that I can always find a solution but it is never so easy that I get bored. A perfect puzzle balance!

    CONCLUSION

    If you like to organize, apply intuition and efficiencies, track, plan, research and create – all these are part of solving the eternally varied puzzles of programming. The wonderful thing about the programming puzzle is that unlike Chess, Myst, Sudoku, and the likes, programming can lead to creations that society use for education, communication and entertainment. Programming is the environmentally friendly puzzle – you use your brain power to help society!

Sample AJAX Code With a Bit of Web 2.0 DHTML

May 5, 2008

Sample AJAX With a Bit of Web 2.0 DHTML

AJAX stands for Asynchronous JavaScript and XML. It has been around for ages but made popular with the so-called Web 2.0 sites. It basically means that you can update parts of a Web page after the Web page has loaded – hence asynchronous. You do not have to use XML at all and in general, you do not.

Tapoll is pictured above. It is a site where you get to predict polls as you vote on them created by professor Dan Zen some years ago. Circled are places where AJAX is used.

  • To send an invite message and receive a confirmation in the same little area without refreshing the page
  • To view a list of links and stats for all the user’s polls should they wish to see them
  • To display related content from YouTube, Flickr, Digg, etc. to inspire new poll creation

There are a number of JavaScript classes out there to handle AJAX ranging from a dozen lines to a couple hundred. Below is a link to an AJAX sample that includes a simple expanding message form HTML page, the PHP code to mail the message and the JS file that holds the AJAX class. There is a link to a ZIP file with the three files at the end.

AJAX Sample (code link is provided too)

Best of luck and remember, if you are tired of working in JavaScript… Flash developers have been working with this mind-set since 2000. We often are loading parts of the application without reloading the page.

-08-

Examples of Adobe® AIR™ Applications with ActionScript 3 Code Provided

April 14, 2008

Examples of Adobe® AIR™ with ActionScript 3 Code Provided

Here is a set of applications made with Adobe® AIR™. You will need to get the Adobe® AIR™ Runtime Environment. Air lets you run Flash files (and JavaScript/HTML/Ajax/Flex) on your desktop. It is free, fast and easy to install and seemingly less intrusive than Java.

Our students worked on Air assignments to make small widgets. Applications that might be fun or useful that makes use of the Air features. Air features include:

  • Dragging Files onto Flash to load a picture for instance
  • Using chromeless and transparent or semi-transparent windows
  • Reading and writing files to the desktop
  • Working with advanced HTML in Flash

Code is provided for the examples so you can see how things are done. There are descriptions that are semi-tutorial in nature as well. Please remember that these are prototype applications and may not be supported. Still, they are easy to install and uninstall to check them out! You uninstall through the Windows add and remove software panel.

Sample Flash AS3 Code to Help Designers and Developers Handle Data and Communication

February 7, 2008

Key to the Sheridan Interactive Multimedia program curriculum is teaching learners to build environments in which end users can communicate with each other. To do this, we need interfaces for input and display and we have to get data to and from the server. Think facebook, flickr, YouTube, etc.

Adobe Flash provides many communication classes and methods such as:

  • User Interface Components:
    • Button
    • CheckBox and RadioButton (Check Box & Radio Button)
    • ComboBox and List (Combo Box)
    • TextArea, TextInput and Label (Text Area & Input)
    • NumbericStepper and ScrollPane (Numeric Stepper & Scroll Pane)
    • Slider and TileList (Tile List)
    • DataGrid (Data Grid)
  • navigateToURL to load a Web Page from Flash
  • SharedObject to save a Flash “cookie”
  • FlashVars & SWF Query String to pass variables into Flash
  • ExternalInterface to call a function in Flash from JavaScript
  • Loading a SWF with Loader and URLRequest
  • FileReference to upload a local file to be used by flash
  • URLLoader and URLVariables to retrieve text or server output
  • XML to send and receive XML
  • Web Services to connect to scripts on other servers
  • Remoting to avoid serializing and deserializing data

Here are links to content examples from our curriculum for all of the above except Web Services and Remoting. The Sheridan lessons include more than the content – there are supporting lesson plans, definition documents, steps for building, supplementary links, reflection forms, and in class explanation, lab work, assignments, exams and final projects. If you are looking into schooling in multimedia, please visit the Sheridan Interactive Multimedia site for more information on our one year post grad program.

User Interface Components

Click here for code example

Flash AS3 Components

Communication 1 – navigateToURL, SharedObject, FlashVars, ExternalInterface, Loader, URLRequest and FileReference

Click here for code example

Flash AS3 Communication

Communication 2 – URLLoader and URLVariables to get text or server script data (PHP, MySQL)

Click here for code example

Although we recommend the Falcon Data Class for this type of connection

Flash AS3 Communication

XML in Flash

Click here for code example

Although we recommend the Falcon Data Class for this type of connection

XML in Flash CS3

Video Motion Input Prototypes to be Shown at Canadian New Media Awards

May 9, 2007

The video motion cursor work of our Sheridan Interactive Multimedia grads will be shown at the Canadian New Media Awards in Toronto at the Carlu on May 28, 2007. http://www.cnma.ca/nerds/.

The video motion cursor class which turns video motion in a Web cam into cursor movement was written by professor Dan Zen in Flash AS2.0 It turns successive frames of the video into bitmaps and then uses the difference filter with the aid of blurring to reduce video noise, thresholding to one color and drawing a rectangle around that color to capture the area of motion. A cursor is then placed at the top middle of the rectangle when central motion is detected and at the top outer edges of the rectangle when peripheral motion is detected. This placement is adjusted proportionally to accommodate arm and hand motion and place the cursor at the finger.

The students have used the VideoMotion class to create a variety of pioneering prototypes in motion input multimedia. Examples are:

  • Running from a swarm of bees that follow you
  • Waving the hand to play notes on a music staff
  • Controlling a magic wand to spring effects out of a hat
  • Using your lips to activate a translation e-learning application
  • Jumping to knock coins into a box in a Mario game
  • Flying a butterfly through a magical land
  • Simulating fire and wind to fly hot air balloons

Special thanks to FITC and Grant Skinner for techniques probably around since our founder David Rokeby and who knows before that…

An introduction sample the video motion cursor class in action can be seen on this sample page. Please leave a comment on this post if you would like access to the Flash VideoMotion class.

fairy.jpg

Click for Sample Video Motion Demonstration sample by Dan Zen.


%d bloggers like this: