Explore the Premium Content

Creative Portfolio: Video Production

If you have your sights set on a career as an Art or Creative Director, you need to know about video production even if you don’t conduct the actual shoot. The dilemma that you might face is that you need to know enough to discern whether your team is goofing off or goofing up, but you don’t need to memorize every digital and video magazine and book on the market. Unless you plan to become a fulltime camera person, you just need to know the basics. Linda will take you through those primary routines in this article.

The Portfolio Project: Digital Video

PORTFOLIO PROJECT: Video. This project is a little looser than the previous projects, as the video will not be included in your portfolio (although you might plan to develop a promo or something similar for an online portfolio).

TOOLS: Video production would require Director, Premiere, After Affects, Sound Forge, or some other film editing/audio program that comes with a digital video camera. If you don’t have this software, just follow along and plan up to the point where you eventually will produce the video. You’ll need to use a notebook and sketchpad for notes and thumbnail sketches, as well as video storyboard sheets for production logs (sample included in this article).

WHAT YOU’LL ACCOMPLISH: As with previous projects included in this series, it’s your job to tackle this project with the study of other videos, television shows, and movies to learn more about how the pros accomplish their tasks. You don’t need to reinvent the wheel. You just need to prove that you can create a smooth ride.

Read More

Web 2.0 issues and workarounds

This article is the last in our series on Web 2.0 applications. If you’ve been reading the earlier articles, you’ll realise that Web 2.0 is a major new approach to building Web applications that mimic the responsiveness of desktop applications. Throughout the series, I’ve focused on Ajax-style applications and Flash/Flex rich internet applications.

In this article, I want to finish the series by looking at some of the issues that arise when developers start working with Web 2.0 applications. I’d also like to present solutions, where possible, to each of these issues.

There aren’t any resources to download with this article as we won’t be working through any examples. Rather, the article discusses some of the issues applying in the Web 2.0 approach. In particular, I want to cover the following issues:

  • Bookmarking
  • Use of the back button
  • Search engine indexing
  • Reliance on JavaScript
  • Reliance on the Flash Player plug-in
  • Reliance on XSLT

Some of these issues arise because of the way Web applications use a “single page” application model. Others arise because of Web 2.0’s heavy reliance on client-side scripting and plug-ins. Whatever their source, these issues have been addressed fully on a range of Web sites. Rather than reproduce the content from these Web sites, I’m going to provide a summary of the issue with some general observations. Then I’ll point you to some of the useful resources I’ve found to deal with them.

I’ll start with a look at issues relating to bookmarking a position within a Web 2.0 application.

Read More

Captcha with Flash Forms

If you are using Internet for your daily needs you have probably seen Captcha many times, you might just not know it. If you are familiar with the term you can skip the explanation below, otherwise read on.

Note: According to Wikipedia “captcha (an acronym for "completely automated public Turing test to tell computers and humans apart") is a type of challenge-response test used in computing to determine whether or not the user is human”.

Captcha is a small image with randomly generated text placed on a web form next to a designated text field. To submit the form user must type the text seen on the image into that text field. Thoroughly written server-side code will accept the submitted data only if the text has been entered correctly. To make it even more “spammer-proof” the verification text can be slightly scrambled, rotated and/or appear over a patterned background.
Since no modern software can (reliably) read text from images, Captchas make it really hard (if not impossible) to automate form submission procedure, thus protecting web sites against unfriendly actions, like web form spam or brute force attacks.

Ultimately, Captcha can be very useful on your HTML form, whether it’s a trivial “Contact us” page or a log-in screen to a web application processing sensitive data.

Flash forms are not as easy of a prey for the bad guys as they can’t be detected by crawlers or parsed as text.

Nevertheless, you can still benefit great deal from utilizing Captcha on your Flash forms. Why?

The answer, although simple, might not be obvious:

Any form whether it’s been designed in Flash or HTML needs a server-side script to process the submitted data. It is that script – not the form itself, of course, that requires protection from the automated submissions.

Read More

SOAP Header Security in ASP.NET 1.x

When working with Web Services one of the more difficult aspects of implementation is security. There are several scenarios of Web Services usage and depending on what your Web Service is intended to do you will require different methods of security.

If your Web Service is intended for public use security is probably not a great concern. If however your target audience is for strict corporate use or even internal use within a single company you will need to make sure your Web Service is not accessed from unauthorized sources.

The first natural thought it to create a login service which can authenticate users before allowing any access to your service methods. One of the biggest annoyances with Web Services and Web requests in general is that state is always destroyed after each request. There’s no simple solution to maintaining a user’s security principle across multiple Web Service requests.

