shot

Studio MX 2004 First Look

Studio MX 2004 First Look

By: Jon Gales

There aren’t many prodcuts I use every day, but Macromedia Studio MX is one

of them. So when Macromedia let me know that MX 2004 was on the home stretch,

I couldn’t have been happier. Here’s a quick run-down of each application.

Be warned that the software I have been using is all still in beta… Stuff could still

change. I’ll post real reviews once the golden master ships (it’s not fair

to review beta software).

Studio MX 2004 in general

box studio Studio MX 2004 First LookThis release features a new look and feel. It’s called Halo, and it has been

used throughout the product. Incidently, its also been adapted for use on

Macromedia.com. The cool part of Halo (technically called MX Elements) is that

you can use the standard elements yourself in the Studio products. I haven’t

quite figured this out in Dreamweaver, but it’s easy enough in Flash and Fireworks.

I’ve been promised it is in Dreamweaver though.

Across the board, the 2004 release is focusing on a few things:

  • Standards – Full unicode, CSS, XHTML support across product line.
  • Integration – You can edit images in Dreamweaver, make HTML in Fireworks,

    and author sites in Flash. This isn’t “toss the file back and forth” integration.

    It’s real.

  • Accessibility – Flash has much better accessibility features,

    and Dreamweaver makes the ones it had a lot more apparent. If you work for

    the government, or a major company, this is a must.

The pricing is the same, but if you want Flash MX Pro instead of the normal

Flash, you’ll have to cough up an extra $100. Not a bad deal though since Flash

MX Pro retails for $699 (Studio sells for $899).

Note, Freehand MX has not been updatedóit typically does not follow

the same release schedule as other MX products.

Dreamweaver MX

box dreamweaver Studio MX 2004 First LookAt first look, it didn’t seem like much changed. However, after digging in

a while I found some gems:

  • Expanded Tables Mode – hit F6 and your tables get real big (sort of like ExposÈ

    in reverse). This is killer when you have one of those situations where there

    are lots of tiny little cells that you can’t seem to select. Hit F6 again and

    the tables are back to normal.

  • SFTP – FTP is so insecure that it is amazing we’re still

    using it. Hopefully this is a sign of things to come. I think this makes

    Dreamweaver the only WYSIWYG

    to support SFTP (Secure File Transfer Protocal).

  • MS Office Support – I know this is weird for a Mac guy

    like me to like, but I’ve gotten site copy (hell, even design) in a .doc

    or .xls

    many many times. Since they buy my dinner, I can’t really complain too

    much. You can copy/paste Word and Excel documents and preserve

    formatting. Dreamweaver converts Microsoft’s stuff into standards based CSS on

    the fly. I think I wet myself after trying it the first time.

  • Cross Browser support – Ever wonder if there is a problem with your code

    executing in WhateverBrowser 2.6? Dreamweaver MX 2004 will tell you with built

    in validation for every major browser (yes, including Safari). Use those

    newly freed brain cells for other more important tasks.

  • CSS - Past versions of Dreamweaver had great support for

    styling text with CSS. You could use it to make a tableless site,

    but only if you lacked things to do and a family that loves you. It’s almost

    fun with this version.

There’s a lot more, but that will have to wait until the review. If you’ve

got any questions about this product, head over to the forums and ask away.

Fireworks MX

box fireworks Studio MX 2004 First LookI haven’t been a real Fireworks user, but mostly because the bulk of my work

is PHP coding. I leave the graphics up the graphics guy. However, I have done

a few design gigs lately. I’ll have to give it another look. Here’s what I liked

