Link to cool Flash toys

Th link below will take you to a site with a lot of open source gadgets and gizmos that are done in Flash. Some are based on an algorythm that allows them to move in random ways, others are based on position and state of your mouse. Either way, if you have the basics of Flash figured out and understand a little about ActionScript, then these will offer you something interesting to play with.

Levitated

Advertisements

Intro to Dreamweaver – part III

ADDING IMAGES
Pretty easy to do, just click so the cursor appears on the page and go to Insert>Image. From there you just have to find the photo you want to link to and there you go.

A word of warning, keep your web files organized! If you choose to link to an image that isn’t in your website folder then you will have issues when you upload. When an image is added to a page it actually links it from where it is, it doesn’t insert an actual copy of the image into the document, so what you have is this little string of folders that point the way to where the photo actually resides. If you don’t upload the image to the site in the folders the code points to, then you will get a broken image link when your page is viewed. Because of this, the cleanest way to set things up is to add an “images” folder to your website folder. All the image links will then have the images/whateveryourimageis.jpg extension and they will link properly. Keep it clean and you will be rewarded for the extra effort when you upload your site.

Something else I should probably mention is it is always best to resize your image in Photoshop rather than allowing your HTML to do it for you. For one thing, if the image is larger than you need then it will be a larger file size, which can be the kiss of death when it comes to load time. To keep your load time below five seconds it is a good idea to keep all image file sizes as small as you possibly can.

This doesn’t mean you need to keep only thumbnails on your site. You can use larger images but be certain that you save them from Photoshop using the “Save for Web and Devices” feature and try to get your file size as low as possible without degrading your image.

Another reason to keep your resize your images in Photoshop is sometimes the HTML will distort the image if part of the code is missing. For instance, if you set the height that is smaller than the actual image height but leave the width alone, sometimes it will default to the width of the actual image, thereby displaying a graphic that looks squished vertically. You don’t want your friends photo to show someone that is twice as wide as they are tall do you?

ADDING OTHER GRAPHICS

Under Insert you will find a few other options that relate to images, primarily Image Objects and Media. Image Objects contains Image Placeholder and Rollover Images as well as Fireworks HTML (which we won’t cover here).

An image placeholder is basically just a box the same shape and size as what your image will be. This is good for mockups and getting your sizing right, as well as for taking the place of an image you haven’t acquired yet. It will represent itself as a box who’s color you can change, not too exciting but suits its purpose just fine.

Rollover Images are simply variations on the same image that are used together by the page to show the state of the action being performed. In simple terms, there are different images for different rollover states that all fit in the same spot. Menu buttons are often done this way. You’ll see an “off” version of the button, which is its ordinary state, but when you mouse over it you will see the “on” version.

Media covers the types of video you can add directly to your site.

The most common is a .swf file which stands for ShockWave File. It’s actually a compressed format used by flash. This can contain video, different animations and even special buttons and links.

The uncompressed version would fit into the category of Flash, right below SWF in the list. There are a few different Flash formats that this encompasses but most are going to be larger in size than a .swf file. The fact that these aren’t usually compressed means that a viewer might be able to copy your file and alter it for their own work. This usually isn’t a good idea since it gives them the option to infringe on the copyright. It’s never a good idea to hand over your files on a silver platter this way.

It seems a little redundant to have both an SWF and a Shockwave option but there are different file extensions that Shockwave can use. Chances are you won’t have to get into this very much since Shockwave isn’t commonly used anymore.

The next three are Applet, ActiveX and Plug-in – all of which refer to actual small programs that run within your document. We won’t go into those much seeing as how this is a little more advanced than what you need to get into now. You can click the links to learn more about them if you would like.

Next time we will cover using images as links and how to upload your site to the server.

Photoshop Layers to GIF animation in 3 super easy steps

There was a time not too long ago when web graphics needed to be started in Photoshop and then run through GoLive for slicing, coding and animating. That has all changed now. Just about any image manipulation you need to do for the web can be done entirely in Photoshop.

In the case of GIF animations, Photoshop makes it super easy to create them from layers. For those of you familiar with GoLive and how it operated, this will be like a stroll down Memory Lane.

STEP ONE:

PSD file to be animated
This is my original PSD file that has only one text layer currently showing.

Start out with a Photoshop file that has layers. Any GIF animation you do will need to begin this way. In this case I have what will be a web banner that will need to move through three different frames, each two seconds long.

Layers window with separate text layers.
Layers palette with separate text layers.

As you can see in the above image, I have set all of my layers to visible. The text layers will be the ones which will change during the animation while the background remains constant.

Go to Window>Animation to bring up a timeline. Each layer is now set in it’s own place on the timeline. The timeline offers a bit more control than the simple frameset that once was offered. In fact, this particular timeline is fairly intuitive. The upper left tells you where you are timewise in the animation as well as how many frames per second your animation will run. I always leave mine set at the default 30 fps which is fast enough for some smooth transitions.

Timeline of animation

Down the left side are all the layers I have to work with. Each one has a dropdown arrow that allows you to adjust different effects. Under that you have your typical play, rewind, fast forward, etc. controls.

The timeline itself has a little blue tab at the top that sticks up. This tab tells you where in the animation you are. When the play button below is hit, you can watch your animation, after it has been altered.

There are also two flat sliders on the line below this, at the beginning and end. They tell the animation where to start and where to stop.

STEP TWO:

Simply adjust the ends of the layers by dragging them to certain spots on the timeline. In my case I’m actually going to drag them so they show for two seconds, then the next one will begin. To do this you just drag the beginning and end points of the layer you are working on to where you want them on the timeline. I’m staggering them so that as soon as one layer ends the next will begin.

TImeline of animation with layers adjusted

