Corporate Flash Animated Banner

Date: 23rd May 2009 at 12:13 pm | Filed under: flash, portfolio | Author: Sam Burdge | Tags: , , ,

Working with design agency Pollen London, I developed this simple, eyecatching flash banner for client Project Associates' website home page.

pollen-screen

The banner shows a constantly moving, rotating array of their team, each image linking to the specific person's profile on the site.

Check out their home page to see the banner in action:

www.projectassociatesltd.com

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

Budukon UK Holding Page and Animated Flash Logo

Date: 12th February 2009 at 1:53 am | Filed under: portfolio | Author: Sam Burdge | Tags: , , , , ,

budokon-screen

I have created an animated logo in flash for the Budokon UK holding page. Using their existing logo I added a shine effect that moves accross the logo every couple of seconds. The fade-in on the logo is done using a combination of the blur filter and an alpha fade, based on the martial arts philosophy of focus leading to clarity!

Check it out: www.budokonuk.com

Leave a Comment

Comus Productions Website Update

Date: 23rd January 2009 at 1:43 am | Filed under: blog, portfolio | Author: Sam Burdge | Tags: , , ,

Comus Website ScreenshotComus Website ScreenshotComus Website ScreenshotComus Website Screenshot

The Comus Productions website has recently undergone a major upgrade. It now has loads of new Flash presentations which incorporate a new set of Comus stings and idents.

The site is now fully content managed with the Admin76 content management system by 76 Creative, so all the text, images and video content on the site can be easily updated by the site's owner.

I used the javascript jQuery library a lot throughout the site, to fade text in and out, fade images and to switch slideshows and videos too.

A prominent feature of the site is the recreation of the Photoshop Lens Flare as an animated flash movie, which I adapted from this lensflare project on FlashDen. It was this lensflare that inspired the most experimental flash movie of the site - the Comus Viewfinder which can be seen on the links page.

Other Flash features include a more corporate style flash presentation on the services page and an explosive ident on the home page!

Visit the site: www.comusproductions.co.uk

Leave a Comment

Leona Naess animated logo and holding page

Date: 15th August 2008 at 10:19 am | Filed under: flash, portfolio | Author: Sam Burdge

This holding page built for Polydor artist, singer / songwriter Leona Naess features an animated logo with random fades and glows. The flash random timing actionscript is something I have utilised in the past to create similar effects (see: ).

The holding page also features a streaming mp3 (using flash), mailing list signup form with javascript validation embedded youtube video and google analytics.

Check it out:

www.leonanaess.com

Leave a Comment

 Page 1 of 2  1  2 »