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

WP Holding Page Theme

Date: 30th January 2009 at 1:59 am | Filed under: themes, wordpress | Author: Sam Burdge | Tags: , , , ,

The WP Holding Page theme for WordPress is intended for use at times when your site is undergoing maintenance, or is under construction. There are a few themes and plugins out there that also serve this same purpose, the main advantages of this theme are:

  1. Simple basic classy design.
  2. Easy to install & works 'straight out of the box'
  3. Configurable text,colours, fonts and styles via an  Options Page

You can enter you own text for your holding page via the WP Holding Page Options tab in WordPress.

INSTALLATION:

  1. Download the theme from the link at the bottom of this post.
  2. Upload the theme to your wp-conent/themes folder.
  3. Select the theme from the 'Appearance' page in your WordPress and activate it.
  4. Optionally you can configure the theme via the 'WP Holding Page Options' tab under 'Appearance' in WordPress

CONFIGURATION:

You can configure your holding page via the 'WP Holding Page Options' tab under 'Appearance' in WordPress. Here is a list of available options:

  1. Title text
  2. Body text
  3. Text colour
  4. Background colour
  5. Font style
  6. Title size
  7. Text size
  8. Page alignment

Options page screenshot:
options

THEME SCREENSHOTS:

hp1hp2hp6hp3hp4

DOWNLOAD:


6 Responses to “WP Holding Page Theme”

  • Comment by pressitfor.me
    Date: January 31st, 2009 at 3:00 pm

    WP Holding Page Theme | Sam Burdge…

    The WP Holding Page theme for WordPress is intended for use at times when your site is undergoing maintenance, or is under construction. There are a few themes and plugins out there that also serve this same purpose, the main advantages of this theme a…

  • Comment by WP Holding Page | Simple Themes
    Date: February 25th, 2009 at 1:51 pm

    [...] Release Page [...]

  • Comment by Under Construction Themes for WordPress
    Date: September 3rd, 2009 at 7:00 am

    [...] WP Holding Page Release Page [...]

  • Comment by Don’t show your working | Blog Mum | WordPress made easy
    Date: November 27th, 2009 at 1:54 am

    [...] will need: the WP Holding Page theme; the Theme Test Drive plugin, and of course a WP [...]

  • Comment by WP Holding Page Template
    Date: May 2nd, 2010 at 4:23 am

    [...] Preview — Download [...]

  • Comment by mikhel
    Date: October 24th, 2010 at 4:37 am

    This theme would be so cooler if there was a way to include an image to the page and more ways to interact with the viewer.

Leave a Comment

Flash Audio - Sound Visualisation & New Audio API

Date: 27th January 2009 at 11:37 pm | Filed under: development, flash | Author: Sam Burdge | Tags: , , ,

INSPIRATION

A long time ago I remember being inspired by the Dub Selector project at Infinite Wheel, a series of Flash movies that play heavy dub reggae loops, and incorporate various ways of triggering a selection of dub sound effects, drum rolls and keyboard notes. The project gave me the idea to create a more in-depth Flash music production tool, with many preset sounds and loops, and potentially audio sequencing tools too.

Dub SelectorDub SelectorDub Selector

MY PREVIOUS EXPERIMENTS WITH FLASH AND SOUND

This was back in the days of Flash 5 and I was a novice with Flash, I had only a basic grasp of actionscript. My first experiment was called ATG Beatbox. Here it is in all it's lo-fi glory!

Pretty basic,  but quite fun to play with too! The main problem I had was getting the samples to loop properly, and to get 2 or more samples to play in sync with each other. These restrictions made the possibility of sequencing very limited, so I ended up creating it so that the user could trigger the samples manually and had to time it right to get the 2 beats in sync.

The only way I could get the samples to loop cleanly was by importing them into the fla and attaching them to keyframes in the timeline.

