The development of Flash and its programming has recently introduced a new generation of web design possibilities. Originally called Shockwave, then Macromedia Flash, this ever growing programming solution is now over 15 years old and now owned by Adobe, the well known market leader in website authoring, graphics and publishing software. Adobe has continued relentlessly with the development of Flash and this ongoing innovation now makes it the professionals’ choice for detailed content programming and website development. In the early days, Flash was fairly basic only allowing a simple timeline and some vector graphic animations that could add a bit of sparkle to a website. Today the story is completely different; Flash is now a fully capable platform upon which a complete website can be built. Flash’s strength lies in its flexibility, allowing the programming of the many varied features that are expected of a high quality modern website.

Another old-timer…HTML

HTML, a basic coding language used from day-one on the World Wide Web has very limited functionality in comparison to Flash, but as a base language for the web, it is widely used, and very fast in response. This is partially due to its inclusion in server-side languages like the very popular Apache. HTML still very much has its place in 21st Century code just like Visual Basic, whose ancestors were the Commodore Basic of the early eighties. A good structured language will stand up through time – as long as it does a necessary job well and is updated regularly.

“Add” infinitum

So back to those building websites with Flash, there are now so many possibilities for a unique website to be built due to the number of widgets and add-ons that can be programmed, it’s hard to know where to start. It is relatively simple to create your own site from a website building service such as wix.com, a Flash based website building software solution where free websites can be built with user-friendly online automated Flash website authoring tools. To get a full service to include ecommerce, use dedicated domains etc, a monthly subscription can be taken out… but full widget and HTML functionality is granted with the free sites so there is no limitation there. The site has an editing and publishing system that is written in Flash and comes complete with all kinds of available graphics, clip-art and styles to help users make fast and good looking sites very quickly indeed. At wix.com they have created a multitude of templates that are extremely configurable to allow users with no web design knowledge in particular, to create their own site that is appropriate to their intended content – for free.

“This is Flash calling HTML…”

Now there are a few sites that allow users to build websites and some have a few add-ons and widgets too, but none seem as easy to assemble pages and publish them as Wix. A major feature of the Wix site too is that they are the only one of the up-to-date online website builders so far to incorporate HTML widgets into its basic functionality. There are good reasons why this is a great feature to add if you are building a website using a Flash builder; widgets written in Flash are more complex to code and once coded, to make them customizable they are even more expensive and difficult to produce, never mind the difficulty of integration. In contrast, HTML is quite well developed for producing widgets and plug-ins/add-ons to a web page and because this type of programming is not complex and has been around for a long time, there are literally thousands and thousands of already coded accessories that can be found free online and added to a Flash-built website – the sky is the limit when it comes to the range of available already programmed features.

A Flash free website builder that has HTML support can offer an almost infinite number of uniquely featured websites that can be configured and modified without a Masters Degree in Computing. This opportunity offers website builders of all abilities immense scope – at a very modest budget too! Almost every HTML add-on/widget has already been coded, and if it hasn’t, a freelance HTML programmer is comparatively cheap to hire and easy to find. Anyone thinking of using an online website builder must take into account whether they can afford to not have HTML support available as standard. Flash and HTML go back a long way, like old friends, but in the world of online website building automation, they are very successful, new-found partners.

Random Posts

• December 31, 2009 -- 70+ Mind-Blowing Digital Painting Tutorials (5)
• May 11, 2010 -- 40+ Outstanding CSS3 Tutorials for Web Development (16)
• August 3, 2009 -- Fun With Facial Hair (2)
• July 22, 2009 -- Easy Rusted Text (9)
• March 12, 2010 -- 40+ Typographic Posters, Photoshop Effects and Tutorials (8)
• December 14, 2009 -- Glowing Beam Light Effect (3)
• December 4, 2009 -- Magic Lighting Effects (6)
• February 18, 2010 -- Stunning Mesh – Best Place for all!!! (0)
• April 2, 2010 -- How to Make Photo to Vector Illustration Effect (25)
• July 30, 2009 -- 10 Stunning Visual Effects (6)

When you insert SWF file in your webpage it always show given background color and if you want transparent background color and want to use your webpage bg color then you have to need make transparent background of swf file. This is the very simple way but for this you will have to use only stage background color in flash not any rectangle on stage because this method only transparent stage bg color.

