little bits of mischief website

Date: 23rd April 2009 at 2:25 pm | Filed under: portfolio | Author: Sam Burdge | Tags: , , , , , ,

lbom-screen2

A simple 5 page site built for music composition, sound design and music searches company 'little bits of mischief'. The site is built in php / XHTML and features Flash audio and video players. It's always a pleasure for me to build simple, classic designed sites. I particularly like the red, white, blue colour scheme in this design.

Check it out: www.littlebitsofmischief.com

2 Responses to “little bits of mischief website”

  • Comment by Lynette
    Date: June 13th, 2009 at 1:26 pm

    Please how do I just rotate a simple circle in flash on mouse over and stop on mouse away.

  • Comment by Sam Burdge
    Date: June 14th, 2009 at 4:42 pm

    Hi Lynette
    I don’t see how this question relates to this article, but:
    1. Draw a circle
    2. Convert your circle to a button
    3. Create a keyframe on the over state of the button
    4.select the circle in the over keyframe and covert it to a movie clip.
    5. edit the movie clip to include a motion tween
    6. on the first frame of the motion tween edit the frames properties - setting rotation to either clock-wise or counter clock-wise

Leave a Comment

Growing Userbase for my Simplistix Theme for WordPress

Date: 12th February 2009 at 10:25 pm | Filed under: blog, themes, wordpress | Author: Sam Burdge | Tags: , , ,

After releasing my WordPress theme Simplistix into the wild a few weeks ago I have been very happy, and somewhat surprised by it's popularity. It has received hundreds of downloads from my site and over 700 downloads from wordpress.org in the last 12 days. I knew that there was a niche for simple, text based blog themes as I had seen a few sites such as www.plaintxt.org that are entirely devoted to these type of themes. But, with all the sophisticated and complex wordpress themes on offer, Simplistix feels like quite a humble little theme — perhaps that's part of it's charm.

Anyway, seeing the download stats made me feel curious about who was using the theme. I had already seen it being used on a couple of blogs because, as with most wordpress projects, I had received some suggestions, ideas, support requests and constructive criticisms from members of the wordpress community. I did a bit of further research on google and instantly found loads more bloggers using my theme. The main thing that struck me was the diversity of subject matter that these blogs covered – science, computer programming, economics, movies, music, art, fashion and many more. It was also nice to see instances where people had modified the theme, adding in their own site headers, sidebar widgets, google advertising, etc.

I felt so inspired by seeing all these sites using Simplistix as their theme that I decided to write this post featuring some of my favourites. So here they are:

TOP PICKS

www.flyhypersonic.com – The seatbelt sign is illuminated
www.thewherewithal.org – Blogging about credit, debt, money, economy, theory
nicolasulloa.com/blog – Music, Animation, Graphic Arts and Illustration
www.ianthewebsite.com – If you could be any blog, what blog would you be?
2chicksblogging.com – Blogging for Change Training since 2008
feedingme.com
blog.nakedsteve.com – Oh hey is that a monome?

THE BEST OF THE REST

phoward.com/blog
ponasniekas.nespalvotas.lt
www.bigtechcenter.info
www.bletherskite.com
blog.xieer.com
www.bestmusiccenter.info
www.businesstechnologytimes.com/wordpress
likeitreallymatters.com
hasibul.info/blog

I am planning an update to the theme in the near future where I will add an options menu which will allow you to control colours, fonts etc.

Leave a Comment

Flash Tutorial - Adding an animated shine effect to your logo

Date: 12th February 2009 at 6:14 pm | Filed under: development, flash | Author: Sam Burdge | Tags: , , , , , , , , ,

This is a basic flash tutorial which explains how to apply an animated shine effect to a logo or image, as displayed in the example. This technique only really works well with colour logos.

You will need Flash 8 or above, as the effect utilises the filters which were a new addition in version 8. The source file for this project is available for download at the bottom of the tutorial.

Leave a comment if you find this useful!

GETTING STARTED

  1. Open a new flash document
  2. Go to 'File ->Import -> Import to Stage...' (or CTRL+R) and import your logo image.
  3. Move your logo to the top left corner of the stage (position 0,0)
  4. Go to 'Modify -> Document' (CTRL+J) and set your document's height and width to the height and width of your logo image. Set the framerate to 12fps.

CREATING THE SHINE

  1. Create a new layer above the logo layer for your shine
  2. In your new layer draw a white rectangle with no outlines (about 25ph high and the width of your logo)
  3. Select your rectangle and go to 'Modify -> Convert to Symbol' (F8) and choose 'Movie clip' as the symbol type, name it 'shine'.
  4. Double click on your new movieclip to open it, select the rectangle again and repeat step 4, converting it into another new Movie clip, but this time name it 'rectangle'.

