CodeMyConcept is a very well established code conversion company that has been providing awesome PSD to HTML conversion services as well as CMS implementations for a couple of years now, quickly becoming one of the web designers best friends.

CodeMyConcept has been kind enough to offer to give away one of their awesome $150 gift cards to one lucky winner. These are the details of this giveaway:

One lucky winner will receive a $150 CodeMyConcept Gift Card that they can use in ANY of the great PSD to HTML services provided by these guys.
The winner will have 90 days to use the Gift Card.
Anyone can participate no matter his or her location or age.

TO ENTER: Post a comment stating why =you think this Giveaway can be useful for you and why you think you should win. Please use a real email address; otherwise we won’t be able to contact you.

Contest starts today August 30th, 2010 and will end in 1 week on September 6th, 2010 at noon EST.

We will notify the winner via email.

Written by Carl Heaton exclusively for WebDesignDev.com. Carl is the Director and Senior lecturer at WebCourses Bangkok, a leading web design school in Thailand.

Dreamweaver is a tool for making web sites. Learning Dreamweaver can be a bit of an uphill struggle if you are new to either web design, html or the program itself. When you first open it, even the welcome screen can look daunting, there seems to be 1000 tools you would never even think of using and it all seems a bit much. Well, this is where this post comes in, here I highlight the tools that useful to even the most seasoned web designers and vital to beginners. The aim is to come to a conclusion whether Dreamweaver is an overpriced text editor or a vital tool for creating professional web sites.

Dreamweaver What for Art Thou?

DW is one of Adobe’s flagship programs, it is where many of the big Adobe releases come together. For example, web designers will first use Photoshop or Fireworks to create a design for a web page and then cut up the design ready for HTML, this is where Dreamweaver comes in. Since the CS series of the Creative Suite, Dreamweaver, Photoshop, Fireworks and especially Flash have really gelled together to make a smooth running machine.

But does this just add to the complexity of making web sites?

Dreamweaver’s main functionality focuses on creating HTML & CSS whilst also managing your files. The Graphic user interface (GUI) centres around helping you achieve these three things quickly and intuitively. You can code as well as see what your code is creating via the WYSIWIG (What You See Is What You Get) but sometimes it lies! However if you keep a close eye on your code and design, even the Notepad Purists can argue that DW can create Web Standard code as easily as any other program out there.

Still, with all these tools, do we really need them all?

Is DW a massively overpriced (currently at $800 with the recent release of CS5) text editor and file manager?

Well, lets look at the good and bad points.

10 Useful Things About Dreamweaver

There are many great tools in Dreamweaver and it is why I and many other professionals choose to DW over other programs for creating winning web sites. Even for our beginners DW can take the edge off learning HTML and CSS.

1. Code Highlighting

This helps you quickly scan your code as well as spot any errors. With each type of code there is a different set of highlights to help you differentiate between HTML, CSS, PHP, Javascript and the list goes on.

This is really useful if you have a lot of code on a page that is a mix of HTML and dynamic languages like PHP or ASP.

For web design beginners code highlighting helps you further understand what each part of the code does and how making a mistake effects the code below it. E.g. below, we can see that a ‘ ” ‘ is missing from an attribute.

As result the following code is highlighted in light blue, this allows you to easily track back and find where the mistake was made.

2. Code Suggestion

Another really helpful time saver is DW’s code suggestion feature. As you type a HTML tag it will list all the available tags allowing you to key in the first letter of a tag then select the desired tag from a the list. Now this is not as useful for just tags but for attributes it really comes into play.

Take for example adding an image, normally you would have to know things like the location of the image and its dimensions. With DW you can add your <img and as soon as you press space DW is there again eager to help, pressing ’s” immediately takes you to the “src=””‘ attribute, hit enter twice and you will open up the browser window, select your image and DW will write the relevant location in the src attribute. If you then move onto adding width and height for your image it will automatically have the dimension highlighted for you.

Where I really love this feature is when writing CSS, for example a popular CSS property is “font-family:Arial, Helvetica, sans-serif;”, now I could write all 41 characters or I could

1. write “fon” and move down once
2. hit enter to select “font-family:“
3. select Arial, Helvetica, sans-serif” from the list of suggestion web safe fonts
4. add a “;” and i`m done.

Typing out 41 characters or doing 4 easy steps, I know which one I would choose.

If you are learning HTML for the first time, this kind of help is really useful as it gives you full control over your code yet gives you a little helping hand to remember little details.

For more experienced of us the Code Suggestion feature helps you write HTML much faster. For example if you are writing in Code View and you write “class=” DW instantly references your CSS and gives you a drop down list of all the available styles for that element.

Code suggestion is both a useful reference for beginners and helps web designers manage bigger sites with possibly hundreds of class’s and id’s.

NEW! With Dreamweaver CS5 it even suggest code that us used when creating templates for popular CMS’s like Wordpress, Joomla and even Drupal.

3. Code and Design View

Being a visual person I love to see what my code is crafting. Therefore having the ability to code as well as see what I am getting in the WYSIWIG (What You See Is What You Get) is really helpful. When using DW I personally switch between the code and design view a lot.

For example I will do all my DIVing (placing <div> tags around areas of my code for later use in CSS) I stay firmly in the Code View, however if I am just adding content to pages then the Design View is the place to be.

It is at this point I part ways with the purists, they will disagree with using a Design View when the browser is where the true rendering of your code can be seen. However I use the Code View to keep a firm grip on my code and the Design View to see the basic changes.

Why go all the way to your browser when you can just click on the WYSIWIG and see the quick change.

4. Code Validation and Accessibility Checks

At Web Courses Bangkok we strongly believe in Web Standards and thus valid code. With DW’s built in code validation tool no web designer has an excuse for writing non standard code.

Mistakes can be quickly found and accessibility issues can be highlighted during the coding rather than after it is uploaded to a server and put through an online tester. DW’s Code Validation and Accessibility Checker is an great first line of defence against errors and sprint towards Accessible Web Standard code.

5. Properties Bar & Insert Images

The properties bar is one of my best HTML creating friends, it helps me make links, bold and italicise, create ordered / un-ordered lists very quickly. This is idea for when you are concentrating on content and not code. For example highlight some text and type where you want it to go when clicked.

A favourite of mine is if you think those last three sentences would work better as a bullet point list then hit the right icon on the properties bar and boom you have what you want:

<p>Text here</p>

<p>Text here</p>

<p>Text here</p>

…becomes

<ul>
    <li>Text here</li>
    <li>Text here</li>
    <li>Text here</li>
 </ul>

…at the click of a mouse.

6. Site Wide Find and Replace

This has saved my hours upon hours in the past. Not only can you find and replace within the current page but the entire site. The fun does not stop there, you can also search just within the text of a page, source code or even within specific tags.

Say for example a company changes it’s name to include the LTD or PLC, without DW you would be sifting through potentially hundreds / thousands of pages. With DW’s find and replace you can do this in a matter of seconds.

A recent one for me personally was updating my JQuery version on a old static site:

1. I hit Ctrl+F to bring up the Find and Replace dialogue box
2. in “find” I put “jquery.1.XXXXXXX” and in replace with “jquery.XXXXX”
3. Selected “Find in: Entire Current Local Site”
4. “Search: Source Code” and clicked [Replace All]

Two seconds later 29 pages were updated and ready to be uploaded along with the latest JQuery release.

Now before you go running to Find and Replace, please be careful and double check everything because once it is done, it can`t be undone. Finally, before you go using this for updating file names that have changed, read this next good point about Dreamweaver..

