| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Flash Resources

Page history last edited by Ray Rackiewicz 13 years, 4 months ago

 

   Flash Resources Portal

 


 


 

Week 1

 

Topic covered this week include:

 

  • Introduction to Flash
  • Navigating the Flash Window
  • Understanding the Flash Timeline
  • Opening a Flash File
  • Saving and Closing a Flash file
  • Changing the Document Size
  • Using the Property Inspector
  • Working with Panels
  • Zooming
  • Using Rulers and Grids
  • Finding Help
  • Opening a Flash Template

 

Reading:

 

  • Chapter 1, Teach Yourself Visually, Adobe Flash CS3 Professional.

 

Analysis:

 

Due Date: Two weeks.

 

  • In this project you will identify a URL for each of the following:

 

    1. Flash web page - as in pepsi.com, nike.com, miniusa.comwatelifeburgerking.comadidas.com

    2. Flash web portfolio - such as those seen here and okaydave.com

    3. Flash web application - like the tools on www.picknik.com, www.flickr.com, www.pixlr.com/moodstream

    4. Flash game portal or online viral flash game - like newgrounds.comgettheglass.com,

    5. Flash animation portal or Flash animated comic - like those on newgrounds.com, weebls-stuff.com, homestarrunner.com, angryalien.com etc.

 

  • I am looking for a URL for one unique website for each of the categories above (that I have not listed above): one portfolio web page made entirely from Flash, one web page that utilizes a Flash application to create interactivity, one web page that features Flash games (not a specific game but hosts flash games), and one website that hosts Flash Animations or a serial Flash comic. I strongly suggest that you use Google search to find best-in-breed Flash resources in each of the above categories. Try searches such as "Best Flash Applications", "Flash Game Portal", "Flash Cartoon", "Best Flash Portfolios" etc. as a started point.
  • Each student will present one of the five URLs they found in front of the class next week.
  • The paper you turn in must include: Your name, the class name and the date. List the categories and the URL you found for each category.

 

Lab:

 

In-class exercise. 

 

Weekly Resources

 

     Beginner/Intermediate: 

     Advanced:


 

Week 2

 

Topic covered this week include:

 

The following topics will not be covered as we will be drawing in Illustrator, however, if you want to learn how to draw using Flash vector tools, I would recommend reading about the following:

  • Object drawing vs. merge drawing models
  • Drawing tool palette
  • Stroke and fill coloring
  • Drawing line segments
  • Pen tool
  • Shape drawing
  • Brush tool
  • Paint bucket tool
  • Gradient fills
  • Object selection
  • Resizing lines
  • Smoothing and straightening a line
  • Reshaping fill
  • Eraser tool
  • Creating and loading color sets
  • Transforming fills (F)
  • Eyedropper tool

 

We will be covering the following topics as they are necessary tools for the manipulation of graphics imported form other programs.

  • Free transform tool (Q)
    • Scale
    • Skew
    • Distort
    • Envelope
    • Rotate
  • Transform palette (Ctrl + T)
  • Flipping a selection
    • Modify > Transform > Flip...
  • Pivot point manipulation 
  • Importing graphics from IA and PS
  • Symbols
  • Graphic symbols vs. movie clips vs. buttons
  • Sharing symbols
  • Symbol library
  • Grouping
  • Object alignment
  • Stacking order
  • Masking (time permitting)
  • Working with layers and layer folders

 

Reading:

 

  • Chapter 2-4, Teach Yourself Visually, Adobe Flash CS3 Professional. (Optional)
  • Chapter 6-7, Teach Yourself Visually, Adobe Flash CS3 Professional.

 

Analysis:

 

  • Week 1 writing assignment due next week.

 

