All posts tagged ‘tutorial’

File Under: Multimedia

Flash Tutorial for Beginners – Lesson 2

The Button Symbol

In Flash Tutorial for Beginners – Lesson 1, we created some objects and then animated them with Flash. You may recall that we accomplished this through the magic of symbols. And remember how I told you that it’s possible to edit these symbols? Well, that’s where we’re going to start this time around. If you haven’t made your way through Lesson 1 yet, you might want to do this first, as we’ll be building on the example animation I talked about in that article.

When you created your symbols, you may have noticed that there were three different types you could have selected.

The kind of symbol we created in Lesson 1 was the most basic type:a Graphic symbol. The second type is a Button symbol (and the third is the Movie Clip symbol, which will be covered in the next lesson). The Button symbol infuses your Flash animation with interactivity, so it responds to a mouseover or a click and can trigger an action.

You’ve already learned how to create a simple Flash movie. Well, making a basic Button in Flash is like making a four-frame movie. In the previous lesson, we created images on the Stage and then defined them as symbols. Now we’re going to create a symbol with the symbol editor.

Open the Library palette for your movie by choosing Library from the Window menu. See the Options pulldown menu in the upper-right corner? Select New Symbol, name it something easy like “Click-me” or “Button” and then select Button Behavior. After hitting OK, you’ll be able to edit the symbol. While you edit the symbol, the movie will be hidden.

Select Grid from the View menu to help you with alignment. Choose the Text Tool and use the Character panel to select a bold font of 18 points. Type “CLICK ME” in the center of the Stage. Next, add another layer and name it “rectangle”. Select the Rectangle tool and set the Stroke height to 2.0 points and the color to black. Select a light color for the Fill Color, and draw a rectangle on the new layer. If you can’t see the text, make sure the “rectangle” layer is below the text layer in the timeline. If it’s not, just click and drag that layer name to change the order.

You’ll notice the Button Symbol Timeline has a label above each of the four frame cells:Up, Over, Down, and Hit. A different user action triggers each of these states. We’ve just drawn the image for the Up state, which is what the button looks like when it’s just sitting there. Over is what it looks like when the user rolls the mouse over the button. When the user clicks down on it, that’s Down. And Hit defines the hot area of the button – like an image map; it indicates where the mouse needs to be to trigger the button.

Continue Reading “Flash Tutorial for Beginners – Lesson 2″ »
File Under: Backend, Programming, Software

CVS for Beginners

OK. You and ten of your closest pals have decided to work on the greatest-ever web page/Perl script/whatever. You all want to work on the same file from the same location at the same time. Then when you’re good and ready, you’ll roll out releases of the code.

Does it sound like a logistical impossibility? Well it’s not if you have the right tool — a source control system.

A good source control system is the secret behind any successful web development project. If you look at any large-scale software development project, you’ll see a source control system at work.

Continue Reading “CVS for Beginners” »
File Under: CSS, Programming

Make CSS Rounded Corners

While you’d be hard-pressed to come up with any single design tic that defines that coveted Web 2.0 aesthetic, nothing screams “I’m a hip blogger” quite like rounded corners. We’re not sure how the trend started, but even now as rounded corners have largely jumped the shark, clients still clamor for them.

Not surprisingly, there are literally dozens of ways to create the rounded corner look. Your options range from the very primitive (just create static backgrounds in Photoshop and apply them on a per-element basis) to the very progressive — CSS 3 can do rounded corners with just one line of code.

Unfortunately, not all browsers support CSS 3. So, unless you’re doing a fun site for your own experimentation, you’re going to have to resort to one of the more traditional workarounds.

We decided to dig through the many options for creating rounded corner elements and came up with a few winners that stand out from the bunch. These methods offer the best balance between simplicity and valid, semantic markup (for the most part) while keeping the images to a minimum. Not only do these methods adhere to proper web standards, but they’ll keep page load times down, too.

The options here range from pure CSS to JavaScript-based solutions, hopefully offering something for everyone.

Continue Reading “Make CSS Rounded Corners” »

File Under: CSS, HTML

Web Standards for Beginners

In the beginning, all we had were hacks.

To lay out web pages the way our clients wanted, with pull quotes, text wrapping, multi-colored table cells with space between the rows (but not the columns), then we had to hack, hack, and hack some more. Our hacks resulted in some impressively gargantuan code:enormous, indecipherable, triple-nested tables up and down the page, each with its own border, padding, spacing, and alignment settings, packed to the rafters with bloated font tags. But what could we do’

It wasn’t our fault we had to build these monstrosities; all we had to work with was HTML, a markup language created by a British software consultant in his spare time to enable scientists in Switzerland to share information about particle physics! I mean, come on! HTML was designed to display plain text in a hierarchical manner, period — no images, no three-column layouts, no multi-color fonts. It was never intended to create the magazine-like layouts we see on the web today.

But that’s what our clients paid us for, and so we hacked.

And as if that weren’t bad enough, the browsers we were developing for all rendered our code differently, leading to more hacks and more bloated pages as we strove for “cross-platform compatibility” (the day my producer learned that term was a dark day indeed).

Well, the kind souls at the World Wide Web Consortium have taken pity on you, poor Web developer, and in their infinite wisdom have formulated a solution that’s so beautiful in its simplicity, so beneficial for all parties involved (developer, client/boss, user), that you’ll break down and weep like Tammy Faye on a Sunday when you realize how much easier things are about to get for you.

The solution? So, so simple: web standards.

Continue Reading “Web Standards for Beginners” »

File Under: Programming

Perl Tutorial for Beginners

This article will get you started with CGI scripting, the force that makes forms work, your counters count, and all kinds of other things happen.

CGI scripts can be written in a variety of computer languages, but my favorite is Perl, which also just happens to be one of the most used languages for CGI scripting. So before we tackle CGI, today we’ll max out your gray matter on this damn-near-holy language.

Continue Reading “Perl Tutorial for Beginners” »