n00bs of the Industry Finding Their Way…

Greetings-

As a soon to be graduate from a college institution, I find myself reflecting upon a time when advanced web design and new software presented itself as a giant question mark.  What to do, how to learn, what to learn, and methods of implementation all begged for answers, and for anyone venturing out on their own- these questions can be a little intimidating.  And just as eager young minds strive to find new techniques and design tricks,  every good designer is constantly learning, exploring, and probing for ways to beef up their skills.

With that preamble, below I will share a few links I find useful in… well, just having some fun within some pretty amazing software.

For basic flash tutorials or forums used to work out frustrating problems or general  inquiries, check this site out:

http://www.kirupa.com/developer/flash/index.htm

For those looking to find special effects techniques in Photoshop, the link below should satisfy some of your curiosity.  There are also contests for those of you who already have your Photoshop muscles bulging like the Hulk.  But seriously, who doesn’t want to turn themselves into a marble statue or a celebrity photo into an alien life-form?

http://www.worth1000.com/tutorials.asp

And lastly for now, for those of us fascinated by the power of Adobe’s After Effects, a website that allows even us n00bs to create 3-d room tours and ink splatter intros!

http://library.creativecow.net/tutorials/adobeaftereffects 

That’s all for now, but hopefully that provides some entertainment for beginners through advanced designers poking around on the net.

Later days!

Adobe Spry Tabbed Panels meets Sliding Door and CSS Sprites

So you like the functionality of the Adobe Spry Tabbed Panels, but their drab appearance doesn’t go well with the overall design of your Web site. Meanwhile, you have been hoping that Adobe would eventually give you the ability to change their appearance with little or no CSS experience. Perhaps I have the solution you have been hoping to find and use on your Web site using the Sliding Door and CSS Sprites technique.

I would recommend using Macromedia Dreamweaver 8 or Adobe Dreamweaver CS3 (or better) with the Spry Framework widget already installed. If you don’t have Spry preinstalled in Dreamweaver, go to it’s homepage and download the extension…
http://labs.adobe.com/technologies/spry/home.html

Spry Tabbed PanelsAfter it is installed, try adding a Spry Tabbed Panels widget on one of your Web pages. The widget will automatically embed code into your HTML as well as create a javascript (SpryTabbedPanels.js) and CSS (SpryTabbedPanels.css) file. Besides the embedded HTML code, javascript and CSS file, you will need to create, or edit, a GIF (spryTabbedPanels.gif) file that would work well with the overall design of your Web site. Place this GIF file in the images folder on the root of your Web site (example: /images/spryTabbedPanels.gif).

You will need to add some additional HTML to your Spry Tabbed Panels unordered list.

Find the following HTML…
<ul class=”TabbedPanelsTabGroup”>
<li class=”TabbedPanelsTab” tabindex=”0″>Tab 1</li>
<li class=”TabbedPanelsTab” tabindex=”0″>Tab 2</li>
</ul>

Add a hyperlink around both Tab 1 and Tab 2. I would also recommend sequentially numbering the tabindex as illustrated below…
<ul class=”TabbedPanelsTabGroup”>
<li class=”TabbedPanelsTab” tabindex=”0″><a href=”#Tab1″>Tab 1</a></li>
<li class=”TabbedPanelsTab” tabindex=”1″><a href=”#Tab1″>Tab 2</a></li>
</ul>

Open the SpryTabbedPanels.css and go to the very bottom of the page in Dreamweaver’s code view. Copy and paste the following beneath all of the original CSS…

/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */
/* Revision by Craig Malcolm Petrou of cpetrou.com */
.TabbedPanels {
margin: 0 5px 20px 0;
width: 570px;
}
.TabbedPanelsContent {
background-position: bottom;
padding: 9px;
}
.TabbedPanelsContentGroup {
background-color: #FFF;
border: 1px solid #4E4087;
}
.TabbedPanelsTab {
background-color: #FFF;
border: solid 0 #FFF;
font: bold 90% “Trebuchet MS”, Trebuchet, Verdana, Arial, Helvetica, sans-serif;
text-align: center;
height: 30px;
}
.TabbedPanelsTabHover {
background-color: #FFF;
}
.TabbedPanelsTabSelected {
background-color: #FFF;
}
ul.TabbedPanelsTabGroup a {
display: block;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/spryTabbedPanels.gif) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/spryTabbedPanels.gif) no-repeat 100% 0;
padding: 7px 10px 5px 0;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/spryTabbedPanels.gif) no-repeat 0 -31px;
}
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/spryTabbedPanels.gif) no-repeat 100% -31px;
}
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and CSS Sprites */

Examples of sites using this updated Adobe Spry Tabbed Panels code include…

Craig Petrou is a Webmaster for Pennsylvania’s largest credit union, PSECU; owner of cpetrou a Harrisburg, Pennsylvania, based advertising and marketing agency focused on web, print and multimedia; and Marketing Director for Tap ‘n Arts Dance Studio.

Useful CS3 Features: Illustrator Eraser Tool