best:

  • Integration – Remember when I said Studio MX 2004 focused

    on integration? Well it shows. If your team uses the “check-in/check-out” feature

    of Dreamweaver (basically a dumbed down, “for the people”, CVS), you’ll be

    happy that you can check in/out files right in Fireworks!

  • Speed - Macromedia boasts that Fireworks is up to 85%

    faster at certain operations. After further questioning it came out that

    masking is

    one of those features that has really gotten a speed boost.

  • UI – The user interface [screen shot] has

    gotten cleaned up a bit. Take a look at the screen shot.

  • Commands – You can change around all the commands [screen

    shot]. Under the Application menu just select “Keyboard Shortcuts”. If that’s

    not

    cool,

    check out the pull-down

    menu that lets you select standard command sets. Like Adobe’s commands.

    Make it so. Almost no effort.

  • Unicode – Since it now supports Unicode fully, you can

    author images in any language that your computer supports. This was a slow-down

    before, because images are often

    used for languages that are commonly not accessible on the average user’s

    computer (international prodcut/comapny names for instance). If you did a

    regular install of OS X, you should have about any language worth its weight

    already installed. Start studying.

Word on the street is that there are some neat extensions coming out for Fireworks

in the near future. Some of the coolest stuff Dreamweaver does is done through

its exentions, so this sounds like good stuff. Since I haven’t seen them yet,

I can’t comment. If you’ve

got any questions about this product, head over to the forums and

ask away. Expect a full review once the golden master ships.

Flash MX

box flash Studio MX 2004 First LookOne could argue quite well that this is the product that saw the most change.

That’s probably because it’s the only one to actually get a pro version. The

codebase is exactly the same for the two versions (Flash MX and Flash MX Pro),

but you enter diffferent serial numbers based on what you pay for.

One of the best things about this release is that it is fully international.

You can finally code a multilingual site in Flash. Like Fireworks lacking Unicode

support, this was a slowdown and in many cases a deal breaker.

So here’s the run down:

  • ActionScript 2.0 – As you know, ActionScript is the programming

    language that Flash uses to do the “cool stuff”. Version 2 is a

    major step forward. For programming-types, it supports Object Oriented design

    (just like Cocoa). Even though it’s the

    latest and greatest, it can still be compiled down to ActionScript 1.0, meaning

    it won’t break anything you’ve already written.

  • CSS – No, I wasn’t kidding about Studio MX 2004 focusing

    on standards. Flash can now handle standards-based CSS.

  • Spell Check – Not too cutting edge, but for non-English

    types like myself this is a great feature. Macromedia said it was one of

    the top

    requests.

  • Accessible components – Another positive aspect of using

    Macromedia’s components in your Flash movies is that you gain all their accessibility.

  • PDF + EPS support – OS X has had great support for PDF’s

    for a while, but now Flash is getting in on the game. Also added is EPS.

    Makes work go faster

    if your graphics departments likes to use either of the common standards.

If you want to talk Flash MX 2004, head over to the forums.

That’s all for now, look for more detailed coverage in the weeks to come.

Adobe Photoshop Tip– Simple Transparent Desktop effect …without cheating

These shots are all over the internet right now: a person posts a digital photograph of their computer and the desktop picture displayed on the screen seems to mimic what is behind it so faithfully that it appears that the screen is actually transparent. There are several shots I’ve seen that are done so well that you’d swear that the photographer simply removed the LCD and top bezel of his PowerBook. But these people assure me that they have perfectly lined up these shots with no fakery…

finalshot Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

and I believe them.. because I can do it and so can you.

Here’s how I did it.

Step 1: Setting the scene:

First I arranged my shot pretty much the way I wanted it composed for the final image. Below you’ll see an image of what I was going for:

setuptheshot Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

You don’t need to take a picture of this step, I’m just illustrating the point.

I set the computer on the table along with all the tchotchkes that would later be visible on its desktop. I had my iPod docked behind my PowerBook, the lazy Susan with all my fine dining paraphernalia and my foofbag all set up. Then I mounted my camera on a sturdy tripod and framed up the shot in the LCD viewfinder. Once you start taking pictures for this effect, you cannot move the camera, the tripod or the lens (I moved my lens and as you see in the first pic, a few items don’t line up–learn from my mistakes).

After I got the shot framed up, I took the PowerBook out of the scene being careful not to move any of the other items on the table or the camera rig. Then I shot the first pic:

nocomputer Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

Yeah, pretty lame, I know.

Step 2: Put the PowerBook in the Action

