The Online Training Content Journal

Photoshop vs. Fireworks

I've been partial to Photoshop since using version 2.5 back in 1993. Photoshop has everything an image editor can ever need. But does it stand up to all things web? It was easier to say that a few versions back when ImageReady was around. ImageReady was Adobe's web graphics package. It did everything a web designer needed to do to create web graphics, optimization, image maps, rollovers, animations, etc. Macromedia came out with a nifty little web graphics app to tie into to Dreamweaver called Fireworks. It's first rev seemed a bit clunky compared to the then polished Photoshop/ImageReady. Then the merger happened and all hell broke loose and Adobe ruled the world of graphics.

In looking at the two web graphics packages, Adobe decided to axe ImageReady (or stop supporting it) in favor of Fireworks. ImageReady wasn't outputting compliant, standards-based code anymore and Adobe couldn't leave out the tight integration between its flagship WYSIWYG editor (Dreamweaver) and Fireworks. So now if you went out and bought the Creative Suite Design Premium, you got Photoshop, InDesign, and Illustrator, but not Dreamweaver and Fireworks. You would've had to buy the Creative Suite Web Premium for that, which comes with all minus InDesign.

Sure, Photoshop CS3 still has some features from ImageReady, albeit fairly hidden, but can do image optimization, animation, and slicing. That begs the question for web designers: Photoshop vs. Fireworks, the title of this interview between eight users - four Photoshop wizards, and four Fireworks geeks.  The results are quite intersting. My take on it is that Photoshop, trying to be the end all program for graphics creation, misses the mark when it comes to specialized tasks that Fireworks adequately handles. Still, it's a comfort thing. If you've learned Fireworks before Photoshop, then you'd be more comfortable with that and vice versa.

instructional design	online training content development	accessibility
section 508	interactivity	learning activities
elearning podcasts	usability	CSS Flash XHTML
semantic markup

Al Lemieux
Senior Designer
SyberWorks, Inc.
SyberWorks e-Learning Podcast Series
SyberWorks LMS e-Learning Implementation Podcast Series
e-Learning Lingo Podcast Series
SyberWorks Learning Management System

Adobe make Flash more Searchable

Adobe has joined forces with Google and Yahoo to make Flash content more searchable. Nothing will need to be done by the developer community in order to 'optimize' Flash files for search, according to Google. Text, links, and other interactive elements will now be indexed by the popular search engines.

Macromedia had made great efforts in this area with the aid of Jakob Nielsen's group, but met with skepticism by the developer community. Since acquiring Macromedia, Adobe has made a continual effort to enhance Flash and this step - probably more so than any other feature request - will bring Flash and Flex to the forefront in the development community again. Without the problem of indexing and searchability, Flash will become more useful, especially to those with a focus on SEO.

instructional design	online training content development	accessibility
section 508	interactivity	learning activities
elearning podcasts	usability	CSS Flash XHTML
semantic markup

Al Lemieux
Senior Designer
SyberWorks, Inc.
SyberWorks e-Learning Podcast Series
SyberWorks LMS e-Learning Implementation Podcast Series
e-Learning Lingo Podcast Series
SyberWorks Learning Management System

HTML Reference

SitePoint, has published their new HTML reference. The author, Ian Lloyd, was recently featured on Boag World. This Beta reference is searchable and does have a table of contents listing. Entries include examples, definitions, usage, and compatibility.

instructional design	online training content development	accessibility
section 508	interactivity	learning activities
elearning podcasts	usability	CSS Flash XHTML
semantic markup

Al Lemieux
Senior Designer
SyberWorks, Inc.
SyberWorks e-Learning Podcast Series
SyberWorks LMS e-Learning Implementation Podcast Series
e-Learning Lingo Podcast Series
SyberWorks Learning Management System

PR: wait... I: wait... L: wait... LD: wait... I: wait... wait...

Using Any Font You Want

Long the bane of all web designers is the issue of choice. Choice in font that is or shall we say a very limited choice. Sure, there have been several techniques that have come down the pike in order to handle this severe limitation. There was the Fahrner Image Replacement technique, the Phark method, and the Malarky Image Replacement technique. (My favorite being the Phark method). These techniques allow you to create images that will replace the headlines on your page - keeping the headling for SEO, but removing the actual text from the viewport, while simultaneously showing the gorgeous graphic you created. Face it though, that's a lot of images to create, even with your samurai Photoshop skills.

