FlashEff2 Wants You

abduzeedo — Mon, 11 May 2009 22:18:28 +0000

Last January I wrote a Flash tutorial about some light and text effects, which I used a neat Flash Component called FlashEff. Also, we gave some copies away... it was really nice, and now, the guys from Jumpeyecomponents.com are looking for some beta testers to their new version of FlashEff.

FlashEff is an advanced Flash effects component (works both on Flash CS3 and Flash CS4, AS3.0) developed by JumpeyeComponents for easing the animation/transition process. It is also a collection of over 140 effect patterns (and growing) that enable cool transition effects and interactive actions on visual objects and texts. FlashEff can be fully used/customized from both, the visual interface and from code.

If you want to participate just leave a comment with a valid email address, they will contact you and give you access to the beta version for free. The last day to comment is May 18th. I have tested it myself and I have to say, it is really good as you can see for the example below: that took me 15 minutes.

Example

About the author

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. You can get in follow us via Twitter at @abduzeedo

FlashEff Giveaway Winners Announcement

abduzeedo — Mon, 09 Feb 2009 11:12:53 +0000

After a few weeks we have the winners of the FlashEff giveaway from the Awesome Background Light Effects in Flash tutorial. We’re thrilled with the great number of comments the article had, therefore, we will try to release Flash tutorials more often. So, if you are a Flash ninja and want to share with us some tips and tricks, please, let us know.

So, without further adue the winners are:

Corné Meerkerk
John Holt
Amy Stoddard

We’d like to thank you all for the comments and stay tuned because we’ll have more really cool giveaways soon.

Examples

About the author

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway

abduzeedo — Thu, 22 Jan 2009 18:35:26 +0000

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

flash component

FlashEff2 Wants You

Last January I wrote a Flash tutorial about some light and text effects, which I used a neat Flash Component called FlashEff. Also, we gave some copies away... it was really nice, and now, the guys from Jumpeyecomponents.com are looking for some beta testers to their new version of FlashEff.

Example

About the author

Sponsored Links:

FlashEff Giveaway Winners Announcement

Examples

About the author

Sponsored Links:

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Conclusion

Another Example

Download the Flash File

About the author

Sponsored Links: