Bitmaps

1. Bitmaps

2. Vector Graphics Vector attributes Crisp, Scalable Small file size Downloads quickly Good for saving flat colored artwork called line art Line art can be logos, cartoons, text-based graphics Negative aspects of vector Complex vector illustrations are difficult to process and display

3. Bitmap Graphic aka Raster Graphic Bitmap Attributes Provides continuous tone quality (photographs and painterly illustrations) Displays images using pixels Bitmaps supported by most applications Negative aspects Bitmap color is defined by pixels vs vector objects Each pixel value in a bitmap image (raster graphic) uses a set amount of memory Enlarging or reducing the size of a bitmap image reduces its visual clarity (loses quality)

4. Bitmap Compression formats explained Lossless (PNG/GIF) uses “lossless” compression, compresses the image with lossless compression, data is discarded from the image without degradaton. GIF is ideal for images with simple shapes and relatively few colors at least. PNG supports millions of colors. Photo (JPG) uses “lossy” compression, compresses the image with lossy compression, data is discarded from the image with degradation. Ideal for images like photographs with millions of colors and complex color or tonal variations. Jpg also ideal for any images with complex shadows or gradient fills.

5. Importing Bitmaps Flash can import the most common bitmap file formats Including tiffs, jpegs, gifs, pict, psd Supports transparency settings of (Gif, Png, Pict) Select File>Import>Import to Stage Select desired image file and select open Importing files to the Stage place the file in 3 places: 1) The stage 2) The library 3) The Bitmap Fill section of the color mixer Alternatively you can import to the library

6. Bitmap smoothing Flash has an enhancement for bitmaps known as Bitmap Smoothing Improves the quality of bitmaps being used at enlarged or reduced sizes by attempting to smooth out any pixilation artifacts or aliasing To apply bitmap smoothing select the bitmap image in the library by double clicking on it 1. The Bitmap Properties Dialog Box will appear. 2. Select Allow Smoothing

7. Bitmap compression Flash applies its own default compression to bitmaps when a movie is exported These settings can be adjusted in the following locations: A single compression level for an entire movie via File> Publish Settings Click on Flash tab and adjust the JPG quality settings

8. Overriding default JPEG publish settings In addition the Bitmap Properties window can be also used to set individual settings for each JPEG image file in the library. Double click on any bitmap in your library to open window, uncheck the Use imported JPEG data option and then set the desired quality and then click the test button to preview The preview window shows the new appearance Enter a value between 0 worst and 100 best in the field A higher setting preserves greater image quality but produce larger file sizes

9. Overriding default JPEG publish settings cont. When Allow Smoothing is NOT checked, the image appears as an aliased or pixilated image The image on stage of your movie will not show the compressed appearance, control>test movie to see actual appearance

10. 4 Ways to open the bitmap properties window Double click on the bitmap icon in the library. In the library, select bitmap image and then the small "i" at the bottom of the window to view the bitmap properties dialog box Or, Double click the image in the library Or, Use the pull-down menu, top right of the library window, select Properties

11. Bitmap Properties window Double click on any bitmap image in library to open its Bitmap Properties window Update button, updates a bitmap that has been altered outside of Flash. Follows the original path. Library is updated. Import button, swaps image in the library by specifying an image from another location. Library is updated. Test button, make and preview changes. See details of the new file information.

12. Bitmap Properties window Advanced Options Advanced/Basic button, Opens and closes the Linkage options, see below Linkage options,add bitmaps to the document at runtime or share with other Flash projects. Enter name of file in edit field and select an export option. Bitmap is imported into swf at run time. See next slide…

13. Bitmap Linkage To add bitmaps to a swf at runtime, when the program executes, use BitmapData Actionscript command to specify a linkage identifier for the bitmap Select a bitmap in Library panel and do one of the following: Select Linkage from the Panel menu in the upper-right corner of the panel Right-click (pc) or Control-click (mac) the bitmap name in the Library panel, and select Properties from the context menu If the Linkage properties aren’t visible in the Properties dialog box, click Advanced For Linkage, select Export For ActionScript Enter an name of file in the text field, and click OK

14. Importing and compressing a Bitmap demo File>Import>Import to Stage (select a jpg) Optional, double click on photo in library to modify (publishing) properties For photo use photo jpeg (compression) Uncheck the “use imported jpeg data” option Set quality to 60% For logos, text, solid colors use Lossless (PNG/GIF) instead Click test to determine new file size, much smaller, preview quality in window Click on OK to save Changes will be apparent once published as a swf

15. Trace Bitmap (converting into vector graphic) Import a bitmap image into the library Drag an instance of this symbol to the stage First save project file in case flash crashes Select instance and then click on Modify>Bitmap>Trace Bitmap Trace Bitmap options (try these settings): Color threshold: 50 Minimum area: 10 Curve fit: Very smooth Corner threshold: Few corners (if you do not like the result undo cmnd+z and try again)

