Flash Resources


 

   Flash Resources Portal

 


 


 

Week 1

 

Topic covered this week include:

 

 

Reading:

 

 

Analysis:

 

Due Date: Two weeks.

 

 

    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.

 

 

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:

 

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

 

Reading:

 

 

Analysis:

 

 

Lab:

 

 

 

 

Notice how the layers are structured.

 

Weekly Resources

 

     Beginner/Intermediate:  

 

      Advanced:


Week 3

 

Topic covered this week include:

 

 

Reading:

 

 

Analysis:

 

 

Lab:

 

 

Weekly Resources

 

     Beginner/Intermediate: 

 

     Advanced:


Week 4

 

Topic covered this week include:

 

 

Reading:

 

 

Analyis:

 

 

Lab:

 

 


 

Week 5

 

Topic covered this week include:

 

 

Reading:

 

 

Analysis: 

 

 

Lab:

 

 

          

 

    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:

 

 

Reading:

 

 

Analysis: 

 

 

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:

 

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:

 

 

Reading:

 

 

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:

 

There are two deliverables for this project:

 

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:

 

 

Reading:

 

 

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:

 

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:

 

 

Reading:

 

 

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:

 

 

 

 

 

Extra credit:

 

 

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