Jim interviewed by Profit Magazine 11-21-02 | Video clips
Frequently Asked Questions ( FAQ)  | Client Quotes  | Home
Jim's one-on-one coaching/writing & Home Study Program
Contact us

Macromedia Studio MX:
FlashMX your iMovies,
Spin web sites with DreamweaverMX
by Jim Richardson, jim@jimrichardson.com

published in the award-winning
North Coast Mac Users Group monthly magazine for July 2003

Jim Richardson
Photo by Rosemary Caruso, Associated Press

Rod Serling: "Picture this if you will: a trusting young couple have used their new mini-DV camcorder to capture precious moments of their child's first birthday party. The happy father spends hours editing the video in Apple's amazing iMovie program which takes an hour to learn and a lifetime to master. The proud mother supposedly uploads the movie to the family web site and instantly emails all the relatives to take a look-see. These are the things that are supposed to happen. But an ignorance shared by both parents has plunged them into an uncharted and twisting stream. When the emails start coming back, something is terribly, terribly wrong. They have just plunged into the darkest nightmare reaches of the Twilight Zone."

What happened? Your movie just got mugged. By whom? The usual suspects. That's right: that Redmond Evil Empire strikes again!

How? According to QuickTime for the Web, second editions, page 39, "Users of Internet Explorer 5.5, SP2 and later versions, on Windows computers only, must have the QuickTime ActiveX control to view QuickTime content."

What will you do, what will you do?

Enter avuncular Karl Malden: "FlashMX: don't leave home movies without it!"

What you are about to read will forever change your understanding of video on the Internet. First, some facts. There is a war raging in cyberspace for global domination of multimedia web sites.


USA places 4th in International broadband wars
May 5, the New York Times published these statistics: in the USA, 23% of homes now have fast broadband connections via cable modem, DSL, etc. Compare that with the three countries ahead of us: Japan 26%, Canada 50% and the new leader South Korea at 57%. Soon, everyone everywhere on the planet will have instant access to those multi-megabyte video files that take 50 times longer to download on your home dialup connection.

What company will own this dynamic market? As of March, 2003, The NPD Group's survey found that

FlashMX owns 84% of the web media player market
98% of users in the USA have some form of Flash on their computers, 84% of which have upgraded to the Flash MX Player 6 which includes the ability to play video within the application, making it now the preferred delivery program for video on the Internet. The other three major media players do not even come close:
QuickTime (37%)
RealVideo (52%)
Windows Media Player (63%)

OK. That was a lot of numbers and from my experience trying to explain this to folks beginning the day after Flash MX came out in March, 2002, you are all:
1) astonished
2) asking yourself, "What is Flash?"
Am I right or am I right?


To find out the answer to that very question, I took some Flash authoring classes which emphasized the vector animation and action-scripting features of Flash 5. This was just as FlashMX (a.k.a. Flash 6) came out, the first version to support video. As a stand-up comedy coach distributing my client's video clips on the web, I was dying to know if FlashMX still required that the user have the QuickTime plug-in, was still subject to the ActiveX control hassles.

My journey to the center of the universe
To hear it from the horse's mouth, in April 2002 I began attending the monthly meetings of San Francisco Macromedia Users Forum which meets at Macromedia Headquarters, 600 Townsend Street, San Francisco; $5/meeting includes pizza and a raffle prize ticket, $5/each extra ticket; meets first Tuesdays, 6-9 pm, info.: http://www.sfmmuf.org/

The news was very good: FlashMX takes video files created on either Mac or PC and embeds them into a FlashMX movie document. No other plug-in outside of FlashMX itself is necessary. Game-and-match: ding-dong, the wicked witch of the online video wars — Windows Media Player is dead!

OK, ok: not true. But it was fun to pretend.

Here's the FlashMX interface:

FlashMX:
Timeline frames, red Playhead, Scene number, Stage work area

The little empty squares in the Timeline represent frame placeholders for a movie's scene with every 5th frame being black. In the image above, the red Playhead is on Frame One. We are currently inside Scene 1. The box surrounding the screen shot of the multilang.swf file is called the Stage and is where you can use the draw tools to create your animation. Or you can import a drawing created in another program and animate it inside FlashMX.