What if you could automate the way the headlines were replaced with PHP and Flash? The Scalable Inline Font Replacement technique can do this for you. As outlined in Pariah S. Burke (Of InDesign Secrets notoriety) in the latest edition of Creative Pro.com. The step-by-step instructions involve some downloads, a Flash file, a dash of CSS, and PHP.

Potential downside is that the user agent won't have the correct version of the Flash Player and won't see your beautiful font. That doesn't prevent them from seeing the text though, which will display if the whole Flash thing fails. Most user agents are smart enough to catch the Flash version problem and notify users these days. From a developer standpoint, the only thing to be concerned about is whether or not your server can handle PHP.

This all sounds like overkill, but if you have a large site to handle, this method is a lot better than creating a lot of images to replace headlines throughout your site.

You can find the article here: http://www.creativepro.com/article/use-any-font-a-web-site-design

instructional design	online training content development	accessibility
section 508	interactivity	learning activities
elearning podcasts	usability	CSS Flash XHTML
semantic markup

Al Lemieux
Senior Designer
SyberWorks, Inc.
SyberWorks e-Learning Podcast Series
SyberWorks LMS e-Learning Implementation Podcast Series
e-Learning Lingo Podcast Series
SyberWorks Learning Management System

The Easiest AS3 Preloader Ever!

Having been kicking the tires of ActionScript 3.0 since it came out, I've seen a variety of approaches to preloaders. As you know, a preloader is an essential part of any Flash presentation that will be loaded on the web. Some of these techniques, such as this one, are supposed to be simple. Others require custom class development - which is perfectly fine, but seems to be overkill for something as simple as a preloader.

Jens Brynildsen, over at Flash Magazine, posted an incredibly simplified tutorial for a preloader. The beauty and simplicity of this approach allows you to create any type of preloader animation, not just a progress bar and text. The approach uses a movie clip with a one hundred frame animation as the visual aspect of the preloader. Given and instance name of preloaderMC, this movie clip is placed on a scene prior to the main animation. ActionScript does the rest.

A typical percentage is calculated by using the bytesLoaded multiplied by 100 and then divided by the bytesTotal, rounded off by using the Math.floor command. Two conditional statements follow that check if the preloaderMC is a movie clip and if so, tell the movie clip to gotoAndStop on a frame equal to the percent variable declared earlier. Then, if the entire movie is loaded (percent == 100), the movie will play.

You can find the tutorial here: http://www.flashmagazine.com/tutorials/detail/how_to_make_a_custom_as3_preloader/

Enjoy!

instructional design	online training content development	accessibility
section 508	interactivity	learning activities
elearning podcasts	usability	CSS Flash XHTML
semantic markup

Al Lemieux
Senior Designer
SyberWorks, Inc.
SyberWorks e-Learning Podcast Series
SyberWorks LMS e-Learning Implementation Podcast Series
e-Learning Lingo Podcast Series
SyberWorks Learning Management System

Flash Video: Streaming, Progressive, HTTP?

Serving up video these days is getting easier and easier with the advent of youtube and other popular video sites. A novice can upload various media types to YouTube and it will automatically process that file for world wide distribution.

But there are a lot of other ways to deploy video on your own server. In his article Efficient Video Delivery Over the Internet Lei Zhu talks about the differences, advantages, and disadvantages of Progressive, RTMP, and HTTP streaming.

At SyberWorks, we've just implemented RTMP streaming for some of our longer training courses with an excellent service at Upstream Networks.  It's very easy to upload and manage multiple video streams and access those files from SWFs within courses.

instructional design	online training content development	accessibility
section 508	interactivity	learning activities
elearning podcasts	usability	CSS Flash XHTML
semantic markup

Al Lemieux
Senior Designer
SyberWorks, Inc.
SyberWorks e-Learning Podcast Series
SyberWorks LMS e-Learning Implementation Podcast Series
e-Learning Lingo Podcast Series
SyberWorks Learning Management System

e-Learning Design with the help of the Grid

