Week 9: Loading External SWF's and the Bar Preloader
This week, we learned how to load external swf's into a movie, customizing the bar preloader, and you also submitted your idea for your final project.
Loading External SWF's: This is important for those of you planning to create a robust portfolio. We learned in class today how to load separate external flash movies on to a main flash movie. Learning how to do this will help you break your portfolio into sections that will enable each section to load separately. The result is a faster loading portfolio that can be easily modified and updated.
FINAL PROJECT GRADING (100 pionts):
Your project will be graded on the following. Please note that its not just enough to show that you know how to use Flash, but that you implement good design principles (color, composition, concept and form) and that your piece is aesthetically pleasing. Be thoughtful in this and apply everything with intent.
======================================
Design (50 points)
• Balance and Composition (10 points): Do all of the elements of your presentation contribute to the overall effect? Is there a clear focal point? Is there a visual heirarchy in what we see?
• Color Harmony (10 points):Are you using colors that are harmonized with one another, and do they set the tone of your site? Please no acidic colors.
• Alignment (10 points): Are you using a grid for a clear professional presentation? Do you have a sense of form to your design? Is it clean, clear, aligned and stratight?
• Useability (10 points):Do your buttons work? Is your presentation easy to use?
• Font Selection / Readability (10 points):Are you sticking to readable fonts? Are your fonts of the same family for site continuity? Is it held long enough for us to read what is on the screen.
======================================
Overall Look and Feel / Professionalism / Execution (10 points)
How effective is your site as a whole? Does it do the job? Does it communicate your best work?
Are your pictures clear, cropped and placed according to the principles of good design.
======================================
Deadline (20 points) • Week 10 deadline: Is your site ready for viewing by the week 9 deadline?
======================================
Sound (10 points)
Does the sound contribute to the overall effect? Is it trimmed and adjusted to your presentation?
======================================
Next Week:
1) Lab Work Day - Work on your final projects.
2) Troubleshooting Day
Week 8: Preloaders, bandwidth profiler and video in Flash
This week, we learned how to make animated preloaders, started on our final projects which are due on the last day, the bandwidth profiler and we also learned how to place video in Flash. For your final project, know that you you have a few choices so please follow the parameters below for which you will be scored. In all of these projects I expect good design, form/alignment, harmonized color, and good type selection.
Preloaders:
Preloaders serve an important part in good useability practice. When an
animation is loading, a preloader will tell the user to wait. In
creating your preloader, you can make an animation to entertain the
user while they wait, or it can be informational, telling the user how
much more of the animation still needs to load. In any case, if a
preloader is not present, the user will leave, DO NOT LET THIS HAPPEN.
In the real world, if users leave, you lose money. You can download a
tutorial for creating a basic preloader by clicking the link below.
FINAL PROJECTS:
Your final project can be one of the following - be aware that it is a culmination of everything learned thus far:
1) a website
2) a 2 minute animation
3) a james bond intro.
HOMEWORK: Submit pdf storyboard of your final project. A general idea of what you have in mind in fine. If you are submitting a website, please storyboard what the homepage is going to look like, as well as any other page you may have. I will not accept handdrawn storyboards. If it is handdrawn, be sure you turn it in as a pdf document. This step in turning in a pdf is part of your professional training. It can be presented to a large group of people and it makes your idea legible, clear and it evens explains any animation or movement. Use photoshop to create this. Please view the example below for the clarity and presentation I want you to strive for, it was an actual storyboard I pitched to Harrahs that was approved.
Week 7: Opening external web pages within the Flash Player. Topics covered this week: "getURL" command and the "mailto:" command. These commands are programmed into your buttons. Intead of having the button go to a certain frame, on the timeline you will open up a webpage. Also covered, is travelling to different scenes. Below, you will also see how to program an email button. It works like this, when a user presses "email", their default email browser will open up and will your address wiill already set up to sent an email.
Travelling to different scenes:
This will help if you want people to travel across many scenes. The code will look like this in proogramming your buttons.
on (release) {
gotoAndPlay("Scene name",1)
}
Here is what you are doing above:
When the button is released,
Go to the scene named "Scene name" frame 1.
If you want it to go to label in that particular scene, simplify change the number to the name of your label and place it in quotation marks, like this "label".
getURL command:
This command is used in conjuction with buttons to open external webpages from within the Flash movie. It should look something like this:
First, make a search button:
1) Make a button and call it "search".
2) Set up the button however you like and place it on your stage.
3) Once on the stage, click the button and open your actionscript palette.
4) Type this:
on (release) {
getURL("http://www.google.com")
}
5) The getURL command can be found here:
"Mailto" Command: The mail to command opens the users' email client and creates an email document already populated with your email address.
To do this, follow the steps above, but replace the items in quotes with your email address, so that it looks something like this:
on (release) {
getURL("mailto:contact@youremail.com")
}
HOMEWORK:
You have two choices.
1) Create a menu screen and have the user travel to 7 different spots on the timeline and stop. You may use the slideshow you created in the last assignment. Include a back button so we can choose another picture.
OR -
2) Create an aniamtion that enables the user to choose the outcome.
Remember that to do this, simpy place labels at the place you want playhead to go to. Use the tutorial above to help you get there and be sure to include a stop command and back button, so we can can go back and choose another picture. Test your work. Points cannot be awarded if buttons don't work, or if the selections available to the user are not clear.
NEXT WEEK: Preloaders and Sound Objects. Also, start thinking about your final projects. Think about how you like to design, are you an animator, a designer, a gamer art major, try to make you final project reflect your ideas, or create something that will be of benefit to you.
Week 6: Continuity and Transitions This week, we covered continuity and transitions, this refers to how smooth your animation flows from one image to the next. Use swipes, fades and dissolves and pay attention to the timing and rhythm of your piece.
Also covered is a technique that I include in my flash files, using blurs to make things go faster.
Make your projects the best. They are due next week. Please review the paramters for which I will be grading your project below. The deadline, the beginning of class Wednesday.
Week 5: More About Buttons - Play and Replay Buttons A review of the play button is below. The replay button can be creatd in pretty much the same way, except for small difference in the actionscript. This week, we also learned about labels, which are like little flags or markers to tell Flash where to go.
To create a label, make new layer and call it labels. Click on a frame on this layer where you want to go. Add a keyframe. Go to the properties palette at the bottom of the screen. On the left hand side of the palette, you will see a box where you can put a label name. Type your label name in here and press return.
Below is a tutorial for making and programming buttons.
Play Button: Before we make a "play" button, make a new layer and call it "actions". This is where we keep all of our actionscripting. If you keep them in one place, they are easier to get to. Please note that you will also make a separate layer for your "replay" button. Select the first frame of your actions layer and put a stop on frame 1.
Open your "Actions" Palette (F9) and put a stop command in the Actionspalettte window. It should look like this.
Now, let's make a "Play" button. Go to the library (control + L) and click the new symbol icon at the lower left hand corner of the library palette (it looks like a piece of paper with a plus sign).
A pop up window appears. Choose "Button". This will bring you to a small timeline with four frames. These frames are the different states of a button. The "up" state is the resting state of the button. The "over" state is what the button is going to look like when the cursor rolls over it. The "down" state is what the button looks like when it is pressed. And the "hit" state is the actual hot / active part of the button. I have two layers below, one for the text and one for the box. On the second keyframe, I have a box that is a different color. The hit area is the size of my box.
Go back to your main timeline (scene 1), make a new layer and call it play. On the first frame of this layer put a keyframe (F6). The second keyframe (on frame 2, should be blank, you want it to disappear after the button is pressed).
Drag the play button from your library and drag it on to the stage.
PROGRAMMING THE BUTTON:
Grab the selection tool (black arrow) and select your button. This is important, you should see the word "button" in your properties palette at the bottom of the screen. You are about to add actionscript to your button, so you must be sure it is selected. If not, you will be putting actionscript on to the frame. An error message will appear telling you that the script should be on the button and not the frame.
Open your actions palette and place this actionscript in the actionscript window in the many ways we discussed in class. I say put the actionscript using the method below.
• Click the circled icon in the picture > Choose Global Functions > Movie Clip Control > Select ON.
• A popup window should appear in the box, double click "release".
• In the actionscipt, place your cursor on the other side of the curly brace and press "enter" to start your second line.
• Click the icon again (circled in the image) > Global Functions > Timeline Control > Play - OR - GotoAndPlay
The code should look like this on screen.
on (release) {
play();
}
If you choose play, the playhead will play the next frame.
If you choose GotoAndPlay, in the brackets, put the label name in quotation marks. This tells Flash to go the label you craeted earlier. It should look somethink like this.
on (release) {
GotoAndPlay("labelname");
}
REPLAY BUTTON: For this, you will be going to the end of your animation and you will put a replay button.
• Follow the same procedure to create the replay button.
• On the layer called "actions", place a keyframe and stop at the very final frame of the animation.
• Make a new layer and call this "replay". (We're putting our replay button here.) Put a keyframe on the very final frame.
• Drag this "replay" button from your library on to this final frame.
• Open up the actions palette and follow the same procedure above.
• When you begin your second line, instead of choosing "play", choose "gotoAndPlay".
• In the parenthesis, type the frame number you would like the user to go to once the "replay" buton is pressed.
• The code should look like this:
on (release) {
gotoAndPlay(1);
}
In this code, when the button is released, it will go to frame 1. If you want it to go to the label, simply place the name of your label in qutoation marks within the parentheses
Your final layers structure should look something like this. As you can see, I have a separate layer for my image, each of my buttons, and a layer for my actions. Also listed below is your homework and items we are learning next week.
HOMEWORK:
Create a slideshow of something you are passionate about. Worth (100) points. I am looking for creativity, play and replay buttons, a soundtrack, sound effects, clarity and flow, and how well you follow the requirements and parameters. Size must be close to 500 x 300 and must be at least a minute long. This will be due Week 7.
THIS WEEK: Your homework is to show me your idea.
1) Share with me what you are planning - verbally is fine.
2) show me pictures, let me hear your soundtrack, and
3) show me an example of your layout.
Week 4: Buttons in Flash Great week everyone. This week we covered the basics in creating buttons in Flash. In the process, we also learned about the MovieClip and adding sound to keyframes. The lessons learned today, can be applied to almost any project moving forward.
Movieclips :
Movie clips are animations that operate seperate from the main timeline. Once the main timeline comes to an end, a movieclip, if no stop command is present, will keep animating. You can add movieclips to any of the states for creating buttons. The example below shows that movieclip keeps moving while a graphic on the main timeline does not.
Sound :
Sound can also be added to buttons as well. When adding movieclips and sound to buttons, both need keyframes and both should be on new layers. We'll work more with sound in the following week to come.
Stop Command :
To stop an animation, create a new layer and label it "a". You are now going to use Actionscript, which is the programming language for flash. Press f6 to add a keyframe where you want your animation to stop. Right click, scroll down to action script to bring up the Actionscript window, and in the box press "esc" and the letters "s" and "t". Flash will put a stop command on the line. There are many ways to do this, this way is the fastest. The script for stop looks like this:
stop();
HOMEWORK :
Create 9 well designed, unique buttons.
2 - Simple Buttons. (During a rollover or press, a simple color change will do).
2 - Static Buttons (During a rollover, a significant image change must occur).
5 - Animated Buttons (During a rollover, or press, a movieclip is played)
Any of the three above must also have sound.
Turn in your Fla's and Swf's for full credit.
Week 3: Animation Great week everyone. This is what we covered.
Using Text
Animating Alpha
Look at your library.
Animating Rotation & Scale
Using a guide layer to animate
Animating a layer mask
=============
Shape Tweening & Morphing (An example of shape tweening is below)
pg. 301
Hues
Shapes
=============
Blurs (Next Week)
Ease in Ease Out
Recoil (Next Week)
Animated Layer Masks (Next Week)
=============
HOMEWORK
Design 5 800 x 100 banner ads.
Watch for design, readability, colors and concept. They must have at least 3 elements. 2 of which are moving.
View Harrahs example.
Week 2: More Drawing - Gradients and Symbols This week, we continued drawing in Flash. The purpose of the last two days is to familiarize you with the image creation process in the program. To be honest, if you don't know how to create imagery in Flash, you are useless, there's no point. You won't be able to create graphics, or animate anything.
TOPICS COVERED IN CLASS ::
• Flash Environment Review
• Symbols
• The Symbol Library
• Creating gradients (cloud like forms) using filters.
• Using the pen tool.
• Using layers to create detailed imagery.
HOMEWORK ::
Create a photorealistic drawing of one of objects handed out in class. These are a strawberry, a flamingo and a flower. If you missed class, any photo will do.
You will be graded on you understanding and demonstration of the following.
• Detailed shapes
• Using gradients to describe form and a sense of light.
• Using layers to create image complexity.
Next Week ::
Animating in Flash. The Timeline. Animating with symbols. Adding Frames and Keyframes. More hotkeys.
REMINDER ::
Do yourself a favor and purchase the text. It will pay for itself as the market requests more and more flash work. The book will serve as a valuable resource for you well beyond the classroom. Buy it, bring it to class, write in it, take notes in it and use it. Our work will be getting more and more complex as we proceed into the next weeks, so the text will also serve as your guide.
Week 1: Welcome Today, we discussed the importance of Flash. Why is it important and how does it pertain to you? As I mentioned in class, the internet is a crazy medium that has great appeal and reach. It makes the internet rich in animation and sound and is now being used for broadcast animation on television and cell phones. If you have excellent work in any of these mediums and you put it in front of the people who like that type of work, then anything can happen. It may change your life, as it has changed mine :-) Ask questions as we proceed further.
The basics of the program are simple to learn. However, to get the most out of our time together, please be sure you arrive every session, because you never know (as you experienced in our first session together) what helpful piece of (Non-Flash) advice may come your way.
TOPICS COVERED IN CLASS:
• GUIDED TOUR: The stage, timeline, layers, drawing tools, text, gradient fills, gradient fill tool, the color palette and the properties palette.
• Drawing in Flash
• HOTKEYS "Q" - Free Transform (Adjust the size of items, press "Shift" to constrain.
• The Library
• Using Layers to Creat imagery.
• The Wacom Tablet
• The Pen Tool and its Properties
HOMEWORK
Create 10 drawings in Flash utilizing that follow a certain theme (fruit, animals, money, royalty, island theme). We learned how to directly draw in the program using the various pen tools, fills, gradients, gradient transform tool, paintbrush, and we learned how to use layers to create complex images. Publish your images and submit 10 swf's next week. We will be reviewing these in class. Below are some samples of vector art. To achieve this, give every value a layer and layer the shades on top of mone another.
I will be grading on the following:
• Form and Clarity of the object
• Professionalism and level of craft.
• Use of value to show form.
• Concept and idea
• Design & composition
• Harmonized use of color
• Deadline