I later made a few other experiments, such as a piano arpeggiator which used actionscript to play different arpeggio patterns. The timing was always an issue, and I concluded that Flash makes a lousy metronome! Unfortunately I seem to have lost the source files for this project :( so I can't provide an example.

Other more recent Flash projects I have done which include an element of sound are the SoundFX Player and Artanoid Game for 76 Creative. Artanoid uses the as2 attachSound method to load the mp3 files dynamically from the server.

SOUND VISUALISATION

New to actionscript 3 is the SoundMixer.computeSpectrum method, which takes a snapshot of the current sound wave and places it into the specified ByteArray object. The values are formatted as normalized floating-point values, in the range -1.0 to 1.0. The ByteArray object passed to the outputArray parameter is overwritten with the new values. The size of the ByteArray object created is fixed to 512 floating-point values, where the first 256 values represent the left audio channel, and the second 256 values represent the right audio channel.

It is explained in more depth in the article Sound Visualization in Flash CS3 by Tom Green, which is where I found out about it in the first place.

This is something I'm still experimenting with, but here's a basic example of what it can do:

Notice that because the audio sample is being loaded from the server using the Sound.load() method, the looping of the sample is still not satisfactory. The only way to make a sample loop properly still seems to be to import it and attach it to a keyframe. Here's another more abstract example:

There are a lot more cool examples of this type of Sound Visualisation at the AS3 Sound Spectrum Contest Results Be sure to check out the winning entry, which really demonstrates the scope of what can be done using computeSpectrum.

NEW SOUND API FOR FLASH 10

I recently discovered the Hobnox AudioTool, which is exactly the type of Flash based audio tool I imagined. It's actually amazing! As it features effects, like distortion, delay & reverb, phaser, etc. I could tell that, although the interface was flash, something else was being used to process the audio. The other thing I noticed was that the timing of it's drum machines was perfect! Something I've never been able to achieve with Flash.

Further investigation of the new sound API led me to these three articles by Adobe Engineer Tinic Uro, which seem to be a direct response to the Adobe, Make Some Noise campaign:

In Part 3 of the article he provides some code for a 'seamless loop' using the new extract() method with the samplesCallback event handler. I will put this code to the test as I am sure it will lead to new projects and experiments for me, the results of which will surely appear on my site in the near future!

Other Flash projects that utilise the new sound API are Tenoran, a sampling and basic sequencing instrument, and Noteflight, a a full-featured application that displays, edits, prints and plays back music notation.

Leave a Comment

Simplistix WordPress Theme

Date: 20th January 2009 at 7:16 pm | Filed under: scripts, themes, wordpress | Author: Sam Burdge | Tags: , ,

The Simplistix WordPress theme is elegant, simple and light. It has a newspaper look and feel, with a typewriter style header. It is a greyscale variation of the 76-digital theme set.

simplistix

FEATURES:

  • 2 Columns.
  • Gravatar support.
  • Flash header displaying blog title and tagline.
  • Compatible with many plugins, as listed below...

INSTRUCTIONS:

  1. Upload the theme to your wp-conent/themes folder.
  2. Select the them from the 'Appearance' page in your WordPress.

PLUGINS:

The theme is set up to work with the following plugins if they are installed:

  1. Dagon Design Sitemap Generator — Create a sitemap page.
  2. Get Recent Comments — Display recent comments in the sidebar.
  3. Jerome's Keywords — Attach tags to posts and have them display in your sidebar.
  4. Theme Switcher — Switch between the different themes you have installed.
  5. WP Navigation Tool (NAVT) — Create custom links for the tabbed navigation across the top of the page. Just create a group called 'tabs', then add links to it. This plugin is highly recommended!!
  6. PageNavi — Adds a more advanced paging navigation to your WordPress blog.

DOWNLOAD:


26 Responses to “Simplistix WordPress Theme”

  • Comment by Simplistix — Simple Themes
    Date: January 21st, 2009 at 4:48 pm

    [...] Release Page [...]

  • Comment by pressitfor.me
    Date: January 21st, 2009 at 4:58 pm

    Simplistix WordPress Theme | Sam Burdge…

    The Simplistix WordPress theme is elegant, simple and light. It has a newspaper look and feel, with a typewriter style header. It is a greyscale variation of the 76-digital theme set….

  • Comment by RickHap
    Date: January 24th, 2009 at 11:19 am

    Sam,

    Simplistix is a very nice Wordpress Theme. I like it so much I’m using it!

    I recommend that you provide a child theme with this distribution. It makes it easier to change the theme and keep your original in place.

    I did notice an issue with swfobject.js. I was unable to get the banner to work with the supplied v1.4 file. As a check, I tested the code outside of Wordpress with no success. It could just be the file. My fix was to download the latest version of the swfobject, v2.1 and make a slight change to the code in header.php.

    There must be an issue with Advance Search 2.0 with Wordpress 2.7. I was unable to get Search with the latest version. Installed Advanced Search v0.6 and installed with success (your sites plug-ins list v0.6).

    I will email you info on the changes.

    Rick

  • Comment by Sam Burdge
    Date: January 24th, 2009 at 2:45 pm

    Hi Rick,
    Glad you like the theme! Please email me your updated header.php. I will also look into getting it working with the latest advanced search plugin, and hopefully make an update within the next few days.
    Thanks!
    Sam

  • Comment by RickHap
    Date: January 24th, 2009 at 4:30 pm

    A comment on sidebar.php in the Simplistix theme. I’ve run into a conflict with WP 2.7 and Jerome’s Keywords. The tagging and cloud function is improved within WP 2.7. The tag section can be replaced with the following:

     

  • Comment by RickHap
    Date: January 24th, 2009 at 4:32 pm

    Code did not post. Contact-form-7 does have some limitations.

  • Comment by RickHap
    Date: January 24th, 2009 at 4:42 pm

    Sam,

    I emailed you some info on the changes. From what I have read, others have had challenges with WP 2.7 and Advanced Search 2.0.

    Rick

  • Comment by eggplant64
    Date: January 30th, 2009 at 6:04 pm

    Hi there - great theme! I’m really hoping the updated php is coming soon… I similarly couldn’t get the header to work. Downloaded swfobject 2.1 but, as something of a novice, don’t know what I should be changing…

  • Comment by Sam Burdge
    Date: February 1st, 2009 at 1:03 am

    Hi Rick & eggplant64
    I’ve updated the code now using swfobject 2.1
    Download from the link above.

    :)

  • Comment by eggplant64
    Date: February 3rd, 2009 at 9:27 pm

    Thanks!

  • Comment by JoeD
    Date: February 5th, 2009 at 3:03 pm

    I thought I posted yesterday, but maybe I didn’t hit submit.

    Just to say, thanks for creating a really nice theme! I’m using it on my site http://www.thewherewithal.org.

    Just a few thoughts - first, I have some problems with the tagging function. Perhaps there is a conflict as RickHap says. Was wondering whether you could post the code that uses the wordpress 2.7 tagging function?

    Also, some have been in touch to say that the site is pretty hard to read on some computers, because of the small font sizes. Perhaps Macs in particular. Maybe relative font sizes instead of absolute might be an idea? I’m going to have a play at customizing this myself, but I’m just learning…

    But apart from that, perfect!

  • Comment by Sam Burdge
    Date: February 5th, 2009 at 8:16 pm

    Hi JoeD
    Thanks for your input. The theme’s looking great on your site!
    The tagging problem has been solved with the latest version (version 1.3 available to download above).
    The font thing for Mac I’m guessing is possibly to do with the scalability of the courier font on some systems.

    I found this info:

    font-family: “Courier New”, Courier, monospace;

    Courier is the most common monospace (typewriter-style) font. The Mac version of Courier is scalable; the Windows version is not. Therefore the scalable “Courier New” is preferred, as it is usually available on both Mac and Windows.

    I will look into the possibility of setting the font size in em rather than px. I think your suggestion of relative font sizes is most likely the solution.

    Sam

  • Comment by JoeD
    Date: February 5th, 2009 at 8:54 pm

    Thanks! Look forward to the update

    Joe

  • Comment by Paris
    Date: February 6th, 2009 at 4:09 pm

    hi. very elegant theme. thanks for your effort. i’m having trouble with the tabbed navigation. the link to the NAVT plugin you have up this page is dead. I want to be able to link to both an outside site and, of course, the blogurl, which doesn’t count as a page and so is not showing up. help would be appreciated!

  • Comment by Sam Burdge
    Date: February 7th, 2009 at 11:12 am

    Hi Paris

    Here is the link for NAVT plugin on wordpress.org:
    http://wordpress.org/extend/plugins/wordpress-navigation-list-plugin-navt/

    The plugin can do everything you have described!

    Sam

  • Comment by Paris
    Date: February 12th, 2009 at 5:26 pm

    Thanks again Sam. I have one more question for you if you would be so kind:

    I’m building my own WP theme and I would really like my Comments to behave like yours — when you click Comments in Simplistix, it takes you to the single post page, scrolled down to the comment box.

    I notice two things: when you rollover Comments link in Simplistix you see xyz.com/blog/p=123#respond and it takes you to a page #comment, however the standard comments_popup.php on my site on rollover gives me /?comments_popup=9
    and takes me to a page with just the comments that looks all screwed up.

    I notice your comments.php and comments_popup.php files are different, but if I try replacing mine with yours I just get a blank comments page.

    Can you offer any help here? What factor am I missing?

  • Comment by Paris
    Date: February 12th, 2009 at 6:59 pm

    Forgot to add that if you can help me to remedy this I’ll make a donation of a six-pack of imported beer!

  • Comment by Sam Burdge
    Date: February 14th, 2009 at 2:48 am

    Hi Paris
    The solution is probably to do with a mix-up between the two files ‘comments.php’ and ‘comments_popup.php’.

    Notice in the header of Simplistix the line:
    < ?php //comments_popup_script(); // off by default ?>

    This means that the comments_popup javascript is not included as the line in php is commented out.

    Search your theme’s header and see if the line:
    < ?php comments_popup_script(); ?>
    is included anywhere. If so remove it, or comment it out with ‘//’ as in simplistix.

    I hope this helps, as I like imported beer very much! If this doesn’t solve it, perhaps you could send me a link to look at.

    Cheers,
    Sam

  • Comment by kojik
    Date: March 15th, 2009 at 4:00 am

    Hey- great theme! Was just what I was looking for, but I was wondering if there was a way to change the font in the header (the ‘typewritten’ title?)

  • Comment by kojik
    Date: March 15th, 2009 at 5:47 am

    Another related question- I’ve installed NAVT without any problems, although I am unsure as to many of the configuration options. Is there an easy way to go about changing the “tabs” font to courier as well?

    Basically I’d like to have all the fonts, everywhere, be in courier.

    Many thanks!

  • Comment by kojik
    Date: March 15th, 2009 at 7:09 am

    Scratch the last question - I figured out how to change the font on the tab menus- was a matter of finding the right headings in the CSS.

    /me is a n00b :/

  • Comment by Simplistix WordPress Theme
    Date: September 28th, 2009 at 10:09 pm

    [...] Demonstration — Download URL [...]

  • Comment by Ben
    Date: December 2nd, 2009 at 8:39 pm

    Hello,
    Thankyou for your theme, it is just what Im after since I havnt got the technical ability to implement my own designs.
    I have just 2 questions which may or may not be possible. Firstly I notice that the flash reloads itself everytime you navigate to a new page. Is it possible to make it so it doesnt refresh everytime. I am good with flash but I know this isnt something Flash can control.
    Also, and this is just a minor design tweak…. When a tab is selected it would be great if the line at bottom of the selected tab disappeared so that the white space within the tab becomes part of the main page. That way it is nice and clear what page you are in! I hope you find time to help me out. Thanks again!

  • Comment by dedos
    Date: July 7th, 2010 at 10:51 pm

    congratulations for the theme, i’ve downloaded it and will much likely use it in some geekish project, thanks.

  • Comment by Jennifer
    Date: September 19th, 2010 at 9:04 pm

    Hello Sam

    Thanks very much for this theme. Is there any way to add a link to the header? I just want it to go back to the homepage when you click on it but I’m not sure I can alter that from my end. Please can you help? Thanks in advance!

    Jennifer

  • Comment by esben
    Date: March 3rd, 2011 at 11:29 am

    Like the theme and installed it, but I’d like to change the header font. Where is it in the css?
    Thanks