When talking about the new features in Adobe’s newest release of its Creative Suite, no one can go without discussing the newly acquired “eraser” tool for Illustrator CS3. When working with vector graphics and images, nothing can be quite as frustrating as needing to trim up a layer/shape. Designers have been ever-longing for an easier route than make-shift divides and subtracts with the Pathfinder tool, or tedious adjustments of points and anchors with the pen tool. Now a user can very easily swipe pieces of vector shapes away, and are left with a just as beautiful vector in its place. Many speculate the slightly rough edge that it puts on, as almost no one can have that perfect curve when using a traditional mouse, but there are plenty of tools to help that, the easiest being the “Smoothing Tool” (looks like a pencil with lines all across it). To ensure a careful erase, make sure only the shapes in which you want to subtract from are selected. With the shapes selected just use the eraser tool similar to how you would in a photo editing program, such as Photoshop. This tool could quite possibly be the biggest advantage to the new release of Illustrator.

Encode Flash video and drop into Dreamweaver

Encode Flash video and drop into Dreamweaver

by Craig Petrou and Jasmine Bucher

Just as The Buggles so famously said, “Video killed the radio star,” so too can it be said that web-based video has killed the static web page. Gone are the days of catching the attention of the overstimulated consumer with well-placed hypertext links, stimulating content, and cool graphics. From presidential candidates and college admission offices to Wall Street investors and the creators of the phenomenally popular YouTube, everyone is doing it. And if peer pressure works like it has since long before the short career of The Buggles (1977–1981), then web-based video is here to stay and will only continue to increase for entertainment, communication, and content delivery.

Web developers have struggled to find the best way to disseminate video on their sites. They’ve shared the same horrid experience of a client delivering a 45-minute, double-digit megabyte file with orders to just post it. What consumer has the patience to wait for such a large file to download? And what developer doesn’t find this a waste of time?

But the integration of web-based video has come a long way. And with the inclusion of the Flash® Video 8 Encoder and its seamless amalgamation with Dreamweaver®, even web developers with minimal video background can successfully include web-based video on their sites. Video file formats such as AVI, MOV, MP4, MPG, and WMV can all be converted to FLV files, which are viewable on most operating systems and web browsers via Flash Player 6 or later.

The following tutorial explains how to take a video file, convert it to FLV, and embed it in a web page using Dreamweaver 8.

Converting video files to FLV

screenshotCaptivate demo: Convert video to FLV and embed within Dreamweaver

  1. Launch Flash 8 Video Encoder, which came with Studio 8.
  2. Click Add, navigate to the video file you want to convert, and click Open.
  3. Select the video file, and click Settings.
  4. Select one of the Flash Video encoding profiles from the pull-down menu. (For detailed information about FLV encoding profiles, visit the Flash Developer Center)
  5. Enter an output filename.
  6. Click Show Advanced Settings if you want to adjust the encoding profile you selected. You can adjust the video and audio encoding and cue points, and you can also crop and trim the video size. Finally, set the in and out points for encoding the video by dragging the scrubber sliders. After making adjustments to the encoding profile, click OK.
  7. Click Start Queue to begin encoding the video. While the video is encoding, you can watch the progress of elapsed time and time left until completion. A green checkmark will appear to indicate the video encoding is complete.
  8. Exit the encoder if you do not have any additional videos to convert.

Embedding FLV in Dreamweaver 8

  1. Launch Dreamweaver 8.
  2. Create a new HTML web page by choosing File > New.
  3. Select Basic Page and then HTML, and click Create.
  4. Click Design View in the toolbar.
  5. Choose Insert > Media > Flash Video.
  6. You will be prompted to save the FLV object before inserting it. Click OK.
  7. Name and save the new HTML Web page within your website.
  8. The Insert Flash Video dialog box will appear. Select one of the video types from the pull-down menu. (Progressive download should be used for web sites with low traffic. For sites with high traffic or those offering a high-end video experience, consider using streaming video.)
  9. Click Browse to locate and select the new FLV file you just encoded, and click OK.
  10. Click Detect Size to get the width and height of your encoded video. Use the width to help determine the prebuilt FLV player skin that works best from the pull-down menu.
  11. Select Auto Play, located below the width and height settings, to have the video play as soon as it loads within your finished web page. Select Auto Rewind to make the video rewind as soon as it finishes playing.
  12. Click OK to finish inserting the FLV file within your web page.
  13. Choose File > Preview in Browser to view the new video-embedded web page. You will be prompted to save the file. Click Save. This will open your chosen web browser and show you a preview of the new web page with your FLV file.
  14. From the local files window (Dreamweaver FTP panel), upload your new HTML file. Dreamweaver will prompt you to include dependent files (say yes). If Dreamweaver does not prompt you to include dependent files, make sure to upload the FLV file, the pre-built FLV player skin file (SWF), the FLV Player file (FLVPlayer_Progressive.swf), and the Active Content javascript file (AC_RunActiveContent.js).

So, is it really that easy to take a video file, convert it to FLV, and embed it in a web page using Dreamweaver 8? Yes and no. There is plenty of web-based video out there. Some is effective; some is not. Some is good quality; and some is not. Just as the laser printer made everyone a graphic designer, so too has the easy incorporation of web-based video made everyone a producer. But one thing is certain, web-based video is here to stay. And as The Buggles said, “We can’t rewind, we’ve come so far.” So, with this easy process, why not experiment?

Craig Petrou is a Webmaster for Pennsylvania’s largest credit union, PSECU; owner of cpetrou a Harrisburg, Pennsylvania, based advertising and marketing agency focused on web, print and multimedia; and Marketing Director for Tap ‘n Arts Dance Studio.
 
Jasmine Bucher is Director of Campaign Communications and an Adjunct Instructor of English for Lebanon Valley College in Annville, Pennsylvania. She is also a member of the Central Pennsylvania Adobe User Group.