Photoshop integration and Smart Objects in Dreamweaver

Adobe® Dreamweaver CS5® imports and handles Photoshop files as Smart Objects. Any modification done to the original image using Photoshop is immediately reflected in Dreamweaver. For more information about APIs integrating Photoshop to Dreamweaver, see "Photoshop integration" in the Dreamweaver API Reference.

A Smart Object example

In this example, you use Dreamweaver to create a command that updates a Photoshop file (PSD) when the user clicks the command in the Commands menu. To enable this command to work, ensure that you have a Smart Object web image on your HTML page. For specific information about creating commands before trying this example, see Commands.

In Dreamweaver, open a new basic HTML file (this file is your Command definition file). Your Command definition file looks like the following example:

<html xmlns:MMStr ing="http://www.adobe.com /schemes/data/   string/"> 
<head> 
    <title> Smart Objects API</ title > 
    <SC RIPT SRC="../Shared/Common/Scripts /dwscripts.js"></SC RIPT> 
    <SCRIPT LANGUAGE="Javascript"> 
function invokeSmartObjectJavaScriptAPICall() { 
    var selection = dw.getSelection(); 
    if (!selection) { 
    alert("Err: No selection!"); 
    return; 
    } 
    var node = dw.offsetsToNode(selection[0], selection[1]); 
    if (!node)     { 
                alert("Err: No Node!"); 
                return; 
                 } 
    var imageSrc = node.getAttribute("src"); 
    if (!imageSrc) { 
                    alert("Err: No src attribute!"); 
                    return; 
                    } 
    var fullPath = getFullPath(imageSrc); 
    if (!fullPath) { 
                    alert("Err: No path!"); 
                    return; 
                    } 
    //alert(fullPath); 
    alert("updateSmartObjectFromOriginal"); 
    dw.updateSmartObjectFromOriginal(fullPath); 
} 
    <script> 
</head> 
<body onload="invokeSmartObjectJavaScriptAPICall()"> 
</body> 
</html>

Now, save the file as smartobjects.htm in the application Configuration/Commands folder. When prompted, select the SWF file in the Commands folder, and click OK.