Leave a Comment

New version of 76 digital themes for wordpress

Date: 15th January 2009 at 10:45 pm | Filed under: themes | Author: Sam Burdge | Tags: , , , ,

The all new version (1.2) of the 76 Digital WordPress theme-set by 76 Creative is now available for download. The theme was designed for a much earlier version of WP, and so did not include support for some important new features. As you may have read in my previous post, there will soon be French language versions of all these themes available thanks to Wolforg.

To bring it in line with the current WordPress standards I have added the following features:

  • Gravatar support
  • Widget ready sidebar
  • Tags (yes we used to have to use a plugin for that!!)

The 76 Digital theme comes in four colour schemes: blue, green, orange and pink. It features a Flash header, which displays your blog title and tagline. It is also set up to work with many useful plugins.

76 Digital Blue - Screen 76 Digital Green - Screen 76 Digital Orange - Screen 76 Digital Pink - Screen

Please read the readme file before installing the themes.

FEATURES:

  1. Comes in four colour schemes.
  2. Flash header displaying blog title and tagline.
  3. Compatible with many plugins, as listed below...

INSTRUCTIONS:

  1. Choose the colour scheme you want.
  2. Upload the theme to your wp-conent/themes folder.
  3. Select the them from the 'Presentation' page in your WordPress.

