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

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