RAVASMARTSOLUTIONS - TECH TIPS

Size: px

Start display at page:

Download "RAVASMARTSOLUTIONS - TECH TIPS"

Ruby Perry
5 years ago
Views:

1 Purpose RAVASMARTSOLUTIONS - TECH TIPS CS5 - Flash - Build an Image Library This Tech Tip will illustrate how to build an image library in Flash. This will allow you to have a lot of Flash Graphics available for use with your latest animations! Sources for your images may be any image that you have you just need to properly convert and maintain it utilizing Photoshop in conjunction with Flash. Please note: Flash works best when it has images in Flash Vector image format. Gather Images Before beginning, you need to gather all of your images that you wish to use in Flash and store them in a folder on your computer. Image sources may be from your digital camera, duty free internet sites, or paid / commercial images, and other sources. The following sample folder was created: Images for Flash I then gathered images from our family trip to Maine note that I just copied the files over (to save the originals). Main folder with subfolders of specific images Figure 1 - Sample Images that are consolidated in one main folder - note the sub folders used to organize the work Author: Rick Rava Page 1 of 8 Revised: 4/23/2011

2 Manipulate in Photoshop Next, I open the desired images in Photoshop and manipulate the images (be creative)! The following is an example of manipulating an image. Let s say that I wish to grab just the sign and remove the background (this is a very common activity). Figure 2 - sample image from a digital photo Figure 3 - note that creating a copy of the background allows having a transparent background Save the image as a Photoshop file type (PSD) then make a copy of the original layer and hide it (see above) For this task we wish to extract the following sign and have a transparent background. Please note that there is a multitude of ways to do this. In this example, I first use the CROP tool to get the main part of the sign. Author: Rick Rava Page 2 of 8 Revised: 4/23/2011

3 I then select the desired parts of the image that I want in this case I use the desired selection tool and select. If you miss a part of your selection, just hold down the SHIFT key I just click on the parts that I wish to add to the selection see below: Now invert the selection (just go to the Select Menu and choose Inverse: Then press your Delete key. This results in the background being cut out ) Note the transparent background The above is a common task used to extract part of an image before saving it as a symbol graphic in Flash. Also note that the image has a transparent background. After manipulating the images, I then save the images for the web. Why? In order to make the images smaller in file size so that the final Flash product will load quickly! Key point save the image as a PNG or GIF to have a transparent background. See the following tech tip on CS5 - Photoshop Save Images for the Web -- for details on how to do this. Author: Rick Rava Page 3 of 8 Revised: 4/23/2011

4 Import Images into Flash Library Let s say you wish to import all of your prior images into a Flash Library. In this example, we will create a new file and select the desired size. File (menu) - New Templates tab Select desired size of Flash file Figure 4 - Sample Size for a New Flash Banner Save the file with a good descriptive name Author: Rick Rava Page 4 of 8 Revised: 4/23/2011

5 Now import all of the images as follows: File (menu) Import Import to Library Import to library Select the desired file Click on Open Author: Rick Rava Page 5 of 8 Revised: 4/23/2011

The image is now in the library continue the above until all images are in the library See sample below: Please note you will need to rename files so that

6 The image is now in the library continue the above until all images are in the library See sample below: Please note you will need to rename files so that all of the files use good file names Good file names Always use the native Flash Graphics in your animation! Author: Rick Rava Page 6 of 8 Revised: 4/23/2011

Vector Images (Conversions if Necessary) Ok, you probably noticed that I had 2 sets of files one the original PNG file and another with the same file name.

7 Vector Images (Conversions if Necessary) Ok, you probably noticed that I had 2 sets of files one the original PNG file and another with the same file name. Well, the 2 nd file is automatically created when importing images into a Flash Library. This 2 nd file is the native Flash Vector Graphic image which we will use. Vectors are great because they take up very little space and resize easily. Please note: if you use a native vector Flash graphic multiple times in an animation, it only takes up the file space of one occurrence of this image! What if you import an image and it does not automatically create the Flash Vector Graphic image? Let s say you copied and pasted in a JPG image (without using Photoshop just for this example). All you need to do is create a new empty layer then drag a copy of this image to this layer see example below: Dragged image to empty layer Author: Rick Rava Page 7 of 8 Revised: 4/23/2011

8 Now while the image is still active just press the F8 key Now change the name and select the appropriate type (in most cases Graphic is what you want). Click OK You now have a native flash Graphic that you may use! Author: Rick Rava Page 8 of 8 Revised: 4/23/2011

Photoshop CS6. Table of Contents. Image Formats! 3. GIF (Graphics Interchange Format)! 3. JPEG or JPG (Joint Photographic Experts Group)!

Photoshop CS6. Table of Contents. Image Formats! 3. GIF (Graphics Interchange Format)! 3. JPEG or JPG (Joint Photographic Experts Group)! Photoshop CS6 Table of Contents Image Formats! 3 GIF (Graphics Interchange Format)! 3 JPEG or JPG (Joint Photographic Experts Group)! 3 PNG (Portable Network Graphics)! 3 Pixels! 3 Resolution! 3 Creating