Josh Sager Media: Creative Technologies Blog

Josh Sager Media: Creative Technologies Blog
Creative Technologies Blog
Home | Portfolio |Blog | Presentations | music | About

Archive for September, 2008

Grid Iron Flow: File and Project Management

Thursday, September 11th, 2008

I was trolling my rss reader the other day and I read a post on The Genesis Project blog that featured a demo of Grid Iron Flow, a file tracking and managing tool. Although this is my first glympse of the application it looks to be very useful especially for freelancers that work with clients for re-occuring projects and maintenance.

The Re-Post Video

Drop Down Lists Populated using JavaScript and XML

Thursday, September 11th, 2008

The Problem
You have a drop down list but you want them to dynamically populate using your super cool xml. Not a problem because Javascript can help you out.

The Solution
view the xml and javascript drop down demo

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>XML Drop Down Menu with JavaScript</title>
  7. <script language="javascript">
  8.        // creates an xml object
  9.         var pt=
  10.                 <team>
  11.                         <player id="1">
  12.                                 <name>Josh</name>
  13.                         </player>
  14.                         <player id="2">
  15.                                 <name>Ben</name>
  16.                         </player>
  17.                         <player id="3">
  18.                                 <name>Wayne</name>
  19.                         </player>
  20.                 </team>
  21.                
  22.                 // method to get the xml stuff
  23.                 function getXMLStuff(){
  24.                // loops through the xml and grabs only the names
  25.                 for each (var e in pt){
  26.                         //adds to the existing drop down box with the names from the xml
  27.                         document.myForm.myList.innerHTML += "<option value=’"+e.name+"’>"+e.name+"</option>"
  28.                 }
  29.                 }
  30.                
  31.        
  32. </script>
  33.  
  34. </head>
  35.  
  36. <body>
  37. <a href="#" onClick="getXMLStuff()">click me</a>
  38. <form name="myForm">
  39.         <select name="myList")
  40.         <option>Test</option>
  41.     </select>
  42.  
  43. </form>
  44. </body>
  45. </html>
  46.  

Portfolio: FlashPitt Animated Banner

Thursday, September 11th, 2008

This was an animated banner I created as a demo of Flash Animation.
(This is a reduced size.  View actual size)

Actionscript 3.0: TextField in a MovieClip Target Issue

Thursday, September 11th, 2008

The Problem
Targeting a MovieClip when a dynamic text box is the only thing in the movie clip.

  1. trace(e.target.name);
  2. //outputs the text box name and not the movie clip name

The Solution
Target the parent. Technically the dynamic text box is a child of the MovieClip.

  1. trace(e.target.parent.name)
  2. // outputs the movie clip name

In Action

download the source file

Portfolio: GPA Calculator

Saturday, September 6th, 2008

The GPA Calculator was developed as a way to quickly calculate a QPA and GPA.  It’s written in ActionScript 3.0 and features onFocus events as well as dynamic filter effects.

To use the application enter the grade, number of course credits attempted, and current GPA.  The calculations take place by either hitting the enter key, or if the focus of the text box changes.

In Action

ActionScript 3.0 XML and Sound

Friday, September 5th, 2008

The Problem
Last week a student of mine was putting together a project where we wanted to play multiple audio files on the web. Naturally the first thing I reached for was Flash and XML. No problem. Well there was a twist. He wanted to have sets of files available by genre only. Which calls for one the best improvements of ActionScript 3.0 and thats E4X.

E4X allows you to “query” or “filter” if you will the data xml document so you can use just a small part of it instead of the whole thing.

The Solution
What I developed was a flash file that

  1. loads in the xml
  2. creates a sound object
  3. creates a sound channel
  4. on mouse click
    1. set a search parameter based on which button is clicked
    2. “filter” the xml by genre based on the search parameter
    3. store the “filtered” data in an array containing object value you name pairs
    4. play the first song
  5. There are a few other things in there like stops just to avoid sound vomit

The end result is a solution that dynamically loads sound, manages the sound files through xml, and can expand to filter songs by genre.

The Working Solution

View the working solution

Download the project file