ANIMATING THE SHINE

  1. Inside your 'shine' movie create a new keyframe at frame 25. This keyframe will be the point that your rectangle ends at after it has moved accross the logo. Frame 1 will be it's starting point.  See images opposite.
  2. Set the starting point for your rectangle on frame 1. Then go to frame 25 and move it to its ending point. You can also rotate your rectangle as I have done in the opposite example.
  3. Right click on the first keyframe in the timeline and select 'Create Motion Tween' from the dropdown menu.
  4. Press return to preview your animation
  5. You will notice that in my example I have added some blank keyframes to the timeline to add a couple of seconds pause between each shine.

flash-tutorial-1flash-tutorial-2

ADDING THE EFFECTS

  1. Select your 'rectangle' movie clip on frame 1 of the timeline, and open the filters properties ('Windows -> Properties -> Filters').
  2. Click on the plus symbol to add a new filter and select 'blur' from the list.
  3. Set the Blur X and Blur Y values to about 25, and set the quality to Medium. See opposite.
  4. Make sure the same values are set for the blur filter on frame 25.
  5. Go to Scene 1 of your flash project. Select your 'shine' movie clip and in the Properties panel change its Blend mode from 'Normal' to 'Overlay'

flash-tutorial-3

DOWNLOAD SOURCE FILE




3 Responses to “Flash Tutorial - Adding an animated shine effect to your logo”

  • Comment by vale
    Date: April 2nd, 2009 at 2:08 pm

    Hi!
    I’ve been searching for such a tutorial for a long time!thank you!!
    I just wanted to ask if it’s possible to activate the effect on rollover with actionscript, it would be for a website!
    thank you very much,
    Valentina

  • Comment by Sam Burdge
    Date: April 2nd, 2009 at 4:19 pm

    Hi Valentina

    You could attach the effect to a button or movie clip rollover. You could attatch it to the rollover state of a button without any actionscript. You could also activate the rollover effect in as2 using the following method:
    1. Select the shine (Symbol 3) movieclip and give it the instance name ’shine’
    2. Add this action to frame 1 of the ’shine’ movie clip:
    stop();
    3. Create a button. you could make it transparent by setting it’s alpha to 0.
    4. Add this action to the button:
    on (rollOver) {
    shine.play();
    }

    I hope this helps.

    Sam

  • Comment by Valentina
    Date: April 8th, 2009 at 8:17 am

    Hi Sam and thank you very much for your infos. I am a newbie of flash and actionscript so I always need every step to be clear like in your tutorial to do it :)
    Could u help me out with a sample flash file?you could send it to my email if that’s not a problem for you.
    I would really like to understand both ways to make such a rollover button, love your tutorial!
    thank you very much,
    valentina

Leave a Comment

New Look for Lazer’s Website

Date: 10th February 2009 at 5:34 pm | Filed under: blog, portfolio | Author: Sam Burdge | Tags: , , ,

lazer2lazer1

I have updated Lazer's site, the main change was reversing the background and text colours from white text on black to black text on white. I would say the effect is more positive than negative though ;)

Check it out: www.lazersonic.com

Leave a Comment

WP Background Tile Plugin

Date: 3rd February 2009 at 12:47 am | Filed under: plugins, wordpress | Author: Sam Burdge | Tags: , , , ,

The WP Background Tile Plugin for WordPress applies a tiled background image to your blog.  It is as simple as this:

  • Create a background image
  • Upload it
  • Apply it as the background via the WP Background Tile options page

Applying a repeat pattern to the background of a webpage is easily done using css:

body {background-image: url(example.jpg);}

However, if you're not into writing code, or don't know where to insert the css into your wordpress theme, then you will find this plugin much easier. It can also be an easy way of testing out lots of background images before deciding on one you are happy with.

INSTALLATION:

  1. Download the plugin from the link at the bottom of this page
  2. Upload the wp-background-tile folder to your wp-content/plugins folder.
  3. Activate the plugin from the Plugins page in WordPress.

USAGE:

  1. Upload your background image via 'Media => Add New' in Wordpress (or via FTP)
  2. Go to 'Settings => WP Background Tile' in WordPress
  3. Paste or type in the URL of your background image (explained in more detail below)
  4. Press 'Submit'

CREATING A BACKGROUND TILE:

A background tile is an image which is repeated in both directions over the background of a webpage. Look closely at the background of my site and you will notice the green background is not a matte colour, but a subtle texture. Right click on the background of my site and choose 'View Background Image' (Firefox) or 'Save Background As' (IE) and have a look at the image. You will notice that it is small (16 x 16 pixels), as you don't need much of the pattern to make it tile. Stripes and other geometric patterns can work well for a subtle effect.