What does this mean in simple terms? It means that you can authenticate on one request but subsequent requests will not be authenticated because the Web Service is not able to “remember” your client. In addition you don’t really want to be sending over user names and passwords as serialized text over the internet.

Fortunately there is a fairly simple alternative called SOAP headers or envelopes. These are sent as separates XML packages with your Web Service requests and can be read by the Web Service separately from the web method parameters.

The purpose of this article is to demonstrate how to use SOAP headers on a Web Service in an ASP.NET application, and, how to implement the header on an ASP.NET client application. The demonstration will be fairly straightforward and will use a login form to create a Web Service security content and use that context object on all Web Service requests.

Note: Visual Studio .NET 2002/2003 running ASP.NET 1.x is required for this tutorial. Both VB.NET and C# code samples will be provided

Read More

Creative Portfolio: Consumer Campaign

Often a Website client might branch out into other media to promote his products or services. Magazine advertisements, billboards, and television commercials all offer venues for marketing campaigns. If you know how to create and present a multi-format presentation like this, you could snag that Web client’s total advertising program. In this tutorial, Linda shows you how to create a campaign that is consistent with a client’s Website so that you can include this project in your portfolio.

The Portfolio Project: Print Advertisement Campaign

PORTFOLIO PROJECT: Ad Campaign. This project includes 3 full-page colour magazine ads, a billboard, and a storyboard for a 30-second television commercial. These projects can supplement a client’s Website, so pick a product or service that you’ve already worked with for this project, if possible. You will learn how to present these projects professionally to a client in a professional manner.

TOOLS: Begin with a sketchbook to make notes and to plan your ad campaign through thumbnail sketches. Even if you don’t have access to a layout program like QuarkXPress, you can use Photoshop or other software programs to complete this project. A basic understanding of print production, including billboards, is desirable.

WHAT YOU’LL ACCOMPLISH: You will act as Art or Creative Director as you complete the three diverse media projects. Although you might not have a staff to fulfil your directives, you can think as a director as you tackle new skills that will expand your knowledge about advertising campaigns. Once you complete these projects, you’ll know how to direct a team that can create the final projects.

Read More
FREE

Free - Adding styles in Dreamweaver

This video tutorial shows you how to use Dreamweaver to visually (no code required) add, edit and apply various CSS styles. This is meant for the beginner new to using styles.

Read More
FREE

Free - Dynamic Animation with Fuse Kit

At some point, most Flash developers get a project where you have to do motion animation in code instead of tweens in the timeline.  Video games, simulations or custom UI components are obvious places where code based animation may become necessary.  But animating with code can require a lot of lines of code.

The Tween class

When Macromedia made the v2 UI Components in Flash MX 2004, they included a class used in the component infrastructure called "Tween".  The Tween class allows you to change a property (such as _x, _y, _rotation, _alpha, etc.) of a MovieClip over time, with various built in easing effects.

There are a few problems with using the Tween class.  The first is that a single instance of a Tween class can only animate one property of a MovieClip.  So, if you want to adjust _x, _y, _rotation and _alpha, you need four Tween instances (one for each property).  The second draw back of Tween, is that there are a large number of parameters needed to create an instance, so it's a long line of code.  This compounds the first problem of needing to create multiple Tween instances, but making each instance a painfully long line of code.

The last major drawback with Tween is that if you don't manage it well and clear out completed or unnecessary Tweens, you can end up in a situation where Tweens just keep on animating uncontrollably, similar to having a setInterval call run off on you when you don't clear the interval religiously.

Fuse Kit

An open-source alternative to the Tween class called Fuse Kit, written by Moses Gunesch, combines a number of previous people's work into a single and very powerful ActionScript Animation kit.  It's a kit because you can choose which assets you want to use and only those assets will be compiled into the SWF.  So if you are only going to use limited assets in the Fuse Kit, you can choose to create very light SWFs.  But if you are going to use some of the higher-end features, you'll end up with a larger SWF file, but you'll have some great code based animations.

We'll take a look at each of the classes that make up Fuse Kit and how you can use them to create some very robust code driven animation.

Read More

User Controlled Styles with JavaScript and CSS Part Three

Welcome to the third and final part in this series; in parts one and two we created the test HTML page, a series of CSS files and the JavaScript code needed to make it all work at a basic level.  This part of the tutorial is going to look at the method by which we are going to ensure that when a user visits our site and makes some style choices, those choices remain if they navigate away from the site and then later return.

As we left things in part two, the page itself was working and the style control panel could be used to easily change the font size and theme of the page.  Visitors also had the opportunity to create a printer-friendly page consisting of just black and white styles.  Before we look at saving visitors style choices, we're just going to tidy a couple of things up.