16. Trace Bitmap options: Color threshold: 1 to 500 (number of colors decreases when higher /increases if lower) Minimum area: 1 to 1000 (number of surrounding pixels to consider when calculating the color of a pixel) Curve fit: how smooth the outlines in the traced shape are drawn and how closely they match the original image Corner threshold: whether to use sharp edges (many corners) or smoother edges (few corners) Optimum file size = high color threshold, high minimum area, smooth curve fit, and few corners

17. Instance vs original in library Tracing affects the selected instance Original bitmap in the library is not affected by the bitmap trace Published movies show the converted image as a vector You can also use the direct selection tool to manipulate the vector objects on a converted bitmap

18. Break Apart A Bitmap Converting jpg image into a vector image using Break Apart option Alternative to trace bitmap, no options though Select any bitmap on stage Modify>Break Apart (cntrl+b cmnd+b) (converts instance only to vector/shape) Dragging instance into library creates a new symbol Symbol can now be motion tweened and alpha can be added

19. Bitmaps to Vectors Recommendations The higher the quality settings, the larger the file size Good vector results starts with images that have limited color and high contrast The more detail, in the original bitmap, the larger the file will be and the harder it will be to convert it into vectors A converted bitmapped that is very detailed may prove to be larger than its original file defeating the purpose of changing from the bitmap into vectors

20. Reasons to Vectorize in Flash Reasons for converting bitmaps to vector graphics To apply special effects To reduce the file size To enable zooming in on the image without pixelation

21. Mock video effect using image sequence Using a sequence of related images to create an image sequence composed of individual frames in our flash movie You must have sequentially numbered images (file names) and place them all in the same folder, must be named similar like image01.jpg, image02.jpg, etc. Flash has the ability to import the series all at once,

22. Mock video effect using image sequence demo Import first image in sequence File>Import>Import to Stage Select the first image in the sequence, click Open Click yes when prompted to import entire sequence Sequence imported to stage, timeline, and library Click on edit multiple frames button (timeline) Set markers to cover all frames Select layer and reposition images as desired Turn off the edit multiple frames button Control>test movie Optional adjust frame rate to desired fps like 1 fps to achieve desired effect, changes whole movie though

23. Converting bitmaps to vectors on a sequence You will have to select frames individually May have problems creating a complex traced bitmap, so save before converting Select first frame in sequence Click on Modify>Bitmap>Trace Bitmap Color threshold: 100 Minimum area: 10 Curve fit: very smooth Corner threshold: few corners Play around with different adjustments until you achieve the desired look, cmnd+z / ctrl+z to undo Repeat steps for all frames in sequence Control>Test Movie to view It’s possible that these new vector images could become bigger in file size than the original images

24. Masking Masking in Flash is made up of two separate but related layers, the “mask” layer and the “masked” layer A “mask” is a shape on one layer used to expose any objects on the “masked” layer beneath it The top layer (mask) acts like a cut out or peep hole or mask eyes The mask layer exposes the layer beneath it called the “masked” layer through the mask Any layers beneath the “masked” layer are still visible as long as they are not associated with the mask Masking is very cool technique for filling text that has broken apart 2x with an image or movieclip or an animation

25. Masking demo We will need a jpg or graphic in our library We will need two separate layers, the “Mask” layer and the “Masked” layer Create two layers and name them mask and masked Select the mask layer, create an oval with just a fill, no stroke, using the oval shape tool While still on this layer select Modify>Timeline>Layer Properties (or cntrl+click/ cmnd+click) Select the mask option Select the masked layer Place an image or jpg onto masked layer Layer under mask should be indented, becomes masked Lock both layers in order to preview mask If necessary cntrl+click / cmnd+click and check properties for the masked layer, should say masked

26. Masking demo continued To preview you must lock both layers or Control>Test Movie After previewing unlock layers, add key frames to the mask OR masked layer, move object across stage, and add a tween Add frames to the mask layer so they are the same length Control>Test Movie Change background of flash movie in properties inspector to black if desired, mask will stand out better

27. Cropping a vector using the pencil tool Import image File>Import>Import to Stage Select the image Modify>Break Apart (converts instance only to vector) Select pencil or brush, stroke black Draw outline over/onto image (must be continuous/complete circle or outline) With selection tool select off stage, then select any area outside the outline, and press delete Image has now been cropped using the pencil tool There is a stroke around the image (can be copied, deleted, colored, partially erased)

28. Cropping a vector using the pencil tool cont. Convert the image to a movie clip symbol (f8) Reposition the graphic Add a keyframe around frame 30 Create a motion tween Select first key frame on frame 1 Using the property inspector, click on color drop down menu, apply alpha 0 percent. Test the movie Try to add a fliter or blend and then add a CW rotation

29. Buttons

30. Buttons are one of three types of symbols in Flash Graphic symbols Button symbols Movie clip symbols

