Creatively sharing Flash Creations, News, and Tutorials

Flash Tutorial Pictures for the web

July 28, 2008 Uncategorized No Comments

Flash Tutorials Filters

July 27, 2008 Uncategorized No Comments

 

Flash 8 Pro comes with some great Filters. These can be applied to text, images or other graphics. You can do this either whilst you are editing the Flash Movie or on the fly with ActionScript. Here is what Flash 8 help says:

Graphics Effects Filters: You can apply graphics Filters to objects on the Stage. These are called Filters because they pass the image data of the object through an algorithm that filters the data in a specific way. With these filters, you can make objects glow, add drop shadows, and apply many other effects and combinations of effects.

 

 

In this tutorial you will learn how to create graphics and text with Filters like this:

 

 

All the Filters Listed:

All the filters as listed in the Property Inspector:

Filter are listed in the Property Inspector.

 

I have drawn a rectangle in Flash 8 Pro and applied the various Filters:

No Filter	Drop Shadow	Blur	Adjust Color
Glow	Gradient Glow	Bevel	Gradient Bevel

Note: Any particular Filter can look very different depending on the options used. Both of these are the same Filter but with different option settings:

Gradient Glow

Gradient Glow

Both of the above are created with the Gradient Glow Filter.

Step One: Adding Text to a Flash Movie

 

In this part of the Tutorial I will show you hoe to apply Filters to Text. The first thing to do is open a new Flash document and add some text.

Warning: This tutorial has been written for Flash 8 Pro. There are no filters with the standard version of Flash 8 or with previous versions of Flash.

1. Go to: File > New > General Tab > Flash Document > OK(Ctrl N)
2. Select the Text Tool:
3. Click on Stage and: Type

I Type: Flash Professional 8 - Filters



Note: Your Text will probably look different as it will have different colours or other properties. If you wish you can change your Text”s properties in the Property Inspector: Window > Properties > Properties(Ctrl F3)


My Text”s properties.

Note: If your text does not fit into a single line you probably have a Fixed With Text Block instead of an Expandable Text block.

Definition: Fixed Width & Expandable Text Blocks

Step Two: Adding Filters to Text

1. Go back to the Selection Tool:

2. Select the: Text
3. If the Property Inspector is closed, open it: Window > Properties > Properties(Ctrl F3)
4. Click on the Tab: Filters
5. Click on the Add Filter Button:

Note: If the Add Filter Button is grayed out your Text is not selected: Click on the Text

6. Select: Glow
7. In the Glow options select Quality: High
8. Change any other: Options

Here are my Option Settings:


My Glow Options.


My text with a red Glow.

9. Click on the Add Filter Button:
10. Select: Drop Shadow
11. In the Drop Shadow options select Quality: High
12. Change any other: Options

Here are my options:


My Drop Shadow Options.


My text with a red Glow & a Drop Shadow.

At this stage I thought that the text looked too dense and decided to change the Font Color to White. Although if my Flash Movie was going to have a black background it could look intense: Modify > Document(Ctrl J)


Flash Movie set with a Black background and

13. In the Property Inspector click on the Tab: Properties(Ctrl F3)
14. For Text Fill Colour select: White

My Text is now complete:



You may want to return to the filters and add additional filters and play with the options. Have fun!

Step Three: Filter Order

It is possible to drag the filters up and down the list so that they appear in different orders. In the above example I used:

Glow
Drop Shadow

It is possible to reverse this by dragging the Filter Label up or down:

Drop Shadow
Glow

In this instance the difference in the effect is subtle but if you look carefully you can see:

The Drop Shadow goes under the Glow.

You can see that the red Glow goes right around the bottom of the Drop Shadow.

Step Four: Multiple Filters

It is possible to have the same filter repeated several times either with the same options of with different options for each. In the example below I have used three Glows. Each with a different colour and different Blur setting:

Three Glows each with different colours and Blurs.

Step Five: Applying Filters to Other Objects:

Filters can only be applied to Text, Buttons & Movie Clips. If you want to apply a Filter to an other type of object such as Clip Art or a Drawn object (such as a rectangle) you have to draw the shape and then convert it to a Movie Clip:

Here is an example:

1. Select the Paint Brush:

2. Paint a shape on Stage (work area): Paint


My painted shape.

3. Return to the Selection Tool:
4. Convert to a Symbol: Modify > Convert to Symbol (F8)
5. For Type select: Movie Clip
6. Click: OK

