Inspiring Inspiration #16
8 years ago
A collection of cool video, motion graphics and interface design.
A collection of cool video, motion graphics and interface design.
Building on the hexagonal grid from earlier, I have added a little JavaScript and have created an effect similar to the Apple Watch home screen UI.
Below is a video of it in action, I am using IE11 (metro version) on a Surface Pro 2 which I found to be the most performant for this effect. Chrome was janky as hell, and Safari on the iPad doesn’t like to do things while scrolling.
READ MORE
This post has been sitting around unfinished since April so I thought I should finish it and get it out there.
In this post I am going to show how you can capture an image from a webcam via JavaScript and convert it to a Data URI which can then be saved in a database or displayed in an IMG tag.
Note: This is more of a proof of concept rather than a best practices example so the code is a bit messy and hacked together from various sources.
I have only tested this on Safari for iOS 6 and latest Chrome with a webcam. It may or may no work in other browsers.
All explanations for the the code and markup are in the code comments, so please read them for more detail.
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.
[cc lang=”actionscript3″]
uploadbtn.addEventListener(MouseEvent.CLICK, onUpload);
[/cc]
Now for the click handler:
[cc lang=”actionscript3″]
function onUpload(e:MouseEvent):void
{
// 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);
}
[/cc]
Now we can create the handlers for the attached listeners:
[cc lang=”actionscript3″]
function progressHandler(e:ProgressEvent):void
{
// 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);
}
[/cc]
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.
[cc lang=”php”]
}else{
// create a failed message if something went wrong
$message = “
}
echo $message;
?>
[/cc]
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!
Recently I needed to figure out how to create an iPad app when you can record and play back video from the iPad’s camera, and then upload to it to a server using AIR for iOS. I wasn’t able to find a whole lot of info on it and so I eventually pieced it together from various places. I decided to share the first part of the process here, and I might share the second part in another post later.
I will assume you have a button on the Flash stage called ‘recordbtn’ which the code below will use to fire up the device’s camera.
First we have to set up some variables and check for StageVideo availability:
[cc lang=”actionscript3″]
// use stage video to playback recording
var stageVid:StageVideo;
// variables for displaying the video
var videoFile:File;
var ns:NetStream;
var nc:NetConnection;
// create instance of CameraUI for showing native camera app
var deviceCameraApp = new CameraUI();
// we’ll use StageVideo to display the recorded video, first we have to listen for availability
stage.addEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, onStageVideoAvailability);
function onStageVideoAvailability(e:StageVideoAvailabilityEvent):void
{
// if StageVideo available
if (e.availability == StageVideoAvailability.AVAILABLE)
{
// get stage video instance
stageVid = stage.stageVideos[0];
// create a net connection for playing back the video
nc = new NetConnection();
nc.connect(null);
// create a netstream for the net connection
ns = new NetStream(nc);
ns.client = this;
// add click event to record button
recordbtn.addEventListener(MouseEvent.CLICK, onRecord);
// add event for stage video render state
stageVid.addEventListener(StageVideoEvent.RENDER_STATE, onRender);
}
}
function onRender(e:StageVideoEvent):void
{
// when the video is ready to play set the viewport size so we can see the video
stageVid.viewPort = new Rectangle( 247 , 43 , 529 , 397 ) ;
}
[/cc]
READ MORE
Well I’ve been pretty busy latey and not much has happened on here for over month. I decided I should post some work and experiments I have been doing with building iOS apps with AIR for iOS. So below is a series of video demos of some experiments and actual projects I have been doing recently. All apps were compiled using Flash CS5. Note that none of these apps are available in the public app store.
Adventure Golf is a simple mini golf game I worked on for a client last year which was written in AS2. I decided to see how easy it was to build existing games for iOS so I converted all the AS2 to AS3 with minimal code changes/optimisations and Published for iOS. All graphics are pulled from the Flash library, with levels laid out on the stage on different frames. The hardest thing I had to do was resize the stage. Everything else just worked and I was surprised at how well it did considering it was converted from old AS2 code. I would like build this into a full app one day when I have lots of spare time!