Through the automation of "tweening," you only have to draw a beginning frame and ending frame of a simple animation, much like a master animator did in the old movie studios. During the old movie studio days, these "keyframes" were filled in by apprentice animators called "in-betweeners" ("tweeners" for short) who drew all the minor changes in between the keyframes; with Flash, the computer takes over and does the job of the tweeners.

Example:


Two keyframes indicated by the black dots in frames 1 and 15,
black arrow drawn between the frames indicates a tween,
Playhead is currently on frame 1,
ball has just hit floor
So, if you draw a picture of a ball as it hits the floor and

Playhead now on frame 15,
ball has reached height of its bounce,
frames 2-14 have been drawn as a tween by FlashMX
another picture of that same ball as it reaches the height of its bounce, the computer fills in all the in between pictures. You control the exact timing by:
1) assigning a frames per second playing speed to the movie
2) you also assign exactly how many frames (how much time) the ball takes to move between each keyframe.

Why stop there? Let's create animations with animations or movies within movies. We can put a little movie inside each frame. In fact, the top level of many Flash projects consists of just one frame as you have movies inside movies . . . . You get the idea. And you are probably already guessing: one of those "movies" could actually be a video clip? The short answer is: yep.

Anyway, as the movie becomes increasingly more complex, you can add different tracks for up to 11 languages, including the Asian languages: Japanese, Chinese, Korean, etc. Well, if you can do that, how about adding some accessibility features like descriptive text or a narration to ensure that people with disabilities can effectively interact with the content? No problemo.

Interact? Yep: with FlashMX there are now generic components (back in Flash 5, they were called SmartClips) which you can drag onto the stage to add start-stop buttons for movies, scrollbars, and . . .. You're starting to yawn. What I'm saying is that you can create your own games with running score counters, clock timer, etc. Hey, this isn't just video or animation. It's a, a . . .. Uh. Help me out here, folks. We need a new term because this environment is unlike anything out there.

I know: we will call it a Rich Internet Application or RIA. Everybody will soon be talking about RIAs, the new Internet functionality!


FreehandMX: where web page design now begins,
creating re-usable Symbols for FlashMX
Backing up a bit before we demonstrate this RIA deal, we need to explain Symbols. No, not corny literary symbolism that strives to prove the all too obvious profundity: "Life is better than death!" In the Flash environment, a Symbol is a re-usable object. In it's simplest form, it is a drawing which you can resize, rotate, etc., as part of the animation process. And the best program for creating Symbols and therefore the place you will now begin web site design . . .. Old-fashioned HTML hand coders, just stay with me a moment. This program is included in the StudioMX suite: FreehandMX. Adobe Illustrator is based on this program.

Video clips embedded into a FlashMX document are also elements which can be dragged onto the Stage, re-used and modified for size, shape, rotation, location and even used as motion tweens. If placed inside a movie-clip symbol, a video clip's color, transparency, etc., can also be manipulated. To edit the video clip directly, return to your non-linear video editor (iMovie, etc.), edit, then update it in FlashMX.

FireworksMX bests Photoshop for web compression & work flow
This gets even better, folks. Does good old Adobe Photoshop drive you nuts when you use it to manipulate images for the web? Enter the next application in StudioMX: FireworksMX. Sound hot? It is: compresses better than Photoshop and is ten times easier to use for web graphics.

OK, Jim: we're with you so far. But how do you put it all together? Welp, thar's two answers to that thar question. FlashMX or DreamweaverMX. Actually, you can use these two applications separately or together. DreamweaverMX is to FlashMX as a page layout program is to an image you might put on a particular page. Now: you just found out what all those little moving images are on web pages, especially if they are more complicated than the few frames you might create with Adobe ImageReady.

DreamweaverMX split-screen: see HTML code being generated
DreamweaverMX is the preferred HTML editor, cornering 75% of that market. Using it is an excellent way to learn HTML and more advanced scripting languages like JavaScript. With its split-screen option, you can see that strange HTML code that drives your web page being written while you are typing plain English. At your command, Dreamweaver will also insert a table — yes, hand-coders: it creates all that mind-bending table-within-a-table-within-a-table code for you.