PLUGINS:

The theme is set up to work with the following plugins if they are installed:

  1. Dagon Design Sitemap Generator — Create a sitemap page.
  2. Get Recent Comments — Display recent comments in the sidebar.
  3. Jerome's Keywords — Attach tags to posts and have them display in your sidebar.
  4. Theme Switcher — Switch between the different themes you have installed.
  5. WP Navigation Tool (NAVT) — Create custom links for the tabbed navigation across the top of the page. Just create a group called 'tabs', then add links to it. This plugin is highly recommended!!

DOWNLOAD:


3 Responses to “New version of 76 digital themes for wordpress”

  • Comment by 76 Digital « Simple Themes
    Date: March 1st, 2009 at 4:52 pm

    [...] Release Page [...]

  • Comment by Craig
    Date: September 27th, 2009 at 9:03 pm

    I’m just wondering, you mentioned with the “flash titles” plug-in that the font could be edited with Flash CS3. Would it be possible to do the similar with the headers on the 76 Digital themes here? I love the aesthetics but am looking at using a different font when I go onto using the theme.

    Many thanks,

    Craig

  • Comment by Ciaran
    Date: June 4th, 2010 at 11:08 pm

    Hello, I was just wondering about two things; the flash header won’t display all of my site discription, it cuts off in the middle of the second word. How can I fix this?

    Also, I’m unsure of how to make a “home” tab, I want it to take people back to the home page, and I don’t think this is possible if I just click “new page” in the wordpress admin.

    Sorry if they’re rather n00by questions, I’m pretty new to all this HTML stuff. If you could get back to me, I’d appreciate it.

    Thank you. :)

Leave a Comment

 Page 1 of 3  1  2  3 »