Flash CS3 Professional Essential Training
Illustration by

Flash CS3 Professional Essential Training

with Rich Shupe

Video: Importing images and image compression

In this video we'll look at importing a variety of images, and we'll focus on generic types of assets like JPEG, PNG, and also we'll take a look at image sequences. So, all we're going to be doing is importing the image, and also taking a look at their compression. So, let's start by going to the first frame in our layer, and importing the first assets. To do so, we need to be in an active layer that is neither hidden nor locked. We have to be able to add content to the layer, and then we say File > Import > Import To Stage. We also, have the option of Importing directly to the Library, but we do want to see the assets onstage, so we can compare and contrast the results of the PNG versus JPEG etc., as we bring them into the file.
Expand all | Collapse all
  1. 3m 23s
    1. Welcome
      1m 30s
    2. Using the exercise files and cross-referencing
      1m 53s
  2. 23m 12s
    1. Creating a new document
      3m 33s
    2. The default workspace
      1m 44s
    3. Customizing your workspace
      5m 27s
    4. Reorganizing panels
      3m 52s
    5. Saving workspaces
      1m 49s
    6. Document tabs
      2m 24s
    7. Maximize mode
      1m 26s
    8. Finding help
      2m 57s
  3. 34m 20s
    1. Drawing tool basics
      1m 9s
    2. Drawing with the Pencil and Line tools
      4m 48s
    3. The improved Pen tool
      5m 38s
    4. The Quick Color tools
      1m 9s
    5. Drawing with shapes
      4m 1s
    6. Selecting content
      2m 18s
    7. Manipulating lines and fills
      6m 4s
    8. Painting with brushes
      2m 37s
    9. Erasing content
      2m 29s
    10. Understanding drawing modes
      4m 7s
  4. 16m 2s
    1. Using the Color Mixer
      6m 38s
    2. The Gradient Transform tool
      3m 12s
    3. Color swatches
      6m 12s
  5. 57m 35s
    1. Symbols overview
      7m 22s
    2. Creating and editing symbols
      2m 40s
    3. Nesting and breaking apart symbols
      6m 5s
    4. Working with buttons
      10m 59s
    5. Working with movie clips
      4m 25s
    6. Working with graphics
      5m 8s
    7. Using the Library
      3m 28s
    8. Transformation tools
      5m 15s
    9. Transformation panels
      6m 41s
    10. Transformation menus
      5m 32s
  6. 38m 27s
    1. Using layers
      11m 12s
    2. Adding, deleting, and grouping layers
      3m 35s
    3. What is a keyframe?
      4m 30s
    4. Using frames and keyframes
      6m 29s
    5. Working with multiple frames
      6m 59s
    6. Copying and pasting frames
      2m 45s
    7. Understanding scenes
      2m 57s
  7. 11m 19s
    1. Understanding document settings
      2m 5s
    2. Testing buttons and movie clips
      1m 24s
    3. Testing your movie
      1m 58s
    4. Publishing your movie
      5m 52s
  8. 34m 2s
    1. Vector vs. bitmap
      3m 57s
    2. Importing images and image compression
      8m 25s
    3. Importing Photoshop files
      5m 39s
    4. Importing Illustrator files
      4m 30s
    5. Tracing bitmaps
      7m 20s
    6. Breaking apart bitmaps
      4m 11s
  9. 43m 8s
    1. Shape tweening
      10m 58s
    2. Using shape hints
      2m 23s
    3. Tweening gradients
      3m 43s
    4. Motion tweening
      11m 54s
    5. Copy and Paste Motion
      2m 45s
    6. Motion guides
      4m 2s
    7. Custom easing
      7m 23s
  10. 41m 11s
    1. Understanding text types
      6m 0s
    2. Controlling text appearance
      6m 38s
    3. Simple text effects through tweening
      5m 46s
    4. Adding text to a project file
      19m 11s
    5. Spell-checking and Find and Replace
      3m 36s
  11. 33m 47s
    1. Using filters
      4m 4s
    2. Special filter options
      7m 57s
    3. Animating filters
      8m 7s
    4. Adding filters to a project file
      3m 34s
    5. Using blend modes
      3m 11s
    6. Flash-specific blend modes
      6m 54s
  12. 17m 11s
    1. Components overview
      4m 43s
    2. Adding a UIScrollBar component
      4m 16s
    3. Using a Loader component
      8m 12s
  13. 25m 3s
    1. Adding sound to the timeline
      4m 13s
    2. Adding basic effects to sounds
      4m 42s
    3. Sound sync options
      8m 59s
    4. Adding sound to buttons
      4m 47s
    5. Sound compression basics
      2m 22s
  14. 21m 37s
    1. Embedded vs. external
      3m 28s
    2. Embedding videos with the Flash Video Encoder
      9m 27s
    3. Encoding external FLVs with optional cue points
      4m 14s
    4. Playing external videos with the FLVPlayback component
      4m 28s
  15. 50m 59s
    1. Overview and interface elements
      6m 2s
    2. Frame scripts, tracing, and comments
      6m 8s
    3. Variable basics
      3m 0s
    4. Function basics
      4m 19s
    5. Buttons and EventListeners
      7m 59s
    6. Simple navigation
      16m 11s
    7. Scripting components
      7m 20s
  16. 24m 34s
    1. The story so far
      2m 27s
    2. Animated buttons
      6m 22s
    3. Animated masks
      9m 53s
    4. Publishing your site
      5m 52s
  17. 3m 5s
    1. Additional resources
      1m 12s
    2. Goodbye
      1m 53s

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Flash CS3 Professional Essential Training
8h 0m Beginner Apr 16, 2007