We didn't go back to the HTML file and add the relevant event handlers or ID attributes in part two, but if you went ahead and did this anyway, you may have noticed when switching to the print medium style that the controls div loses its background colour and the link text changes to purple to denote a visited link.  This is only a trivial problem admittedly, but to me it just doesn't look professional.  You can fix it by adding the style rules to be applied when no colour stylesheet is in force to the userControlledStyles.css file.

Read More

Web 2.0 best practices

If you visit this Web site regularly, you’ll realize that recently, we’ve looked at the topic of Web 2.0 in some detail. This approach to Web applications aims, among other things, to create a more responsive experience for users. Both Ajax-style and Flash/Flex rich internet applications are common approaches in the Web 20 world.

The Web 2.0 approach is relatively new to the Web world and in this article, I want to look at some of the emerging best practices for building Web 2.0 applications. Even though some of the component parts of approaches like Ajax have been around for a while, developers are still coming to terms with Web 2.0. As we get more and more experience building this type of application, more and more best practices emerge.

I’ve attempted to put together a list of best practices for building Web 2.0 applications. See if you agree with what I’ve written or if you’ve got any more to add. I’m going to cover the following:

  • Minimizing server traffic
  • Using appropriate interface elements
  • Providing user messages appropriately
  • Indicating changed or refreshed data
  • Picking the right approach for applications
  • Enabling SWF files
  • Using frameworks, toolkits and script libraries
  • Working with object-oriented design patterns
  • Separating script into separate files

There aren’t any resources to download with this article. Rather, it discusses each of these best practices and provides a rationale behind why each is appropriate.

Read More

DataGrid Filtering using Ajax in ASP.NET 1.1

The advent of Ajax has played a crucial role in the progress of web development. Particularly for ASP.NET 1.x developers who are not able to take advantage of the new Ajax related controls added to the .NET framework 2.0.

It has opened an entirely new way to think about how to design a web page. What had been the tradition for years now has to be revisited. Old habits become called into question, you constantly stop and remind yourself, wait, I don’t have to send the entire page back to the server on each request. It is a bizarre concept in some ways but yet the flexibility of this simple concept has revolutionized internet applications.

Suddenly working with the old ASP.NET 1.x controls seems brand new again as you discover new ways to creatively implement them into your application. A web developer can now think more along the lines of a desktop developer. Your design methodology must be completely different and each WebForm needs to be approached with a different concept in mind.

The purpose of this tutorial is to take a simple example using the very common DataGrid control, and use it in a way that would normally never be considered before the advent of Ajax. Using some sample data from the Northwind SQL demonstration database we will bind a list of Customers to a DataGrid control, and allow the user to filter or search by a particular column for partial string data matches, and rebind the results all in a fraction of a second.

Read More

Creative Portfolio: Web Design Presentation

The designer who shows a talent for diverse design problems will want to show that he or she can create a Web project. But, just how much do you need to know about Web design? Is the ability to code important? How important is it to have a wide range of software capabilities? In this article, Linda discusses the impact that Web design can add to your presentation and how to present your skills and talents in this area through your portfolio and in your CV or resume.

The Portfolio Project: Web Design

PORTFOLIO PROJECT: Web Design. As a multi-talented designer with an eye on an Art Director’s position, you want to include Web design projects in your portfolio. You then must decide what type of Web design to include on ONE or TWO PAGES within that portfolio. If you go beyond this, you no longer become a multi-talented designer. You become a Web designer, and you limit your ability to climb the multi-talented career ladder. This project will help you to decide which TWO to THREE screenshots to use in your presentation, and where you can tell the employer or client about the skills that you entertain in this field.

TOOLS: Preferably Dreamweaver for Web design projects. In addition, you’ll need to utilize a sketchbook to show the potential employer or client that you know how to think out a project before you sit down to create the site. Your skills with a sophisticated graphics program, such as Photoshop or CorelDraw will show that you know how to apply projects from these software programs to your Website designs. The ability to work in Flash is very, very helpful.

WHAT YOU’LL ACCOMPLISH: This tutorial will help you to define your skills as a Web designer so that you can make the decision about whether to stick to Web design or to expand your portfolio to include other talents.

Read More
FREE

Free - Creating an Employee Gallery with Pure ASP Upload 3 and Smart Image Processor 2

Richard shows you how to create a wonderful Gallery that can be managed online with Pure ASP Upload 3 and Smart Image Processor 2. The gallery  enables you to upload and automatically resize images online! Read More
Newer articles Older articles