First Step:

Make flash file and use only bg color of stage. Don’t use any recangle there for background color.

Method 1: Using 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:

Step 1:

Choose File > Publish Settings. Select the HTML tab. or press Shift + F12.

Step 2:

Choose “Transparent” in the WMODE setting to make the Flash movie’s background disappear in browsers which support this feature.

Step 3:

Publish the document.

You will find this "wmode=transparent" code in html file which make swf file transparent.

Method 2: Editing HTML code manually for Wmode

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

Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

Add the following parameter to the EMBED tag:

wmode=transparent

Method 2: Using Dreamweaver

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

Step 1:

In Dreamweaver, insert the Flash movie into an HTML page.

Step 2:

Select the Flash movie in the Design View.

Step 3:

In the Properties panel, choose Parameters.

Step 4:

For the Parameter, enter “wmode” (without quotes). For the Value, enter “transparent”.

or

In property panel choose wmode dropdown.

Step 5:

Save the document. The HTML page is complete.

Random Posts

• December 22, 2009 -- Smoking Woman Effect (2)
• February 18, 2010 -- Stunning Mesh – Best Place for all!!! (0)
• August 3, 2009 -- Abstract Lightning Tutorial (3)
• January 29, 2010 -- 110 The Ultimate Collection Of Maya and 3D Max Tutorials (5)
• July 14, 2009 -- Taking 3D objects into Photoshop (3)
• July 23, 2010 -- Flash and HTML – New partners, old friends (3)
• March 23, 2010 -- 95+ Excellent Tutorials of Adobe Illustrator (19)
• August 3, 2009 -- Fun With Facial Hair (2)
• July 22, 2009 -- Difficulty: Intermediate (0)
• December 16, 2009 -- 50 Best Christmas Cards Photoshop Tutorials (7)

CSS3 have many exciting features which are most compatible for cross browser usability as we using famous internet browsers: Internet Explorer 7 & 8, Firefox, Safari and chrome, they all very supporting of new CSS3 properties.

In this article we are highlighting some latest tips and techniques which were not supporting before in older versions. But in this version of CSS you can use all of these techniques in your web design: text-shadow, rounded box, box sizing, opacity handlers, multiple backgrounds, border images and also supporting for multi column web layouts. These are really useful tutorials with many exciting features.

Hope you all will appreciate these useful and helping list of best ever trainings about CSS3 and share your user experience for next version of CSS3.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

Dynamic PNG shadow position & opacity

Advanced Event Timeline With PHP, CSS & jQuery

Rounded Corner Boxes the CSS3 Way

Super Awesome Buttons with CSS3 and RGBA

Cascading Style Sheets Current Work

A Look at Some of the New Selectors Introduced in CSS3

Border-image: using images for your border

Liquid faux columns with background-size the CSS3 way

CSS3 colors, today (MediaCampAthens session)

Gradient Borders

Multiple Backgrounds (CSS3)

CSS3 Analogue Clock

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

Design a Prettier Web Form with CSS 3

CSS Fundamentals: CSS 3 Transitions

Take Your Design To The Next Level With CSS3

Fun with CSS3 and mootools

Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

Text-shadow, Photoshop like effects using CSS

Awesome Overlays with CSS3

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile

Get Started with CSS 3

Box-sizing and Box-model

Halftone Navigation Menu With jQuery & CSS3

Coding a CSS3 & HTML5 One-Page Website Template

Making a Sleek Feed Widget With YQL, jQuery & CSS3

Making a Photoshoot Effect With jQuery & CSS

Create a Letterpress Effect with CSS Text-Shadow

Css3 opacity: transparency of an element in css

Create Depth And Nice 3D Ribbons Only Using CSS3

Push Your Web Design Into The Future With CSS3

CSS text shadows and background sizing

Render User Interface Using CSS3

Making an image gallery with :target

Styling Forms with Attribute Selectors – Part 1

Zebra striping tables with CSS3

Styling Forms with Attribute Selectors – Part 2: adding in some CSS3

CSS3 transitions and 2D transforms

Tooltips with CSS3

Sweet tabbed navigation bar using CSS3

Stay on :target

Sliding Vinyl with CSS3