ActionScript

  1. // xml switch demo
  2. // this demo is to switch xml files on button click for
  3. // sound output
  4.  
  5. // init variables
  6. var xmlLoadFilter:URLLoader = new URLLoader()
  7. var xmlFilter:XML
  8. // temp array to store queried songs from the xml file
  9. var songs:Array
  10. // creation of sound object and sound channel object
  11. var soundFile:Sound
  12. var sc:SoundChannel = new SoundChannel();
  13.  
  14. // default xml
  15. xmlLoadFilter.load(new URLRequest("master.xml"))
  16. xmlLoadFilter.addEventListener(Event.COMPLETE, onLoadXMLFilter)
  17.  
  18. // register button events
  19. comedy_btn.addEventListener(MouseEvent.MOUSE_DOWN, onDownFilter)
  20. rock_btn.addEventListener(MouseEvent.MOUSE_DOWN, onDownFilter)
  21. stop_btn.addEventListener(MouseEvent.MOUSE_DOWN, onStop)
  22.  
  23. // events
  24. // listener for comedy and rock button
  25. function onDownFilter(e:MouseEvent):void{
  26.         // stops any audio in the sc track
  27.         sc.stop();
  28.         // this array gets replaced everytime the mouse is clicked
  29.         var songs = new Array()
  30.         // temp string to store the genere for searching the xml file
  31.         var g:String
  32.         // this changes the search element based on the button clicked
  33.         switch(e.target.name){
  34.                 case "comedy_btn":
  35.                 g="comedy"
  36.                 break;
  37.  
  38.                 case "rock_btn":
  39.                 g="rock"
  40.                 break;
  41.         }
  42.         // seaches through the xml based on genre
  43.         for each(var p:XML in xmlFilter.music.(@genre==g)){
  44.                 songs.push({artist:p.artist, path:p.path})
  45.                 //trace("test: "+p.path)
  46.         }
  47.         // loads the song
  48.         soundFile = new Sound(new URLRequest("songs/"+songs[0].path))
  49.         // plays the song
  50.         sc = soundFile.play();
  51. }
  52. // xml complete listener
  53. function onLoadXMLFilter(e:Event):void{
  54.         xmlFilter = new XML(e.target.data)
  55. }
  56. // stops the audio
  57. function onStop(e:MouseEvent){
  58.         sc.stop();
  59. }

XML Document

  1.  
  2. <songs>
  3.         <music genre="rock">
  4.                 <artist>Josh Sager</artist>
  5.                 <path>Last Show.mp3</path>
  6.         </music>
  7.         <music genre="comedy">
  8.                 <artist>Josh Sager</artist>
  9.                 <path>RockStar.mp3</path>
  10.         </music>
  11.         <music genre="comedy">
  12.                 <artist>Josh Sager</artist>
  13.                 <path>Back in Time.mp3</path>
  14.         </music>
  15. </songs>

Portfolio: Animation Clips

Thursday, September 4th, 2008

These are clips of 3D animations I have created for various projects.

Portfolio: E-Card Animation

Wednesday, September 3rd, 2008

This was an e-card I made for a holiday contest sponsored by the Pittsburgh Flash Users Group.

Portfolio: The Sum of David

Wednesday, September 3rd, 2008

The Sum of David website features a flash front end as well as a back end content management system (CMS). The front end is designed to follow the artists direction and to give life to her vision through interactive animations.

I wanted to give the artist a flexible solution that would allow easy updates, so I developed a site architecture using multiple .swf files and external .as files for transition, loading, and animation management. Allowing updates to happen per screen rather than all in one site.

Each section featured external content that could be updated via a database or text file depending on the section.

To support the database driven content I developed a CMS for uploading pdf’s, descriptions, and icons that associate with each chapter. The admin sections are password protected and only allow valid files types and sizes to be uploaded.

Launch The Sum of David

Source Code Coloring Pluing for Wordpress

Tuesday, September 2nd, 2008

I’m trying out a source code plug in for wordpress so I can easily share my code. I found it on danlee.cn installed to my plugins folder and now I’m taking it for a test run.

  1. <?>  
  2. echo "hello world";
  3. </?>