In the picture above I have already adjusted the sliders that tell the animation where to begin and end.

STEP THREE:

From here all you need to do is go to File>Save for Web and Devices and set it to GIF. When you do you’ll see an Animation section at the bottom that tells you how many frames it is. Hit Save, name it and you’re done!

You can add fades and a few more complicated effects in as well by clicking the Convert to Frame Animation button on the bottom right of the timeline. I think you’ll find that if you play around with the settings and such a little, you will quickly learn these on your own.

Type in Web Design

When it comes to basic Web Page layout, there are only a few font styles to choose from.

Fonts available for web

The reason for this is there aren’t many standard typefaces that are shared by every operating system. If you choose a typeface outside of the above list then be prepared to create an image of it if you want it to display correctly.

Now there are more advanced font management systems available online, including a free one managed by Google that I mentioned in a previous post, but these can become complicated fast. For our current purposes we should stick with the above listed fonts.

Intro to Dreamweaver – part II

There are three basic parts to your HTML document. The first is your DOCTYPE, which is basically just information about what version of HTML your document complies with. Though this fits outside of the actual code and can be left out, it’s often helpful to browsers since it specifies not only the version but where the “rules” for this particular document are located (i.e. where on the W3 website the extra information about this doctype is located – “http://www.w3.org/1999/xhtml” or similar).

Parts of an HTML document

The most important information is contained within the tags. All of the information herein has something to do with how your page looks or what it says.

The Head of the document generally contains most of the instructions for your document. This is where, in this simple layout we are starting with, the Styles we just set are contained, as well additional browser information on how it should display your document. You will also find tags here which we will cover later.

Below the Head you find the Body of your document. This contains all of the actual information that will be displayed (images, type, charts, etc.) Depending on what your document Head contains, the Body section will display its contents in different ways. For example, if the style in the Head specifies that your general type will be Verdana, 12pt, and a maroon color, then all of the unaltered type within the Body section will be Verdana 12pt in maroon.

Style section of HEAD
This is how the type is displayed

Within the Body section there are “tags” that we can use to help control how our text and graphics are displayed. Some of the old school tags were simple abbreviations of the actions. For example to make your type BOLD you would use “B” and “/B” or to create italics “i” and “/i” was used. These have been changed since there are other tags which are similar to these. Consecutively, Bold would use “strong” “/strong” and italics “em” “/em”. These sit within a set of brackets, to distinguish that they are tags.

What tags do
The "p" "/p" tags tell you this is a paragraph. I hit return after the first line to start the second line.

At this point we have a fully functional, if rather bland, webpage. We will add images and start covering the basics of tables in the next Dreamweaver post.

Intro to Dreamweaver

It’s important to remember that Dreamweaver doesn’t behave like Illustrator, Photoshop or InDesign. Dreamweaver isn’t native to Adobe like the others so it’s actions and such respond differently. Aside from a few basic Command keys, there aren’t many things Dreamweaver has in common with the Big 3.

It’s also important to recognize that web design is very different than print design. While with print design what you see is what you get, in web design there are a ton of backend features to take into consideration.

When you first open Dreamweaver you are given several options of the type of document to work with. If you have no previous experience then we need to go over the purposes of a few of these file types.

HTML stands for Hyper Text Markup Language. This is your basic layout file type, the base for your web pages will begin here.

CSS are Cascading Style Sheets. These control everything from the colors used within your page to the fonts and in more extreme cases, the positions, sizes and content of many elements. CSS can be used in the HTML document itself or it can be it’s own page that the HTML page links to.

Javascript controls motion, animation and actions in the HTML page. Just as with CSS, Javascript can fit within the HTML document or can be linked to as an external document.

We’ll begin by focusing strictly on the HTML document, learn how to add images and text, how to format them, and some basic code…

Welcome Screen
The Welcome Screen is where you make your initial choices based on what you are going to do.

Dreamweaver Welcome Screen

Go ahead and open a new HTML document. The first three buttons in the upper left control your view. We’re going to be working with the Split screen so we can see how the code makes everything work.

Code, Split and Design options for screen view

If you look at the Properties panel when you first open your document, you’ll notice there is a Page Properties button. Click it and you will see the basis of CSS editing within the document. There are two Appearance panels you can choose from, one controls things using CSS, the other uses in-page HTML. Both do slightly different things and you should familiarize yourself with what you see within them.
Properties setup

For starters lets look at the Appearance (CSS) panel. Select a font from the dropdown menu, set your regular type size, color, etc. to what you would like. This is how mine looks.
basic settings
When you hit ok, you can see the changes made in the section of your code. All of these pagewide properties will be set by default within the head of your HTML page.

I’ll cover the three basic sections of an HTML document, what your CSS says and how to start laying out your webpage in the next post.

Free fonts

I’ll try to post soon about Dreamweaver and more Photoshop. Thanks to those who have taken the survey as it will help me know how to direct this blog in the future.

I wanted to talk for just a second about some of the fonts you can find online. Linotype always has some great professional offerings but they usually cost $100 and up so here are a few free font sites for you…

Dafont – This is one that I hit fairly often, however beware, a lot of what you come across here is just not good.

Font Squirrel – not much to choose from here but all are professional and free to use commercially as well. There are a few shining gems here.

Myfonts – has some decent free ones but most of the selection is between $40 and $199. Even so, if you find one or two really good ones that don’t cost much, they are worth holding on to.

Google Font API
– Ok, this doesn’t work the way a lot of font libraries do, this is actually for web use and even though what they have is very limited, it’s nice to see a free way of using fonts online that you won’t get in trouble for.

There are about a million and a half font foundries out there, but try not to be taken in, much of what is free isn’t worth messing with. However, if you search diligently, you’ll find a few diamonds in the ruff.