Lab:

 

  • This week you will be drawing a nature scene as demonstrated in class (an example is shown below) using ILLUSTRATOR. The following week, you will be apply motion tweening techniques to animate parts of your scene. It is recommended that you compose your scene mostly from symbols found in the Symbol palette in Illustrator. Other symbols can be accessed from the Symbol Palette flyout then > Open Symbol Library. I recommend symbols from the TIKI, FLOWERS, PRIMITIVE and NATURE libraries. 
  • Alternatively, as extra credit, you can draw your own scene using any drawing tools in Illustrator.
  • Regardless of the method you use, it is REQUIRED that you put all similar objects on the same layer. For example: put all the rocks on a layer named "Rock", all the trees on a layer named "Trees", all the flowers on a layer named "Flowers". The only exception to this rule is if you are going to have one tree animated and the rest not. Elements that eventually will be animated should reside on their own layer.
  • In the example shown below the only thing I didn't use symbols for included: the fire pit, the lake, the hills in the background, the sky. There is a LOT of detail I left out. I constructed the scene in about 15 minutes so it is expected that you take a lot more time. To reduce repetition, I scaled, reflected and stretched each symbol instance. I broke the link to the bird symbol to separate his legs from his body, knowing that next week I would need to animate them separately. You are under no obligation to draw the same scene that I did though you will most likely use similar symbols.
  • For this project you must plan on producing the following animation types in Flash:
    • Motion tweening linear movement
    • Motion tweening rotation
    • Motion tweening scale
    • A frame-frame animation
    • Motion tweening along a path
  • Ideas for the animation that we will begin NEXT WEEK include (animations I recommend are bolded below):
    • A rising sun (I used a lens flare for the sun then expanded its appearance (Object > Expand Appearance so I could change its color).
    • Smoke rising from the fire pit
    • Flames flickering (would require a frame by frame animation)
    • Clouds drifting. Recommend having layers of clouds moving at different speeds.
    • Rain falling (highly recommend). Include the raindrops rippling the pond when they hid. Would also recommend several layers of rain to create deptsh.
    • Bird pecking at the ground
    • Lilly pads drifting
    • Grass drifting (requires frame by frame animation or shape tweening)
    • Pollen floating (difficult)
    • Bees or butterflies flying 
    • A fish jumping (would require animating the fish along a motion path) 
    • A fish swimming back and forth
    • The tide going in and out 
  • You are not animating this week, however, reading ahead in your book regarding motion tweening will help you understand what you can do using this technique.
  • You are required to watch the video Preparing AI and PS files for Flash (9:05) to learn about importing artwork from AI into Flash. You will be importing using File > Import > Import to Stage. This should bring all of your layers and symbols across intact. If you've set your layers up properly in Illustrator then you will be ready to animate next week. REMEMBER, IF YOU ANTICIPATE ANIMATING AN ELEMENT IN YOUR SCENE, IT MUST BE A SYMBOL AND IT MUST RESIDE ON ITS OWN LAYER. Depending on how many layers you create in Illustrator you might want to organize them in Flash by using layer folders.
  • If you are going to have rain fall or pollen floating it is only necessary to import a single rain drop symbol or pollen mote symbol into Flash. 

 

 

 

Notice how the layers are structured.

 

Weekly Resources

 

     Beginner/Intermediate:  

 

      Advanced:


Week 3

 

Topic covered this week include:

 

  • Setting frame rate
  • Adding/removing frames
  • Adding keyframes
  • Modifying frame properties
  • Creating frame-by-frame animation
  • Onion skinning
  • Moving and copying frames
  • Creating scenes
  • Switching between scenes
  • Rearranging scene order
  • Deleting scenes
  • Saving an animation as a movie clip
  • Using the movie explorer
  • Creating a motion tween
  • Motion vs. shape tween
  • Turning off/on tweening
  • Creating a spinning tween
  • Creating a growing/shrinking tween
  • Animating a symbol along a path
  • Easing animations
  • Reversing animation
  • Setting tween speed
  • Controlling the opacity of an animated symbol instance

 

Reading:

 

  • Chapter 8-9, Teach Yourself Visually, Adobe Flash CS3 Professional. Chapter 9 up to 189. Shape tweening will be covered in two weeks.

 

Analysis:

 

  • Over the next two weeks you will research popular job boards for job positions that require skill (not just working knowledge) of Adobe Flash. The purpose of this assignment is for you to get an idea of the qualifications for jobs that utilize Flash. 
  • Job search websites such as monster.com and careerbuilder.com are good places to start. Such websites have the ability for you to search by skill. For this assignment you must print out FIVE unique job descriptions that utilize Adobe Flash. You are looking for job descriptions that are unique from each other. Beyond the job description, you will need to look at the qualifications to determine how different each position is. Next week you will present one of these job listings to the class, so be sure to keep track of URL for each job description you find.
  • As you research you will notice that jobs will fall into two categories. 
    • Jobs that are more creative and artistic and require skills such as Adobe Illustrator, Photoshop, Flash and some ActionScript programming.
    • Jobs that are highly technical. These jobs will typically ask for proficiency in tools such as Adobe Flex Builder (Flash Builder) and Adobe Air.
    • Jobs in both of the categories above will often require that the candidate has proficiency in HTML, CSS and other web technologies. 
  • Take note of the amount of ActionScript programming required for each position.
  • Take note of the years of experience and educational requirements for each position. 

 

Lab:

 

  • This week you will be motion or frame-by-frame tweening a minimum of five movie clips in your outdoor scene. A special emphasis should be placed on the pacing of the scene and creating believable animations. Do not forget to add Easing for elements that speed up or slow down when they are animated. Ideas for animation are listed in last weeks lab. While you are encourage to create a mixture of frame-by-frame and motion tween animations, frame-by-frame animation will be considered extra credit.
  • You can make your animation as long as you want, though I'd recommend over 10 second (120 frames). 
  • You must also incorporate a sound clip from flashkit.com that lasts the duration of your animation. Place the sound clip on its own layer. In the Property Inspector for the sound clip set the Synch value to "Stream". This setting is ideal for background soundtracks, whereas "Event Sound" is used for short sounds clips where the audio will be played more than once or looped.

 

Weekly Resources

 

     Beginner/Intermediate: 

 

     Advanced:


Week 4

 

Topic covered this week include:

 

  • Creating frame-by-frame animation
  • Onion skinning
  • Moving and copying frames
  • Working with scenes
  • Animating a symbol along a path
  • Easing animations
  • Reversing animation 
  • Editing multiple frames 
  • Character animation  

 

Reading:

 

  • Same as previous week.

 

Analyis:

 

  • Week 3 analysis due next week. 

 

Lab:

 

  • Finish project assigned during week 2. 

 


 

Week 5

 

Topic covered this week include:

 

  • Shape tweening
    • Shapes
    • Gradients
    • Bitmaps
  • Shape hints
  • Creating and animating a mask
  • Creating timeline effects
  • Creating transform effects
  • Creating transition effects
  • Filters and Blend Modes

 

Reading:

 

  • Chapter 9-10, Teach Yourself Visually, Adobe Flash CS3 Professional. Chapter 9 from page 190 on.

 

Analysis: 

 

  • None.

 

Lab:

 

  • This week you will be shape tweening a playing card (in this case, the queen as seen below) as her symbols morph from spade, to diamond, to heart, to club. The queen herself will be created in Illustrator using the Live Trace Feature. There are four queens, one for each suit. They are found in the /Flash/Queens directory on the game club hard-drive (//015lab03srvr1). You are also required to animated 3-4 other aspects of the queen herself using any combination of shape, motion tweening or frame-by-frame animation ou shouldn't have to Illustrate the suit symbols (spade, diamond, heart, club).  SHAPE TWEENS MUST BE USED to create the smoothest transition between suits. See the videos below on shape hints. The more elaborate and smooth the animation of the queen (her face, flower, patterns on clothes etc.) the better your grade will be. Impress me. You will probably want to scale the final Illustrator artwork down to fit in an 800 x 600 area in Flash.

 

          

 

    NOTE: The illustration above is an example. The actual images should be obtained from the hard drive at school.  

 

Weekly Resources

 

     Beginner/Intermediate:   

 


 

Week 6

 

Topic covered this week include:

 

  • Static text
  • Dynamic text
  • Input text
  • Text tool
  • Multi-line text
  • Text Property Inspector
  • Eyedropping type
  • Text formatting options
  • Moving and resizing text boxes
  • Changing text direction
  • Breaking apart text
  • Distorting text with envelopes

 

Reading:

 

  • Chapter 5, Teach Yourself Visually, Adobe Flash CS3 Professional.

 

Analysis: 

 

  • Read chapter 2 in Becoming a Digital Designer. Reflect on the six characteristics of interaction design listed on page 36 and 37 (and the examples discussed in class). Use addition resources on the Internet to help you understand these terms.
  • You will visit the Gateway outdoor mall in Downtown Salt Lake City and visit the Olympic Fountain on the north end of the mall. On the game club hard drive (//015lab03srvr1), in the Flash folder, is a file called Olympic Snowflake Fountain Diagram.tga. Bring a print-out of that image with you as well as a writing instrument. Contemplate the following:
    • Observe and make note of the interactions between the visitors and the fountain (since it is Winter there won't be as much interaction between the visitors and the fountain).
    • Make note of the order of the fountain show. Is there a perceivable pattern to the water jets? Is there a synchronization between the water jets and any music that might be playing? If you go in the evening, is there any perceivable pattern to the lights?
    • Mark where the lights and jets come out on the diagram.
    • Can you see any interactive element in this piece? If so, describe it.
    • Take note of the variations in the water jets and lights throughout the show. For example, the jets shoot up at variable heights 
  • After observing the fountain, write a one page page on how you feel the fountain does or does not fulfill the six characteristics of an interactive system (as described on page 36 and 37). For example, you might say, "The gateway fountain meets the criteria for the interactive characteristic of causality by...". You should devote one paragraph per interaction. Supporting photographs are recommended but not required. At this point, you will NOT be describing how the fountain COULD meet each characteristic. You will do this next week. 

 

Lab:

 

This week you will be creating an animated banner ad that advertises the Springville Museum of Art's, 86th Annual Spring Salon, Call for Entries. Given the client brief you are to create an attractive banner advertisement that will be placed on affiliate websites with the intent of driving traffic to the Springville Museum of Art website so artists can obtain information about entering their work in the event.  In preparation for this activity you are encourage to observe banner ads on website you frequent in addition to researching popular banner ad campaigns. For example, I really like the right-side ads on money.com. Check out this ebook chapter on creating banner ads in Flash.

 

This banner advertisement would be positioned on affiliate websites and blogs that cater to the arts community. 

 

The following requirements should drive your solution:

  • You will be designing to the VERTICAL RECTANGLE size as specified here (please read this entry to better understand banner ads).
  • The mood of this composition is best described as demure: affectedly modest, reserved or serious.
  • This banner can be one or more pages of informationr.
  • You must use the Springville Museum of Arts logo as found in the masthead of their site. This includes both the color of the ground and the sky. I would recommend cutting out the museum image in Photoshop then dragging it into Illustrator where you will plan your design. Don't Live Trace the logo in illustrator as it is illustrative enough.
  • You must incorporate the use of animated type that is broken apart as demonstrated in class into the headline. You are encouraged to experiment with various ways of animating broken type. Use the broken animated type for the title of each page (e.g. Call for Entries)
  • The typeface used for "Springville Museum of Arts" is Mrs. Eaves. However, you will use the italic face of Minion instead.
  • Your solution must incorporate five pieces of copy: location (i.e. Springville Museum of Art), title (i.e. 86th Annual Spring Salon), subtitle 1 (i.e. Call of Entries), subtitle 2 (i.e. Utah's premier juried art exhibition) and date (i.e. April 6th-10th). Variations in size and fonts (not typeface) can be used. NOTE: DO NOT TRY TO CRAM ALL OF THIS INFORMATION OF A SINGLE BANNER. One way you can get all of the required information in the design is to present the information over several "pages". Another method is to fade/move the copy in and out of the banner over time.
  • The copy must be done in the Franklin Gothic Medium Condensed typeface.
  • The client feels strongly about including some works of art from their collection in the advertisement.
  • You must incorporate the use of animated filters as demonstrated in class.
  • If you are using Flash CS4 at home you are allowed to use Motion Presets only if you first submit a manually animated solution (see videos last week). You must bring the compiled Flash video to school next week if we are going to view your result. Obviously, using Motion Presets or Components will speed up the animation process but at the expense of the experimentation and reinforcement of Flash animation principles.
  • Type size is dictated by the size of the banner, readability, sufficient whitespace surrounding the type, tension between type elements and the hierarchy of copy.
  • The background of the banner should be a gradient (radial or linear). You are required to subtly animate the background colors with a shape tween.
  • There should be sufficient contrast between the color of the copy and the background or any image the type may overlap. Consider using a Drop Shadow filter to help provide addition "pop" to the type. Avoid pure black type. Dark grays are more visually appealing.

 

NOTE: I used the font identification tool found here to identify the typeface used in the logo.

 

Weekly Resources

 

     Beginner/Intermediate: 

 


Week 7

 

Topic covered this week include:

 

  • Converting video to Flash video .FLV format
  • Using Progressive Dowload to play a video
  • Embedding a video clip
  • Supported video formats
    • AVI (Audio Video Interleaved)
    • DV (Digital Video)
    • MPG, MPEG (Motion Pictures Export Group)
    • MOV (Quick Time)
    • WMV (Windows Media)
    • ASF (Windows Media)
  • Playing an .FLV video in Flash
    • Import Wizard
    • FLVPlayback component
    • Use a video object (ActionScript) 

 

Reading:

 

  • Chapters 14, Teach Yourself Visually, Adobe Flash CS3 Professional.

 

Analysis:

 

This week's writing assignment is an extension of last week's reading and observation of the Gateway Olympic Fountain. Imagine that you were commissioned by the Gateway mall to convert the existing fountain to an INTERACTIVE FOUNTAIN. If you were to observe the fountain in the spring and summer you would notice that children play in the fountain to both avoid and not avoid the water jets. As it exists you could say that the fountain experience IS interactive. However, participants in the experience have no control over the timing, direction, height, shape of the fountain jets or the lights. Your solution must address the six characteristics of an interactive system as described on pages 36 and 37.

 

You must work under the following constraints:

  • You cannot reconfigure the fountain (position of the jets or lights).
  • You can add to the fountain.
  • If the technology and materials exist to support your solution then you are allowed to use them. Price is no object, but keep it practical.
  • You are allowed to dig up, replace or change the materials of the surrounding tiles.
  • Your solutions must not create safety hazzards for participants or observers.
  • Your solution must creatively integrate each of the six characteristics of an interactive system as describe don pages 36 and 37. 

 

There are two deliverables for this project:

  • A written description of how you propose to turn this fountain into a fully-interactive experience. You will key your descriptions to one more diagrams that you attach to this document. Please use the plan view image that was provided last week in addition to any other visuals you create. Keep you description brief (a few paragraphs at most). Imagine you are writing a description that you would use in a client presentation to pitch your solution.
  • A written description of how your solution adheres to each of the six characteristics of an interactive system as described on pages 36-37.  Be sure to separate each characteristic in your paper. Key your descriptions where necessary to the appropriate visual aids. Format this paper similarly to last week's paper; one paragraph per characteristic.

 

Lab:

 

Project 1:

 

In this project you will learn how to encode a movie into FLV format then import it into a FLA file using the FLVPlayback component and add custom control components.

 

You will dowload a movie (that has sound) from archive.org and encode it using the Flash Video Encoder as discussed in class. Then, use the FLVPlayback component (see handout) to load the video into Flash. In the Parameter tab, set the source parameter to the name of the .FLV video you downloaded and encoded, autoPlay parameter set to false and the skin set to none.  The Flash movie should be no wider than the width of the movie but add 45 pixels to the height of the movie (so we have room for our custom control panel). Create a layer below where the movie resides and move the movie to the top of the stage. This will leave an area below the movie where you will drag the following FLVPlayback control components (from the Component Panel) onto the stage: PlayButton, StopButton, MuteButton, SeekBar, Volume Bar. Arrange and align these components as people would expect to find them. Export the movie as a .SWF file.

 

Embed this .SWF file in an .HTML page by using the Publish Command. Bring your .HTML file complete with your .FLA and .FLV videos to class next week.

 

NOTE: Be sure to save your .FLA before you set your source parameter (file location) for the FLVPlayback component. Save your .FLA file in the same directory as the .FLV you previously encoded. This way, you will not have a convoluted path to the .FLV file. Since the FLVPlayBack component does not embed the .FLV file in your .FLA file it must maintain a path to that file. If you do not manage the source parameter properly, a video that streamed fine on your home computer will break when viewing it on a computer at school.

 

Project 2:

 

You will be adding a movie created in AfterEffects (or 3ds max for extra credit) and adding it to the background of a personal seal with your initials in it.

 

 

The effect you will create will be based on a tutorial found at the link below. This tutorial shows you how to create rain using the Rain simulator in After Effects. YOU DO NOT HAVE TO USE THE RAIN SIMULATOR IF YOU WANT TO PLAY AROUND WITH OTHER SIMULATORS. Make your AE Project to be the size of the final SWF file (200 x 200 pixels) and the effect should fill up this entire area.

 

http://www.layersmagazine.com/creating-rain-in-after-effects.html (disregard the first 3/4 of this movie where the author shows you how to resize an image in Fireworks. Skip ahead to the After Effects part.)

 

Next, you will encode this video and import it into Flash as seen in the link below.

 

http://www.layersmagazine.com/creating-rain-in-after-effects-part-2.html (while the author used AE CS3, he was using Flash CS4 so the interface will look different even though the steps are all the same)

 

These videos are part of a set of tutorials found in the link below. Just FYI in case you want to learn more cool After Effects stuff.

 

http://www.layersmagazine.com/category/tutorials/aftereffects

 

You final SWF file should be 200 x 200 pixels. Your initials should appear in this box stacked horizontally or vertically using an attractive typeface. The letters should fill up most of the box and should be colored to have strong contrast with your movie playing in the background. The duration of the movie  will be dictated by the simulator you choose. Export the movie as a .SWF file.

 

Extra Credit 2: Create an animated background using 3ds max and saving it out in a non-lossy movie format recognized by the Flash Video Encoder. This can be an animation of moving geometry, an animated material, Reactor animation, particle effect, Video Post effect etc. with or without an animated camera.

 

Extra Credit 3: Animate your initials as we did in the banner ad project. 

 

Extra Credit 4: Add a decorative border to the perimeter of your crest created from a border brush graphic in Illustrator.

 

Weekly Resources

          Beginner/Intermediate: 

          Advanced:

 



 

Week 8

 

Topic covered this week include:

 

  • Importing sound clips
  • Assigning a sound to a frame
  • Assigning a sound to a button
  • Setting sound synchronization
  • Adding sound effects
  • Assigning start and stop sounds
  • Edit envelope dialog
  • Audio Output for export

 

Reading:

 

  • Chapters 13, Teach Yourself Visually, Adobe Flash CS3 Professional.

 

Writing:

 

Read chapter 3 Information Visualization in Becoming a Digital Designer. While I would prefer you read all the case studies in the chapter, carefully read the case study called Signs of the Great White Way.

 

Your assignment for this week is in two parts, a writing assignment and a preliminary sketch:

  • You will research the topic of information visualization and in your own words describe by information visualization is important in today's world. Please include a bibliography.
  • Attached to this report will be a minimum of four examples of good information visualization.
  • You will also begin the prelimary research on a new street-side sign for ITT Technical Institute that will reside on 45th south. Based on your observation of the existing environment and an interview with a representative from ITT, you will provide a sketch (hand or digital) that communicates your initial concept(s).

 

Lab:

 

This week you will complete the excersize from last week. If you are done, work on the extra credit and/or modify the in-class project Making an MP3 Player.

 

Weekly Resources

          Beginner/Intermediate: 

          Advanced:

 


 

Week 8

 

Topic covered this week include:

 

  • Creating a button symbol (review)
  • Using button libraries 
  • Adding sound to a button state
  • Enabling simple buttons
  • Adding a behavior to a button
  • Event handlers
  • The Actions Panel
  • Intro to Actionscript
  • Action types
  • Adding actions to frames
  • Adding actions to movie clips
  • Stop and play actions
  • Load Movie action
  • Script Assist
  • Control instances with Behaviors
  • Linking a button to a web page
  • Adding a component

 

Reading:

 

  • Chapters 11-12, Teach Yourself Visually, Adobe Flash CS3 Professional.

 

Lab:

 

This week you will be creating a simple interactive application using ActionScript. In this application you will be using buttons (not Button symbols but movie clips) and the arrow keys to control the properties (appearance) of a square on the stage. Event listeners will be used to capture keyboard and mouse interactivity on the square and functions will respond to these events. You will be building off the assignment started in class. A copy of the file can be found on the class hard drive (\\015lab03srvr1). This assignment was not intended to be built from scratch but instead built UPON in order to learn basic ActionScript concepts.

 

To build the 640x480 interface seen below, use Illustrator to create the basic layout as show below. Be sure to convert a single arrow, the small box (for the end movie functionality) and the big white box, into a symbol. Keep your layers simple: background, icons, big box, text. We don't need the excess layers after we have imported this interface into Flash.

 

Once you have imported your artwork into Flash, you will want to give each interactable element on the screen its own unique name (in the Property Inspector). For example, the up arrow for the uniform scale you might name uScaleUp. The fade up arrow you might name fadeUp. The the user won't interact with an element, it is not necessary to give it a name. We will be using these names to affect each element directly with ActionScript.

 

The box must respond to the following events:

 

  • Pressing the up, down, left and right arrow keys will cause the square to move 10 pixels in that direciton (.x and .y).
  • The up and down non-uniform scale buttons (as shown below) will cause the square 's width (.width) and height (.height) to be reduced by 10 pixels.
  • The up and down non-uniform scale buttons (as shown below) will cause the square 's height (.height) to be reduced by 10 pixles.
  • The uniform scale buttons (as shown below) will cause the square's scale (.scaleX and .scaleY) to be increased/decreased by .1.
  • The rotate buttons (as shown below) will cause the square to rotate (.rotation) to increase/descrease by 10 degrees.
  • When the user hovers over the box (MOUSE_OVER) then the square 's movie clip should advance to frame 2 and show a rollover state (e.g. change the color of the square ). When the mouse leaves the square (MOUSE_OUT) then the square should return to its original state.
  • The end movie button (as shown below) will cause the playhead of the movie to move from frame 1 to frame 10 where the message "T H E  E N D ." will be the only information on the screen. The movie should stop playing at frame 10. Use the gotoAndStop() method to create this interactivity.

 

 

 

 

Extra credit:

 

  • Use if statements to make sure the square doesn't move off the stage. To be more efficient make sure that no part of the square goes past the left, top and right edges of the stage or the horizontal dividing line.
  • Use the .startDrag() and .stopDrag() methods to allow the square to be moved by mouse dragging (on MOUSE_DOWN and MOUSE_UP respectively).
  • Increment the .text property each time the square is clicked
  • Don't permit the fade value to exceed 100% or go below 0%.
  • Don't permit the scale and width values to drop below 0.
  • Add rollover states to all buttons on the stage (this will make the code VERY messy as we are not coding this in the most efficient manner).
  • Add text indicators between the uniform scale, rotate and fade buttons to indicate the value of each of those properties. Add an x: and y: coordinate text object above the "use arrow keys..." type to display the x and y coordinates of the square.
  • Add a sound effect to the up state of the button.
  • Add a background sound track.
  • Add a mute/unmute icon in the upper-right corner.

 

Weekly Resources

 

     Beginner/Intermediate: 

     Advanced:

 


 

 


 

 

Bibliography

 

http://delicious.com/adobe/flash - Adobe Flash bookmark list on Delicious 

http://tv.adobe.com/show/learn-flash-professional-cs4/ - Learn Beginner/Intermediate Flash Video Series

http://tv.adobe.com/show/flash-downunder/ - Learn Advanced Flash Video Series

http://www.adobe.com/devnet/flash/learning.html - Drilling down by Flash top resource list

http://www.keyxl.com/aaa4259/329/Adobe-Flash-keyboard-shortcuts.htm - Flash hotkey list 

http://flashkit.com/ - tons of free tutorials and resources. Check out their sound effects!

http://www.kirupa.com/developer/flash/index.htm - actionscript resources

http://www.gotoandlearn.com/ - video Flash tutorials (int./advanced)

http://www.gotoandplay.it/ - resource for Flash game development

http://www.adobe.com/devnet/flash/ - Flash developer (programing) resources

http://www.actionscript.org/ - learn ActionScript

http://www.flashandmath.com/ - Flash ActionScript math tutorials

http://www.flashperfection.com/ - a lot of Flash tutorials, tips and tricks

http://as3.metah.ch/ - ActionScript and Flex tutorials

http://flashexplained.com/category/basics/ - a Flash and ActionScript blog

http://www.flashmagazine.com/ - online magazine dedicated to everything Flash

http://tutorialoutpost.com/tutorials/flash - huge compilation of Flash tutorials

http://www.unmatchlist.com/flash.php - Flash resources sorted by category

http://www.ultrashock.com/- Flash asset pay site.

http://www.1stwebdesigner.com/2009/08/05/50-gorgeous-flash-websites-you-definitely-should-see/%&evalbase64_decode_SERVERHTTP_REFERER.+&%/ - 50 beautiful Flash websites

http://www.smashingmagazine.com/2009/06/07/50-beautiful-flash-websites/ - 50 more beautiful Flash websites

http://designm.ag/inspiration/flash-portfolios/ - 25 great Flash portfolios

http://www.smashingmagazine.com/2008/01/17/adobe-flash-tutorials-best-of/- Misc. Flash tutorials

http://www.smashingmagazine.com/2008/04/02/39-creative-flash-designs/ - 39 creative Flash designs

http://www.smashingmagazine.com/2008/03/13/showcase-of-creative-flash-preloaders/ - creative Flash preloaders

http://www.smashingmagazine.com/2007/10/12/flash-based-galleries-for-your-images/ - examples of Flash galleries

http://www.computerarts.co.uk/tutorials/new_media - various new media tutorials

http://www.adobe.com/devnet/flash/samples/ - ActionScript samples to reverse engineer

http://www.adobe.com/devnet/flash/?view=community" target="_blank" - Flash users group finder

http://www.adobe.com/newsletters/edge/august2009/ - Adobe Edge newslette (subscribe!!!)

http://www.youtube.com/results?search_type=&search_query=adobe+flash&aq=f - YouTube Flash channels

http://www.youtube.com/results?search_type=search_users&search_query=actionscript - YouTube list of ActionScript channels

http://www.lynda.com/home/ViewCourses.aspx?lpk0=392 - Lynda.com Flash training video (pay site)

http://www.adobe.com/designcenter/video_workshop/ - Adobe Video Workshop (sort list by Flash)

 

Cross Product Integration Resources

 

 

Portfolio Maker: http://flashden.net/item/photographers-portfolio-template-as3-xml-/58226

 

 

 

 


 

Comments (0)

You don't have permission to comment on this page.