Who is Kim Siever?

I had a project I was working on that required me to import events from a database and import them into a Flash movie. After searching for a long time for a method that was easy and quick, I discovered Getting Data Into Flash by Dennis Baldwin.

Dennis’ solution was exactly what I needed. Well, actually, not quite what I needed. His solution worked for getting the data from the database and importing it to Flash. That was the biggest hurdle. What it did not do was allow for importing separate records. So I modified it.

The first thing I did was to modify his ColdFusion variable line into a sort of loop (make sure everything between the cfoutput and cfset tags are all on line).


<cfset x = 1>
<cfoutput query="qDates" maxrows="5">
&eventDate#x#=#DateFormat(qDates.EventDate,'dd mmm')#
&eventTitle#x#=#qDates.Subject#
&eventTime#x#=#TimeFormat(qDates.Time,'HH:mm')#
<cfset x = x+1></cfoutput>


The qDates query is the one that queries the database in order to pull the events I want. The maxrows attribute is how many events to return. If I only wanted three, I would change the “5” to “3”.

What the above code does is creates a very long variable line that includes the date, title and time of five events.

Now, we switch gears into ActionScript.

I took the ActionScript on the container movie clip in Dennis’ example and modified it to run another loop.

onClipEvent(data) {
total = "";
for(i=1; i<6; i++) {
eventDate = eval("eventDate" + i);
eventTitle= eval("eventTitle" + i);
eventTime = eval("eventTime" + i);
total += eventDate + " - " + eventTitle + ", " + eventTime;
}
}

You will also noticed that I assign the variables to the container clip instead of the root. In addition, I needed to evaluate the three variables because of the addition of the use of the loop’s index variable. If I had left it as eventDate = "eventDate" + i; for example, it would not have recognised "eventDate" + i as a variable.

Finally, I set the variable on my text field to be _root.mContainer.total so that it will import the values from the container’s (in my case, I renamed container to mContainer) variables.

There you go, a simple way to import multiple records from a database into Flash.

One of the most important skills a designer can develop is the ability to see through all the garbage in a bad project and notice the potential. One area this can be most prominent is in photo manipulation.

In my current job, I am often given photos that have been taken with a poor quality digital camera. It is my job to enhance those pictures and try my best to bring a professional feel to them. Sometimes this is very difficult. At other times, the elements are just right for me to do something good with the photo.

Here are some of the features I look for to make my job easier.

As large of an image resolution as possible

Having a large resolution allows me to get rid of a lot of the artifacts and unwanted pixels when I reduce the image dimensions to fit on the screen.

Pictures that are not too over exposed or not too underexposed

Even if pictures are underexposed or overexposed somewhat, as long as there is a sufficient amount of light and shadows, the image is still workable.

Detail in the subject

When editing the image, I will try to bring focus on the subject of the image (usually people). If there is good detail in the subject, then the attention of the viewer will be drawn to the subject and the imperfections in the background.

Good composition

Again, if the photographer chose a pose that is eye-catching, the attention of the viewer will be drawn to the subject and away from the background.

Whenever I am given an image, I rarely leave it as is. I always try to manipulate it some way to enhance it. I have a foundation of procedures that I use in nearly every image. Some images require me to use more than these, but virtually every photo I touch goes through the same process. The three procedures are as follows:

• Adjust Levels
• Adjust Colours
• Creating Depth of Field

I decided to show you the process I use for these three procedures on an image I took two summers ago. The photograph was taken near Penticton, BC, at the wedding of my wife’s sister and her husband. It is of my daughter and a friend. The photograph was taken with a cheap, fifteen-dollar camera, so it didn’t come out very well.

Levels

The first thing I did was open up the Levels dialogue box (Image>Adjustments>Levels) in Adobe Photoshop. I noticed there was a lot of empty space on the left hand side of the graph. This side is what represents the dark areas of the image. The lack of dark areas explains why the original image was so washed out. By bringing the slider over to the graph, I could easily bring the dark areas to a more reasonable area. In areas where the image is too dark, you’d want to bring the right slider (represents bright areas) over to the left. The middle slider will darken and lighten the entire image rather than certain areas.

