Flash is a great tool for creating animations. It is usable on most browsers and most platforms and creates compact files which are easy to place on a web page. The problem is that they are not Web Standard compliant and they don't work on the growing iPhone and iPad market. Instead, the Elders of the Internet recommend that we use HTML 5 animation. This would be all well and good but the HTML 5 standard isn't yet complete, different browsers use different techniques so you need separate code for each browser you want to display with. On top of that the tools for creating animation with HTML 5 are just not up to the job. Enter Google with its new tool Swiffy. Swiffy takes a flash file (an .swf file, pronounced 'swiff'- hence the name Swiffy) and converts it into an HTML file. This means that I can use Flash to create animations then convert them and display as appropriate. The downside - there is always a downside - is that the HTML files don't display in some browsers. To that end I have done a bit of work setting up a way of displaying either a flash file or an HTML file depending on which browser you, the viewer, are using.
In the animation below you should see, first of all, the name of the browser that you are using, under that it will say either HTML 5 if you are using Google Chrome or Safari or Flash if you are using anything else.
Below that should be the animation. Please could you let me know via comments if this is working. (Preferably with browser name and operating system, Windows, Linux, Mac etc) Fingers crossed that this might be the solution that I have been looking for!
Using Flash
Text
Keep up to date: Receive the latest blog post by email
Rate this post:
Become a Member for free
access to this and other files on the site.See the Membership page for more details.
Already a Member? Log in Here
HTML 5 is the new, up coming standard in web design. Mix HTML 5 and CSS 3 together and you can create all sorts of fantastic interactive web site designs. And that's just what Paulo Azevedo has done using my Resistor Colour Calculator as a starting point.
Nice work Paolo!
Keep up to date: Receive the latest blog post by email
Rate this post:
I've been working on the back end of the website for the past couple of days. You may have noticed the odd unexpected message popping up on the screen. I'm working to streamline the way membership, the blog and the shop are linked together, there should be some interesting development rolling out very shortly.
One side effect of digging into the code is that things can go wrong. Last night, for example, I called it an evening without realising that the blog wasn't working. If you visited yesterday you probably noticed an unfriendly error message replacing my usual eloquent wordage. All sorted now, if you still have any strange messages or unexpected errors please let me know and I'll get them sorted.
Keep up to date: Receive the latest blog post by email
Rate this post:
I'll be spending the next few days finishing off a complete update of the robives.com website. I'm very excited about the new look and new features so I'm keen to get it up and running. I've done most of the background code including the main database which runs the site. I'm now working on the look and feel.
Keep up to date: Receive the latest blog post by email
Rate this post:
More web work today - it really does seem to be innordinately time consuming. The problem being that I don't do it often enough. Each time I do web work I have to look up the intricacies of the various languages involved.
I'm torn between creating a new theme by hand or splashing out on some software to help with the design process. I've come across a nice looking package called Artisteer which I'm investigating. It looks promising and may well save me some considerable programming time.
Tortoises - I've being mulling over a few different tortoise models. I like the shells, they appeal to my inner mathematician. Three possible ideas:
Two tortoises facing each other. Alternately they push their heads out of their shells to investigate the other. I have an idea for an interesting mechanism such that, on one turn of the crank one tortoise comes out of its shell, on the next turn the other.
An idea I've been thinking about for ages. A tortoise reaches out of its shell opens its mouth, grabs a lettuce leaf and munches. Sounds easy enough but there is quite a lot of mechanism to fit into a small space.
Another one I've been playing with for a while, with a slightly darker theme - actually two models with a dark theme now that I think of it. Either a tortoise spinning round on its back waving its legs in the air. (Good model for a bevel gear!) Or. A tortoise sitting on the top of a tall box, peering over the edge looking for a way down.
Keep up to date: Receive the latest blog post by email
Rate this post:
I've started a new part in the 'Information' section on web design. I've been learning all sorts of interesting stuff in the process of creating this website. One of the wonders of the internet is the way it allows you to share your ideas, the things you've found out and your enthusiasms. To that end...
The first web design tutorial I'm doing is about how I've set up the new newsletter system. The first part is here.
Keep up to date: Receive the latest blog post by email
Rate this post:
I've been working on xor-goat and doing webwork today. I had the laptop set up with the website dev in the front room and the main computer in the office with Illustrator and the scissors and glue at the ready. I then spent the day moving back and forth between the two working on both at once. Two points:
1) Who said men can't multi-task?
2) I'm really living my life on the edge!
As you can see I'm making changes to the front page, I'm hoping to make everything more accessable. Comments welcome as always. Thought you don't need to point out that I look slightly deranged in the photo.
---
Just a quick note. I may get cut off from email access. The local bridge that has been in the news is in imminent danger of collapse. This is the bridge that I cross everyday on the school run so it's meant a huge detour and hours in the car. The other problem is that the main phoneline at our village is routed across the bridge. If When the bridge collapses we'll be cut off from the internet! Noooooo! The website will be okay as it is hosted elsewhere but I won't be able to access email or update the website. I'm going into town tomorrow to see if I can sort out some sort of mobile solution. Wish me luck!
Keep up to date: Receive the latest blog post by email
Rate this post:
I've finally got round to adding a gallery page to the website.
Click on the gallery button at the top of the page to have a look.
If you have any pictures of models from the website that you've made send them to rob@robives.com and I'll be delighted to add them to the page.
Right. I'm off to work on the next download model for the website.
Keep up to date: Receive the latest blog post by email
Rate this post:
A quick tutorial on how I created the page header for the top of the Workshop Notes section. This is created using Photoshop CS4 but should work fine in earlier versions of Photoshop.
Starting with a photograph of a page from my notebook with a blank rectangle of card held to the corner with a paperclip...
...and a self portrait. Select an area slightly larger than the picture area you are going to use using the rectangle marque tool. Copy the selection to the buffer. Edit->Copy
Paste the photograph onto a new layer in front of the notebook picture. Edit->Paste.
Rename the two layers to Notebook and Photo. It is always good practice to rename layers to avoid confusion at a later stage.
Reduce the opacity of photo so that you can line it up with the paper on the notebook. I've set it to 71%.
Select free transform. (Edit->Free Transform) rotate the picture and resize it so that it fits over the card on the notebook.
With the photo resized to the size that you want it, use the polygon lasso tool to select the outline of the picture that will fit the card. Invert the selection (Select->Inverse) so that the area outside the picture is selected. Delete the unwanted area of the photo by hitting the backspace key .
Reset the opacity of the Photo layer to 100%
Select the Notebook layer in the layers palette. Using the rectangular marque tool select an area slightly larger than the paperclip. Copy the paperclip to a new layer using Layer->New->Layer via Copy
Rename the new layer PaperClip.
Zoom in, make sure that the PaperClip layer is selected. Use the Polygon Lasso tool with Feather set to 1 pixel. Select the outline of the paperclip where it covers the Photo. Invert the selection. Select->Inverse. Delete the unwanted white area by hitting the Backspace key.
Select the Notebook layer. Use the Polygon Lasso tool to select the background and fill it with white. Use the crop tool to crop it to the required size.
Finish of the header by adding the text. (This is the font Chalkduster) and adding a drop shadow.
I prepared the picture for the website by using File->Save for Web & Devices
Keep up to date: Receive the latest blog post by email
Rate this post:
Not much report today. I've mainly been doing behind the scenes work on the website. I did, however, come across this delightful video which I thought I'd share.
Keep up to date: Receive the latest blog post by email
Rate this post:
