A GREAT RESOURCE FOR ANYTHING WEB DESIGN

You can find SO many web sites here!! This is incredible!! Check out the free CMS at the bottom...

Click HERE

How to make a Flash movie with a transparent background

How to make a Flash movie with a transparent background

The background of a Flash movie can be set to transparent. This allows the background color or image of the HTML page that contains the Flash movie to show through and allows the layering of Flash content with DHTML content.

The following browsers currently support windowless mode:

Windows and Mac OS X

Internet Explorer 3 or higher (Windows)
Internet Explorer 5.1* and 5.2* (Macintosh)
Netscape 7.0*
Mozilla 1.0 or higher*
AOL*
CompuServe*

* Macromedia Flash Player version 6,0,65,0 (Windows) or 6,0,67,0 (Macintosh) or higher required for this feature.

Note: Mac Classic is not supported for this feature. Transparent backgrounds are also not possible in a Flash standalone projector.

Note: If windowless mode is used, performance can be affected to some degree. If fastest performance is a top priority, you may consider other design options.

Preparing the HTML page to make the Flash movie transparent

Three methods of creating an HTML page with the correct code are outlined below.

Publishing from Flash

The HTML for a Flash movie can be created using the Publish Settings feature in Flash. The Publish Settings dialog box provides an option to affect the WMODE setting. The options selected in the Publish Settings will be added to the HTML source code automatically:

1. Choose File > Publish Settings. Select the HTML tab.
2. Choose "Transparent" in the WMODE setting to make the Flash movie's background disappear in browsers which support this feature.
3. Publish the document.

Using Dreamweaver

Follow the below steps, and Dreamweaver will insert the correct HTML code automatically.

1. In Dreamweaver, insert the Flash movie into an HTML page.
2. Select the Flash movie in the Design View.
3. In the Properties panel, choose Parameters.
4. For the Parameter, enter "wmode" (without quotes). For the Value, enter "transparent".
5. Save the document. The HTML page is complete.

View a demonstration of these steps.

Editing HTML code manually

To edit an existing HTML page, add the WMODE parameters to the HTML code.

1. Add the following parameter to the OBJECT tag:
   

Add the following parameter to the EMBED tag:

wmode="transparent"

THANKS ADOBE FOR THESE TIPS!!

Flash CS3 Pull-Down Menu

STEP 1.

We are only going to build ONE Pull-down menu item in this exercise.
Decide the Name of the section, and the 3 names of the subsections that correspond to that section-menu.
Convert each one of them to a functioning BUTTON.

STEP 2.

Select all the buttons and press F8 or Find MODIFY >CONVERT TO SYMBOL.
Make a Movie clip symbol, with the name of your section, press OK.STEP 3.

Once you are INSIDE the Movie clip divide the buttons, each one in their own layer:
The section name in the lower layer,
Each one of the subsection buttons, with the layer named as themselves.
Make a layer for Actions.

Move the 3 subsection keyframes to frame 5 (we don't want to see them at the very beginning)

STEP 4.

Add frames, at least to frame 15.
Actions layer: Make a Stop() action in frame 1.
Make a frame label called "Roll" on the frame where all the subsections are set to begin.


STEP 5.

As you can imagine, on rollOver of the section button, the play-head is going to come to the Frame-label Roll,

and we are going to see the 3 items appearing on screen. Later on we will make a mask for this, but right now you need to set up the animation of those submenu items, tweening from a place ON TOP of the section name, to their final placement under the section name. See the animated gif for this step:

STEP 6.

You need to insert a Stop() action at the end of your rollOver animation (Actions layer)
You need to attach the action to the section button, so when the user rolls over the section name the animation bringing the subsection menus occurs. See the action syntax below.

TEST 1

Each one of the elements is a button with rollover color, when you rollover "portfolio" the animation triggers.
The action still doesn't work really smoothly, but the action is in place.

STEP 7. - Drawing the Area

There is still a very important part of the functionality of the pull down menu that is still not in place: As you saw in the test, every time that I rollOver on the menu the animation begins again, but when I get away of the movie I am not coming back to the first position (frame 1: only section name). When I have several pull down item in place, I NEED my menu to "unroll" (to disappear) when I roll on another item.

I am going to create a button, that takes us OUT of the sub menu content if we try to move the cursor towards another menu item. For that I need to know WHERE the other sub menus are going to be placed, and in this case the other menu-items will be placed inline horizontally with portfolio.

Describing the area of this button is really a test&fix process, I am drawing it this way:
Area on both sides of the button, descending area towards the content with a bell-shape (you want to be able to move your cursor towards the content without getting out of the section, but count with indecisive users, shifting to another section halfway down the Stage)

STEP 8. - Converting to a Button

Select the area and make it a button called transparent button or similar.
It should be in it's own layer (to be able to hide it when we work on the Movie clip).

STEP 9. - Make it a Transparent Button

Delete the shape from the Up State and go directly to make a keyframe in the Hit-area.
(this is how you make a transparent button)

REMEMBER NOT TO SUPPER-IMPOSE HIT AREAS (see how we are avoiding the section's hit area)

STEP 10. - Program the Button

Add an Action to our new button. When the user rolls over the defined area (towards another section)
the movie should come back to frame1 and leave the Stage clear, so another Pull down menu displays its content.

TEST 2

Check the Menu section and try to use the Navigation in different ways (slowly, quick, abruptly) to see if the functionality responds. You might have to modify hit areas a couple of times.

STEP 11.

We define a mask with the area where the animation is taking place. You don't want to see subsection names "flying" in front of your section name.
If your subsection buttons are defined with colorful boxes this step becomes a must.
We have already learned to set masks in Flash, but you can see an animation for this specific case:



TEST

Now the art, animation and interactive buttons are under a mask and don't show up behind or in-between the letters in "portfolio".

STEP 12.

Add frames to the Section's timeline and add keyframes and Frame-labels for each one of the subsections
(in this case, frame labels "art", "animation" and "interactive").

STEP 13.

Once Add an action to each button so they go to their Frame label when pressed. Notice that we add the action underneath the stop, when the animation is finished.

STEP 14.

Add Now we are going to set keyframes in each one of the subsection layers.
Set a keyframe in the Art layer right underneath the "art" label(we want the word art on Stage to become white when we are in the art subsection, so we make a keyframe to modify the button)

Set a keyframe in the Art layer underneath the next subsection (When we are in the animation subsection, we want the art button to be active).

WARNING: If you don't follow the instructions in this part, you will end with buttons that don't work under certain subsections. This is a crucial step.



STEP 15.

Set a keyframe in the Animation layer (for the animation button) right underneath the "animation" label (we are going to change the color of the subsection that you are IN as a Navigation-help hint for the user)

Set a keyframe in the Animation layer underneath the next subsection (When we are in the "interactive subsection" we want the animation button to be active-with its action attached to it).

Finally set a keyframe in the Interactive layer, right underneath the "interactive" label.

STEP 16.

You here you can see an example of how to make an instance of a Button to behave as a Graphic symbol (you loose the script attached to it, since graphics don't contain Action Scripting).

After that you see how to set the graphic as a single frame (theoretically the button has a Timeline, so the graphic will loop between the Up, Over,Down and Hit keyframes).

Finally how to tint the name of the subsection for Navigation purposes.


STEP 17.

Follow the same process with the instance of "Animation". MAKE SURE THAT YOU ARE CHANGING THE ANIMATION BUTTON underneath the "animation Frame-label".


STEP 18.

Follow the same process with the right instance of "Art". MAKE SURE THAT YOU ARE CHANGING THE ART BUTTON underneath the "art Frame-label".


STEP 19. Add a new fresh layer for the Subsection's CONTENT.

STEP 20.

Make keyframes underneath the 3 subsection Frame-labels. Make also an extra keyframe right after, so the content for each subsection lives only in it's own specific frame (the buttons are programmed to gotoAndStop to each one of the Frame-labels). If the subsection content includes animation, you will have to place a Movie-clip in the subsection-only keyframe.

STEP 21. - FINAL

Add some content in each of the subsection's frame ( I am including an initial on each frame so we can TEST the Navigation at work)

FLASH CS3 - Shape Tween Hints

Shape-tweens are Flash animation assistants that allow you to interpolate shape-content "in between" an INITIAL KEYFRAME and an ENDING KEYFRAME. Flash considers the location of points, both in the initial and ending Keyframes and tries to MORPH one shape into another.

Because you might have more than one shape living in those 2 keyframes, or you might want a very specific transition from one frame to the other, There is a feature that helps you regain some control over a Shape-tween. This feature is called Add Shape hint, and allows you to graphically indicate which point in the initial keyframe is becoming which other in the ending one.

Remember that you can always have a better control over this visual 2D morph, if you divide into several Shape-tweens, happening at the same time, but living on different layers.


I am planning my visual effect with several consecutive Shape-tweens. Because I need to place Shape-hints in both the initial and ending keyframe, I don't want the ending keyframe "acting" as an initial keyframe for the next shape-tween (insaine amount of little letters floating over!) I create another initial keframe right after the previous, and I change it slightly, so I don't create a break in the motion flow, this way I am also directing where I want the animation to go.

a, b, c, d

are defining

the four corners of my initial shape

(yellow code: initial shape-hint working)

the extra red shape-hint hasn't snap to any point yet,

a, b, c, d

are defining

the four corners of my ending shape

(green code: ending shape-hint working)

the extra red shape-hint hasn't snap to any point in the last keyframe of the Shape tween.

Now the curtain effect remains consistent. The 4 corner points are always remaining in place and the variations go to the expanding edge.

FLASH CS3 - What is a Symbol???

*Please click on image to view it larger*

A SYMBOL is "a way of saving an element" in Flash that allows you to reuse that element without increasing the File size of your project.

Symbols live in the LIBRARY (Apple_L/Contol_L) (Think of them as the "original" element stored in a safe place in your project)

You can drag "copies" or "clones" of that original to the Stage, where they can get scaled, skewed, rotated, flipped Horizontally or Vertically, even Tinted, but they always keep the relation or dependency to the "original one" living in the Library.

If you alter the "original" element in the Library, all copies or INSTANCES, down on the Stage of your project will get modified accordingly.





"Green circle" is a library element.
In the LIBRARY we see that greencircle is a GRAPHIC SYMBOL .
Greencircle is selected on stage (that's why we see a blue square around it).
The Properties window displays information about the selected item, and we can see that the item on Stage is described as an INSTANCE of the graphic symbol "green circle".




Instances of Symbols placed on Stage can change their appearance by Modifying their color attributes in the Properties window. It works by percentage (modify it a 20%, 40% or 100%) and if you apply a Motion Tween between 2 keyframes containing different values for that same instance, you will get a smooth transition for the effect.

You can alter the Brightness of an instance (all the way up to White, all the way down to black)

You can Tint an instance with any color of your palette (you can also write down the RGB value of the Tint-color)

You can modify the Alpha or Transparency, what will make your instance transparent to whatever you have in a layer below (depending on percentage). A Motion Tween of a symbol that has been set to ALPHA=0 in one of the keyframes, will cause an effect of appearing or disapearing on Stage.

You can use the Advanced method when you want to alter the Color and the Alpha at the same time in a keyframe.

FLASH CS3 - Creating a Gradient Overflow

Please Click on the image to see it bigger... Enjoy :)

FLASH CS3 - Creating a Timeline with Keyframes

Please press on the picture to see it in full view... Enjoy! :)

FLASH CS3 Blend and Erase Layer & Transparency

By Alejandra Jarabo, professor, Santa Barbara City College:

As you might know, Flash CS3 has more advanced graphic features, making possible to create Photoshop-like artwork.

Now you can apply Blending modes in Flash.
Your artwork should be FIRST converted to a movie-clip symbol for this feature to work.

There is also a new feature (in the blending mode menu: LAYER blend) that lets you change the way Transparency works as default in Flash when you apply it to complex artwork.

If you apply Layer blending mode to complex artwork, it will "visually flatten out" the content of the movie-clip and then apply transparency to the whole complex shape at once.

I have made a flash movie demonstrating blending modes in flash.

ALPHA and ERASE blending modes deserve a special explanation.
. They work in a slightly different way: the art work set to ALPHA or ERASE has to contain an Alpha channel (png graphic files from Photoshop mostly).
. the png needs to be set in a movie clip (like the other blending modes), BUT the art work that "blends against" need to be, together with the alpha-movie clip inside a "mother" movie clip symbol.

(nesting, Oh nesting again...)

That "mother" movie clip symbol, containing both alpha movie clip-symbol and background artwork, NEEDS TO BE SET to LAYER blending mode on the Main Time line.

Made an example for this one also
ERASE& LAYER blend modes together..

From Pablo:

You can download these files here:
Transparency
Blend_erase_layer