Posts under Experiments
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:
And the CSS:
.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;
}
24 APR
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
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
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
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.
07 FEB
I’ve been trying to find ways to improve the performance of paint mixing with Flash and I though I could try using Stage3D for hardware accelerated graphics. But then I realised that Stage 3D is optimised for polygons and 3D models so it was probably not the best solution. I wanted to see if it was possible anyway and thanks to the Starling Framework and a bit of help from Thibault Imberts book it turns out its possible using the RenderTexture on an Image object, but it’s not really possible to do any complex drawing. Starling’s Image object is the equivalent of the Bitmap class, which is using to display any BitmapData. I made an example which you can see below.
By creating a RenderTexture for an Image object, you can use the RenderTexture’s draw() method to draw another Image’s texture onto it. This is similar to using BitmapData and draw() to draw one bitmap onto another. But Stage3 doesn’t use pixels, it uses textures mapped to triangles instead therefore at this stage it’s not possible to use something like getPixel() for get colour data from the ‘canvas’.
Read More…
06 FEB
Well, here we are with version 2 of my Flash spray paint stencils. I’ve been meaning to do a post on this for a while now! I created this version during the development of PixelPerfect - a digital graffiti wall and and photo booth. This time the paint is rendered much quicker by doing away with an embedded for loop that was in V1. This time instead of looping through each pixel on the canvas, I am drawing using copyPixels utilising an alpha bitmap as an alpha channel and matrices to transform them correctly based on the scale, rotation and position of the stencil movieclip. Another cool feature I added was a ‘muck’ layer on the stencil. Now paint that was on top of the stencil stays on the stencil – just like in real life!
09 JAN
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
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!
02 NOV
Just another quick post tonight. I have bigger one lined up for tomorrow I promise. I just wanted to show a little experiment I did a while back with JavaScript – accessing the Accelerometer and Compass data in Safari on the iPad. Below is a short video demonstrating it if you don’t have access to an iPad. If you do have one – visit the link following the video. I might also mention that the arrow/circle image was all created using CSS3 too!
And here’s the link to the demo.
To get the source – just go to the above link and right click > view source.
31 OCT
Update: this post was made when I was using a different blog design. Please view the original swf file here.
Below is a little experiment I did which involved creating a version of this blog’s image flipping Flickr feed header (which I made in Flash) – in HTML/CSS/Javascript.
Luckily jQuery includes a JSON parsing feature and Flickr provides a JSON feed and so it was very easy to get the Flickr feed. The image flipping was done with CSS3′s 3D transforms and so unfortunately it will only work in Chrome and Safari. Now I just need to work out how to get more than 20 images from the Flickr feed (I need 36 to fill the header), and turn the images black and white. I found a jQuery plugin that apparently can apply image effects but I haven’t gotten it to work yet.