Next, I returned the PowerBook to its previous position on the table and prepared to take its picture using the exact same settings as the picture I took without it. Why didn’t I just snap a pic while it was there before? Because, just like the camera and the tripod, once the PowerBook is in place, it must not move–not even a little. Okay, next slide!

withcomputer Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

Notice I connected the iPod dock connector cable to the PowerBook? I thought it would add a nice touch to the final image and, as long as I didn’t change the position of the cable where it passed behind the screen, it wouldn’t hurt the final product.

Step 3: Careful Maneuvering

In the next stage, I turned off the camera in order to safely access its memory card (you still cannot let the camera move at all) and insert it gently into the PC card adapter I have in my PowerBook (again, you cannot let the PowerBook move either). If you have the ability to do so and can stretch a cable from the camera to the Mac without moving either, you could connect your camera up directly ….I didn’t, but you could.

I opened the two shots I took in Photoshop (no, I’m not going to cheat). Focusing first on the “with PowerBook” shot, I went Select>All (Command-A) and then Edit>Copy (Command-C).

Then I switched my focus to the “without PowerBook” picture and went Edit>Paste (Command-V). Then I closed the “with PowerBook” shot …leaving it open would just tempt me to cheat.

layers Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

I grabbed the Crop tool and, in the Options bar at the top of the screen, I set the Width and Height values to my screen dimensions as represented in pixels and a resolution of 72 pixels per inch. If you’re not sure of your screen dimensions, open the Displays control panel in the System Preferences and you’ll find it there.

croppart1 Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

Then I clicked and dragged the crop tool over the screen of my PowerBook in the picture.

croppart2 Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

Once a preliminary crop area is on the canvas, Photoshop changes the Options bar a bit to give you other features. I clicked the Perspective setting to the “on” position.

croppart3 Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

With that setting in place I am able to drag the corners of the crop to the corners of my pictured PowerBook screen like so:

croppart4 Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

Now when I hit the Return key, Photoshop is going to process the crop selection I have made an distort it into being an image the exact width, height and resolution of my screen — a perfect desktop image! Go ahead and hit Return and watch the magic happen…well actually there’s not much magic to watch, because, at best, you’re looking at a squared up view of your own PowerBook screen. You’ll need to delete the top layer to reveal the cropped and straightened “background.” Here’s what I got.

finisheddesktop Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

Next, I saved this image I’d made to my desktop as a JPEG and quit Photoshop and opened the System Preferences to the Desktop & Screen Saver control panel and clicked the Desktop tab. I dragged the image I’d made from the desktop to the little preview window in the control panel and, voila!

desktopcp Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

Step 4: The Final Shot

Then all I had to do was close all the windows on screen, eject the camera’s memory card from the PowerBook and place it in camera again. I powered up the camera and took the shot before I had any more opportunities to accidentally move something I shouldn’t.

Here’s that finished image again:

finalshot Adobe Photoshop Tip   Simple Transparent Desktop effect ...without cheating

Adobe Photoshop Tip– Simple Transparent Desktop effect …Extra Credit for Leo Listeners

Here’s another angle Mac users can throw into the effect: the Finder allows
you to set an image as the background for its windows. This gives us an opportunity
to make them transparent too.

So, in Step 3 of the tutorial, right you’ll want to set a few windows up on
screen and take a screenshot of the whole thing (Command-Shift-3) for you to
use as a guide later. Now this means that you cannot move these windows until
the shot is taken …though, you can always keep them in the dock until you’re
ready and keep them out of your way until then. So here are replacement Steps
3 and 4:

Step 3: Careful Maneuvering

In the next stage, I turned off the camera in order to safely
access its memory card (you still cannot let the camera move at all) and insert
it gently into the PC card adapter I have in my PowerBook (again, you cannot
let the PowerBook move either). If you have the ability to do so and can stretch
a cable from the camera to the Mac without moving either, you could connect
your camera up directly ….I didn’t, but you could.

Now, on my Mac, I set up a Finder window to which I will later
give the appearance of transparency. It is important to note that Finder windows
must be in "Icon Mode" for this to work. It is also important, not
to let the windows overlap–overlapping transparent windows are difficult to
read and use and even more difficult to explain how to make in a tutorial such
as this. Okay, so I took a screenshot (Command-Shift-3) and hid my Finder window
in the dock while I proceeded with the experiment.

