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

Video Gallery - Neil Stewart / Fella Pictures

Date: 21st April 2009 at 3:41 pm | Filed under: development, portfolio | Author: Sam Burdge | Tags: , , ,

This week I have been working on improving the 'Moving Image' section of photoneil.com. When I first built the site (designed and built by 76 Creative) the Moving Image page featured Neil's video showreel, since then video has become a more prominent aspect of his work so I have created a video gallery page for the site, allowing him to showcase a range of his video work under different categories.

As this video gallery uses seperate pages for the video list and the player itself I programmed it in PHP using the Longtail / JW Player to play the flv videos. For more information about encoding video for Flash as flv see my article: Encoding FLV

The video gallery also offers the option to download higher quality Quicktime Movies of each video. I encoded the quicktimes using the mpeg-4 codec and reducing the frame size slightly to allow for higher picture and sound quality while keeping the filesizes reasonable for a download.

Check it out: www.photoneil.com/movingimage.php

Leave a Comment

Zombie Killer Gorefest 3 - Flash Game

Date: 2nd April 2009 at 8:58 pm | Filed under: blog, flash, portfolio | Author: Sam Burdge | Tags: , , , ,

zombie killer gorefest 3

I have been working on a couple of Flash games recently for my new arcade site zapgamez.com. The first of these games is Zombie Killer Gorefest 3, which is now previewing on Zap Gamez. You can play the game here:
http://www.zapgamez.com/games/action/zombie-killer-gorefest-3

The official release text for the game is as follows:

Currently exclusive to ZapGamez.com, Zombie Killer Gorefest 3 is a point and click shoot 'em up where you have to defeat the zombie hordes in 3 chilling action-packed levels. Inspired by 70's and 80's Horror and B-Movie genres, this game includes it's fair share of blood and gore, so is therefore not appropriate for younger players.

I created the game in actionscript 2, possibly one of my last as2 projects before I move over to as3 fully. The graphics and animation are a more prominent part of the game than the scripted aspects which are fairly basic hitTest functions.

The game will probably stay exclusive to Zap for the next couple of weeks before I release it through MochiAds distribution. If you are interested in getting the game for your site when it is released please subscribe to my RSS feed and I will announce the release here on my blog in the near future.

Leave a Comment

WP Games Embed Plugin

Date: 28th February 2009 at 1:27 am | Filed under: development, plugins, wordpress | Author: Sam Burdge | Tags: , , ,

Turn your wordpress blog into a games arcade!

This beta version WordPress plugin, WP Games Embed, makes it easy to embed games into your WordPress blog by using shortcodes in your posts and pages. WP Games Embed is intended to be able to support content offered by the various free games sites out there using the codes or downloads they provide.

FEATURES

4 Different views:

  1. Grid view - a grid of thumbnail images linking to each game (can be restricted to a single category or parent category)
  2. Category view - this view includes a medium sized image and a written description of the game
  3. Single page view - the page where you play the game itself
  4. Featured Game view - this view is similar to category view, but allows you to pick the games yourself to create your own 'Featured Games' page.

Different embedding modes:

  1. iFrame embedding - embed iFrame content using code provided by free games sites, or use this method to display games from your own server where an html file has been provided with the free game download.
  2. Flash embedding - embed Flash content using embed codes provided by other sites, or embed flash games directly from your own site. You can even upload them easily using the wordpress 'Add Media' tool.

WORKING EXAMPLE

Visit Zap Gamez Arcade to see an example of the plugin in action.

INSTALLATION

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

USAGE

Use shortcodes to embed games into your posts, or to create a grid of thumbnails on a page or your home page.

Embedding a game in a post:

Shortcode: [game /]

Additional attributes:

  • width - the width of the game
  • height - the height of the game
  • src - the url of the game (html file for iframe embedding, swf file for flash embedding)
  • flash - if set to true flash embedding will be used, if set to false iframe embedding will be used. (default=false)
  • thumb - the url of the thumbnail image (70px x 60px)
  • main - the url of the large image (appx 300px wide)
  • title - the name of the game!
  • description - your description including controls etc.
  • featured - whether this should be formatted as a featured game. (default=false)
  • game_url - only to be used in Featured mode (when featured is set to true). See  the shortcode examples below for more details.

Shortcode Example 1 (embedding game as iFrame):

[game width="640" height="480" src="http://www.example.com/games/pacman.html" thumb="http://www.mysite.com/images/pacman-small.jpg" main="http://www.mysite.com/images/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." flash="false"/]

Shortcode Example 2 (embedding game as Flash):