Tip: Check out the free online Stripe Generator tool, it's a really easy way to create striped background tiles.

Background tiles can also be used for larger images such as a logo repeat. An example of this is www.mrdupes.com. To achieve this type of result using photoshop the 'offset' filter can be very useful.

GETTING THE URL OF A FILE YOU HAVE UPLOADED WITH WORDPRESS:

  1. Go to 'Posts => Add New'
  2. Click on the 'Add Media' button (a little star type icon next to 'Upload/Insert')
  3. Click on the 'Media Library' tab
  4. Click on the word 'Show' next to the file you want the url for
  5. Under 'Link URL' click on the button 'File URL'
  6. The file url should now be in the 'Link URL' text box so you can copy it.

DOWNLOAD PLUGIN:


16 Responses to “WP Background Tile Plugin”

  • Comment by pressitfor.me
    Date: February 3rd, 2009 at 4:25 am

    WP Background Tile Plugin | Sam Burdge…

    The WP Background Tile Plugin for WordPress applies a tiled background image to your blog. It is as simple as this:

    * Create a background image
    * Upload it
    * Apply it as the background via the WP Background Tile options page

    Get the plug…

  • Comment by baron
    Date: February 3rd, 2009 at 4:57 pm

    hi. Thanks for plugin

    perfect.

    Regards

  • Comment by WordPress Plugin Releases for 02/04 | Weblog Tools Collection
    Date: February 4th, 2009 at 3:18 pm

    [...] WP Background Tile [...]

  • Comment by Satranç
    Date: February 4th, 2009 at 6:32 pm

    Hi,
    This is a nice idea. Thanks for plugin.
    But I want to ask a question.
    Why did you create a table? Can we save tha background image as an option?
    Thanks.

  • Comment by WordPress Plugin Releases for 02/04 | MBConsulting.se
    Date: February 11th, 2009 at 7:17 pm

    [...] WP Background Tile [...]

  • Comment by beauty blog
    Date: February 19th, 2009 at 2:14 pm

    can you make a plugin like this to show post in a magazine like layout.

    http://perishablepress.com/press/2008/08/04/two-column-horizontal-sequence-wordpress-post-order/

  • Comment by Sam Burdge
    Date: February 19th, 2009 at 2:31 pm

    Hi beauty blog,

    I have a plugin which does exactly that! Here’s the link:

    http://www.samburdge.co.uk/wordpress/wp-post-columns-plugin-2

  • Comment by dogday
    Date: March 4th, 2009 at 6:19 pm

    I have this nice plugin running in my blog, but it isnt XHTML compliant, I think because of the ‘&’ signs used to pass varibles.

    Could you replace ‘&’ signs with ‘&’ to correct this?.

    I have tried, but my knoledge about php isnt enought to find where is called the function.

    Thanks in advance.

  • Comment by Sam Burdge
    Date: March 5th, 2009 at 2:03 pm

    Hi dogday
    The plugin doesn’t use any & symbol, this error must be coming from your theme! Also, if your theme already uses a background image then the plugin may not work.
    Sam

  • Comment by technofunk
    Date: March 12th, 2009 at 12:33 am

    great plugin.

    one question; what if i dont want this tiled? just a single image. non repeating.

  • Comment by Charles
    Date: September 21st, 2009 at 12:15 am

    Hi,

    I tried it on my site (see comment header) and it tiled only the upper half of the page. I have WP 2.7.1. on that particular site.

    Is this a bug or am I doing something wrong?

    Thanks,
    Charles

  • Comment by KiraSherrine
    Date: October 23rd, 2009 at 6:24 pm

    Hi,

    what part would you input the tile file?

    Also my nav tags (about, contact, …)
    and Sidebar Tags (category, archives)
    are all jpegs … I am looking for ways to input it into the php but cannot find any help on that…any help?

    Kira

  • Comment by bpositive
    Date: November 9th, 2009 at 1:32 pm

    Hi. Great Plugin :-)

    How do i get it to center a larger picture?

    Thanks

  • Comment by Jack
    Date: March 18th, 2010 at 5:11 pm

    Great plugin! I’m using it on two sites and it works like a champ! But on ONE of the sites, the background won’t display in IE8, while it works just fine on the other. Any ideas?
    (www.pdrjunction.com and http://www.hailreporter.com)

  • Comment by monk
    Date: May 4th, 2010 at 7:51 am

    hello

    nice plug in. i use over there ( http://www.monk.gr) and its work great.

    thanks

  • Comment by Carrie Burns
    Date: June 7th, 2010 at 4:19 pm

    Great plugin, but appears that Firefix/Netscape doesn’t like the background as a body style tag, while it works fine in Safari, hoping we can get it to work though.

Leave a Comment