I opened the two digital camera shots I took and the screenshot
in Photoshop (no, I’m not going to cheat). Focusing first on the “with PowerBook”
shot, I went Select>All (Command-A) and then Edit>Copy (Command-C).

Then I switched my focus to the “without PowerBook” picture and
went Edit>Paste (Command-V). Then I closed the “with PowerBook” shot …leaving
it open would just tempt me to cheat.

kfilayers Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners

I grabbed the Crop tool and, in the Options bar at the top of
the screen, I set the Width and Height values to my screen dimensions as represented
in pixels and a resolution of 72 pixels per inch. If you’re not sure of your
screen dimensions, open the Displays control panel in the System Preferences
and you’ll find it there.

croppart1 Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners

Then I clicked and dragged the crop tool over the screen of my
PowerBook in the picture.

kficroppart2 Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners

Once a preliminary crop area is on the canvas, Photoshop changes
the Options bar a bit to give you other features. I clicked the Perspective
setting to the “on” position.

croppart3 Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners

With that setting in place I am able to drag the corners of the crop to the
corners of my pictured PowerBook screen like so:

kficroppart4 Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners

Now when I hit the Return key, Photoshop is going to process the crop selection
I have made an distort it into being an image the exact width, height and resolution
of my screen — a perfect desktop image! Go ahead and hit Return and watch the
magic happen…well actually there’s not much magic to watch, because, at best,
you’re looking at a squared up view of your own PowerBook screen. You’ll need
to delete the top layer to reveal the cropped and straightened “background.”
Here’s what I got.

kfifinisheddesktop Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners

Next, I saved this image I’d made to my desktop as a JPEG. We’re not done with
this image yet.

Now here’s where this tutorial seriously deviates from the original: I went
to the screenshot I opened in Photoshop and Select>All (Command-A) and then
Edit>Copy (Command-C). Then I went to my newly cropped image and went Edit>Paste
(Command-V). It fits perfectly because I had already set my Crop tool specifications
to my screen dimensions. I could now close the original screenshot image.

kfifinderlayers Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners

Keeping the pasted screenshot visible, I selected the underlying Background
layer in my Layers palette (see above). I grabbed the Rectangular Selection
tool and carefully selected the actual window portion on my Finder window and
went Edit>Copy (Command-C). This copies a perfect, window shaped chunk of the
Background layer.

kfifinderwindow Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners

Then I went File>New… (Command-N) and Photoshop presented me with a dialog
box for a new document with all the right dimensions already entered in because
it correctly assumes that I will be using the data in the clipboard for this
new image. I clicked OK, the new image’s canvas popped up and I pasted (Command-V)
the copied chunk in it. Then I saved it to my desktop as a JPEG and closed that
image (Photoshop asked me if I wanted to save, but I declined).

kfifinderimage Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners

I was now confident that I was done my image preparation work and quit Photoshop.

I opened the System Preferences to the Desktop & Screen Saver control panel
and clicked the Desktop tab. I dragged the image I’d made from the desktop to
the little preview window in the control panel. My desktop was now the image
I made of the stuff behind my PowerBook.

kfidesktopcp Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners
kfiviewoptions Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners

I then went to the Finder window I was going to use and just clicked the brushed
metal frame without moving the window and went View>Show View Options (Command-J).
I clicked the radio button at the bottom marked "Picture" and clicked
the "Select…" button that appeared. I directed it to the JPEG I
made for the Finder window and closed the View Options menu and, voila!

kfidesktop Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners

Step 4: The Final Shot

Then all I had to do was close all the windows on screen, eject the camera’s
memory card from the PowerBook and place it in camera again. I powered up the
camera and took the shot before I had any more opportunities to accidentally
move something I shouldn’t.

Here’s the finished image:

kfifinalshot Adobe Photoshop Tip   Simple Transparent Desktop effect ...Extra Credit for Leo Listeners