Colour Balance

The next step was to change the colour balance. I started with the highlights and raised the reds to +9 and the blues to +19. This helped to bring up the colour of the girls’ dresses.

Then, I adjusted the midtones by bring the greens up to +9. This brought out the colour of the leaves and grass. It brought out the colour of the apples as well, but the apples are not noticeable in this photo.

Finally, I adjusted the shadow colours. By bringing the reds up to +18, I brought out the colour of the soil.

Depth of Field

At this point, the image looks not too bad. It is no longer washed out and the colours are more vibrant. Yet, it is still missing something. This is where my favourite procedure comes in. Creating a depth of field is one of the most important tools in making an image appear to be more professional. If you flip through any magazine, you will notices many photographs in the articles and ads will have depth of field used in them. And you thought those perspective exercises in high school art classes were meaningless.

The first thing I do is press Q on my keyboard. This enters me into quick mask mode. You will notice the colours in your toolbar will be black and white. Make sure the black is the foreground colour. Now choose a brush. For this picture, I used a size nine brush without a soft edge. If your subject is larger than mine is, you could get by with a larger brush.

Now colour in your subject. The colour will be red. Don’t worry; that is how you know you are in quick mask mode.

Once your subject is coloured in, press Q again. This will bring you back into standards mode. You will see that everything but the subject has a selection around it. This is what you want.

Now, go to Select>Feather and select a feather of 2 pixels. Next, go to Filter>Blur>Gaussian Blur and select a radius of 0.3 blur and press OK. You will notice that everything but the subject has been blurred slightly and the subject is standing out more.

Press Q again and paint more of the area around the subjects. The idea is to blur the background in stages so the further back you go, the more blurred it is. At this point, I decided to paint in the tree above the children and directly behind them. I also painted in the ground in front of them and up to the tree.

Press Q to enter standards mode again and press Ctrl+F (Command+F for Macs). This will apply the Gaussian blur filter again. Alternatively, you can also go to Filter>Blur Gaussian Blur and make sure the radius is set to 0.3 and press OK.

Press Q to enter quick mask mode and paint some more of the background. For my photo, I chose the next line of trees.

Press Q and then Ctrl F.

Press Q and paint in more of the background image. I painted in the next line of trees, which is the line right in front of the tables with white tablecloths.

Just keep going back and forth using the above step until you have the background completely done. I am stopping at this point.

Now, I press D to deselect the selection. And I see the following result

While it is not the best image out there, considering the state of the image with which we started, it looks much better.

The more you practise this three-part process, the better you will become at making images more professional and finding what elements are important in an image.

Enjoy.

If there is one thing I hate about navigating a PDF document, it is not being able to navigate a PDF document. Particularly a large one.

Not too long ago, I downloaded a PDF file that was over 200 pages long. The only way to navigate was to scroll up or down the page until I found the right page I wanted. Having large headings that stood out may have made my experience somewhat better, but these headings were the same weight, face and style as the copy text.

Granted, sometimes I come across a PDF file that has a table of contents and the beginning of the document with each item linked to the appropriate place in the document. Of course, if the file has a lot of pages (like over 200), having to go to the top every time I need to go somewhere can be very inconvenient.

So, how do you make it easy for users to navigate your PDF document? Bookmarks.

Open up your PDF document. Look to the left. You will see a set of menu tabs. One of them is the Bookmark Tab.

Click on it to open the bookmarks panel.

Highlight the heading to where you want the user to jump.

Go to Edit > Add Bokmark.

Voila! Your first bookmark.

It is that easy. Now just repeat these steps for every heading.

The Poynter Institute published a study called EyeTrack III recently. It reveals results of eye movement tracking of a small group of web users. It is a very fascinating read.

The study consisted of studying how 46 people read and scanned 10 mock news websites in a period of an hour.

Some of the findings include the following:

