Archive for the ‘Curriculum’ Category

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

Sheridan Interactive Multimedia Prepares for Adobe CS3 in September

August 20, 2007

The new IMM year is on its way.

Judging from our Alumni newsletter where we have compiled messages from our Interactive Multimedia grads, they have indeed been interactive with great jobs, vacations and families! Congratulations.

imm.jpg

facebook community also extends communication amongst grads

OPPORTUNITY

We have had many companies asking for grads and in some cases we are hearing grumbles of not enough Flash developers, etc. And we are still accepting applications for this year! So now is your chance, if you are looking for an action packed, rewarding eight months to gain multimedia skills or update certain ones, please consider our program. We will be teaching Adobe CS3 with ActionScript 3 guaranteed for at least 3 years ;-). Of course our curriculum is set up to be platform independent but still it is nice to know that you are learning in a brand new environment.

Our program has so much to offer. We have dedicated, caring Professors – award winning in our industry and award winning grads. Our learning environment has resulted in amongst the highest KPI scores in the school (a way to measure student satisfaction). We encourage creativity and self expression. Students learn the skills but also explore why to use them and prepare for the future with pioneering mobile and gesture technologies. Our success in industry placement keeps growing and aiding future job placements. And graduates come out of the program with life long friends who have shared a challenging and wonderful experience.

To find out more about our program visit: http://imm.sheridanc.on.ca

SUMMER UPDATE – CHINA

Over the summer our Professors keep active. Dan Zen has visited China where he taught lesson at CAFA, China’s leading art school in Beijing. His lessons inspired new graduate projects in the areas of gesture interactivity in Flash and brought them practical tools for lip synching animations, mixing and affecting video etc.

CAFA Class with Dan Zen at Presentation of Dan Zen Work

Dan Zen presents and lectures at CAFA in Beijing China

SUMMER UPDATE – FACEBOOK APPLICATION

Dan Zen has also been working on a facebook application that takes all your friends and puts them in a party. The friends move around rooms with customizable backgrounds, talk to one another and have popularities. The application is slated to launch in September and is a Flash based visualization application integrated with the facebook application API. The Flash prototype front-end can be seen by clicking on the picture below – the data is sample data only.

party facebook application

upcoming facebook application

SUMMER UPDATE – ACTIONSCRIPT 3.0

In preparing for CS3, of course he is reading Colin Moock’s ActionScript 3 book and has been building a sound and video visualization tool over the holidays that makes use of AS3’s native ability to capture sound frequencies! Finally! AS3 has a new architecture and runtime engine that allows it to run 10 times faster. And its Classes have been reorganized to split up the traditional MovieClip. To accomodate the changes, a more in-depth look at Object Oriented practices with Classes will be taught at the start of the school year rather than part way through the year.

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.

Sheridan Interactive Multimedia Helps out at FITC – Flash & Design Festival in Toronto

April 28, 2007

Sheridan Interactive Multimedia had fifteen volunteers in the FITC Flash and Design Festival in Toronto Canada – one of the largest festivals of its kind in the world. Volunteers made many industry contacts and did an excellent job helping with registration, photography, stage management and more!

Sheridan Interactive Multimedia Volunteers at FITC Festival

Sheridan Interactive Multimedia Volunteers at FITC 2007

Even Jones, Sheridan Interactive Multimedia 2003 Graduate coordinated the prestigious Awards show with over 20 categories and is seen below in an interview with media. Also below are Amy Allcock, 2004 IMM grad, and Lorraine Spiess, IMM Advisory Member, presenting the first ever Flash Goddess Award.

Evan Jones, Amy Allcock, Lorraine Spiess - Sheridan Involvement at FITC

Evan Jones, Amy Allcock and Lorraine Spiess at the FITC Awards Show

Professor, Dan Zen, attended the festival, “It is always nice to continue relationships with Flash friends from around the world – and add a few more… I’ll leave a comment on the blog entry when my pictures are in. The festival is invaluable in preparing curriculum. In that regard, the focus was on ActionScript 3, Flex, Apollo and the new CS3 suite from Adobe. Very impressive as well was PaperVision3D‘s full 3D in Flash which will be incorporated into the curriculum for 2007/2008″.

The one year post grad Sheridan Interactive Multimedia is currently accepting applicants at http://imm.sheridanc.on.ca, please let anyone interested know and perhaps you will be interested as well. Students learn to create interactive multimedia beyond navigation allowing people to create content and communicate with one another.

FITC is a festival for new media designers and developers to learn the latest in interactive techniques and technologies primarily focused on Flash and how to apply them to their own work. More than 70-plus internationally acclaimed speakers from the new media industry shared their knowledge in technical, creative and business areas. There were parties, awards, exhibits, etc. For more information visit http://fitc.ca.

Robust Real 3D in Flash Finally!

March 21, 2007

3D in Flash

Just saw a talk at FITO and now know how to do robust real 3D in Flash! It is primarily AS3 based so we will be teaching it next September at Sheridan Interactive Multimedia in our Motion Graphics class. This post is just heads up as we have had a number of people enquiring and in the past and we said… not yet. But now we can say – in the upcoming year!


%d bloggers like this: