Adobe Flash for Beginners - Photo and Video Galleries

Class Description: Get your digital media collections online easily with the power of XML. Create both a basic photo slideshow and gallery (with buttons and captions) designed with rapid future image additions and subtractions in mind. Take advantage of built-in Flash components while building an interactive video gallery. Consolidate your work by building a composite Flash project made up of multiple Flash files. Learn ways to share collections of digital media with the web.

1. Important Settings for Class

    Exercise 1a: Loading an External Image via the UILoader Component

    Exercise 1b. Creating an Animated Compass Rose

    Exercise 1c. Loading the External, Animated Compass Rose .swf

    Exercise 2a: Creating a Timeline Frame by Frame Photo Slideshow

    Exercise 2b: Creating a Timeline Tweened Photo Slideshow

    Exercise 3: Using Buttons to Load External Images and Dynamic Text

    Exercise 4 - Thumbnail Video Gallery (FLVPlayback and Buttons)

    Exercise 5 - ActionScript 3.0 XML Video Gallery (FLVPlayback and List Component)

 

Instructor: Bill Morrison

Wednesday, November 4, 2009 • 6:00pm-9:00pm • 1 mtg
UHM Sakamaki C104, Manoa MultiMedia Lab • Pacific New Media

Download class files (zip)

• This class is designed to be taught live in 2hr 45min

• Click here for the class page with live Flash files

 

1. Important Settings for Class

  1. Reset the Flash workspace - Window > Workspace > Classic and/or Window > Workspace > Reset 'Classic'
  2. Set the Drawing Mode to Object Drawing in the Toolbar
  3. Under Flash Preferences for ActionScript - set keywords to bright Red

Exercise 1a: Loading an External Image via the UILoader Component

In this exercise we will create a 'host' .swf file which loads an external .jpg at runtime. Runtime equals when the 'host' .swf is viewed (by the world) in a web browser via the Flash Player. By loading the image externally, we gain the ability to update the .jpg without having to re-edit the master .swf.

Exercise 1a: Loading an External Image via the UILoader Component

Step by Step »

  1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
  2. Save your file as islands-ex1.fla
  3. In the Toolbar, select the Selection Tool
  4. With nothing selected, in the Properties Panel, set the frame rate to 12
    • This frame rate is being set to prove a point later on in the class
  5. Re-name 'Layer 1' to 'islands'
  6. In the 'islands' layer timeline, select Blank Keyframe 1
  7. From the Menu Bar, go to Window > Components
  8. Open the User Interface section
    • Note: there are many free 'components' that come with Flash
    • components are 'pre-made bundles of functionality'
    • some components are 'skinned' - i.e. they have parts that are visible
    • other components are invisible until you load something into them
    • you can get additional free components from Yahoo, the Adobe Flash Exchange and elsewhere
    • them buy them at places like flashloaded.com, Flashcomponents.net and elsewhere
  9. Drag an Instance of the UILoader to the stage
  10. With the UILoader selected, in the Properties Panel, set the UILoader size to W: 654 and H: 447
    • Note: These are not 'magic' numbers...they are the pixel counts of the .jpg we plan to load
  11. With nothing selected, in the Properties Panel, click the Edit: button
  12. Choose Contents to snap the stage of the size to the size of the UILoader
  13. Save your file
  14. Test your movie
  15. From the Menu Bar, go to Window > Component Inspector
  16. Select the UILoader
  17. In the Component Inspector, set the source for the UILoader to hi-islands.jpg
  18. Lock the 'islands' layer
  19. Save your file
  20. Test your movie
    • DEMO: changing the look of the hi-islands.jpg with Photoshop

Exercise 1b. Creating an Animated Compass Rose

Exercise 1b. Creating an Animated Compass Rose

Step by Step »

  1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
  2. Save your file as compass-ex1.fla
  3. In the Toolbar, select the Selection Tool
  4. With nothing selected, in the Properties Panel, set the frame rate to 25
    • We will be tweening - 25 is a good fame rate for tweened animations
  5. In the Timeline, select Blank Keyframe 1
  6. In the Menu Bar, go to File > Import to Stage
  7. Import compass-rose.ai
    • Demo: the compass-rose.ai in Adobe Illustrator
  8. In the Import to Stage dialogue box:
    • set the compass-rose layer to be imported as a Movie Clip
    • Convert Layers to: Flash Layers
    • Check: Place objects at original position
    • Check: Set stage size to same as Illustrator artboard/crop area...
  9. Once imported, select the compass rose
  10. In the Properties panel, confirm that the compass rose is a Movie Clip (instance)
  11. From the Menu Bar go to Zoom > Magnification > 100%
  12. On the 'compass-rose' layer, insert a keyframe into frame 75
    • Notice that Flash has auto-copied the contents of the Keyframe 1 frame into Keyframe 75
  13. Right-click in any frame between 1 and 75 and choose Create Classic Tween
  14. Save your file
  15. Test your movie
  16. In the Timeline of the 'compass-rose' layer, select Keyframe 1
  17. In the Properties Panel, apply a CW rotation of 1 to the Motion Tween
  18. In the Properties Panel, apply an Easing value of 100 to the Motion Tween
  19. Save your file
  20. Test your movie
  21. Select the Instance of the compass-rose in Keyframe 1
  22. In the Properties Panel, in the Color Effect section, under the Style: drop down, choose Alpha
    • Set the Alpha to 0%
  23. Select the Instance of the compass-rose in Keyframe 75
  24. In the Filters Panel, apply a Drop Shadow filter - style to taste
  25. Lock the 'compass-rose' layer
  26. Save your file
  27. Test your movie
  28. Create a new layer and re-name it 'actions'
  29. Move the 'actions' layer to the top of the layer stack
  30. Lock the 'actions' layer
    • NOTE: you can add ActionScript code to locked 'actions' layer
  31. On the 'actions' layer, insert a Keyframe into frame 75
    • Note: if there is no content in the preceding keyframe, there is no auto-copy (i.e. you get a blank keyframe)
  32. From the Menu bar go to Window > Actions
    • Demo: stop(); the animation
  33. In Blank Keyframe 1 of the 'actions' layer, type the 'In Keyframe 1' code (see below) into the Actions Panel
    • ActionScript is a hyper-sensitive language - spelling and case- sensitivity count
  34. In Blank Keyframe 75 of the 'actions' layer, type the 'In Keyframe 75' code (see below) below into the Actions Panel
    • Demo: checking your code (Check syntax)
    • Demo: auto-formatting your code
  35. Save your file
  36. Test your movie
Adding Actionscript 3.0 Button/Timeline Navigation Functionality

For a complete explanation of this code (and more) go here

Exercise 1c. Loading the External, Animated Compass Rose .swf

Exercise 1c. Loading the External, Animated Compass Rose .swf

Step by Step »

  1. Flip back to the islands-ex1.fla file
  2. From the Menu bar go to File > Save As - save your file as combo-ex1.fla
  3. In the Toolbar, select the Selection Tool
  4. From the Menu Bar go to Zoom > Magnification > 100%
  5. Create a New Layer and re-name it 'compass-rose'
    • Keep your 'actions' as the topmost layer
  6. In the 'compass-rose' layer timeline, select Blank Keyframe 1
  7. From the Library, drag out an Instance of the UILoader to the stage lower left
    • Note: While the first Instance of a Flash Component can add a signification chuck to the .swf file size, additional Instances of the same component will not add much more
  8. With the UILoader selected, in the Properties Panel, set the UILoader size to W: 210 and H: 210
  9. Reposition your UILoader to taste
  10. From the Menu Bar go to Window > Component Inspector
  11. Select the UILoader
  12. In the Component Inspector, set the source for the UILoader to compass-ex1.swf and scaleContent to true
  13. Save your file
  14. Test your movie
  15. You will notice two problems: speed and scale
    • NOTE: Loaded .swf files, in most cases, inherit the parent .fla's frame rate
    • With nothing selected, in the Properties Panel, set the frame rate of combo-ex1.fla to 25
    • With the UILoader selected, in the Component Inspector, set scaleContent to false
  16. Save your file
  17. Test your movie
    • Demo: scaling the UILoader
    • Demo: changing the Aspect Ratio
    • Demo: editing the source .swf
    • Visit: http://labs.adobe.com/

Exercise 2a: Creating a Timeline Frame by Frame Photo Slideshow

In this exercise you will create a simple Frame by Frame Photo Slideshow. The different slides will be organized in Photoshop then imported into Flash.

Exercise 2a: Creating a Timeline Frame by Frame Photo Slideshow

Step by Step »

  1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
  2. In the Properties Panel, set the Frame Rate to 25
    • This frame rate is being set to prove a point later on in this exercise
  3. Save your file as ex-2a.fla
  4. From the Menu Bar, go to File > Import to Stage
  5. Import slovenia-frame-by-frame.psd
    • Demo: the slovenia-frame-by-frame.psd in Photoshop
  6. In the Import to Stage dialogue box:
    • Convert Layers: Keyframes
    • check - Place layers at original position
    • check - Set stage size to same as Photoshop canvas...
  7. Delete the leftover layer
  8. Save your file
  9. Test your movie
  10. In the Properties Panel, set the Frame Rate to 1
    • Note: you can go lower than 1 but I do not recommend it
  11. With your Frame Rate set to 1, add extra frames (create frames spans) after each slide frame until you achieve you desired speed
  12. Save your file
  13. Test your movie
  14. Create a new layer and name it 'effect'
    • Be sure this layer is on the top of the layer stack
  15. In the 'effect' layer timeline, select Blank Keyframe 1
  16. In the Toolbar, select the Rectangle Tool
  17. Prior to drawing, in the Tool Bar, set the following:
    • be sure to define a fill color (for example, red)
    • turn the stroke off
  18. With the Rectangle Tool, click and drag a rectangle on your stage
    • Don't worry about the size - we'll take care of that next
  19. In the Toolbar, select the Selection Tool
  20. Select the rectangle
  21. From the Menu Bar, go to Window > Align
  22. In the Align Panel, be sure to click To stage:
  23. Click the Match width and height button - Your rectangle resizes to match the stage
  24. To align your rectangle to the stage, click the Align horizontal center button and the Align vertical center button
  25. Select your rectangle, right-click and choose Convert to Symbol
  26. In the Convert to Symbol dialogue box, set the following:
    • choose Type: Movie Clip
  27. With the rectangle (movie clip) selected, go to the Filters section of the the Properties Panel
  28. At the bottom of the Filters section, click the "Add filter' icon and choose Drop Shadow
  29. Turn on the Knockout and Inner Shadow checkboxes - Style the Drop Shadow Filter to taste
  30. Save your file
  31. Test your movie
  32. Move the 'effect' layer to the bottom of the layer stack
  33. Select the rectangle
  34. In the Properties panel, turn off the Knockout and Inner Shadow checkboxes - Style the Drop Shadow Filter to taste
  35. Save your file
  36. Test your movie
  37. In the Properties Panel, hit the Edit button and choose Contents to include the drop shadow
  38. Save your file
  39. From the Menu Bar go to File > Publish Preview > HTML

Exercise 2b: Creating a Timeline Tweened Photo Slideshow

In this exercise you will create a simple tweened (alpha transition) photo slideshow. The different slides will be organized in Photoshop then imported into Flash.

Exercise 2b: Creating a Timeline Tweened Photo Slideshow

Step by Step »

  1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
    • In the Properties Panel, set the Frame Rate (FPS) to 25
    • Note: 25 gives us smooth tweens
  2. Save your file as ex-2b.fla
  3. In the Toolbar, select the Selection Tool
  4. From the Menu Bar, go to File > Import > Import to Stage
  5. Choose slovenia-tween.psd as the file you want to Import
  6. In the .PSD Import dialogue box, set the following:
    • Convert Layers to: Flash Layers
    • check 'Place objects at original position'
    • check 'Set stage size to same size...'
    • check Create Movie Clips for these Layers
    • Be sure the layer is set to Lossy
  7. Delete the leftover layer
  8. In frame 225 of layer 'c', right-click and choose 'Insert Keyframe'
    • Notice that Flash has auto-copied the contents of the Keyframe 1 frame into Keyframe 225
  9. Lock the 'c' layer
  10. Select the Keyframe in Layer 'b' - then let go of the mouse
  11. Select and drag the Keyframe to frame 25
  12. In frame 50 of layer 'b', right-click and choose 'Insert Keyframe'
  13. In frame 100 of layer 'b', right-click and choose 'Insert Keyframe'
  14. In frame 125 of layer 'b', right-click and choose 'Insert Keyframe'
  15. Select the Keyframe in Layer 'a' - then let go of the mouse
  16. Select and drag the Keyframe to frame 100
  17. In frame 125 of layer 'a', right-click and choose 'Insert Keyframe'
  18. In frame 175 of layer 'a', right-click and choose 'Insert Keyframe'
  19. In frame 200 of layer 'a', right-click and choose 'Insert Keyframe'
  20. Save your file
  21. Test your movie
  22. In each of the four, 25 frame transition zones, select a frame, right-click and choose Create Classic Tween
  23. Save your file
  24. Test your movie
  25. Select frame 50 of layer 'b'
  26. Select the image (Movie Clip Instance) in Keyframe 50 of layer 'b'
  27. In the Properties Panel, in the Color Effect section, under the Style: drop down, choose Alpha
    • Set the Alpha to 0%
  28. Select frame 125 of layer 'b'
  29. Select the image (Movie Clip Instance) in Keyframe 125 of layer 'b'
  30. In the Properties Panel, in the Color Effect section, under the Style: drop down, choose Alpha
    • Set the Alpha to 0%
  31. Select frame 125 of layer 'a'
  32. Select the image (Movie Clip Instance) in Keyframe 125 of layer 'a'
  33. In the Properties Panel, in the Color Effect section, under the Style: drop down, choose Alpha
    • Set the Alpha to 0%
  34. Select frame 200 of layer 'a'
  35. Select the image (Movie Clip Instance) in Keyframe 200 of layer 'a'
  36. In the Properties Panel, in the Color Effect section, under the Style: drop down, choose Alpha
    • Set the Alpha to 0%
  37. Save your file
  38. Test your movie
  39. Save your file as ex-2c.fla
  40. Choose slovenia-extra.psd as the file you want to Import
  41. In the .PSD Import dialogue box, set the following:
    • Nothing - just bring the bitmaps in
  42. Open the Library
  43. Find the Movie Clips making up the current slideshow
  44. Double-click to edit the first Movie Clip
  45. Once inside the Movie Clip - select the bitmap image
  46. In the Properties Panel - click the Swap button
  47. Chose the first 'extra' image
  48. Return to Scene 1
  49. Repeat this swap process for the other 2 images
  50. Save your file
  51. Test your movie
    • Demo: Adding Captions
    • Demo: Export video

Exercise 3: Using Buttons to Load External Images and Dynamic Text

In this exercise you will create a custom, thumbnail photo gallery. The overall gallery design was created in Photoshop. We will leverage the layers of the .psd file as they are imported into Flash. ActionScript 3.0 will be used to connect user mouse-clicks to the loading of external .jpgs into a UILoader component. A sound effect will be added to one of the buttons.

Exercise 3: Using Buttons to Load External Images and Dynamic Text