Note: You will now have a Move Clip with your painted Shape embedded inside the Clip.


The painted Shape is now embedded in a Movie Clip.

Symbols: You can tell that it is a Symbol because when selected with the Selection Tool you can see:

  A cross that depicts the where the X Y zero point is located.
  A circle representing the rotational centre point.

The cross and circle does not tell you what type of Symbol and if you what to know if it is Movie Clip, Button or a Graphic you need to look in the Property Inspector.


Property Inspector with info about the type of Symbol.

Note: Only Movie Clip & Buttons Symbols can have Filters applied.

7. If the Property Inspector is closed, open it: Window > Properties > Properties(Ctrl F3)
8. Click on the Tab: Filters
9. Click on the Add Filter Button:
10. Select the Filters of your choice: Apply Filters
    

    
    I Selected Gradient Glow then a Bevel Filter.

    Note: Even though the visual effect looks like the painted Shape has a Filter applied, it is actually the Movie Clip that has the Filter applied.

Photoshop and other Graphics programs have had Filters for years and I feel Flash has lagged behind and that its was a long time in coming. I think that Filters are a big step forward and really enhance the visual effects that you can create.

Steam Effect created with animated Filters.

Cross Ref: Learn how to use Filters to create an animated steam effect: Animating Smoke, Steam or Dry Ice

 

 

Please indicate what you thought of this tutorial  10 is the best:	10 9 8 7 6 5 4 3 2 1

… Read More of this tutorial at WebWasp.co.uk Tutorials

One of the most unique, up-and-coming, uses of Flash is within the foreign real estate sector. Real Estate marketers, keen on providing a visually stimulating and comprehensive sales experience for their customers, often call on flash designers to create intricate visual portfolios of real estate offerings. Unlike other verticals, in the condo, hotel, and rental world Flash website intros and intense imagery are acceptable, if not rule of thumb. Text doesn't sell a nice vacation condo to a buyer. Instead, a clear, inviting, exciting layout of the property, beach view, and condo floor plans united inside a short Flash .swf file will catch a prospective buyer's attention, draw them in, and hopefully convert them into a sales lead.

Probably one of the most stunning and sought after vacation spots in the world right now is Costa Rica, a small Latin American nation located in beautiful Central America. Costa Rica has the best of both worlds: sweeping beach scapes of sand and palm trees from both the Caribbean and Pacific Ocean can be found within a short hour flight from the main international airport in capital city San Jose.

The pristine nature of many beach communities has spawned a new tourism based economy that has developers scrambling to build new a Costa Rica hotel on this devine beach property. The Costa Rica vacation rental market is competitive and becoming full of excellent opportunities for savvy buyers.

This is where Flash comes in. Most Costa Rica vacation condos can't be sold over the phone. Instead, it takes graphics, eye appeal, and excitement to capture a buyer. The same goes with Costa Rica beach condos which need graphical imagery to convince customers of their beauty and value over the internet. A typical Costa Rica vacation rental can range from $500 per week to $1500. On the top end, Costa Rica vacation luxury rentals start at $1500 and run gambit to over $2500. The money spent, however, is well worth it. Costa Rica beach condos go fast and advance reservations are required. So, if you know anyone who is interested in this wonderful, exciting get-away, tell them now!

As a result, traditional Costa Rica vacation rental and Costa Rica vacation hotels have had to create a very strong IT and Web design department, in addition to the standard walk-in real estate office. This fact is soley due to the global nature of the web: customers can't always visit first, so they chose to take a virtual tour instead. Thus, Costa Rica beach Condo developers count on a strong percentage of their sales being web-generated, in addition to standard brick and mortar operations.

What do these Flash designers use? In addition to stock photography, architectural layouts, and imagery, Flex and Action Script are employed to provide a 3 dimensional, "virtual tour" of these Costa Rica vacation rentals. The action script provides the programmer with the opportunity to fully animate condo tours, such that a prospective customer can feel as if he or she is actually inside the space they want to rent. In turn, because of the strong need of Flash, local web designers in Costa Rica have experienced high job growth and new employment opportunities. As always, foreign tourism teamed with local internet talent produces a dynamic, rich new economy that can literally change a country overnight. Considered a pioneer in employing such designers, most Costa Rica real estate groups prefer tradition website design. These flash-friendly companies generally emanate from the western side of Costa Rica, offering Jaco Beach real estate and accomodations.