Posts under Interactive
About 7 or 8 months ago I built a tile based launch page at work to launch learning modules which looked similar to the Windows 8 start screen. When I had spare time I kept building on and adding 3D animations to match it even closer to Windows 8. Then I kind of forgot about it until this week when I stumbled upon this article Creating Windows-8-like 3D animations with CSS3 and jQuery which provides a tutorial on creating a similar effect.
I had been meaning to do a post on my laucher when I first started making it but it never happened. So now that that article reminded me I thought I should post it. I am not going to provide any explanations of the code or tutorials but rather just show a demo (It’s HTML and javascript so you can just view the source anyway). I have ripped a bunch of LMS related code out of it and turned it into a web page launcher.
Click a tile to launch an ‘app’ (in this case a website). Hover you mouse over the top or bottom right corner for the ‘charms’ bar to close the site and return to the start screen. I have currently only tested it in Chrome and on an iPad and there isn’t a way to get to the charms bar on iPad yet.
21 APR
A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…
30 JAN
In this part 2 post following on from Record and play back video with AIR for iOS on iPad I will show you how to take your freshly recorded video and upload it to a web server using PHP.
Assuming you have a MovieClip or some other button labeled ‘uploadbtn’ you first need to add a click event handler to it to trigger the upload.
Now for the click handler:
{
// create a URLRequest for the PHP file on you server (we'll get to the PHP later)
var URLrequest:URLRequest = new URLRequest("http://www.yourdomain.com/uploadFile.php");
// videoFile is a File object we created in the last post which references the recorded video
// attach the various listeners for errors, progress, complete
videoFile.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, uploadDataComplete);
videoFile.addEventListener(ProgressEvent.PROGRESS, progressHandler);
videoFile.addEventListener(IOErrorEvent.IO_ERROR, handleError);
videoFile.addEventListener(Event.COMPLETE, completeHandler);
// call upload on the File object and pass in the URLRequest
videoFile.upload(URLrequest);
}
Now we can create the handlers for the attached listeners:
{
// just tracing the percentage of progress - you could show it in a progress bar
trace("Uploading... " + Math.ceil(100 * (e.bytesLoaded / e.bytesTotal)) + "%");
}
function completeHandler(e:Event):void
{
// upload process is complete
trace(videoFile.name + " has been uploaded.\n");
}
function uploadDataComplete(e:DataEvent):void
{
//everything is complete, trace the message returned from the PHP script which is in XML format
var xml:XML = new XML(e.data);
trace(xml.message);
}
function handleError(e:IOErrorEvent):void
{
// simple error handler traces the error
trace("Upload Error:" + e.text);
}
That is all that is required for the ActionScript side of things. Now for the PHP script. This is a very basic script and you should provide some security and validation on any production code.
All you need to do is save this into a blank PHP file and upload it to your server to the location matching the address in you URLRequest above.
// variable for return message
$message = "";
// the directory to place the video relative to this PHP script
$directory = "uploads/";
// get the number of files already in the directory and increment the number for the new one
// video from the iPad is always .MOV format
$fileCount = count (glob ($directory."*.MOV"));
$newName = $directory."video" . ( $fileCount + 1) . ".MOV";
// move uploaded file with new name into directory specified above
if (move_uploaded_file($_FILES["Filedata"]["tmp_name"], $newName)){
// create a successful message if all went ok
$message = "<result><status>OK</status><message>$file_name uploaded successfully.</message></result>";
}else{
// create a failed message if something went wrong
$message = "<result><status>FAIL</status><message>$file_name did not upload successfully.</message></result>";
}
echo $message;
?>
That is all that’s required to upload a video from the iPad to a web server. It is surprisingly simple for how hard it was for me to work out.
I hope this helps somebody out!
24 JAN
Recently the Virtual Graffiti Wall application (formerly Pixel Perfect) I built for Classy Event Group was featured on the morning show Today in the US. Check out the 2 minute segment in the below video.
The app is built on Adobe AIR and is multi-user/multi-touch enabled. Features include:
- Stencils (with rotate, move and scale)
- Spray paint simulation with drips
- ‘clip art’ stamps (with rotate move and scale)
- Image gallery hot folder for live photobooth
- Built in green screen removal with user fine adjustments
- Customisable sounds for each brush
- Saving and printing of artwork
The system is available for rental world wide at www.PhotoGraffitiWall.com.
23 JAN
The other day I was playing around with Mozilla’s Popcorn Maker and I had the idea of using HTML/JS/CSS to create transformable divs using transform handles and a bounding box. I did a quick search for any existing examples of HTML transform handles but i couldn’t find anything so I decided to give it a go myself. Below is a demo of what I came up with. It might not be the best solution but it works pretty well. I even implemented rotation but I had some issues with the scaling when the element was rotated. The demo has the rotation disabled but you can get the source by view the source of the frame. All JS, and CSS is in the one HTML file. Enabling the rotation is as simple as removing display none from the rotation handles CSS style.
The main reason I wanted to create transformable DIVs is for the next version of my Module Builder. I had experimented with transforming HTML via the AIR app but I think doing it directly in the HTML page.
17 NOV
A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…
13 NOV
One thing I have been wanting to do for a quite a while now with my touch screen is use touch size data to determine the size of lines drawn on the screen. The other day I finally got around to researching experimenting with CCV. It turns out that CCV can send the width and height of blobs along with coordinates and other data but its not turned on by default and there is no option in the GUI to turn it on.
Here’s a quick demo using a paint brush:
16 MAR
A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…
14 MAR
I have just uploaded my new showreel to Vimeo. A couple weeks ago I was listening to TripleJ in the car and I heard this amazingly bizarre, vintage, sci-fi, horror metal song come on. Unfortunately I missed what it was called or who the artist was so I spent ages trying to figure it out. Read More…
14 FEB
In my post yesterday I was demonstrating my attempt to create a drawing app using Stage3D for graphics acceleration. As it turns out Stage3D is not built for this kind of ‘per pixel’ manipulation on a drawing canvas. I mentioned at the end of the article that I might explore PixelBender as an alternative for the number crunching. So here it is, my first attempt at building my own Shader in PixelBender for paint mixing.
As you may already know, PixelBender is a a shader language built by Adobe that can be universally used between applications such as Flash Player, Photoshop and After Effects. It is based on the OpenGL Shading Language (GLSL) and is similar to C++. It can be used with Flash to create custom bitmap filters, effects or even to hand off some complex calculations. The great thing about using Pixel Bender is that it runs in a separate thread to Flash Player and can use multiple threads and even multiple cores. So the heavy lifting doesn’t lock up the Flash Player and can run parallel. This makes for some much, much faster processing.