Step by Step »

  1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new, Actionscript 3.0 file
  2. Save your file as ex-3.fla
  3. From the Menu Bar, go to File > Import to Stage
  4. Import sharks-layout.psd
    • Demo: the sharks-layout.psd in Photoshop
  5. In the Import to Stage dialogue box:
    • make sure the text layer is set to Editable text
    • set the border and buttons layers to Bitmap image with editable layer styles
    • make sure the border and buttons layers are imported as Movie Clip Symbols
    • Convert Layers: Flash Layers
    • check - Place layers at original position
    • check - Set stage size to same as Photoshop canvas...
  6. Save your file
  7. Test your movie
  8. Lock the 'cool-border' and 'layout-helpers' layers
  9. Select the Sharks of Hawai'i text and apply a Drop Shadow Filter - style to taste
  10. Lock the 'SHARKS OF HAWAI'I' layer
  11. Save your file
  12. Select the top left image thumbnail (Movie Clip Instance) and apply a Drop Shadow Filter - style to taste
  13. While in the Filters Panel, copy the Drop Shadow Filter effect
  14. Select the remaining 5 thumbnail images (Instances)
  15. In the Filters Panel, paste the Drop Shadow Filter effect
  16. Working from left to right, top to bottom, turn each thumbnail into a button symbol
    • With an thumbnail selected, hit <F8> to bring up the Convert to Symbol dialogue box
    • name your buttons btn1 to btn6
  17. Working from left to right, top to bottom, edit each button symbol by:
    • Select the button, right-click and choose 'Edit in Place'
    • add an Over state keyframe <F6> to each button
    • remove the Drop Shadow effect from the Over state
    • return to the main Timeline (Scene 1)
    • Move on the the next button
  18. Save your file
  19. Test your movie
  20. Working from left to right, top to bottom, give each thumbnail button symbol an Instance Name of btn1 to btn6
  21. Lock all of the thumbnail button layers
  22. Save your file
  23. Test your movie
  24. Highlight the 'layout-helpers' layer
  25. Add a new layer and rename it 'UILoader'
  26. Select the Blank keyframe of the 'UILoader' layer
  27. From the Menu Bar, go to Window > Components
  28. Open the User Interface section
  29. With the 'UILoader' layer highlighted, drag an Instance of the UILoader to the stage
  30. With the UILoader selected, in the Properties Panel, set the UILoader size to W: 260 and H: 260
  31. Align the UILoader with the 'helper' graphic
    • Demo: Flash has numerous snapping options
  32. Select the UILoader
  33. In Component Inspector, set the source of the UILoader to '1.jpg'
  34. Save your file
  35. Test your movie
  36. With the UILoader selected, give it an Instance Name of 'myImageLoader'
  37. Lock the 'UILoader' layer
  38. Save your file
  39. Test your movie
  40. With the 'UILoader' layer highlighted, add a New Layer and rename it 'captions'
  41. Select the Text Tool and in the Properties Panel, set the following:
    • Type: Dynamic Text
    • Font: _sans
    • Color: #333333
    • Size: 14
    • Justify: Right
    • Single line
  42. Drag a Text Box over the text box 'helper' graphic - position to taste
  43. With the Text Box selected, give it an Instance Name of 'myTextBox'
  44. Lock the 'captions' layer
  45. Hide the visibility of the 'layout-helpers' layer
  46. Save your file
  47. Test your movie
  48. From the Menu Bar go to File > Publish Settings
    • under the Flash tab, turn off "Export hidden layers'
    • as an alternative you can turn the 'layout-helpers' into guide layer (right-click on the layer and choose)
  49. Add a new layer and re-name it 'actions'
  50. Move the 'actions' layer to the top of the layer stack
  51. Lock the 'actions' layer
  52. Select the Blank Keyframe in the 'actions' layer
  53. In the Menu bar, go to File > Open - open the flash-03.as
  54. Drag through (select) then copy (cmd/ctrl + c) the shark-gallery code
  55. Flip back to the ex-2.fla
  56. From the Menu Bar go to Window > Actions to open the Actions Panel
  57. Into the Blank Keyframe of the 'actions' layer, paste (cmd/ctrl + v) the code into the Actions Panel
    • note the ActionScript symbol in the Blank Keyframe
  58. Save your file
  59. Test your movie
    • Demo: changing the Text Box font
    • Demo: changing the text that is loaded

Let's have a quick look at the ActionScript 3.0 code you applied:

Adding Actionscript 3.0 Button/Timeline Navigation Functionality

B. Adding a Sound Effect to the Great White Shark Image