31. Button symbol Buttons can range from being static, to rollover, to animated rollover, to containing audio effects, invisible, and more! Buttons can be programmed with ActionScript using the Actions panel Buttons are primarily used to create interactivity within a flash movie

32. Buttons A Button symbol has its own timeline with four states Up A buttons up state (appearance) before the mouse interacts and causes the over or down states Over A buttons over state after the mouse enters the buttons hit defined area Down A buttons down state after the mouse enters and clicks on the buttons hit area Hit A buttons hit state defines where the mouse enters the hit defined area which then triggers the over and down states, also referred to as a “hot zone”

33. Types of Buttons The appearance and behavior of a button is affected by the content entered in its timeline Flash offers many button techniques Basic Buttons, a simple click initiates an action without visual feedback. The same content is in all frames Rollover Buttons, offers visual feedback. For example, when the mouse moves over the Over state or the user clicks on the Down states the button changes appearance Animated Rollover Buttons, similar to the rollover button, but one of the states contains an animated movie clip

34. Types of Buttons continued Invisible Buttons, this where the button is invisible until the user places the cursor over it. The Up states all contain a blank keyframe, but there is content in the Over, Down, and Hit states

35. Buttons demo Create a new button, Insert>New Symbol Name your button btnRollover(or any name you want best to not have spacing) Select the button option Optional, View>Grid>Show Grid Draw button states using drawing tools Add key frames over each state (f6) Modify each states appearance as desired Hit state defines the buttons “hot zone” and triggers the over state Click on scene 1 to return to project timeline Control>Enable Simple Buttons or Control>Test Movie

36. Button hit state frame vs key frame vs blank keyframe The hit states frame defines what the area the user mouses over which then initiates the over state Down states occurs when you mouse down/click while over the hit states region or object If there is no key frame in the hit state then the prior frame (either down, over, or up) and its contents will represent the hit area If there is a blankkeyframe in the hit state then the over and down states will be disabled

37. Buttons layers demo Edit an existing button (double click on a button within library) Add an additional layer to the button Add text to this layer that will label the button for example type: Contact Insert frames 2x (f5) for the states for over,and down Insert blank keyframe for hit state f7 Click on scene 1 to return to project timeline Add button to stage Control>Test Movie

38. Buttons with audio demo Search for a aif or wav sound file (use finder or google) Import audio file into your library, click on File>Import>Import to Library> select sound file Create a new button or open an existing button Add an additional layer, name audio Add blank keyframe to desired state to contain audio (F7) Add audio file from your library to this state Select frame with audio and verify audio Sync located on prop inspector is set to Start, cannot be set to stream Add blank keyframes f7 to frames before and after the frame with the audio Click on scene 1 to return to project timeline, add button to stage Click on Control>Test Movie to preview

39. Modifying Button Instances You can change instances of buttons (color like tints, alpha, etc) Doesn’t affect original symbol in the library Modifying a button on the stage changes that instance only

40. Modifying Button Symbols If you want to change something inside of the button like its text you may need to duplicate the button Any button changes within its timeline modify the symbol For example, you may want to change the text on a button for a new second button, best to duplicate When duplicated a new symbol is created Select button in library cntrl+click or cmnd+click and select duplicate Select new button in library and rename New symbol can be edited without affecting the original first button

41. Importing Buttons from other projects Open .fla project file containing button or symbol that you want to import into current project You need to have both projects open, flash displays each on a separate tab Make sure you have the current project and its stage showing, the project you want to import into Within the library select the project drop down menu, located at the very top middle of the library window Select the other projects name, its library will then appear Drag desired button or symbol onto stage Switch library drop down back to current projects name Symbol was copied into current projects library

42. Duplicating Buttons demo Once you have created a button you can duplicate it Once duplicated it creates a new symbol which you can then modify uniquely Select a button in your library or create a new one Control click (mac) or right mouse click (pc) Select duplicate Type new name for button, click OK Double click on new button in library and modify uniquely Click on scene 1 to return to project timeline Add button to stage Click on Control>Test Movie to preview

43. Invisible Buttons demo Create a new button Insert>New Symbol Name your button and select button option Click on f7 to add a blank keyframe to up state An invisible button can not have any content on any of its up state frames Draw buttons “over” state appearance using drawing tools Press f6 2x to add key frames over the down and hit states Modify the over, down and hit states as desired The up state must be blank and show a blank key frame You can add additional layers and audio to any of the states as desired Click on scene 1 to return to project timeline, Control>Test Movie to preview FYI: filter effects do not work with an invisible button, add filter first to a movieclip then add mc to button

44. Buttons Naming Conventions It is highly recommended that you name your buttons appropriately so that they can be easily identified in the library, and also so they can be used with Actionscript Acceptable, no spacing, use underscore if nec btnPlay playBtn stop_button Stop_btn Not recommended shown below, no spacing in naming…. stop button