7. File Manager

DW’s File Manager system is probably one of the major reasons I use it as it turns the programme into much more than just a code editor. First setup your site root (Site > New Site > give a site name > then select your root folder that contains your local web site) and then let DW take care of all the file relationships.

This includes all files and if you change the name of any file DW will prompt you to “update links”. For example if you change “about-web-courses-bangkok.html” to just “about.html” then DW will update all the links to that file.

This also works for content files such as “dc2234.jpg” to “product-name-2345.jpg”, all files linking to this products image will instantly be updated.

The File Manager can also be connected to your server so when you save a file it is instantly uploaded, you can select to view the files remotely and work directly from the server (a highly favoured aspect of the mac’s Coda HTML Editor) and of course used to put your site live once it is finished.

8. Dreamweaver Templates

Eventually you will want to start making bigger and bigger sites. One step before getting into Content Management Systems is using DW templates. You create one page that has the overall layout and functionality across your site and you turn it into a template.

By selecting editable regions you then turn the surrounding code into a template managed system that is both easy to use and easy to replicate. What do I mean by replicate? Once you have created your template you don`t always need to use DW to edit the pages or create new ones.

DW templates use a series of standard <!– html comments like this one –> so it is easy to to do a Save As on a existing page created from a template and make a new page. Once you go back to DW you can do global template updates as normal and your new pages will be updated as normal.

I found this to be really useful when needing to make changes to pages but not having DW handy.

The templates can have optional regions much like turning widgets on and off in Wordpress. For example if you want all pages to have a login, but once the user has logged in to hide this panel, you can do this with Dreamweaver Templates.

The great thing for learners is that they are able to create bigger more manageable sites without having to learn PHP / ASP just yet.

Personally I use DW templates a lot when I am doing pro typing. We used this method on a recent project and was able to make layout and functionality changes across the whole prototype just by making one edit to the global template.

Easy quick and easy to manage, thanks Adobe!

9. Tabs and Connected Files

With the coming of the CS series, tabs were introduced in CS3 and it became much easier to tab through files you are currently working on. This is very useful when referencing other pages or moving content from one place to another.

One really useful thing about tabs is the little * that appears next to the file name when you are editing, this signifies you have not saved changes. Being able to notice this really helps me explain to learners why they are not seeing any changes they just made in their browser.

With CS4 Adobe introduced the sub file navigation bar which lists all the connected files to the current file you are editing i.e. any linked files such as CSS or Js files are listed below the file tab. This allows you to quickly switch to the CSS file connected to the page you are editing.

Also, with the split view; you can view the HTML WYSIWIG whilst editing its CSS file and see the changes happen instantly.

Being able to quickly see what files are open, be able to flip from one file to another and edit connected files really speed up your development time thanks to this very good feature of DW.

10. New Exciting Things with CS5

No more browser headaches with BrowserLab

When developing any web site you must check it on all browsers. You may not get your site looking perfectly the same, but you must test that it does not fall flat on it’s behind.

BrowserLab was once a separate service offered by Adobe to check your web page in all browsers. Now Adobe has brought this into CS5 so you can instantly check your design before launch. Handy!

“Preview dynamic web pages and local content with multiple viewing, diagnostic, and comparison tools.”Adobe

Content Management System Support, The big Three!

The only way to manage large web sites is by using a CMS, it just is not practical to make every page in DW and then upload it along with all the content image etc. This is where systems like Wordpress, Joomla and Drupal come in.

In the old days before CS5, we would have to create all the code separately for our template, upload it and check via the online CMS if the changes worked.

Not anymore! Now DW can actually populate the Live View with information from your database, bringing life to your local code right in font of your very eyes.

Also as we mentioned before, Dreamweaver even gives you code suggestions for these popular CMS’s.

There are many other new features like

• Start experimenting with HTML5 which is the latest version of the code behind all web sites.
• PHP custom class code hinting by displaying proper syntax for custom PHP functions to help you write code more accurately.
• Integration with Business Catalyst which is a service (available separately) to build and host everything from amazing web sites to powerful online stores and lead generating mini-sites.

10 Bad Things About Dreamweaver

1. Confusing Interface

At the very top of DW there are 15 items to press, ranging from menu items to quick interface changes. Secondly there are 5 – 50 things (depending on how many files you have open) and on the Third tier there are 15 things. So that is approximately 35 things to see, register, understand and use on just the first three tires of the interface.

I don`t know about you but, I can`t fit that many things in my brain (as most of it is already taken up by Photoshop’s user interface and what I’m going to be having for dinner tonight).

2. Steep Learning Curve

Learning DW for the first can be really daunting just by the user interface alone. Granted things are grouped kinda well, but here are some oddball interface items that can confuse even experienced users.

The tools that DW has to offer come at so many different points of developing a Web Site. For example you can add your own type of Database using the Testing Server environment but if you are a learner then this will be way over your head.

For me, I find it hard to sometimes explain that a lot of what DW has to offer is for professionals who make large web sites. For the simple designer, everything is surrounded by overly complicated things. For example, the standard Interface Layout has the Database / Bindings and Server Behaviour panel, this is way above any beginner and even I don`t use this functionality (main reason is that the server connection scripts DW uses are extremely bloated).