[game width="640" height="480" src="http://www.mysite.com/games/pacman.swf" thumb="http://www.mysite.com/images/pacman-small.jpg" main="http://www.mysite.com/images/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." flash="true"/]

Creating a grid of thumbnails on a page:

Shortcode: [get_latest_games /]

Additional attributes: list_category - the category id for the games you want to appear in the list.

The list_category attribute makes it possible to display the latest games under a certain category e.g. 'Arcade' or the latest games under all categories. Simply set up a main category called 'games' and then create all your games categories (action,adventure,sports, etc.)  as sub-categories.

Shortcode Example 3 (thumbnail grid):

[get_latest_games list_category="2" /]

Creating a Featured Games page:

Shortcode: [game /]
Additional atrtributes: (see above)

The important attributes for creating a features games list are 'featured' which should be set to true, and 'game_url' the url where the game can be played on your site.

Shortcode Example 4 (featured games):

[game  main="http://www.myblog.com/uploads/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." featured="true" game_url= "http://www.myblog.com/games/pacman/" /]

[game  main="http://www.myblog.com/uploads/donkeykong-medium.jpg" title="Donkey Kong" description="This is a great game! Use the arrow keys to play." featured="true" game_url= "http://www.myblog.com/games/donkey-kong/" /]

DOWNLOAD THE PLUGIN