• Users read smaller text and scan larger text
• Right navigation is favoured to left navigation
• The initial focus of most users is in the top left corner of a page
• Shorter paragraphs were most popular
• People scan headlines in less than a second each
• People respond better to text than images
• Ads are largely ignored, but they perform better under the flag and before content
• Text ads received 7 seconds and image ads get 1.6 seconds of viewing
• Images with clear, clean faces attract more views than other images
• People have a habit of clicking on photos

There is a lot more information. I have only spent 30 minutes reading the study so far and have yet to finish the first page.

It is a must read for all website developers.

Stop making your websites go to full screen automatically! I mean it. Stop it.

People do not take into consideration how different website users set up their operating system, software and hardware.

First, making a window auto maximize without giving the user the option to do it or not is irritating.

Second, making a window auto maximize without giving the user notification what will be happening is inconsiderate.

Third, not every user has a single monitor. Many users have set ups with multiple monitors. It allows them to work on more than one application at a time more efficiently. When a window goes to full screen, it spans all monitors—not just one. Since most full screen designs are centred horizontally and vertically, the content ends up being split evenly between both screens, with the left half being on the left monitor and the right half on the right monitor. If the first two issues I listed above were irritating and inconsiderate, this issue is very irritating and very inconsiderate.

Don’t make designs that expand to full screen automatically. Give the user a choice. If you have to make it full screen, at least learn how to constrain it to a single monitor.

One thing I have been trying for months to do on the Faculty of Management website is to create VCS files on the fly. VCS files are what Outlook and other calendaring software use to pass calendar items between each other. When I added an event to our database with ColdFusion, I wanted it to create a VCS file that the user could then download to his/her calendar.

Earlier this week, I came across Chris Wigginton’s vCal UDF. This ColdFusion UDF outputs the necessary information to a string. All that is needed is to write the string to a file. I used the following code to accomplish this:

<cffile action="write" file="/root/folder/folder/file.vcs" nameconflict="overwrite" output="#vCalOutput#" mode="777" />

The cffile tag is used for creating, modifying and deleting files with ColdFusion.

The action attribute is pretty self-explanatory.

The file attribute contains a path to where the file is/will be stored. This is not a URL. It is a direct server path. It should also be noted that some servers will require a drive letter (such as C:).

The nameconflict attribute is used to tell ColdFusion what to do if it encounters a file named the same as that referenced in the file attribute. I used overwrite simply because I was using the cffile tag in an edit page. In this regard I was making changes to the event in the database, so I wanted those changes reflected in the VCS file.

The output attribute is what is sent to the file referenced in the file attribute.

The mode attribute is the permissions given to the file. Our server does some pretty funky things sometimes, so I gave read, write and execute to the owner, group and world. Anything else would probably result in a ColdFusion server error.

One other thing to keep in mind with VCS files is that times are based on GMT. In order for me to create times for the Mountain Time Zone, I had to add 6 hours to the start and end times. For this, I used the following code:

stEvent.endTime = "#DateAdd('H', 6, CreateODBCTime(FORM.TimeEnd))#";

The first parameter of the DateAdd function is which element of the date/time value you want to change. In this case, ‘H’ corresponds to the hour. The second parameter is the number of hours to use. If you live east of the GMT, you would simply use a negative value. The third parameter is another function that converts the time-only value I use in my database to a date and time value needed for the VCS file. If you use a date-time value in your database already, you don’t need to use the CreateODBCTime() function.

There you are. A complete solution to making VCS files in ColdFusion.

Update: For some reason, VCS files do not seem to currently work in Firefox.

As the new ward clerk, I have been notified that I need to put together the new ward telephone directory. I am looking for ideas.

Most of my design experience has been digital. Most of that digital work is web related. It is very rare for me to do a print design. It is even rarer to do a print design that consists of more than a logo. I have just never received many requests for print work. Maybe that says something about Lethbridge.

I am grateful for the opportunity to put together the directory. I think it would be a good chance for me to practice my print design skills, despite being restricted to Microsoft Word. I also think it would be a good change from the basic, unformatted directory printed by MIS as default.

I am looking for design ideas and inspiration. Feel free to share any examples of well-designed, easy-to-use telephone directories. They don’t have to be LDS ward directories.