As great a tool as DW is, it does take someone to show you around to enable you to climb the steep learning curve this beast has to offer. Books are a good start to get to know your way around, the problem is that because there are so many roads to follow you don`t know which ones you actually need.

Tutorials are a step up and focus on specific aspects of Dreamweaver and how to use it for specific purposes “creating a portfolio site” or “INSERT TUTORIAL NAME HERE”. The best way, in my opinion, is to work with someone who uses DW in their day to day work as a Web Designer. They will know the relevant tools and how to use them most effectively.

This will allow you to concentrate on using a the tool rather than how to use it.

3. The WYSIWIG lies

I always tell our trainees not to trust what you see in the WYSIWIG, it is not a browser. As the versions of DW have increased to has the accuracy of the Design View but still it is not what you really see in the browser and that is what counts.

If you are working with a dynamic site the new Live View can be helpful, but I would always trust my trusty browser over anything.

Absolute positioning and DW have never been friends, often an element can be up to 20pixels out of place when viewing with the design view, working with PHP elements don`t work unless the page is live and JavaScript is not initiated unless in the browser.

Leave the rendering of your HTML to the browser and use DW to build it.

4. Bulky Dynamic Code

DW does have the ability to create dynamic sites, assuming you have a local server running or connect to a remote one. The only problem the code that it creates, much like any of the code snippets I mention next, are bloaty and overly complicated.

It is far better to use lean specific code hand written or at least referenced from a good framework like CakePHP, CodeIgnitor or Zend.

5. Badly Written Code Snippets

I was personally never one for JavaScript yet I wanted my forms to be validated and my roll overs to roll over. I started using Dreamweaver code snippets back when Macromedia was at the reins and even at CS5 they are not much better.

Because DW has to cater for everything the code is very broad and not specific. For example, just asking DW to validate one field on a form results in 19 lines of JavaScript.

6. Undefined CSS Styling (pre CS4)

This issue I see time and time again. Using the Properties bar on text adds undefined document styles. Many new learners use this to such a degree they have over 100 lines of undefined styles going from “.style1″ right through to “.style20″, all listed in the document <head>.

By letting DW add styles for you, you essentially loose control over your code and will probably mess up the web sites global styling. When learning HTML & CSS best keep away from custom styles and do all the styling in an external style sheet yourself.

Adobe have since removed this from the newer versions but it is still a very real problem for many sites out there still today.

7. Not in Full Control of your Code

Using the WYSIWIG is the easiest way to loose control over your code. By only using the Design view people often end up with messy bloated code with <p> flying everywhere and a whole bunch of “<p>&nbsb</p>”’s which are DW’s way of adding a empty space between elements.

DW makes it far too easy to loose control over your code which is why I always have Code View open to see what is going on.

A prime example of DW sticking it’s nose in is when you have just inserted an image, if you want to go to the next line and start typing, the natural thing is to hit Enter.

If you hit enter near an image, in the Design View, DW will add a surrounding <p> </p> around your image. This is unwanted and unnecessary code so I do keep an eye on your code when using the Design View.

8. 10% of Full Functionality Actually Useful

Just looking around the User Interface as I write this article I see at least 20 buttons I have never used, nor do I have plan to (see image below). DW is literally packed with information of which is mainly noise.

Us Web Designers want a quick and easy method of writing our code, no need for bells and whistles that cover every eventuality. I understand I can turn some things off, but who can actually be bothered.

Why not start with a simple interface and let the more advanced designers add things themselves Adobe? Eh, well, what do you have to say for yourself? “INSERT QUOTE FROM ADOBE ON THE VARIOUS CODE AND DESIGNER VIEWS”

9. Makes for Lazy Web Designers

DW makes you lazy if you are not careful. I in fact see a lot of other schools only teaching the user interface way of designing “professional” web sites and this makes me cringe. DW is a tool to enhance your coding not make it.