Viewers: in countries Watching now:

In Flash CS3 Professional Essential Training, instructor Rich Shupe delves into the key aspects of working with Flash CS3 to create professional animations, design interactive websites, and incorporate audio and video into self-contained presentations. The training covers using the drawing and color tools, mastering the essentials of animation, and working with type, graphics, sound, and video. Rich also introduces the essentials of working with ActionScript 3.0. Exercise files accompany the tutorials.

Subject:
Web
Software:
Flash Professional
Author:
Rich Shupe

Importing images and image compression

In this video we'll look at importing a variety of images, and we'll focus on generic types of assets like JPEG, PNG, and also we'll take a look at image sequences. So, all we're going to be doing is importing the image, and also taking a look at their compression. So, let's start by going to the first frame in our layer, and importing the first assets. To do so, we need to be in an active layer that is neither hidden nor locked. We have to be able to add content to the layer, and then we say File > Import > Import To Stage. We also, have the option of Importing directly to the Library, but we do want to see the assets onstage, so we can compare and contrast the results of the PNG versus JPEG etc., as we bring them into the file.

So, let's say Import to Stage, and let's go to our exercise files directory into Chapter 8, and go to the "08_02_importing_to_images" folder, and let's start by importing the snowboarder, "boarder.png". We'll hit Import, and the asset will be added to the stage in the upper left corner, and we can see that this is a nice photograph. But, we can also deselect, and change our stage color to see that the PNG brings in a really nice anti-aliased edges through the use of the alpha channel. So, let's go up to Modify > Document, to get to our Document Properties Dialog, change the Background Color's Swatch to a light yellow, and now you can see the nice clean edges all the way around the person. Okay, let's go up to our timeline, and choose Frame 2 in Layer 1, and say Insert > Timeline > Blank Keyframe. This will allow us to bring in a new image without interfering with the first. Let's go back up to File > Import > Import to Stage. In that same directory let's bring in the "white_snowboard_ with_ bindings," and as you can see the JPEG brings in a solid opaque background, solid white opaque background, and as you deselect you can see that the edges are clearly visible against a non-white stage. Finally, you've seen so far that the Import process for standard images is very straightforward. Let's go with a little bit of variance here, and let's import an image sequence.