Step by Step »

  1. From the Menu Bar, go to File > Import to Library
  2. Import scream.wav
  3. In the Library, right click scream.wav and choose Linkage...
  4. Click the Export for ActionScript box and in the Class: field enter 'scream'
  5. Open the Actions Panel (Window > Actions)
  6. Select the keyframe of the 'actions' layers that contains your shark gallery code
  7. Manually type in the 2 extra lines of code in the 'loadImage3' function that appear after ..."Great White Shark"; in the image below
  8. Save your file
  9. Test your movie
    • Demo: changing the mouse Click to a roll_over action
Adding Actionscript 3.0 Button/Timeline Navigation Functionality

Exercise 4 - Thumbnail Video Gallery (FLVPlayback & Buttons)

In the exercise we will build a Thumbnail Video Gallery driven by invisible button clicks. We will import a background image to set the mood and to provide a visual guides for button placement. ActionScript 3.0 will be used to link the buttons to the loading of three, different Flash Videos (.flv). Inspiration for this gallery was found here The videos used in this exercise came from archive.org

Exercise 4 - Thumbnail Video Gallery (FLVPlayback & Buttons)

Step by Step »

  1. Create a new ActionScript 3.0 file
  2. Save your file as ex-4.fla
  3. In the Toolbar, select the Selection Tool
  4. From the Menu Bar, go to File > Import to Stage
  5. Import commercials.psd
    • Demo: the commercials.psd in Photoshop
  6. In the Import dialogue box set the following:
    • Convert Layers: Flash Layers
    • check 'Place layers at original position'
    • check 'Set stage size to same as Photoshop canvas'
  7. Lock the 'video-background' layer
  8. Save your file
  9. Create a new layer and re-name it 'buttons'
  10. Select the Blank keyframe of the 'buttons' layer
  11. In the Tool Bar, select the Rectangle Tool
  12. In the Properties Panel (prior to drawing), set the following:
    • fill color to bright green with an alpha value of 60%
    • stroke to none
  13. Draw a rough rectangle around the Ole Virginia thumbnail
  14. In the Toolbar, select the Selection Tool
  15. Select the rectangle
  16. In the Properties Panel, set the rectangle size to W: 140 and H: 110
  17. Center the rectangle over the Ole Virginia thumbnail
  18. Select the rectangle, right-click and choose Covert to symbol
  19. In the Convert to Symbol dialogue box, set the following:
    • choose Type: Button
    • enter 'btn-thumb' for the name
  20. On the stage, right-click the Instance of 'btn-thumb' and choose Edit in Place
  21. To create an invisible button do the following:
    • click the Up keyframe and release the mouse
    • click and drag the Up state Keyframe to the Hit state
  22. Return to the Main Timeline (Scene 1)
    • the cyan color you see is your invisible, hotspot button
  23. Save your file
  24. Test you Movie
  25. From the Library, drag two more instances of 'btn-thumb' to cover the two other image thumbnails
  26. Use the Align Panel to align the three buttons
  27. From top to bottom, give the following Instance Names to your buttons: btn1, btn2, btn3
  28. Lock the 'buttons' layer
  29. Save your file
  30. Test you Movie
  31. Create a new layer and re-name it 'video-player'
  32. Select the Blank keyframe of the 'video-player' layer
  33. From the Menu Bar go to Window > Components
  34. Open the Video section
  35. Drag an Instance of the FLVPlayback component to the stage
  36. Select the FLVPlayback component
  37. In the Properties Panel, set the following (for your FLVPlayback component):
    • W: 320
    • H: 240
    • X: 280
    • Y: 150
  38. From the Menu Bar go to Window > Component Inspector
  39. Select the FLVPlayback component
  40. In the Component Inspector, set the following:
    • Skin: SkinUnderPlayStopSeekMuteVol.swf
    • SkinBackgroundColor: #658A4F
  41. In the Properties Panel, give the FLVPlayback component an Instance Name of 'myVideoPlayer'
  42. Lock the 'video-player' layer
  43. Save your file
  44. Test your Movie
  45. Add a new layer and re-name it 'actions'
  46. Move the 'actions' layer to the top of the layer stack
  47. Lock the 'actions' layer
  48. In the Menu bar, go to File > Open - open the flash-03.as
  49. Drag through (select) then copy (cmd/ctrl + c) the Thumbnail Video Gallery code
  50. Flip back to the ex-4.fla
  51. From the Menu Bar go to Window > Actions to open the Actions Panel
  52. Into the Blank Keyframe of the 'actions' layer, paste (cmd/ctrl + v) the code into the Actions Panel
    • note the ActionScript symbol in the Blank Keyframe
  53. Save your file
  54. Test your movie
    • Demo: changing the autoPlay and autoRewind values
