Skip navigation
Currently Being Moderated

How do i make psd files transparent?

Dec 26, 2013 2:09 AM

Tags: #problem #animation

How do i make psd images transparent when I drag and drop the layer onto the stage on flash cs6?

 

For  example the way iv been doing it up until now was saving as a psd then  going to file import to library on flash. This is very very time  consuming and would be much easyer if i can just drag and drop the  photoshop layer onto the stage, but the problem is that the image gets a  white box around it and isn't transparent when i do that.

 


Is there an option in photoshop or flash to fix this and make the background trasnparent?

 
Replies
  • Currently Being Moderated
    Dec 26, 2013 4:37 AM   in reply to DennisJa

    No.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 26, 2013 9:00 AM   in reply to DennisJa

    The clipboard isn't retaining transparency information, even up to the current version. Since Smart Objects are not utilized in Flash CC either nor any workaround library 'update' function on an imported PSD, your only real option is to manage it with this in mind.

     

    There are many ways to work around the system but the general concept is exporting what you want to a PNG24 format, then 'import'ing or 'update'ing the library asset in Flash.

     

    For instance I work with a lot of Layer Comps in Photoshop and typically run the File->Scripts->Layer Comps to Files->PNG 24. I then import those PNGs into Flash manually. When I update a comp I'll re-create the PNG and just hit Update in Flash. Nowhere near as easy as Smart Objects or copy/paste, but for project cleanliness, I find having a batch of PNG assets useful to have when sharing projects or archiving. It helps with project stability, especially seeing Flash has been known to corrupt FLAs on crash or save. If the image only exists from you copying/pasting into Flash, you're out of luck at that point.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 30, 2013 9:58 AM   in reply to DennisJa

    It's a no with the "why" part attached, no transparency support in the clipboard at the moment.

     

    I agree the process I mentioned isn't easier, but it's a potential flow for your last question. Layer comps can be exported with the script I mentioned. If you have hundreds of things you'd like to export, that really isn't going to be an ideal solution for you.

     

    You're always free to create your own simple actions as well. One great thing about Photoshop's "copy merged" function is it trims out any excess transparent pixels on all 4 sides. That in mind you could make a simple action to Select All, Copy Merged, open a new document (which is auto-sized to clipboard), paste, turn off the background visibility (transparency), and save to PNG24 via a naming convention you decide, then close the newly opened image. Therefore in one key you'll generate a trimmed transparent PNG of what you have open in your document. Then just import into Flash and from then on you have the ability to use the 'Update' option on the bitmap for any future updates.

     

    I realize you're trying to make things easy for you but if you have tons of assets you're importing you might want to at least consider optimizing your project overall with a sprite sheet and atlas (what games/websites do for ultimate memory/network efficiency). Generating a bunch of separate PNGs using any of the processes above, then packing them all into single images with a free (or paid) tool like Texture Packer will optimize the loading of your assets a great deal. Even on my pre-loaded kiosk jobs I still pack my internal and external bitmap assets because of the noticable speed bump.

     

    Lastly and probably what you're least likely to like is simply moving to a program that supports what you really want to do. Even the freeware GIMP program copy/pastes with transparency intact into Flash. Consider using something other than Photoshop, even if you just work in Photoshop, then import the PSD/TIFF/etc into something else copy into Flash.

     

    GIMP copy/paste into Flash, transparency maintained:

    gimp.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 16, 2014 9:32 AM   in reply to DennisJa

    Reminds me of Yoshi from Mario Bros

     

    I know what you'd like to do but as the first reply mentioned, you can't do that. Until Photoshop is updated to copy with transparency intact to the Windows clipboard, you won't be able to do that. The reason I linked and showed a screenshot of the software GIMP is to prove that it's a Photoshop limitation, not a limitation of Flash or the Windows clipboard.

     

    Knowing that fact, there is no way for you to copy/paste drag/drop from Photoshop directly into Flash.

     

    Cartoon animating is essentially identical to how most games work. You create one large master image that contains all the possible variations of your subject (a face, a car, etc) and import that into a game. You do the same when animating, only you're keeping them all separate instead of one image.

     

    Knowing your experience with Flash is small and growing, I'm not going to make the most optimal recommendation. I'll stick to 2 things I mentioned before but elaborate on them.

     

    1) Save your assets to actual PNGs with transparency, then import into Flash.

     

    The reason I'd recommend this the most is because of Flash's update function (which I will explain) and it can be automated a bit (also will be explained).

     

    So I grabbed a Yoshi sprite sheet and say I made a new pose as you mentioned. In Photoshop I'd then select and copy this new pose alone, with transparency:

     

    copy.png

     

    As you know, once you do that you can bring up a 'New Image' dialog and it will already have the size of your copied pixels (with trimmed transparency):

     

    new.png

     

    You can see the size is correct and the preset is clipboard. After that you just paste your new image in and turn off the background to gain transparency. Then you save it out as a separate file. I always use Save For Web for a pinch of file size optimization and overall control:

     

    saveforweb.png

     

    Again, I realize this is a lot more than you want to do, but all of this can be automated which will be explained after making it virtually a single button push operation.

     

    Now we have the image as a separate new PNG image with transparency intact. This image should be imported into Flash's library:

     

    flash1.png

     

    Now you both have a physical separate copy of this pose in a PNG file (which can be useful for many reasons) and Flash can use that file with it's built in update command for very quick changes.

     

    Now say you touch up a pose a bit. I'll make it really obvious and change the entire hue. You make your changes in Photoshop, follow the same process (even making size changes to the original image), eventually overwriting the PNG you created for that pose:

     

    saveforweb2.png

     

    Now in Flash, all you need to do is use the Update function. Right-click on the image in your library, select Update. Because this is a file with a physical location, that is all that is needed to change the image in Flash:

     

    update.png

     

    The power in this is if you make sweeping changes to dozens or hundreds of PNGs, you can do this in one command in Flash. Select all the changed images and hit Update and all your changes will be done at once. You can't do things like this when you copy and paste directly into Flash.

     

    That said, almost all of the steps above can be automated using Photoshops Actions panel. No need to reinvent the wheel, Actions are fully explained here:

    http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e 41001031ab64-7448a.html

     

    I would recommend recording the action after you make your marquee selection around what you want to save as a PNG. Record right up to Save For Web and stop there. Then in the future you press the hotkey you assign and it will extract your selection, open a new document, paste it in, disable the background for transparency and bring you to the dialog you can name the image in. That's pretty easy and automated. Then just import into Flash and enjoy the benefits.

     

    2) Use Photoshop to create the assets, then a different program to copy/paste into Flash

     

    Not ideal to need 2 programs, however if you really want to copy and paste directly into Flash, this is the way to go. Get any program that can read the PSD file format, open your PSD in it. If you have enough RAM this really shouldn't be an issue (PS and GIMP side by side, same file open):

     

    gimp.png

     

    As you make changes to the PSD, just hit reload or revert in your "copy with transparency" supporting program, copy what you need, paste into Flash:

     

    gimp2.png

     

    I'll explain some of the advantages of the previous workflow if you'd like but I think this is enough information overload for now.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 21, 2014 12:28 PM   in reply to DennisJa

    Once you drop the image you can go to modify and break apart and then use magic wand to remove the white. I don't know if that would be faster than saving to psd and importing, or not, though. I am just a student I don't know much yet

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 22, 2014 9:10 AM   in reply to DennisJa

    Pictures make it easier . If you're all set please mark a correct answer so we can filter unanswered.

     

    You're welcome and good luck!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points