So, let's again choose Frame 3, and say Insert > Timeline > Blank Keyframe, and let's go back to File > Import > Import to Stage, and of course the same directory within which is another directory Image Sequence, and as you can see here, there are 8 images that are named sequentially, Walk01,02,03 etc. We're going to Import the first, and in doing so {italic}Flash{plain} will recognize that this appears to be part of a sequence, and do you wish to import all the images in the sequence? We're going to say Yes, and in doing so {italic}Flash{plain} will import all of the images creating a separate keyframe for each image. If we scrub through the timeline, we'll see that it's a walk cycle, and if we compare the previous efforts, we have a single image in frame 1, a single image in frame 2, and our image sequence spanning frames 3 through 10. This may not be ideal in that it may be better for this walk sequence to be inside a movie clip. If the walk sequence were inside a movie clip, it could exist in frame 3, and be self contained, and for that matter be used anywhere else in our file. So, we're going to go over some of the techniques we've learned in previous videos, and move this information to a movie clip. So, let's go up to our timeline and Select Frame 3, Hold down our Shift Key and select Frame 10 to Shift + select the span of frames, Ctrl-Click on a Mac, or Right-click on a Window to Copy Frames, and then again the same Ctrl-Click, or Right-Click to Remove Frames. Now, let's go back to our 3rd frame, by removing the entire sequence we've also eliminated our blank keyframe. So, let's come back up to Insert > Timeline > Blank Keyframe, and now we want introduce a movie clip. So let's go back to Insert > New Symbol >, and let's Choose Movie Clip, and call it "walk_cycle". Now, inside our movie clip we can select Frame 1, Ctrl-Click on Mac, or Right-Click on Windows, and say Paste Frames. Again, we can scrub through the timeline, and see the walk cycle, and we can go back to scene 1, and in our 3 keyframe we can come over to the library, and drag the new movie clip in. Now, we could've have obviously done that in the first place by creating an empty movie clip to begin with, but we wanted to review our multiple selection using Edit Timeline, Copy Frames instead of just Copy etc.

So, now we have a new movie clip that we can use anywhere in our file. Now, let's take a look at the compression information that we have available to us and, what our options are. Let's go over to the library, and start by selecting the white_snowboard_with_bindings, and let's click this little Info button down here at the bottom of the library. Clicking that Info button will bring up the Bitmap Properties dialog, we can move our image around in the preview area if we wish. We can see a variety of information about our image. Quickly, we can see the path to the image, when it was created, dimensions, and the pixel bit depth, we can see which compression option is being used, and in the case of JPEG whether the imported JPEG data created in your pixel editing program is going to be used. The important part again down here at the bottom is information about that file with the compression settings. It shows the original size of the image approximately 700K, but the compressed size is approximately 18K which is 2% of the original.

Typically, we've worked hard to compress this file in our external editing program and we'll likely want to use our imported JPEG data, but some developers prefer to compress the files at very high quality, very low compression, and then choose to compress within {italic}Flash.{plain} So, in that case you can check off the Use Imported JPEG data option, and then set your compression setting here on a per image basis. So, we could change our quality to 80 or 30, and whatever we use that compression setting will be used when we publish our file. So, let's return to our Use Imported JPEG data option, and it's also important to note that we can change compression schemes if we wish. So, we could go and change from Photo (JPEG) to Lossless (PNG/GIF), and in doing so we can could over here and hit the test button to update this information here to see what the new compression settings will be. So, let's do that now, note the original setting was 2% of original, let's hit the test, and now we see that with the alpha data, and with the other information that's in the Lossless Compression codec, we're bumping up to 19% of the original, and achieving a new size of only 133K, rather than 18k.

So we know now that this is not an optimal compression method for us. We can go back to JPEG, and return to our 18K size at 2% of original. Okay, let's hit the OK button to get out of this, and we'll come down to choose the border, and we'll hit the Info button again, and one of the first things I want you to take a look at here is that by default {italic}Photoshop{plain} has chosen the JPEG compression method, despite the fact that we're looking at a PNG. In other words, {italic}Flash{plain} does not require that you use the Lossless (PNG/GIF) codec just by virtue of importing a PNG asset. You can still maintain the integrity of the alpha channel, and use the photo JPEG compression algorithm. What I want to focus on however, is that because this was not originated as a JPEG, there is no external JPEG document settings, so the default setting here is to Use the document default quality. This is set in the Publish settings as we saw earlier. Where we can set a global JPEG compression ratio for the entire file, and when publishing {italic}Flash {plain}will use that setting for all of the JPEGS. We can disable that, and choose our own compression settings here, and we can test to see the results. In this case we'll see that it's 4% of the original with a setting of 50. By the way you also now see an update where the alpha channel has been pre-multiplied, so you know see the clean edge on a white background. So, if you want to experiment here, again you can change this to 30 or 80, and continue to test and see what the estimated compressed size will be, if you want to do some heavy optimization for your file size. Let's move on to the next video in the sequence, which is importing the specific assets including {italic}Photoshop{plain} files and then again {italic}Illustrator{plain} files.

There are currently no FAQs about Flash CS3 Professional Essential Training.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Flash CS3 Professional Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.