Ever since the Guttenberg press, designers have extolled the benefits of grid-based design. In order to control alignment and spacing, grids offer designers the ability to compartmentalize and give hierarchy to a design - although some see it as a hindrance.

Grids are often used in the print world, but now a Firefox add-on called GridFox allows you to impose a grid onto the page you are viewing to check your work. The add-on can be configured to show columns and rows in levels of opacity over the viewport. To turn the grid off, simply click inside the browser window.

Al Lemieux
Senior Designer
SyberWorks, Inc.
SyberWorks e-Learning Podcast Series
SyberWorks LMS e-Learning Implementation Podcast Series
e-Learning Lingo Podcast Series
SyberWorks Learning Management System

Tips for your email campaign (Yes, it helps learners when your emails to them are well developed)

It's funny sometimes how because we think that since we are in e-Learning or online training that good common sense and best practices for things like email marketing do not apply because it is just a training course, but its not the case.

When designing a newsletter email campaign, you may only be thinking of how the email looks and how to send it out. But there's a lot more that goes into email campaigns. SPAM filters and advanced filtering controls in email clients are getting better and better at identifying and tagging junk mail, making it more and more difficult for you to access your learners (users).

In the article 10 Tips for Your First Email Campaign, author Ben Chestnut talks about the nuts and bolts of lists, content, sign-up forms, privacy policies, and opt-ins. It's a good start for anyone who's thinking of trying to blast out emails to your learners.

instructional design	online training content development	accessibility
section 508	interactivity	learning activities
elearning podcasts	usability	CSS Flash XHTML
semantic markup

Al Lemieux
Senior Designer
SyberWorks, Inc.
SyberWorks e-Learning Podcast Series
SyberWorks LMS e-Learning Implementation Podcast Series
e-Learning Lingo Podcast Series
SyberWorks Learning Management System

Animating in Code: Flash CS3

Flash CS3 has the ability to take timeline animation and convert it to code. Sure, you can copy motion and paste to another symbol, but copying as code offers a little more flexibility, as Lee Brimelow describes in "Turning Animation into Code in Flash CS3", on the Layers Magazine website.

The resulting code looks like XML and is a special type of XML for animation in CS3. The properties and attributes are clearly marked out and can be edited in the ActionScript code editor. So instead of a 100 frame animation, you can compact the animation to a single frame scripted animation.

instructional design	online training content development	accessibility
section 508	interactivity	learning activities
elearning podcasts	usability	CSS Flash XHTML
semantic markup

Al Lemieux
Senior Designer
SyberWorks, Inc.
SyberWorks e-Learning Podcast Series
SyberWorks LMS e-Learning Implementation Podcast Series
e-Learning Lingo Podcast Series
SyberWorks Learning Management System

IS AS3 Harder to Learn?

Colin Moock, author of Essential ActionScript 3.0 (O'Reilly), has written an article entitled "ActionScript 3.0: Is it Hard or Not?" on O'Reilly's digital media blog. Showing side-by-side comparisons, Moock shows the subtlety in the differences between AS 1.0, 2.0, and 3.0.

Although I think it's a great article and attempts to woo the reluctant Flasher to start using AS3, there's a lot more to AS3 than the examples given here. Moock's book was given to all participants of the recent Flash Forward Festival in Boston by Kevin Lynch, the product manager of Flash at Adobe. I've been diving through this book and, although its been daunting, it also has been revealing - specifically in the change of methodology in implementing AS3 in a project.

Because so much of the language has changed, I find that it takes longer to develop an application in AS3. Sure, the difficulty depends on the scope of the project, but the large amount of code that needs to be developed in the event model alone, just means more time writing and debugging code than it did in AS2.

For anyone to fully get their head around AS3 means to completely immerse themselves in the topic for an extended period of time.

instructional design	online training content development	accessibility
section 508	interactivity	learning activities
elearning podcasts	usability	CSS Flash XHTML
semantic markup

Al Lemieux
Senior Designer
SyberWorks, Inc.
SyberWorks e-Learning Podcast Series
SyberWorks LMS e-Learning Implementation Podcast Series
e-Learning Lingo Podcast Series
SyberWorks Learning Management System