Inspiring Inspiration #11
4 years ago
A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…
A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…
My post on creating native alerts with Adobe AIR has proven to be quite popuplar so I decided to follow it up with something even better (at least for Windows apps).
Recently I have been dabbling in a bit of C# for creating Windows Store apps as well as some C/C++ to try and figure out how to create Native Extensions (ANE) for Adobe AIR. As a first ANE I decided to make a native dialog extension. Extensions for this already exist for iOS and Android but I was unable to find any for Windows.
This is a simple example of a mouse-over shine effect I created using purely CSS. It uses a CSS generated element and CSS3 transitions to animate the effect. See the comments in the markup below for further explanation of how it works.
Live demo:
Simple HTML markup:
1 | <div class="myButton">Click Me</div> |
And the CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | /* normal button style */ .myButton { width: 110px; height: 30px; background-color:#0099cc; text-align: center; color: #FFF; position: relative; } /* button hover style if required */ .myButton:hover { } /* generated element for shine effect. * normal state is semi-transparent * white but with zero width. Set no * transition here for no mouse-leave * animations. Otherwise the effect * will play in reverse when your mouse * leaves the element */ .myButton:after { content: ""; position: absolute; top: 0px; left: 0px; width: 0%; height: 100%; background-color: rgba(255,255,255,0.4); -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } /* on hover we animate the width to * 100% and opacity to 0 so the element * grows and fades out */ .myButton:hover:after { width: 120%; background-color: rgba(255,255,255,0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } |
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.
Here is a little snippet which I have found extremely useful especially when working with XML in Javascript. You can use the following to loop through all of an element’s attributes and store them in an object:
1 2 3 4 5 6 | var element = $("#myElement"), attributes = {}; $.each(element.get(0).attributes, function(i, attrib){ attributes[attrib.name] = attrib.value; }); |
So for example if we have the following XML node:
1 | <item id="item1" name="the first item" image="thumbnail1.png" /> |
After running the snippet above on the node we can now access the values on the attributes object we created like so:
1 2 3 | console.log( attributes.id ) // item1 console.log( attributes.name ) // the first item console.log( attributes.image ) // thumbnail1.png |
I have found this very useful when I don’t want to hard code XML parsing and I don’t need to know all the values right away.
I hope this is useful for someone else!
Something I have been wanting to do for a while now is build a video converter into my Module Builder to enable automatic conversion of video into the various web friendly formats but I could never find a way to do it.
Over the weekend I discovered this tutorial on playing back any video in Adobe AIR. The tutorial runs through how to set up a NativeProcess to hook into FFmpeg to stream video from any format into FLV. FFmpeg is an open source media library for playback and conversion of almost any type of video or audio and is used by VLC and many other applications. I finally had a possible way of converting video within an AIR app! And one of the great things about this is since its using the NativeProcess API the conversion works asynchronously and the app doesn’t lock up while its converting.
A collection of cool video, motion graphics and interface design, mostly if not all from Vimeo…
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.
1 | uploadbtn.addEventListener(MouseEvent.CLICK, onUpload); |
Now for the click handler:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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); } |
Now we can create the handlers for the attached listeners:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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); } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?php // 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!
This is a little helper function which takes a string in camel case (camelCase) or pascal case (PascalCase) and splits it into separate words. The capitaliseFirst parameter will capitalise the first character in the first word if the string is in camel case.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | // 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 ) ; } |