26 Responses to “WP Games Embed Plugin”

  • Comment by imad
    Date: March 5th, 2009 at 11:28 am

    good work:) I am going to install it , I have also interest in the wp Mochi plugin..
    Thanx for sharing

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

    Hi Imad
    Good luck! Don’t forget to post a link to your arcade here as an example…
    The mochi plugin needs a bit more development to integrate the mochi ‘bridge’ which gives the scoreboard functionality etc.
    Sam

  • Comment by The Wordpress Arcade Experiment Has Begun! - Page 2 - Talk Arcades
    Date: March 12th, 2009 at 9:34 pm

    [...] the WP Super Cache plugin, which speeds it up a lot! I have also developed a wordpress plugin WP Games Embed (very much a beta at the moment) which allows you to embed games in a wordpress blog with various [...]

  • Comment by acrylic
    Date: March 19th, 2009 at 9:29 pm

    Hello Sam and thanks for this wonderful plugin.

    I only have a slight problem with the get_latest_games shortcode. Every time I put in and define the category (for example 20) it lists all content from all categories. It might be a bug or might be something that I’m looking over.

    Thanks for your help

  • Comment by Sam Burdge
    Date: March 20th, 2009 at 2:10 am

    Hi Acrylic

    The get_latest_games shortcode will return all posts under a category, and all posts under child categories of that category. So if you have a main category called ‘games’ with an id of 1 and sub-categories of games such as ‘action’ (id =2), ‘arcade’ (id = 3), ‘fighting’ (id =4), etc. if you call category 1 in get_latest_games you will get all games, but if you call category 2 you should just get ‘action’ games.

    If this doesn’t help please comment again as it is this type of feedback that helps me to develop and improve my plugins over time.

    Sam

  • Comment by acrylic
    Date: March 20th, 2009 at 3:20 pm

    Hi Sam!

    I tweaked the code a bit and now it’s doing what I need. My concept was to have the grid system represented on a separate wordpress page rather than in a single post.

    So I created a new page template. The problem that I encountered was that the page template gets the content by running the loop first but the ep-embed.php runs the loop again. So what happens is that the page template loops through all the posts you have and displays the content.

    What I did was that I omitted the while loop and left the if conditional in. In this way the loop only runs when you have a content in your page and retrieves it. Once it happens it activates your function call which loops through the given parameters and retrieves all the game posts.

    I hope I made sense :/

  • Comment by Harri Nyman
    Date: March 26th, 2009 at 11:52 am

    Interesting plugin, no doubt - however I have interesting dilemma, is there some kind of limit how many games is needed before grid appears? On my site it’s not working, at least not yet.

  • Comment by Exam Philippines
    Date: April 1st, 2009 at 4:29 pm

    thank you so much for sharing this plugin. really helpful to my game site

  • Comment by Bilal
    Date: April 11th, 2009 at 7:10 pm

    Hi, great plugin.
    One question, if we use feeds to get mochi games can we use this plugin to show those games in posts?

  • Comment by Create a Wordpress Arcade | I love games
    Date: April 20th, 2009 at 6:15 am

    [...] wp-games-embed-plugin [...]

  • Comment by Eoin
    Date: May 7th, 2009 at 1:41 am

    Hi,
    I’m trying to get this to work, but can’t quite get it right. The plugin is activated - and this is code that I’m trying to use - (I changed example.com and mysite.com to our site)
    [game width="640" height="480" src="http://www.skuzziport.com/games/pacman.html" thumb="http://www.skuzziport.com/images/pacman-small.jpg" main="http://www.skuzziport.com/images/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." flash="false"/]
    grateful for tips!

  • Comment by Sam Burdge
    Date: May 9th, 2009 at 9:50 am

    Hi Eoin
    In what way is it not working? Do you have an example I can look at?

  • Comment by Mark
    Date: September 19th, 2009 at 3:48 am

    Thanks for this little plugin…it works a treat.
    I’m gonna use it to add games as I go along, and then put a category page up… in the meantime I’ll just add each game I find as a blog post.

    The 1st game attempt can be found here….

    http://www.foundstuff.co.uk/2009/magic-towers-solitaire-an-addictive-little-solitaire-game/

    Excellent plugin and simple to use.

  • Comment by Steve
    Date: October 30th, 2009 at 3:13 am

    Well it seems to me to be quite useless, the grid view shows evey post of the whole blog, fine if 2-3 is all you have, but when in the 1,000s very terrible.

  • Comment by Ronnie
    Date: January 11th, 2010 at 11:49 am

    When I click the game, it just reloads the page..

    Example:
    http://www.munkholmvej41.dk/?page_id=487

  • Comment by shiv
    Date: February 17th, 2010 at 8:08 am

    hie friends i have installed but unable to put the games in blog.. help me out….

  • Comment by Transformez votre Blog en plateforme de jeux vidéos! | 5axe Deluxe Edition – Le blog
    Date: May 30th, 2010 at 11:34 am

    [...] de l’auteur : ici A VOIR AUSSI :Embed iFrame Plugin pour [...]

  • Comment by 5 plugins para criar um site de games flash em Wordpress | Templates e Wordpress Themes
    Date: June 3rd, 2010 at 3:10 pm

    [...] 4. WORDPRESS GAMES EMBED [...]

  • Comment by Crie um site de games em flash em Wordpress :: Tutoriais CTDO - Sua Base de Tutoriais Online
    Date: June 10th, 2010 at 9:45 am

    [...] quando você considera que é bastante mais acessível que todos os seus competidores.04. Wordpress Games EmbedEste plugin Wordpress, ainda em versão beta, é gratuito e lhe permite embutir games flash [...]

  • Comment by lousy jones
    Date: June 13th, 2010 at 3:04 pm

    well thanks for this, but it just refreshes the page loaded once

  • Comment by Crie um site de games em flash em WordPress « Diogo Paixão
    Date: August 23rd, 2010 at 2:24 am

    [...] 04. WordPress Games Embed [...]

  • Comment by Ana
    Date: August 23rd, 2010 at 12:58 pm

    Hi!
    I tried the code for the “Grid” and it is not working, can you please check?
    http://www.juegoxdia.com/?page_id=23
    thanks
    Ana

  • Comment by Super Games
    Date: October 2nd, 2010 at 6:19 pm

    Thanks , I’ll try on my next site.

  • Comment by Plugins para criar um site de jogos com Wordpress | Criar / Fazer site grátis,logomarcas,criar blog, dicas de como criar
    Date: October 6th, 2010 at 1:51 pm

    [...] 04. WordPress Games Embed [...]

  • Comment by How To Embed Mochi Flash Games Into Your Blog Posts | techtikus.com
    Date: March 23rd, 2011 at 3:53 am

    [...] can set attributes such as width and height according to your blogs measurements.  Here is a list of other attributes that you can use with the short [...]

  • Comment by arielsan
    Date: May 27th, 2011 at 2:49 pm

    Sam, I tried to use the plug-in using the same example for iframes (no flash), and I believe you have a bug in your code or in your example. The thing is, if you define flash=”false” (I want to use iframes) then the variable flash will be defined as string “false” but in your code you are checking for if($flash) and that will return true whatever the value of flash variable is. As a user, if you don’t want flash, you will have to remove the flash parameter.

    [game ... flash="false"] -> [game ...]

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




6 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

  • Comment by fatih
    Date: September 12th, 2010 at 9:46 am

    hey

    thanks for your sharing but. ı have some problem
    I downloand the .fla document but ı didnt open it with mocromedia flash 8 can you help what is he problem please ? ı am waiting your answer

  • Comment by Scott
    Date: October 19th, 2010 at 10:05 pm

    Well Done just what I was looking for!!!

    Thank You!!!

  • Comment by George Garchagudashvili
    Date: November 9th, 2010 at 9:18 pm

    Nice tutorial, also would be great if only as3 version will be posted :)

Leave a Comment