Going Nuts with CSS Transitions

CSS Animations

Building Coverflow With CSS Transforms

CSS3 Embedding a Font Face

Working With RGBA Colour

Create a Dynamic Stack of Index Cards using CSS3

Overview of CSS3 Structural pseudo-classes

Random Posts

• October 21, 2009 -- 150 Tutorials for Creating Highly Detailed and Excellent Icon Design (6)
• December 4, 2009 -- Magic Lighting Effects (6)
• December 24, 2009 -- 50+ Beautiful Christmas Photoshop Tutorials (5)
• November 16, 2009 -- Fire Text Tutorial (1)
• May 1, 2010 -- 45+ Useful Cartoon Character Design Tutorials (231)
• December 22, 2009 -- Smoking Woman Effect (2)
• November 10, 2009 -- Overlay Inset Tutorial (1)
• August 7, 2009 -- An Intersting Tutorial – Doing an Invisible (15)
• February 9, 2010 -- Wind Text Effect Photoshop Tutorial (5)
• February 22, 2010 -- 60 Photo Manipulation Tutorials for Photoshop (24)

In Dreamweaver there is a very simple and easy way to apply form field validation and in this article I will so you exactly how to achieve this.

Step 1: Create the form with your required fields.

This is a simple html form which I am going to use for validation.

Step 2: Apply the validation to the form elements

When your form will be ready then go on Window Menu and select Behaviors from there. A window will be appear on your side panel there will be some other tabs like "Attributes", "Tags" and "Behaviors". Now select the Submit Button and click on "+" sign under the Behaviors tab. A window of behaviors will be open and you will find different behaviours which you can use for different tasks. Select "Validate Form" now.

Step 3: Select required validations for fields

This dialog will be open when you will select Validate Form behavior. Here you will see all text fields which you have used in contact form. Now select one by one field for validation and apply checks from under the "Fields" area. Here you will find following checks.

1. Value Required: Check this if you want user must enter this field
2. Accept: Here you will see different radio buttons with captions
   • Anything: User can enter anything.
   • Number: Only numbers will be entering.
   • Email address: This check will be for email validation
   • Number from: You can specify range of numbers.

Step 4: Test applied validation

After you have applied the Validation that you require, Save the Document and test it by not entering in anything into the fields. You should get a pop up box like this.

There we have it, you can now apply form validation to your Contact Forms.

Random Posts

• December 4, 2009 -- Folding Paper Effect (17)
• December 16, 2009 -- 50 Best Christmas Cards Photoshop Tutorials (7)
• February 6, 2010 -- Microsoft Word 2007 Tips, Tricks, and Tutorials (4)
• August 3, 2009 -- Abstract Lightning Tutorial (3)
• May 1, 2010 -- 45+ Useful Cartoon Character Design Tutorials (231)
• October 16, 2009 -- Phoenix Hair Effect (1)
• December 31, 2009 -- 70+ Mind-Blowing Digital Painting Tutorials (5)
• September 8, 2009 -- 36 Retro and Vintage Style Tutorials (21)
• March 29, 2010 -- Make Gift Box in Adobe Illustrator Using Skew Techniques (62)
• July 27, 2009 -- 3D Logo Tutorial (9)

I hope that this will be an interesting tutorial for you. I want to demonstrate that how I style my form input fields that is cross browser compatible all with just CSS. This is totally a new layout.

All of us creates forms on websites, it may be a blog, e-commerce or even a personal site. The way I did it in the past was declared a background image on the input element which I soon found will not work correctly. Instead I needed to put the background image on a hook like a paragraph tag and absolutely position the input element within the background image thus allowing full control of the position of the text input. Lets checkout first that what we will achieve.

I took the liberty of commenting anything that is not immediately clear in the CSS.

Now let’s take a look at the code.

HTML

<form id="nice-form" method="post"> <fieldset>
<legend>Nice Contact Form</legend>
<label for="name">Name:</label>
<input name="name" type="text" /><label for="email">Email:</label>
<input name="email" type="email" /><label for="message">Message:</label>
<textarea cols="40" rows="10" name="message"></textarea>
</fieldset>
<input name="submit" type="submit" value="Submit" /> </form>

CSS

