Awesome Background Light Effects in Flash - 3 FlashEff Component GiveawayListThumbs
Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway
Last week I was working on a project that needed a Flash animation, nothing really complicated, but I thought a nice animated background with some light effects would work just fine. With that in mind I used a few ellipses, some blur and blend modes to create the effect I wanted. The result was really cool and the best thing is that the process was super easy.
Because of that I decided to write a Flash Tutorial showing how to create an awesome background with light effects, but there's more. The guys from JumpeyeComponents gave us 3 copies of the incredible FlashEff component. To win is simple just leave a comment, as usual and we will announce the winners next week.
FlashEff is a Flash CS3 (and Flash CS4 ready) AS3 component (by JumpeyeComponents) created for easing the animation process. It is also a collection of over 140 patterns (and growing) that enable cool animations and interactive actions on visual objects and texts. FlashEff can be used/customized from both, the visual interface and API.
Step 1
Create a new document in Flash, I used 600x500 pixels because it was the area I had for my design. Then select the Rectangle Tool (R) and create a rectangle. Fill the rectangle with gradient. Use Linear for Type, and for the Colors use #040F1E and #2F4462. After that select the Gradient Transform Tool (F) and rotate the gradient. The dark blue will be at the bottom.
Step 2
Select the Oval Tool (O) and create an ellipse, then go to Modify>Convert to Symbol (F8) and convert the ellipse to a symbol.
Step 3
Editing the symbol, you will have the ellipse in the frame 1, go to the frame 100 and click the right button of the mouse. Select Insert Keyframe. Then with the Subselection Tool (A) edit the shape of the ellipse, move the points to create a different shape.
Step 4
In the Timeline, click with the right button of the mouse in a frame between the first and the last and select Create Shape Tween.
Step 5
Insert another Keyframe, this time in the Frame 200, then with the Subselection Tool (A) again, modify the shape of the object and apply another Shape Tween in the timeline.
Step 6
Repeat the previous step, but for the last image instead of using the Subselection Tool (A) to deform the shape, copy and paste the ellipse of the first layer. Add the Shape Tween again. The idea is that this movie clip will be deforming an ellipse then getting back as an ellipse again, sort of endless loop.
Step 7
Back to the Stage view, you will have the instance of the movie clipe you created. Duplicate that instance 3 times. Rotate and scale them like the image below. Then go to the Movie Clip Properties and change the Blend Mode to Overlay. Tip. You can create different movie clips with different shapes and number of frames, it will make it more fluid.
Step 8
Select all instances of the ellipse movie clip and go to the Property Panel. Go to Filters and add Blur. Use 150px for the Blur X and Y. Then test your movie. If you want it faster you can edit the movie clip and reduce the number of frames, instead of 1 to 100 make it 1-60 for example.
Step 9
Add a text to the stage in a new layer and convert it to Movie Clip, Modify>Convert to Movie Clip (F8). Then go to the Window>Components or F7. Select the FlashEff component and drag it right over the movie clip. That way it will link the component to the movie clip.
Step 10
Go to Window>Other Panels>FlashEff Panel. Then select the component you dragged to the stage. Click on the Show tab and select the Pattern tab, you will be able to select the type of effect you want to apply to your movie clip. In my case I used FESDesertIllusion with the default palatinates. Then select the Hide tab. In this tab you can set how the type of effect you want to apply to hide the movie clip. I used the same as the show, so it will appear and disappear with the same effect.
Step 11
Here the idea is create a transition to a black background. To do that, create another layer and go to the frame 110. Insert a blank keyframe by clicking with the right button of the mouse and selection Insert Blank Keyframe. With the Rectangle Tool (R) insert a rectangle with the dimensions of the stage. Fill it with black but change the Alpha to 0. Then go to the frame 125 and insert a Keyframe, not a blank this time. Change the Alpha of the rectangle to 100. Then apply a Shape Tween in this layer from the frames 110 to 125.
Step 12
Insert frame to all layers in the frame 125. Then add another layer and rename it to logo. Add your logo and convert it to a movie clip. Then add another FlashEff component linked to the logo movie clip and go to the FlashEff panel. Select the Show Tab and set a pattern to make the logo appear in the screen. I used FES3DCamSquareFocus with the default settings. Then just save and test the movie.
Conclusion
The blend modes in the new version of Flash CS4 are really cool, they work pretty much the same as in Fireworks and that is great to create some light effects very easily. Also the new interface of Flash is much better, more similar to After Effects.
This was the first time I had the change to play with the new version of Flash and I now, want to play more. Besides that, the FlashEff component is incredible, the effects you can do with it are very professional, and the best thing, you won't waste time trying to figure out a way to create those effects, just select a pattern and voilà.
Another Example
Download the Flash File
Click here to Download the Flash file used for this tutorial
About the author
My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.
159 Comments
very nice , good job :)
wow..simple effect but nice result..love it :)
WOW, great effect, thanx a lot for sharing :)
Great tutorial, thanks!
I have the opportunity to work with the FlashEff component at work but I would love to have a my own!
Very nice, too bad Im still using Macromedia flash mx 2004
Very nice, too bad Im still using Macromedia flash mx 2004.
nice effect! currently i'm learning flash and this tutorial realy helps me with my education. more flash tuts please! :)
Excellent! Seeing as how I'm currently teaching myself design outside of classes I always love finding a handy new tool.
Seems to be a powerfull tool. Simple effect but nice result.
I'd like to win!
These are cool. Great tutorial
I like the result. Looks like there are a lot of different uses for it.
Nice tutorial. Simple flash concepts…very nice result.
I love flash but I've always been more of a designer than programmer. It would be so nice to spend less time scripting and more time on the design elements.
Keep up the good work.
Thanks for this tutorial, something that is often missing as part of web giveaways. I not only have a better feel for what the component can do for me, but want to win.
Fantastic effects! Thanks for the demo.
Obrigada pelo tutorial. Vou usa-lo mais tarde.
Abraco,
FayeC
omg!! what a wonderful component!
great tut! ;)
Awesome tut!
Exactly what i needed. :-)
wow, that excellent work, really very good application,
would i really like to win a copy of this. Thank you very much for the tutorial, this page is really good, one of my favorites.
Congratulation guys! very good work!
Really! That is a great and very simple light effect!
Great Tut.
This would be awesome to win!
Grande!!
Great tutorial! Thanks a lot XD
Nice effect. thnx
Fantastic Work, Thanks!
sweet transitions.
ok i never win anything! lets do this.
Un buen y muy útil efecto, siempre he pensado que el flash debía tener este tipo de funciones.
Saludos!!
Finally, a flash tutorial is on here! It's great, totally great and I can't wait for the next one!
Wow, very nice and simple effect. Thanks for the tutorial.
Very nice and helpfull as well!
This will help any website stand out
Great tutorial. I am in the process of building my own web page and this has given me some nice ideas. Not a big fan of the second text example. Makes me think of a tricked out powerpoint presentation. ;) But the rest of the tutorial is really great.
Cheers.
Thanks for the tutorial! Im a beginning flash user and this will definately help me add some fun effects with future projects.
Great Effect, especially the first 'water-like' effect.
Isn't the opening credits in Pixars 'Finding Nemo' just like that ? I believe it is...
Cool!
Too bad Flash stopped working and when I contacted Adobe, they basically told me it was my problem and I need to deal with it...
If I ever buy it again, I'll attempt this...
wow, this looks like a really handy tool for moi!
nice job Fabio, as always!
Great tutorial! simple, clean effect!
Great effect, love those components.
really cool light effect ! thanks for this flash tutorial, it will be cool that you make other good flash tutorial as this one. Well i was bluffed by the flash eff, so i visited their website... it's impressive, the animations are really profesionnal, congratulation to Jumpeye components ! Do you know other really good websites like JC ?
PS. abduzeedo, i really appreciate your work too ! so much thanks it's a very very good work ! a beautiful website, a very interesting daily inspiration, and useful tutorials. thx
Nice tut hopefully I win I've been wanting to play around with FlashEff
Thank you for tutorial. I will try to use this technique someday
Thank you for tutorial. I will try this technique someday
oooo, i love that effect!
FlashEff rockz! I'm in =D
You just saved me like 9 hours! Great tutorial. Thank you.
nice effect !! Flash rocks !!my favorite software !!
http://www.yaweb.fr/pages/main.html
sweet stuff. keep up the great work!
Aloha!!! Hey!!! I really wanted a tutorial about flash!!! and guess what!! this tutorial is exactly what I was looking for :)
Many Thanks to you ;)
Maggie
ahh ! and also if you have a copy of FashEff for me It would be great!!!!!!! :)
Best wishes!
Great effect with FlashEff! I'll have to check it out for some upcoming projects. Great stuff!
Ooh I'd love this, I'm an avid Flash movie/game maker.
I like this effect...nice and clean. Thanks for sharing the tutorial:)
Nice effect... this FlashEff rulez man... =O
Unbelievable....
WoW...I like how it looks as if you were looking at moving lights from under water.
Great Job.
Nice tutorial. and Flash eff looks great.
Muitos Parabéns pela grande obra de arte que é este blog!!
O design cresce com vocês..
Um abraço desde Portugal
datz really really awsum...no need to import bg clips from after effects...simply awsum....as usual
Great looking effect! Love the Flash eff too that is awesome!
very nice, its time to learn again :-)
Wow, very impresive effects that we can take with this!
The best thing is that you can save time, and money.
Terrific!
Well if Flash UI is becoming more like AE, I'm def gonna have to check it out soon :)
Great effect! Great inspiration!
This was great - Exactly the effect I was looking for, for a major project - Although I did change the text-animation to a smooth fade-in / fade-out effect to achive that overall chill-out feel to the animation..
As always everything you need to know is explained in the tut and the result is stunning - That's why Abduzeedo is my first site open when I get to my office, and the last one before I leave for home..
And remember: "It's not what you look at that matters, it's what you see."
uber-sweeet!
Awesome effects, wouldn't hurt to have that in my collection :)
Nice one, and quite straight forward.
Please more flash tutorials!!
And thanks for this!! ;-)
cool! I want one!
This is really really cool and so easy to create. Nice effect with great tools.
Never worked with flash my entire life, but it did not look so complicated, which is great :D
Thanks for sharing
Nice effect.
Great Stuff. Thank you for sharing.
Very nice tutorial, it would be great to see more quick flash tuts like this one. Thanks!
Cool Effects. In CS4 you could also use IK Tolls instead of the Shape Tween. Best L.
It's looks preety nice.
Light blending is cute.
Best.
very clean, as long as it doesnt work too slow in older browsers i like it!
Finally an awesome Flash tutorial here on Abduzeedo!
Thank you very much for sharing this with us. Please post some more ... ! :-)
Really nice tutorial...
Haven't seen this kind of content for a while
Would like to see more flash here...gratz for the nice effect
Very good ;)
Sweet.
I could really use this component, wonderful.
This is the best component giveaway i've seen in a while! it's fabulous!! cheers, Matt
Very interesting!
I'm not too used to Flash but I think that'll be a good start!
Very nice idea, playing with vector lights is something new on the old fashion web animation. I love it!
Simple porém com resultado explêndido!
Nice tut fabio you're great!
Nice!
Another great eye-candy if you only use non-animated simple circles, filled with radial gradient fading their color to zero alpha black (!) from center to outside.
Set their blend mode to add, place several ones on stage and move them constantly overlapping each other. For example using Tweener/Tweenlite (depending on project size)
Voila, a lava lamp:)
I was in the mood to create it:
http://www.lfsteam.com/dl/lavalamp/
.fla (Flash 8, fully commented, use it as you like):
http://www.lfsteam.com/dl/lavalamp/lavalamp.fla
FlashEff rules 'by the way'!
cheers!
wow great tutorial and would be so happy to get this licence! Thx Abduzeedo!
Great tutorial! Maybe I should actually use flash. I tend to dislike sites that use it too much, and the line between using it right and too much is very thin...
just happens that we've done a project with a similar background. Though.. took us quite some time to get it right. Resulting in that we had to neglect another customer that eventually turned to another agency.. Seeing this tutorial here now and what you've done with FlashEff makes me a little embarresed..
Thanks guys! :D
Keep up the good work!
//f
Great tutorial and awesome plugin. Me love it longtime.
Kudos on your website, folks!
Enjoyable tut as always.
great...very nice tutorial
Thanks a lot for the comments, I will try to write tutorials for different apps like flash and indesign.
@fcuk yeah man the lava lamp effect looks cool and it's the same idea.
great..very nice tutorial...
you always have the best tutorials.
Oh sweet, this is awesome.
neat!
Bookmarked for later. Cheers.
cool effect, love it. thanks for sharing with us!
Nice tutorial. It´s great to see flasheff mixed in.
A grest chance to learn how other third partie applications/plug-ins are applied in real world examples.
awesome effect, hopefully i can do the same when i get the licence :D
muito bonito! Regards from Uruguay
thats G
Very nice! =)
ya kool effect, love it and thanks for sharing
simply awsome!
Wow, great tut... and cool giveaway. Love this blog!
Sweet effect....Now I just need to learn the whole of CS suite.....but hell, your website makes it worth the effort!
B
(^_^)
my gosh, that's some stunning effect! Going through your tutorial, it most certainly takes the difficulty out of it! I suppose having FlashEFF helps too.
wow, flash rules ! very nice and helpfull tutorial, thanks. gretings from Poland :)
sooo cool. good to know it
Greet Job! Nice..
Very nice. Very simple to create yet looks very cool.
Funny! I just produced a very similar look, but all in After Effects. This could trick could have shaved off 200KB from the file size!
Muito legal!!!!
Whooo, great effect, as usual !
Sure is a awesome tutorial... really like it and it sure is simple.
Btw, recently following your site, amazing work and the daily art you show is also great.
Hey, fantastic and very easy.
I love these effects made with these component!
Super Nice!, I'm dying to try it out!
ok, I just leave a comment and hope :)
great effect
I've gotten away from flash, but this is a really clean and subtle use of it. Great Tutorial.
Wow, cool stuff!
This is really cool, I've never used any extensions/outside-components for Flash before.
Very nice. I would love to have that effect...
Great Great tutorial! I love this component. Thank you the simple and powerfull tutorial.
/Sudakaran
Super work!
You guys always manage to create really nice stuff with a process that results so simple that one always goes: "Man, why didn't I think of this too?"...
It's really an amazing tip!
Wow!!! Really nice effect
Easy and fast! Great job. I have previously tried to achieve similar results but the path taken was much longer and tedious. Thanks for the tutorial and hoping to get to win FlashEff and jazz up my work using it.
Thanks for sharing. I learned a new trick for graphic design in Flash :D
That Flasheff component looks nifty.
Indeed a great tutorial that makes use of simple theory... the result is outstanding.
Nice work!
Great tut and I hope to win!
Wow, didnt even know that component existed! Im playing with it now, CS4 is in the mail, cant wait to see the new interface. Great tut!
A simple and effective way to get great professional looking animated bg effect.
Great tutorial as always Abduzeedo.
This tutorial inspired me to learn Adobe Flash. I currently am using Photoshop, Illustrator and InDesign.
Thanks to this video, I'll be facing another chapter in design.Ü
Simple and professional looking . I liked it.!
Looks great, actually reproducing it now to burn it to my memory. Thanks for the heads up on the FlashEff component looks pretty nice. Wonder how it will stand up to standard banner specs for online advertisement. I hope to win!
Great tutorial, and thanks for finally giving Flash some room on Abduzeedo. I would love to see more Flash tutorials & resources here.
Wow! its really a nice tutorial...
First ever seen flash tutorial in here which is really a great one... hope i can see more flash tut in here!
Im really inlove with flash tutorials that i have really made some simple effect with my flash...
Hopefully i will win the FlashEff prize... it will gonna be a great help for me as a flash beginner! ^_^!
Awesome and useful effects, out of my budget though :(
Great tutorial. Well written, and screens illustrate well. Nothing useless and not lacking information-thanks!
did i miss a step? i tried following his tutorial. i'm assuming when you convert it to a symbol, you convert it to a graphic symbol, correct? so after i finished one loop, it won't let me change the blend mode of a graphic symbol. it'll only let me change the blend of a movie clip. however, when i convert it to a movie clip, it doesn't morph. what am i doing wrong?
Great, sorry but it's not miracle, it's simple.
We need more hard one.
Thank you.
remember : Criticism is constructive
Great effect can't wait to try this out!
hi Abduzeedo,
I need to discuss with you about your webdesign
please reach me at mawaddah114@hotmail.com
I'm using Adone Flash CS3 and i'm having problems applying blur filter to symbol after it's been used in a shape tween. It doesn't give me the option to use filters at all actually... My file is actionscript 3.0 flash file
Great tutorials! I saw this component a little bit ago and was impressed but you really showed how it works and gave some cool insight on it's functionality . I LIKE IT!
Simple. Yet Dynamic
Really nice tutorial, I would have used After Effects for something like this but then the file would be pretty large. Creating something like this in Flash is a great alternative.
Thx a lot for this tut. Inf act it's because of this one that I asked my company to get flashEff :)
Great tutorial, thanks
No, this tutorial is awful... its missing spets... Maybe i suck at flash.. but i cant seem to get pass steps 3 to 4.... how can you change a shape to a movie clip so that you can make a shape tween... HOW do you break apart the movie clip? if so... u close the option to use the movie clip option to use the overlay... i dont understand this tutorial is missing steps... i mean, u dont even know if ur using different layers for the shape to the background.. i mean wtf?!
yeah....many steps missing...this sucks!!!
Hey, what a great effect, I love it. I downloaded the flash file but it wouldn't open for me in Flash CS3. Do you happen to have it saved in CS3 format?
Even if you don't, it's great. Way to go!
John
wow!
nice work the back affect is awesome i'll you this effect to my new site! thank you!
That's a really cool way to get an organic moving background in Flash. I always think about trying to find some seamless looping movie (flv) to put back there to get that effect. I had not ever really thought about creating it at runtime in Flash. I guess I always just figured it would be too processor intensive? I notice that you are showing it as a video, does it run ok on most machines?
Hey, great tutorial, it is missing some steps as the people here said...
Im having the same problem, im using Adobe Flash CS3, and when i create a Symbol Movie Clip, i cant create a shape tween, when i change its shape, it changes the shape of all the symbol not only the one in the frame..
The rest is ok, i was able to Overlay and create the Blur... Very cool! but i was able only with oval symbols, not random as you did..
It would be very nice of your part to respond our comments!
Thanks for the tutorial!
That's great tutorial......... very nice one
wow that is cool I wish I can have that
Post new comment