ActionScript 3.0 Video Gallery (FLVPlayback & Buttons)

Exercise 5 - ActionScript 3.0 XML Video Gallery (FLVPlayback & List Component)

In this exercise we will build a xml Flash Video Gallery. ActionScript 3.0 will be used to connect two components to an external xml file that contains links to a series of Flash Videos (.flv) and their associated captions. We will import a background image to set the mood for the piece. The videos used in this exercise came from archive.org

Exercise 5 - ActionScript 3.0 XML Video Gallery (FLVPlayback & List Component)

Step by Step »

  1. Create a new ActionScript 3.0 file.
  2. Save your file as ex-5.fla
  3. In the Toolbar, select the Selection Tool
  4. From the Menu Bar go to File > Import to Stage
  5. Import superman.psd
    • Demo: the commercials.psd in Photoshop
  6. In the Import to Stage dialogue box:
    • set the image layer to Bitmap image with editable layer styles
    • Convert Layers: Flash Layers
    • check - Place layers at original position
    • check - Set stage size to same as Photoshop canvas
  7. Select the superman-bk instance
  8. In the Filters Panel, add the following:
    • Gradient Glow filter - season to taste
    • Adjust Color filter - desaturate the image - to taste
  9. With nothing selected, in the Properties Panel, change the stage color to a color taken from the image
  10. Lock the 'superman-bk' layer
  11. Save your file
  12. Test your movie
  13. Create a new layer and re-name it 'components'
  14. Select the Blank keyframe of the 'components' layer
  15. From the Menu Bar go to Window > Components
  16. Open the Video section
  17. Drag an Instance of the FLVPlayback component to the stage
  18. Select the FLVPlayback component
  19. In the Properties panel, set the FLVPlayback size to W: 320 and H: 240
  20. From the Menu Bar go to Window > Component Inspector
  21. Select the FLVPlayback component
  22. In the Component Inspector, set the following:
    • Skin: SkinUnderPlayStopSeekMuteVol.swf
    • SkinBackgroundColor: #666666
  23. Position the FLVPlayback component to left side of the hole in the superman-bk image
  24. Give the FLVPlayback an Instance Name of 'vid'
  25. Save your file
  26. From the Menu Bar go to Window > Components
  27. Expand the User Interface section
  28. Drag an Instance of the List component to the stage
  29. Position the List component so it sits to the right of the FLVPlayback component
  30. In the Properties panel, set the List component size to W: 180 by H: 220
  31. Give the List component an Instance Name of 'vidSelect'
  32. Lock the 'components' layer
  33. Save your file
  34. Add a new layer and re-name it 'actions'
  35. Move the 'actions' layer to the top of the layer stack
  36. Lock the 'actions' layer
  37. In the Menu bar, go to File > Open - open the flash-03.as
  38. Drag through (select) then copy (cmd/ctrl + c) the Thumbnail Video Gallery code
  39. Flip back to the ex-5.fla
  40. From the Menu Bar go to Window > Actions to open the Actions Panel
  41. Into the Blank Keyframe of the 'actions' layer, paste (cmd/ctrl + v) the code into the Actions Panel
    • note the ActionScript symbol in the Blank Keyframe
  42. Save your file
  43. Test your movie
    • Demo: adding the three videos from the previous exercise to the .xml file
ActionScript 3.0 XML Video Gallery (FLVPlayback & List Components)

 

Back to top

Copyright © 2009 Bill Morrison | All Rights Reserved