html, body {
margin:0;
padding:0;
}
#wrapper {
margin:0 auto;
width:960px;
}
fieldset {
border:none;
}
legend {
font-size:30px;
color:#BD2B7B;
font-family:Georgia, "Times New Roman", Times, serif;
}
#nice-form {
float:right;
margin:20px auto;
width:470px;
}
#nice-form label {
text-indent:-9999px; /*  Move the text off the screen while still keeping accessibility */
display:inline-block;
}
#nice-form p.name {
background:url(../images/nameinput.png) no-repeat scroll top left;
width:446px;
height:62px;
position:relative; /* To allow child containers to be positioned absolutely */
clear:both;
display:block;
}
#nice-form p.name input {
position:absolute; /* To position this container absolutely inside of #nice-form p.name parent container */
top:10px;
left:130px;
border:none; /* By default, the input field will show a border/box, this sets it to not display anything */
font-size:30px;
width:300px; /* This keeps the text within the background image so the text will not type outside of that area */
background:none; /* This sets the background color to none so you will not see a default white */
font-family:Georgia, "Times New Roman", Times, serif;
color:#999;
display:block;
}
#nice-form p.email {
background:url(../images/emailinput.png) no-repeat scroll top left;
width:446px;
height:62px;
position:relative;
clear:both;
display:block;
}
#nice-form p.email input {
position:absolute; /* To position this container absolutely inside of #nice-form p.name parent container */
top:10px;
left:130px;
border:none; /* By default, the input field will show a border/box, this sets it to not display anything */
font-size:30px;
width:300px; /* This keeps the text within the background image so the text will not type outside of that area */
background:none; /* This sets the background color to none so you will not see a default white */
font-family:Georgia, "Times New Roman", Times, serif;
color:#999;
display:block;
}
#nice-form p.textarea {
background:url(../images/textinput.png) no-repeat scroll top left;
width:446px;
height:302px;
position:relative;
}
#nice-form p.textarea textarea {
position:absolute; /* To position this container absolutely inside of #nice-form p.name parent container */
top:20px;
left:140px;
border:none; /* By default, the input field will show a border/box, this sets it to not display anything */
font-size:20px;
width:290px; /* This keeps the text within the background image so the text will not type outside of that area */
background:none; /* This sets the background color to none so you will not see a default white */
font-family:Georgia, "Times New Roman", Times, serif;
color:#999;
overflow:auto; /* This ensures that there should be any text overflow, it would automatically determine to use vertical and horizontal scrollbars */
display:block;
}
#nice-form .button {
background:url(../images/button.png) no-repeat top left;
width:121px;
height:57px;
text-indent:-9999px;  /*  Move the text off the screen while still keeping accessibility */
border:none; /* This sets the background color to none so you will not see a default white */
cursor:pointer; /*Since we are using a background image, this will set the mouse cursor to change when hovering over so you know it is a clickable button */
overflow:hidden; /* hides any graphic/image element if it overflows */
display:block;
line-height:0; /* this is really a hack for IE6 and IE7 because text-indent will not work here unless the line-height is set to zero */
}

This technique has been tested on IE6,IE7,IE8,FF (latest), Opera (latest), Safari (latest), and Chrome (latest).

Although I know this wasn’t a step by step tutorial but I figure the comments on the stylesheet should explain most of whats going on. But if for some reason you think this does not suffice, please let me know and I will write this out in a tutorial step by step style. Enjoy and have fun!

Random Posts

• July 31, 2009 -- 44 Dazzling Text Tutorials (9)
• September 8, 2009 -- 36 Retro and Vintage Style Tutorials (21)
• May 11, 2010 -- 40+ Outstanding CSS3 Tutorials for Web Development (16)
• April 24, 2010 -- 30+ Fresh Photoshop Photo Manipulation Tutorials (30)
• July 30, 2009 -- 10 Stunning Visual Effects (6)
• July 29, 2010 -- Basic Connectivity of Flash and XML (1)
• April 7, 2010 -- 125 Ultimate Round-Up of 3D Studio Max and Maya Tutorials (11)
• November 16, 2009 -- Fire Text Tutorial (1)
• August 7, 2009 -- An Intersting Tutorial – Doing an Invisible (15)
• December 16, 2009 -- 50 Best Christmas Cards Photoshop Tutorials (7)