A bathroom scale is probably the last thing you would want as a christmas present. Imagine unwrapping it and trying to NOT seem insulted and hurt? Can you imagine a worse christmas present? Well, how about bathroom scales that take a picture of you, from the worst and least flattering angle, and uploads it straight to the web through Twitter and twitpic? Yes, I know, it’s a horrible idea! Which means it simply HAS to be made. So I did, or at least a working prototype!
Setting up local players for Urørt.no and NRK Sogn og Fjordane (and other district offices. The player uses a slightly modified versjon of the Jeroen Media player.
Check out a few embedded flash examples after the break..
I’ve been thinking alot about making a soundbased installation in Adobe Flash, using sensors and switches, and I’ve gotten around to making a few small eksperiments/prototypes as research, which I’m planning to share on this site later.
But I also found this old experiment I wrote in Flash 5 (!) and wanted to share it. It is a visual sequenzer (*) / sound toy that lets you drag icons onto a “soundstage”, each icon representing a sample. As you press play a line starts moving vertically, and as the line hits one of the icons, the corresponding sound is played. You can also click, drag and hold an icon, and move it on top of the moving line to trigger the sound. There are two types of sounds. The yellow icons trigger different “wet finger on glass” sounds, and the greywhite icons trigger sonar ping sounds.
The code is pretty old, and there are WAY better ways of making something like this with AS3, but still, here is the source code (fla) for it (it also includes the samples, which you are free to use in any way you like).
I still think it is a pretty nice little project, but I am toying with the idea of replacing the click and drag with a webcam mounted in the ceiling, and letting people moving around on the floor trigger the sounds. I have quite a lot to learn before I can make something like that, but I’ll get there!
* Ok, so I guess it is a stretch to call this a sequenzer, but I wanted to create a fun, easy and interesting way to generate a sound collage.
Let’s start with a little demonstration. The section below is made by calling the php-script http://pappmaskin.no/opensource/youtube/youtube.php?s=super&max=9 within an iframe:
Why iframe?
Just to make it easier to reuse and embed Youtube videos on different sites, and because it makes it easier to try out new ideas without adding messy bits to a larger project. Sort of like rapid prototyping/proof of concept before “committing” to a feature and spending alot of time integrating something you might end up throwing out.
This solution currently consists of these files:
youtube.php, takes s=whateveryouwanttofind and max=number of videos to return as GET parameters
youtube5.xsl, does all the transformation of the xml from youtube into lovely xhtml.
youtube.js, javascript file that handles clicking on the thumbnails to load a new video, using innerHtml
youtube.css, minimalist styling to keep things pretty.
swfobject.js, for embedding flash
The xslt:
<?xml version=”1.0″ encoding=”UTF-8″?> <xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:fn=”http://www.w3.org/2005/xpath-functions” xmlns:gd=”http://schemas.google.com/g/2005″ xmlns:media=”http://search.yahoo.com/mrss/” xmlns:n1=”http://www.w3.org/2005/Atom” xmlns:openSearch=”http://a9.com/-/spec/opensearchrss/1.0/” xmlns:xdt=”http://www.w3.org/2005/xpath-datatypes” xmlns:xs=”http://www.w3.org/2001/XMLSchema” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:yt=”http://gdata.youtube.com/schemas/2007″ xmlns:altova=”http://www.altova.com”> <xsl:output method=”html” encoding=”ISO-8859-1″ doctype-public=”-//W3C//DTD XHTML 1.0 Transitional//EN” doctype-system=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”/> <xsl:param name=”SV_OutputFormat” select=”‘HTML’”/> <xsl:variable name=”XML” select=”/”/> <xsl:template match=”/”> <html> <head> <title>Pappmaskin.no – Youtube playlist</title> <link rel=”stylesheet” href=”youtube.css” media=”screen” /> <script type=”text/javascript” src=”youtube.js”></script> <script type=”text/javascript” src=”swfobject.js”></script> </head> <body> <div id=”youtube”> <h1>YouTube Playlist</h1> <xsl:for-each select=”$XML”> <xsl:for-each select=”n1:feed”> <xsl:if test=”n1:entry[1]“> <div class=”youtubevideo”><div id=”cur_video”> <xsl:for-each select=”n1:entry[1]/media:group/media:content”> <xsl:if test=”@type = ‘application/x-shockwave-flash’”> <embed> <xsl:attribute name=”src”> <xsl:value-of select=”@url”/> </xsl:attribute> <xsl:attribute name=”width”>480</xsl:attribute> <xsl:attribute name=”height”>385</xsl:attribute> <xsl:attribute name=”quality”>high</xsl:attribute> <xsl:attribute name=”bgcolor”>#000</xsl:attribute> <xsl:attribute name=”id”>cur_video_swf</xsl:attribute> <xsl:attribute name=”name”>cur_video_swf</xsl:attribute> </embed> </xsl:if> </xsl:for-each> </div> <!– ends cur_video –> <div id=”cur_video_title”> <xsl:value-of select=”n1:entry[1]/n1:title”/> </div> </div> <!– ends youtubevideo –> </xsl:if> <div class=”youtubethumbs”> <xsl:for-each select=”n1:entry”> <xsl:if test=”position() > 1″> <xsl:for-each select=”media:group”> <div class=”youtubethumb”> <xsl:for-each select=”media:content”> <xsl:if test=”@type = ‘application/x-shockwave-flash’”> <a> <xsl:attribute name=”href”>#</xsl:attribute> <xsl:attribute name=”onmousedown”>PlayVideo(‘<xsl:value-of select=”@url”/>’,'http://img.youtube.com/vi/h8oBykb_Pqs/2.jpg’, ‘Youtube’, true);</xsl:attribute> <xsl:attribute name=”onclick”>return false;</xsl:attribute> <xsl:for-each select=”../media:thumbnail[1]“> <xsl:element name=”img”> <xsl:attribute name=”src”><xsl:value-of select=”@url”/></xsl:attribute><xsl:attribute name=”lowsrc”>lowsrc.gif</xsl:attribute><xsl:attribute name=”width”>100</xsl:attribute><xsl:attribute name=”height”>60</xsl:attribute> </xsl:element> </xsl:for-each> <xsl:value-of select=”../media:title”/> </a> </xsl:if> </xsl:for-each> </div> <!– ends avslutter class youtubethumb –> </xsl:for-each> </xsl:if> <!– end if on position > 0 –> </xsl:for-each> </div><!– ends class youtubethumbnails –> </xsl:for-each> </xsl:for-each> <div class=”youtubefooter” style=”clear: both; color: #999999; font-size: 0.8em;”>Disclaimer: These videos are retrieved from Youtube through a simple search. Even though the search is done with a filter to remove “inappropriate material”, it may still contain videos deemed offensive by some. Videos may or may not be in violation of international copyright law.</div> </div> <!– avslutter id youtube –> </body> </html> </xsl:template> </xsl:stylesheet>
The PHP
<?php
$searchterm = $_GET["s"];
$maxresults = $_GET["max"];
/* load the xml file and stylesheet as domdocuments */
$xsl = new DomDocument();
$xsl->load(“youtube5.xsl”);
$inputdom = new DomDocument();
//Example http://gdata.youtube.com/feeds/videos?format=1&vq=Ratchet+Clank:+Tools+of+Destruction&max-results=2
$inputdom->load(“http://gdata.youtube.com/feeds/videos?format=5&vq=” . $searchterm . “&max-results=” . $maxresults);
//$inputdom->load(“youtube.xml”);
//if you want to test with a local file
/* create the processor and import the stylesheet */
$proc = new XsltProcessor();
$xsl = $proc->importStylesheet($xsl);
//$proc->setParameter(null, “titles”, “Titles”);
//not in use, but needed if you want to pass variables into the xslt from php
/* transform and output the xml document */
$newdom = $proc->transformToDoc($inputdom);
print $newdom->saveXML();
exit;
?>
Customer: Oh! Ohren Grafisk Formgivning
Delivered: Advice and production of a flashbased minisite. Webdev, Flash (AS2), design and development of an XML-driven gallery, contact form with PHP backend.
Designs delivered by customer as PSD.
Release: March 2007
I made a new header for my blog today, and I just wanted to share a few vector files for those interested in using it, or whatever.
The logo is, as you can see, based on the apple logo (duh!), but I changed it into a pear, and made the BITE larger. Why? Because I like pears. A lot! :)
pear-logo2.ai (for adobe illustrator)
pear-logo.fla (for adobe flash)
I’m using Adobe Flash more and more for pure design work, most of the sites I create are flash based, so I usually just start prototyping in Flash, not in Photoshop like most. I still use Photoshop exstensively of course, but very seldom for creating dummy layouts, it is just faster to do it in Flash. I suppose it’s a matter of preference, most designers will use Illustrator for creating their work, but since I work web and flash, using Illustrator just slows me down, it’s another tool to buy and learn, that doesn’t add much value compared to Flash and Photoshop. For my use that is.
Use it for whatever you want. :) I don’t mind (but Apple might.) But please drop me a line if you use it. Make my day!
photo credit: …Tim
Create your own free flash based podcast / mp3 player
I like the flashbased XSPF mp3 player. I had planned to rewrite the actionscript so that it could read rss with enclosures instead, but I liked the possibility to have unique pictures on each track, and I wanted to check out the XSPF format.
So I wrote a PHP script that uses DOMXML and xpath to convert an existing rss to xspf, it even have a search function of sorts.
I’m going to use it on a project I’m working on after a little more tweaking but I wanted to share it with other people who has a podcast and want a quick open source way to present their podcasts on their website.
photo credit: Chregu
<?php
$path = “http://podkast.nrk.no/program/radioresepsjonen.rss”;
$showfile = file_get_contents($path);
if(!$doc = domxml_open_mem($showfile)) {
echo “Error while parsing the document…”;
exit;
}
$xpath = xpath_new_context($doc);
$root = $doc->document_element();
//debugging
//echo domxml_version();
//var_dump(xpath_eval_expression($xpath, ‘/rss/channel/item’)); //http://no.php.net/manual/sv/function.xpath-eval-expression.php
//debugging – memory dump
//echo $doc->dump_mem( true, ‘UTF-8′ ) ; //http://no.php.net/manual/sv/function.domdocument-dump-mem.php
//print ” Path: <a href=\”$path\”>$path</a><br>\n”;
//print ” Showfile: <a href=\”$showfile\”>$showfile</a><br>\n”;
//print ” domDoc: <a href=\”$domDoc\”>$domDoc</a><br>\n”;
//print ” root: <a href=\”$root\”>$root</a><br>\n”;
// playlist plus search function
$playlist = $xpath->xpath_eval(“/rss/channel/item[contains(translate(title,'abcdefghijklmnopqrstuvwxyzæøåö', 'ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅÖ'), '".strtoupper($_REQUEST["search"]).”‘)]”);
//debug
//print “playlist found: “.count($playlist->nodeset).”\n”;
print “<?xml version=\”1.0\” encoding=\”UTF-8\” ?>\n”;
print “<playlist version=\”0\” xmlns=\”http://xspf.org/ns/0/\”>\n”;
print ” <title>Put clever title here, or get it from the rss</title>\n”;
print ” <annotation>Description of some sort</annotation>\n”;
print ” <creator>Who made this</creator>\n”;
print ” <info>http://link to more info</info>\n”;
print ” <location>http://yourdomain.com/doesnreallymatter/rss2xspf.php</location>\n”;
print ” <license></license>\n”;
print “<trackList>\n”;
foreach ($playlist->nodeset as $tracklist) {
$description = “”;
$title = “”;
$enclosureurl = “”;
//$enclosureurl = $tracklist->get_attribute(“length”);
//$spor = $tracklist->get_attribute(“spor”);
//$sangid = “$arkivnr-$spor”;
foreach ($tracklist->child_nodes() as $child) {
if ($child->node_name() == “title”) $title = $child->get_content();
if ($child->node_name() == “description”) $description = $child->get_content();
if ($child->node_name() == “enclosure”) $enclosureurl = $child->get_attribute(“url”);
}
print “<track>\n”;
print ” <location>$enclosureurl</location>\n”;
print ” <image>hassan/bilder/else150.jpg</image>\n”;
print ” <annotation>$title</annotation>\n”;
print ” <info></info>\n”;
print ” <info_text>$description</info_text>\n”;
print ” </track>\n”;
}
print “</trackList>\n”;
print “</playlist>\n”;
?>
Copypaste the above code into a new file and save it as rss2xspf.php and upload it to your server to test if you have domxml support. (If you don’t it will say something like Call to undefined function: domxml_open_mem. In that case, tough luck, find a new host.)
Download the exellent XSPF flash based mp3 player here: XSPF Web Music Player (Flash) – Plays MP3 on your website
Read more about XSPF over at http://www.xspf.org/
And please drop a comment if you use it and like or have problems.
You can also send me an email at morten.skogly _at_ gmail dot com.
There’s a lot of room for improvement, like using the rss image in place of a staticly defined image, or inserting a random image, or doing som web2.0 stuff like snarfing the images from amazon or whatever, please let me know if you make something superclever with it :)
Idea for your site: You can use del.icio.us to make your own mp3 podcast, visit bands you like bookmark the mp3s you like with del.icio.us, go there to get the rss, and your set to go, you have the same music on your site as on your ipod :) (You might have to use feedburner.com as a gobetween to create the enclosures and make it itunes-compatible.)
Updated: 06.04.2008: Unless you really really digg the XSPF player linked up above, I suggest you use the superb Jeroen Media Player instead. It is open source and supports both XSPF and RSS directly. It takes up more space, but it has video support and a very cool javascript api.
Notes from a presentation by Tom Igoe
at FlashForward 2005.
Lecture notes:
http://www.tigoe.net/workshops/flashforward05/
http://tigoe.net/pcomp/
Using the serial port and a pc to create interactive art and toys.
One of the more liberating ideas that’s come out of the past couple decades is amateur software development. Instead of seeing software as something that’s handed down from “the professionals”, we see it as a very flexible toolkit. This attitude hasn’t yet taken hold on the hardware side. The basic physical interfaces we’ve got for the computer don’t meet the demands of every profession, and there are many needs that go unmet because there’s just not a big enough market for a hardware vendor to bother making a specialized widget. We’ve already accepted the idea that if no one makes the software you need, you can develop it yourself. The same is true, or can be, with hardware. This is the spirit behind physical computing.
About InstantSOUP.
InstantSOUP is intended for an audience of design students – interaction design, product design, architecture – and for people who work with Macromedia Flash™ and Action Script.
It makes the first steps into the world of physical prototyping almost as easy as preparing Instant Soup.
InstantSOUP is a way to connect the virtual and physical worlds. It teaches how to make physical input devices for games, how to connectrepurposed electronic gadgets to Flash, how to activate physical objects from remote locations and even how to create little robots.
Golan Levin makes art that looks back at you | Video on TED.com
Interactive Multitouch Display
TwitterThings: 6 Unusual Entities That Tweet
GODAMMIT!
Macromedia – Press Room : ADOBE TO ACQUIRE MACROMEDIA
ADOBE TO ACQUIRE MACROMEDIA
Combined Company to Deliver Industry-Defining Technology Platform for Rich, Interactive Content
SAN JOSE, Calif. – April 18, 2005 – Adobe Systems Incorporated (Nasdaq: ADBE) today announced a definitive agreement to acquire Macromedia (Nasdaq: MACR) in an all-stock transaction valued at approximately $3.4 billion.
The combination of Adobe and Macromedia will provide customers a more powerful set of solutions for creating, managing and delivering compelling content and experiences across multiple operating systems, devices and media. Together, the two companies will meet a wider set of customer needs and have a significantly greater opportunity to grow into new markets, particularly in the mobile and enterprise segments.
“Customers are calling for integrated software solutions that enable them to create, manage and deliver a wide range of compelling content and applications – from documents and images to audio and video,” said Bruce Chizen, chief executive officer of Adobe. “By combining our powerful development, authoring and collaboration software – along with the complementary functionality of PDF and Flash – Adobe has the opportunity to bring this vision to life with an industry-defining technology platform.”