Back to the main deal, RIAs. This approach to web design is so new that all the books on it have been written this year. Here's the thing: studies show that people like to click but they hate to scroll. How do you avoid scrolling?

Instead of using Dreamweaver to generate an HTML version of your web site, design the entire web site with FlashMX action-script code. Best practice? Have both an HTML-driven and a FlashMX-driven version of your web site, just in case one of the 16% refuses to upgrade to the FlashMX media player. This can all be auto-detected, giving the user the option to upgrade or just go directly to the HTML-driven version of your web site.

With a Flash-driven web site, there is just one screen that fills your browser window with the Stage. Drop down menus save you screen real estate. You click buttons to load not just pages but entire animations, videos, games, forms linked to databases, etc.


Write server code tags with a simple mouse click inside DreamweaverMX for
ColdFusionMX dynamic database calls
You guessed it: StudioMX even has its own database solution, ColdFusionMX Server (only Windows, Linux, Sun and HP versions so far but can be authored on Mac) that supports the standard relational database management systems. But to review all the server options provided by this bleeding-edge company would be another article unto itself.

What it all comes down to is a more intuitive navigation system for web sites that helps prevent the "gone down a rabbit hole" syndrome where you get easily lost on poorly designed HTML web sites. You load fewer web pages faster and more comprehensively.

The business impact of Rich Internet Applications:
"So, basically it's about how 5 cents worth of coffee beans
turns into a $4 latte,"
There is only one possible conclusion:
"The experience matters!"
For more information on RIAs and a brief overview, you can watch this 14 minute presentation which will require a broadband connection, plus you may need to take a minute and upgrade to the Flash MX 6 player.
1) If an upgrade is necessary, you will see instructive text and a link to click so you can now join the privileged 84%!
2) If an upgrade is not necessary, you will just see the word "Loading" as the 2MB RIA downloads. Then, you will see a screen instructing you to:
"View Presentation"
Click those words and the presentation will begin.
http://www.macromedia.com/resources/business/rich_internet_apps/overview/
Cost for Studio MX built for Mac OS X: $899 with upgrade options between $499-699, Education price: $199. Such is the cost of global domination!
http://www.macromedia.com/software/studio/
1) Factor in cost of third party instruction books and CDs as the 4 volume set that came with Web Studio (Flash 5, Dreamweaver 4, etc.) has been replaced by a thin 380 page text that reads like it came from the publicity department. You can almost teach yourself Dreamweaver but FlashMX will be a 6 month study of action-script, even with the most helpful addition of context-sensitive code-hints. I recommend:
   a) for beginners: Katherine Ulrich's Macromedia Flash MX for Windows & Macintosh Visual Quick Start Guide, Peachpit Press, 2002.
And for good work flow practices and optimization of file size: MD Dundon's Macromedia Flash MX Production Techniques, Macromedia Press, 2003. Click here for MD's comments on my review.
   b) for advanced: Coin Moock's ActionScript for Flash MX: The Definitive Guide, 2nd Edition, O'Reilly Press, 2002.
2) FlashMX comes with Sorenson Spark for compressing imported video. But for higher quality compression, consider buying Sorenson Squeeze 3.1 for Macromedia FlashMX at $119; the upgrade from earlier versions is $49.

FlashMX tour: http://www.macromedia.com/software/flash/
Authoring requirements: Mac OS 9.1 and higher, or OS X 10.1 and higher
· 64 MB of free available system RAM (128 MB recommended)
· 85 MB of available disk space
· 1024 x 768, 16-bit (thousands of colors) color display or better
· CD-ROM drive

Jim Richardson has been designing multimedia web pages since 1997
http://www.jimrichardson.com/web_design/web_design.html
He has used non-linear video editors like iMovie and Adobe Premiere for years. In April, Jim began the Professional Videographers of the North Bay's Final Cut Pro SIG: http://www.jimrichardson.com/fcp/index.html

Jim interviewed by Profit Magazine 11-21-02 | Video clips
Frequently Asked Questions ( FAQ)  | Client Quotes  | Home
Jim's one-on-one coaching/writing & Home Study Program
Contact us