Keep your eye firmly on the coding and use the tools to only aid you. If you rely on the tools offered by Dreamweaver you will be stuck if you can`t access your own computer and fire up DW to press that magic button to fix things or add new content.

HTML is the core of what we do as Web Designers so use that not a button or a menu item.

10. Very Expensive

I completely understand how much work has gone into Dreamweaver, the 20 points in this article can be a testament to that, but for the average web designer £419.48 ($654.72) is a lot of money for one tool.

I mention that it is one tool as we all know Photoshop is also a required tool in any designers toolkit. Photoshop comes in at a cool £932.95 ($1,456.14). So that means to get going, you need at least £1352.43 ($2,110.86) in your pocket.

However there are some nice alternatives from the open source world. For Photoshop you have GIMP and Dreamweaver there is always Aptana.

Conclusion, so is it just an over priced text editor?

Dreamweaver is unmistakably powerful and this is both its appeal and its Achillies Heel. While it is very powerful and speeds up development there is just so much of DW that is never used. The price tag becomes a little heavier once you realise how much you paid for of which you will never use.

To combat this, DW is now adding functionality onto this mighty frame that is entirely useful. The new CMS code snippets are fantastic for the seasoned developer and with the Live View now supporting dynamic data, the package comes together nicely.

For beginners DW is surprisingly easy to get a grips with, this is assuming you have some HTML and CSS experience before using it. If you go blindly into DW the various user interface tools for creating HTML will result in bloated code that is difficult to manage.

If you keep a close eye on the code your site will be both well written and work well in all browsers thanks, in part, to the new Browser Lab integration.

I personally recommend Dreamweaver to both learners and seasoned experts. This said, I think Adobe can make is more accessible to people by having various versions of it much like Elements is a poor mans Photoshop, there should be a cut down version of DW.

So in my opinion no, it is not just an overpriced text editor. Dreamweaver is a powerful and highly applicable tool that every designer should be able to own.

I look forward to seeing where Adobe continually takes DW and welcome the new features.

Hats of to their team, they are doing a great job.

Tara and Bear are both members of the Flash Catalyst development team at Adobe, and, along with Matthew Cannizzoro, author the FlashCats blog (flashcats.net)

First things first: we think it’s easiest to learn by example. So to introduce you to using Adobe® Flash® Catalyst™CS5, the newest member of the Adobe Creative Suite® family, we’ll quickly, (and we mean very quickly), show you how to create an interactive video gallery without writing any code.

What is Flash Catalyst? It’s the new interaction design tool from Adobe that lets you take your static Illustrator, Photoshop, and Fireworks artwork to expressive projects with interaction, audio, video, and animation.

Let’s start our project in Illustrator CS5. Although Flash Catalyst provides a panel of drawing tools, it’s not meant to trump its co-suite products with their fine-tuned array of advanced drawing tools. As a warning, we’re not super-skilled illustrator users, so no judging our quick illustrator video gallery mockup! In fact, I encourage you to quickly think about how you would like a video gallery to look before reading the rest of this article. And be creative.

Preparing your mockup for use in Flash Catalyst

Here’s a quick screenshot of the mockup we’re going to convert into a video gallery:

We created a simple symbol (the video reel), tweaked the title, and used the built-in Vector Pack Grunge Brushes in Illustrator CS5 to create the painted look for the video frame and the play button.

Tip: Be sure to rasterize any complex brushes before bringing your artwork into Flash Catalyst. Since the artwork will be used on the web ,the artwork can be rasterized at screen resolution (72 dpi). Flash Catalyst interprets artwork into a format called FXG (Flash XML Graphic format), so each one of those paths in a brush stroke is represented as an object in Flash Catalyst, and some of the complex brushes in Illustrator will end up creating an large number of paths. Optimizing your artwork before bringing it into Flash Catalyst will enhance your experience with the product.

Tip: Be a good citizen and name your layers in a logical manner Layer names are preserved on import into Flash Catalyst. The better job you do naming and breaking content into layers, the easier, and quicker, you’ll be able to work.

To bring your artwork into Flash Catalyst, from the Welcome Screen, under Create New Project from Design File, select the appropriate link depending upon where your artwork originated.

For this example, we’ll select From Adobe Illustrator AI File… This lets us load our artwork into Flash Catalyst, then dig right into converting each piece to an appropriate video gallery component. Our video gallery will consist of a main player, a thumbnail gallery of optional videos to play, and our custom play button.

Lets go ahead and start by converting our row of gray rectangle  — which are really just thumbnail placeholders  — into a gallery thumbnail list.

Creating your thumbnail list

To create the thumbnail list:

Using the Select tool, select the group of rectangles in the bottom section of the Illustrator comp.

We’ll then convert this group into a list component that repeats an item as a template, rather than a group of individual rectangles.

From the Flash Catalyst HUD (Heads-Up Display), select Convert Artwork to Component > Choose Component > Data List.

Next, double click on the newly created Data List to enter Edit-In Place mode.

Edit-In-Place lets you edit the data list in isolation, without affecting any of your other artwork or components. When we created the mockup in Illustrator we grouped all the rectangles to keep track of them. We will now ungroup them. Select the group, then from the Flash Catalyst Main Menu, choose Modify > Ungroup.

We now have nine individual rectangles where before we had a single group.

Next we’ll mark one of the rectangles as the “template” to repeat for each item in the list.

From the Main Menu select Edit > Deselect All. Next, select the leftmost rectangle, and from the HUD, choose Convert to Data List Part > Choose Part > Repeated Item (required).

Flash Catalyst converts the selected item into the repeated item part.

However, there are a couple of items to adjust here. The first is that we need a horizontal list of items, rather than the default vertical. list The second is that all the old rectangle placeholders are still in the project. But one thing at a time.

In the Properties panel in the lower right corner of Flash Catalyst workspace, choose Layout. This is where we can control how the Data List lays out its repeating items.

Select Horizontal, and adjust the spacing until your repeating items have the same spacing as the rectangle placeholders. The spacing that worked best for us was 11-12 pixels. Note that the default number of items for a Data List is five, so be aware that you want to line up the Data List to just the first five of the nine rectangles. You’ll also want to adjust the blue bounding box to snugly fit it to the area where your thumbnails will display.

To make this Repeated Item the same in all states of the Data List, from the HUD, select Make Same in All Other States.

Next we’ll clean up those pesky rectangle placeholders. From the Layers panel, highlight them (there should only be eight, since we converted one of them to our template item), and select the Delete icon at the lower right corner of the Layers panel to delete them.

Adding Image Thumbnails

What we’ve created so far is a placeholder for each video thumbnail, and we’d like to show a custom image in each thumbnail to identify each video clip.

First, you’ll need thumbnails for each of the clips. Create eight images to represent your movie clips, and make sure each image is roughly the size of the rectangle. Too much larger and you’ll be consuming valuable bytes, too much smaller and the images will look bad when they scale up to fill the rectangle. For this project, the thumbnail rectangles are 47 pixels high by 36 pixels wide. You can see this by selecting a rectangle and viewing the size in the Properties panel.

Import the images by choosing File > Import > Image. The imported images will show up in the Library panel, on the right side of the Flash Catalyst workspace.

While in Edit-In-Place mode, double click on the rectangles to edit the List Item template, which Flash Catalyst calls the Repeated Item.

Drag out one of your thumbnail images from the Library panel, and adjust it to cover and fill the rectangle. The easiest way to do this is to manually set the image’s x, y position and the width and height to match the rectangle’s. This information is available in the Properties panel when the rectangle is selected.

Next, select the image, then right click to choose Share to State > All States. This will make the image visible in the Over and Selected states, which display when mouse hovers over or selects an item in the list. You can see this by looking at the Pages/States panel at the top of the workspace.

With the image selected, from the HUD, select Add Image to Design-Time Data. This will allow you to manually set the image source for each item in the list using the Design Time Data Panel.

Double click outside the image to go back to editing the list.

In the Design-Time Data Panel, you should now see a preview of your image for each item in the list. You may need to select the Design-Time Data tab in the bottom of Flash Catalyst to get the panel to pop up.

We’re starting out with only five items in our list, but we want nine. Select + Add Row at the bottom of the Design-Time Data panel until you have nine thumbnails. Note that the numbering starts from “0,” so although the highest number shown in the image below is 4, we actually have five items.

Now, to select the thumbnail image for an item in the list, click its thumbnail in the Design-Time Data panel. The Select Asset dialog will display all the image assets in your library. Select the one you want, and click OK.

If you repeat this for each item, you should see nine different image thumbnails in your Data List.

We’ve been editing the list or its template item in Edit-In-Place mode this entire time. You can exit Edit-In-Place mode by pressing Escape or clicking the name of the application in the Breadcrumb bar above the artboard. You can also click in the dimmed area on the artboard or choose Modify > Edit Editing to exit Edit-In-Place mode.

Creating your main video player

Let’s now create our main video player. We’d like the user to be able to select a thumbnail, and then play the selected video clip in a larger video player. Also, we’d like our video player to sit behind the brush-stroke border and the Play button, but in front of the black chrome of our gallery.

To place a video player in Flash Catalyst, you first need to import an actual video file. To import a video file, from the Main Menu choose File > Import > Video/Sound File.

Our main video player now appears on the Flash Catalyst artboard. You’ll notice all imported video files appear with what we call the “chrome,” which is the design of scroll bars, window borders and other user interface elements on screen. This video-player chrome includes a border, a play/pause button, volume control, and  a full-screen button.

But for this project, we we don’t want these default video controls to appear. So we’ll need to create our own custom controls, and will use only the video display “part” of the default video player.

To change the appearance of the video player, select the player on the artboard.

From the Properties panel > Video controls:, select None.

The ‘none’ option removes all the default controls, giving us just the video player.

Tip: In case you’re interested in showing the chrome around the video player, here’s the difference between the wireframe and standard options:

“Wireframe” exposes a blue-themed set of controls, resembling a blueprint for mocking up and prototyping applications. If you were doing a quick mockup for a customer in Flash Catalyst, Wireframe is the way to go. “Standard” is the default look and feel used by the video player. It’s a nice, grayscale theme with black icons. You could imagine placing the standard chrome in a final design.

To achieve the layering effect, so the video player sits under (or behind) the brush stroke and play button artwork but above (or on top of) the black gallery frame, we will use the Flash Catalyst Layers panel.

The Layers panel is located in a grouping of panels in the top-right most section of the Flash Catalyst workspace. At first glance, you’ll find it looks similar to and contains much of the same functionality you’re used to in the Layers panel found in Photoshop or Illustrator.

Lets take a look at the Layers panel.

As you can see, our Video Player is the top most item in the list. This means it sits on top of all the other artwork. To get it to sit nicely under the grunge brush border and the Play button, drag the Video Player from the top of the list, so that it sits underneath layer that has the Playbutton image.

In the screenshot below, you can see we’ve successfully added our video player, removed the default controls, and arranged it at the correct layer position in our project.

Now that our main video player and thumbnails are set up, lets add some interaction.

Adding Thumbnail Interactions

We created thumbnails so the user could choose different video clips to play. In order to make this work, we need to add interactions so that clicking on a thumbnail changes the video clip. Interactions encompass all kinds of different behaviors, from mouse events, like clicking and mouse hovering, to behaviors that happen when video clips complete playback.

Select your thumbnail list. We’re going to add an interaction so that whenever a thumbnail is selected, the source property on the Video Player is set to the video clip corresponding to that thumbnail.

From the Interactions panel, choose + Add Interaction. Set up the interaction as follows:

First, choose the event that triggers the interaction. In this case, choose On Select.

Next, choose the response to that event: select Play Action Sequence.

Then select “When a specific item is selected,” which opens the Item dialog.

The Item number is the position of the thumbnail in your list. The leftmost thumbnail is 0, the next leftmost thumbnail is 1, etc.

Entering “0” in the Item dialog will play an action sequence whenever the first item in your Data List is selected. Now we just have to make the action sequence do what we want, which is change the video clip.

First, make sure that the Video Player is selected on the artboard. Next, from the Timelines panel in the lower left of Flash Catalyst workspace, under Action Sequences, select Data List On Select. Then select + Add Action > Set Property.

Now, in the Properties panel, under Common select Source, and select  “Choose source…”

The Select Asset dialog opens, where you can select the source of the video clip to play. For the first thumbnail (item number 0), set the source property to your first video. For the second (item number 1), select the second, and so on. You will need to repeat this set of steps for each thumbnail in the list.

Adding Video Player Interactions

Now we need to add some interactivity to the Video Player. When “Play” is clicked, we want the “Play” component to fade away, the movie clip to play, and then the “Play” component to reappear when the movie clip has finished playing.

To make this happen, we must convert the “Play” image to a Button. Select the Play image on the artboard, and from the HUD, select Convert Artwork to Component > Button.

Later, we’ll define mouse interactions to our new button to play the movie clip.

We also need to create another “Playing” state where the Play button isn’t visible. To do this, click Duplicate State in the States Panel. We’ve renamed the states to “Ready” and “Playing” by double clicking each state and giving it a custom name.

We don’t want the Play button to be visible in the “Playing” state, so select the “Playing” state and delete the Play button. This will only remove it from the currently selected state.

Now to add the interactivity that will make your movie clip play, select the Ready state and select the Play button. In the Interactions panel, click “Add interaction” to create a new Button interaction, and set it up as follows.

When the Play button is clicked, this interaction will cause the application to transition to the “Playing” state, but only if the application is currently in the Ready state.

Transitioning to the “Playing” state should also be the cue for the application to play the Movie clip. To make this happen, select the “Ready > Playing” state transition in the timeline.

We want to add an action to the Video Player, so select the Video Player as well. Choose Add Action > Video Control > Play.

Finally, we need to transition back to the Ready state once the movie clip finishes playing. With the Video Player still selected, in the Interactions panel click Add Interaction, and set it up as follows.

This will bring the application back to the Ready state once the movie clip finishes playing.

Running Your Project

To take your project for a test drive, choose File > Run Project (or Cmd/Ctl + Enter). You can do this often when creating your project to see how it behaves when it’s run. You can also publish a final version of your project by choosing File > Publish to SWF / AIR.

Conclusion

We hope this has given you a good introduction into one of the many things you can do with Flash Catalyst. You can imagine other enhancements that could be added to this video gallery, such as interactive tooltips when a user hovers over the video thumbnails, additional video controls, a full-screen mode, and so on. Try making your own video gallery artwork in Illustrator, Photoshop, or Fireworks, and follow these steps.  Feel free to post comments/questions/suggestions below… we’ll be replying to them!

Waterlife (http://waterlife.nfb.ca/)

Forza (http://forzaforgedwheels.com/flash/)

Agency Net (http://agencynet.com/)

Yoshinoya (http://www.kinetic.com.sg/awards/yoshinoya/)

VOB Nedir (http://vobnedir.org/)

Grobots (http://www.recycledlifeforms.com/)

The Creative Fridge (http://thecreativefridge.com/)

Damman Pearce (http://dammanpearce.com/)

Subspecies (http://www.subspecies.co.uk/)

Dasai Creative Engineering (http://www.dasai.es/)

ARBOmedia (http://arbomedia.pl/)

Mindsmack (http://mindsmack.com/madness/)

Kasulo (http://www.kasulo.ws/)
This website is fantastic. Yes, I mean it!

Oddo Design (http://oddodesign.com/)

SoInteractive (http://sointeractive.pl/)

DigitalKick (http://www.digitalkick.com/)

Guitouxx (http://www.guitouxx.com/)
Choose the “FUN side” on the homepage. Scroll to navigate.

When I just started WebDesignDev.com, I obviously didn’t have a Twitter following. As a matter of fact, getting Twitter followers isn’t easy at all – most of you already know that from experience. It wasn’t easy for me either. That is, until I came up with a strategy. After I implemented it, I went from some hundreds of followers to almost 30,000 now. You are probably thinking that you can’t get there, but I will prove you wrong. Read on to find out how I did it.

One day I was writing a blog post on WebDesignDev and it hit me: “why don’t I follow the followers of successful web design blogs?”. I thought surely many of them will follow me. After all, I am in the same niche and my blog provides valuable web design insight, advice and resources. I started out by adding 100  followers a day from top web design blogs and websites. Most of them would follow me back, and they were exactly the followers I was looking at: not some automated bots, not some people only interested in selling something, but instead, people who are genuinely interested in learning about web design.  You are probably thinking “I don’t have time to add 100 people a day.” It was extremely time consuming for me too, but I have to say that if you stick to it, it will all be worth it. Nothing comes easy, and the time you are sacrificing now will pay off. Twitter is the Google of the future – the sooner you jump on it, the farther you’ll get.

I used to use TweetAdder to help me automate this grueling, time-consuming process of following people, but for a while now I’ve been using MarketMeTweet.  It has a very useful feature called “Follow”.  Below is a tutorial on how to use it:

First you must of course log in and it will take you to the main window, which looks like this:

Click on the “Marketing” link which I highlighted.

Next, you are taken to the following window. Click on “Reply Campaigns” before clicking on “Follow” (it’s a little bit counter-intuitive):

Next, click on the “Keywords” link:

Next, you can add any of the keywords which you want MarketMeTweet to use in search for people to follow:

Now close this window by clicking the red X button. You will still have the previous Follow window there, click on “Follow”:

Next you will see this window, just click Continue:

And voila:

After you build a sufficiently large following of Twitter users, stay active! Use your Twitter account daily and tweet things that people will find useful. Tweet news, promotions, advice, etc. If you send a useful tweet to your followers it WILL get retweeted and the followers of your followers will follow you too.

If you’ve found my advice helpful, please do leave a comment and tell me how much your Twitter followers list has grown as a result!

Tools you will need:

1) People skills and desire to succeed

2) Account on Freelancer.

3) DreamTemplate

4) HostGator’s Reseller Hosting

5) Underground Traffic Blueprints

6) Simple PHP; PHP & MySQL For Dummies; and Learning PHP, MySQL, and JavaScript

STEP 1. Look for creative ways to find more clients.

Bring offline businesses online.

Tool you need: People skills and a desire to succeed.

This can be an awesome way to earn a lot of cash. Do you know how many local business in your area don’t have websites? Hundreds! Do you think they don’t have websites because they can’t afford them? No! They are still doing business the old-fashioned way, so you will need to enlighten them. Go to your local businesses, call them, e-mail them, do everything you can to get in touch with them and tell them that you can bring them a lot of exposure and customers by bringing their business online and creating a website for them. I got a lot of customers this way, and I know you can too.

Freelance.

Tool you need: Account on Freelancer.

Another great way to raise your web design income is through a freelancing site. I personally have been a huge fan of Freelancer. When you look at the main page of the site you can see there are hundreds of jobs posted daily. The jobs posted are so diverse that any web designer can find a project to bid on. Do enough jobs on Freelancer and get enough feedback and you’re almost guaranteed to be the winning bidder for the projects you choose. Once you get that client from Freelancer and make them a website or design something for them, there’s a great chance they’ll come back for more business. Residual income is key in earning six figures as a web designer.

STEP 2: Don’t waste time. Time is money.

Tool you need: DreamTemplate.

We all know that time is money, but what many web designers don’t know is that they could make great, professional websites using customizable templates. Think about how much time you will not have to spend on designing that website for your client when you can do it in the blink of an eye using a customizable template. That’s time that you can spend on doing projects for other clients. And that’s exactly what I do. I use DreamTemplate to complement my design work. They give me unlimited access to more than 3000 premium templates with Photoshop PSD & HTML files included. I use the PSD’s to create websites for my clients in a fraction of the time it would take me to create those websites from scratch. By creating a website for your client using premium templates, not only will the website look awesome from the start and be error-free, saving you countless hours of frustration, but if you use DreamTemplate you will also have access to 3000 premium templates so chances are you will find something to fit most clients’ needs.

STEP 3. Become the All-In-One Solution for your clients. Think outside the box.

Sell hosting to your clients.

Tool you need: HostGator’s Reseller Hosting.

After bringing offline business online and saving yourself a lot of time by using customizable templates, you are ready to start thinking outside the box. One thing that most web designers don’t realize is that web design business does not stop at web design. You can sell hosting to your clients! Think about it. You just designed a great website for your client. The client wouldn’t just like to host his or her website, the client needs hosting to run the new website. So what I do is I sell hosting to my clients using HostGator’s Reseller Hosting. It is the most reliable hosting company I have ever worked with, and you will see in my other articles that I praise them whenever I get a chance. People love all-in-one packages and if you don’t take full advantage of that you are losing a lot of money on each client.

Sell SEO (Search Engine Optimization) services to your clients.

Tool you need: Underground Traffic Blueprints.

Why is this so important? SEO companies make tens of thousands of dollars per month. What’s the difference between a web designer offering SEO services in addition to web design and an SEO company offering only SEO services? The web designer can make even more money than an SEO company when they sell both SEO, web design and code websites for their clients! (I will discuss the importance of coding in Step 5). SEO companies charge anywhere from several hundred to several thousand of dollars per month for each client to bring the clients good rankings with search engines and maintain those rankings. If you know SEO and can give clients results, they will stay with you for as long as their website is active. This means thousands of dollars of repeating income every month. This is why it is so vital for every web designer to know SEO. I will discuss the importance of building traffic to your web design website next.

STEP 4. Get more traffic to your web design site

Tool you need: Underground Traffic Blueprints.

More traffic to your web design site means more clients. More clients obviously means more money. Not having traffic to your website is equivalent to having the talent of a professional singer but only singing in your own house. You must let the world know about your services. But the problem is, most web designers don’t know how to build traffic to their websites. The sooner you learn how to build traffic to your website, the sooner you’ll make six figures as a web designer. You accomplish 2 things when you know how to get traffic: 1) getting a lot of traffic and customers to your web design site, and 2) selling SEO services to your web design clients. My blog, WebDesignDev.com, went from 10 visitors to thousands of visitors per day and I credit it in very large part to Underground Traffic Blueprints.

STEP 5. Don’t just design, code!

Tools you need: 1) Simple PHP; 2) PHP & MySQL For Dummies; 3) Learning PHP, MySQL, and JavaScript.

I want to repeat what I have pointed out earlier – the sooner you become the All-In-One solution for your web design clients, the sooner you will be making a lot more money. You need to be fully comfortable coding websites and editing customizable templates. Some of the reading materials I can suggest are Simple PHP, to grasp a really good idea of the PHP basics, PHP & MySQL For Dummies and Learning PHP, MySQL, and JavaScript. Of course you can also read my tutorials.

If you follow the steps in my guide, you will not only design websites for your clients, but you will also be able to sell hosting to them, save a LOT of time by not designing from scratch, get many more clients by building more traffic to your site, and make thousands of dollars per month by selling SEO services to your clients. The sooner you start taking action, the sooner you can be earning a lot more money.

1. Conway Anderson (http://conwayanderson.com/)

2. David Arazim (http://www.mediocore.cz/)

3. Meca Graphics – Ed Vinicombe (http://www.meca-graphics.co.uk/)

4. Carl Rosekilly (http://carlrosekilly.co.uk/)

5. Swiths (http://swiths.com/)

6. Fully Illustrated – Michael Heald (http://www.fullyillustrated.com/)

7. Jai Pandya (http://jai.im/)
These kind of portfolios are on the rise.

8. Only2Designers (http://www.only2designers.com/)

9. Tony Chester (http://tonychester.com/)
Not really a proper portfolio, but definitely worth a look.

10. Cubex (http://cubex.nl/)
This one uses a far more superior sliding technique than the traditional portfolios. And also the portfolio is very easy to browse, that is, one design at a time.

I also know for a fact that you use Twitter to make connections with customers and learn web design tricks and techniques.

What if I told you that every one of your tweets is promoting other people’s business?

Here’s proof:

I just sent out 2 tweets promoting my web design articles using 2 different Twitter clients – MarketMeTweet and SocialOomph.

One of those tweets was branded with the Twitter client I used to send out that tweet, and one wasn’t. Why was my MarketMeTweet tweet branded with my own website url and how in the world did I do that?

I bet you didn’t know that “SocialOomph” and “WebDesignDev” are actually hyperlinks pointing to the urls.

So every time you send out a tweet you are advertising someone’s product with a link to their site.

You are promoting them absolutely free. They get a great free advertisement, don’t they?

Unless you change that.

Now wouldn’t you want to use this valuable Twitter real estate by

• branding your own tweets with your business’s name
• including a link back to your portfolio website or blog with every tweet you make
• getting a link back to your portfolio website every time someone retweets your tweet?

Just like this:

You see how my tweets through SocialOomph were branded with SocialOomph’s website, both on my direct tweets and retweets by others, and how my other tweets were branded with my own website? Well, you can do the same like I do, and I will show you how.

MarketMeTweet

PieDog Media just released an update to their already extremely powerful and featured packed social media management tool called MarketMeTweet.

At this time, MarketMeTweet is the only fully featured twitter client that brands your tweets.

The video below provides a nice overview of MarketMeTweet v2.0:

Check Out MarketMeTweet!

Now that Google and Bing are displaying real-time Twitter and Facebook search results, it’s very, very important to have a presence on social media.

With access to real-time information becoming the norm, and soon possibly affecting rankings of your website, can your web design business afford not to be using social media?

MarketMeTweet is for businesses (small and large), such as web design, as well as power-users, bloggers and even newbies.

If you use social media to promote yourself as web designers, then MarketMeTweet is for you.

MarketMeTweet lets you easily promote your web design business online, get new customers and make more money.

Brand Management

My favorite feature in MarketMeTweet is the ability to brand your tweets. This means every tweet you send is branded with a link back to your website.

See the video below to see how easy it is to set up and configure your brand:

After you set up branding, every single one of your tweets will be be branded with your own URL:

This is an awesome feature that will give your web design business that competitive edge over your competitors, and create additional brand awareness.

Unlimited Accounts

MarketMeTweet lets you add unlimited Twitter accounts. This is especially useful if your business has multiple departments or if you have multiple web sites or blogs with a specific Twitter account for each (i.e. you have a business and personal twitter account). MarketMeTweet lets you add a new Twitter account with a click of a button. You can manage all of your accounts from the one interface.

Scheduled Tweets

MarketMeTweet offers tweet scheduling.

They offer 2 ways to do this: 1) the standard method where you can schedule your tweets to be sent out at a future date and time; 2) a feature that is unique to MarketMeTweet, is the ability to schedule tweets using Google calendar.  In order to schedule tweets using Google Calendar you first must enable Google Calendar.

The beauty of MarketMeTweet is that it also lets you schedule bulk tweets at once. Here’s how it’s done:

Click on Schedule:

Next, click on Import Tweets:

Then copy/paste your scheduled tweets into the box. Make sure they are in the format %T% This is my tweet %D% – they must start with %T% and end with %D%.

Then, select Use Override Interval. If you don’t, all your tweets will go out at once instead of being scheduled 1 by 1. Drag that little circle right below Overide Interval to set the interval at which you want each tweet to go out. For instance, I set it at 30 so that my tweets go out every 30 minutes:

Next click on Import pasted text:

Now click on Save Tweets:

And watch the progress bar:

Now you’ve scheduled 244 tweets for this week (so in less than 2 minutes I scheduled tweets to go out every 30 minutes for 5 days in a row, what a time saver!):

Twitter Management

No other Twitter business software has a comprehensive management side.

You are able to see your friend’s time lines, replies, mentions, retweets, search, customize panes, easily manage and delete direct messages, groups, expand the interface and much more.

Facebook Integration

You can set your tweets to be posted and scheduled to your Facebook profile and AND unlimited Facebook fan pages!

MarketMeTweet lets you to view your Facebook activity in a gorgeous interface (I like it much better than any other interface) and makes keeping up with friends and contacts a breeze.

Location Targeted Following

Matches for new followers can be in the same place as you, making the quality so much higher.  You can input your location and MarketMeTweet will automatically find followers. This feature is insane for you web designers – imagine how easy you can find local clients!

Reply Campaigns

MarketMeTweet’s reply campaigns lets you to find users in your niche and start conversations. The best part is that it’s completely user controlled to maintain the highest quality.

Language Targeted Tweeting

Grow a mass following of users who are relevant.

Build a following of users who speak the same language as you!

Automatic RSS Tweeting

For maximum exposure import your blog’s RSS feed directly into MarketMeTweet.

Every time your RSS feed is updated you can have it post automatically or have it scheduled.

You can tweet your posts to all accounts at the same time.

MarketMeTweet makes sending RSS feeds to Twitter and Facebook a breeze, all within the one application.

Free Updates

MarketMeTweet is continually being upgraded and all users get FREE updates.

Multiple Computers

This is epic: MarketMeTweet software engineers have found a way for you to take your marketing data anywhere you go, and access it from whatever computer you wish to access it from.

Price

MarketMeTweet has four different pricing options to give as many people as possible access to this tool.

So getting started with this application a no-brainer, and there is a money-back guarantee.

Twitter Search

With MarketMeTweet’s search feature you can easily keep up to date with all the latest tweets from Twitter.

You can stay up to date on who is searching you and your web design business, and respond with deadly accuracy.

Ping.fm Integration

Ping.fm is a service that lets you to update many different social networks at once. You can update all, or just a few of your favorite social networks.

Updates can be made from your email, browser, SMS… and now MarketMeTweet.

Smart Following & Unfollowing Algorithm (user controlled)

MarketMeTweet lets you to stay in control of your account by finding highly targeted followers, and unfollow those who aren’t adding value to your account.

Unlimited Twitter Accounts

You can use as many Twitter accounts as you want from this app, making your life easier and more concise.

OAuth Secure

The new requirement from Twitter is OAuth security encryption, and MarketMeTweet has it. This means that your Twitter username or password is NEVER stored. Now are you sure your other Twitter tools do this…

Group Management

Groups in Twitter is an easy way for you to filter your friends’ tweets and keep up to date.

Post To All

Do you have more than one Twitter Account? Facebook Profile? Fan Page?

You can post to all of them with one click.

Forum

MarketMeTweet also has a fully supported forum where you can:

• ask for support
• make feature requests
• read tips and tricks

This certainly provides a peace of mind for your investment.

Finally…

MarketMeTweet is a tool I personally use with my Twitter account with 28,500 followers. I highly recommend it.

If you are serious about social media marketing, social networking and your web design business, get yourself a copy now.

Click Here to Get MarketMeTweet

The kit brings the Facebook vector icon and logo. Also, since the focus of this resource are the UI elements, it brings a main window with the header, menu and the chat window for you to set up your realistic mock-ups. Cannot forget to mention all the modal components, comment boxes, buttons, message boxes, tabs, etc.

Download PSD Files