Web Design Tutorials - Flash, HTML, CSS, Actionscript » 2009

January 23, 2009

How To Use float:left

Filed under: CSS, Tutorials — Tags: web design chicago — admin @ 8:16 pm

How To Use float:left

Note:The float property is one of the most flexible and widely used tools of div based layouts.

Objectives: Learn how to use the float: property to position divs.

Lets jump right in

below are 2 iframes,:

I hope this tutorial helped you, please if you have any feedback, suggestions, or comments Contact me here or leave a comment!

Comments (1)

January 20, 2009

div position:absolute vs div position:relative

Filed under: CSS, Tutorials — Tags: absolute vs relative, css position attribute — admin @ 3:15 pm

div position:absolute VS div position:relative

Note: There are alot of ways to position divs, and they are covered in other tutorials. In this tutorial we will go over the basics of position:absolute and position:relative

Objectives: This tutorial is written to explain the effects of position:absolute and position:relative in conjunction with each other.

Position:relative and Position:absolute

Think of the browser window as one div with {width:100%; height:100%; position:relative;} Any divs or objects placed inside of the <body> tags will be positioned relative to the browser window.

The position:relative Tag

Think of this tag as the “Parent” for anything inside of it. Objects you place inside will react to positioning attributes such as left, right, top, bottom, float relative to its parent container.

The position:absolute Tag

Placing this tag on an object allows it to position relative to its parent container, even if there are other containers in between.

In the below example, the difference is in the top image, the orange image has the attribute position:absolute, so it is positioned relative to the browser window (by default). In the bottom image the div “header-container” has the attribute, position:relative; so the image is positioned relative to that container instead.

Instead of being positioned relative to the browser window, the orange image is placed relative to header-container due to the property “position:relative” on the div.

If your curious about the float:left, it is a very powerful tool for positioning and you should check out How to use float:left.

I hope this tutorial helped you, please if you have any feedback, suggestions, or comments Contact me here.

Comments (0)

January 5, 2009

Creating a Link with flash

Filed under: Flash, Tutorials — Tags: actionscript, actionscript 3.0 link to web site — admin @ 3:37 pm

(You must allow pop-ups for this video)

Creating A Link With Flash

If you have no experience with actionscript, its OK! This tutorial will go through step by stop on how to do it and I will explain everything as best i can.

Note: This tutorial assumes you have SOME knowledge of flash (how to create and work with symbols.)

Objectives: This tutorial is written to show people how to link a symbol (I will briefly go over text) to an external web site.

Lets Begin

There are 2 main steps in creating a link

Create the link function
Create the event listener

Create The Link Function

This is going to be the function that opens the web page. Whenever we call this function, it will load the page. I will call it goHome(). You may place this actionscript anywhere on the timeline.

function goHome(e:MouseEvent):void {navigateToURL(new URLRequest(”http://www.google.com”), “_blank”);}

Create The Event Listener

This is the script that detects the key click. It listens for a key click, then executes goHome(). This must be placed ON the symbol you want to be the link. Before you can call the symbol, you must give it an instance name. So first select the symbol you are working with (for this example we will call it homeButton). So select homeButton and in the properties window in the “Instance name” field type: homeButton. This is very important. If your having trouble finding the “instance name” field, keep looking! you may have to use the subselection tool, on CS3 it is V, and A for selection tool. Dig around the properties bar until you find Instance Name

Now that your symbol has a name, we may call it in this next script. So on the same layer that the symbol is on, add a new keyframe and open the actions panel. Attach this script there.
homeButton.addEventListener(MouseEvent.CLICK, goHome);

This will listen for a keyclick on that instance and once clicked it will execute goHome, which currently sends you to google.com

I hope this tutorial helped you, please if you have any feedback, suggestions, or comments Contact me here. And please visit my site, Web Design Chicago