Visual Communication
|
:: GD 02 :: project 1 :: project 2 :: project 3 :: resources :: class blog |
||
:::::::::::::::::::::::::::::::::::::::::::::: Kim Patton: PlanetAnimation Whitney Morris: EasingEffects ::::::::::::::::::::::::::::::::::::::::::::::
|
:::::::: |
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Printed graphic design is static: words and pictures are “stuck” on the page, the viewer sees everything in one glance. The designer tries to control the viewer’s gaze by manipulating position, scale, and color. By contrast, graphic design for the screen is kinetic*: elements may move, zoom, appear and disappear and reappear and it is interactive: viewers are can be users and may have some more say in choosing how, what, where and when they see or read information. What is exciting about the added accordance of motion and interaction is that it offers a new way to present content. A way that may make it easier and more engaging to understand something. KINETIC :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Content Some reviewers have criticized it for encouraging its young readers to injure themselves, but others have praised it for helping to counter the "Playstation Culture". Within the first week of its US publication on May 1, 2007, it reached number two on the Amazon.com best selling book lists, being outsold only by Harry Potter and the Deathly Hallows. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: •• In the last frames please put... don't jam all this on one screen. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Tuesday Nov 11 Homework (none of this is due next class but start now, you will be behind if you don't): Watch: Flash Tutorials on Lynda: Flash CS3 Professional Essential Training watch the lynda.com videos and write down any questions you have, if you are not at all familiar with flash start with earlier movies. we will have a flash tutorial day on Thursday Nov 20. Watch, Learn, Teach: there are Flash Tutorials on the Server the folder has many flash examples with how to pdfs in the folder. You will be assigned an effect/trick/tween you are to learn it and teach it the class, please be prepared. Presentions/Tutorials will be on Thursday Nov 20. Look here (Flash CS3 Animation Secrets for more info on Lynda.com. Your task...Give a tutorial. Show at least 2 - 3 different ways to use your topic (a few of you have very complated movies to make you may make just one -- check with me). You may work as teams to work through your tutorials, but you still have to have YOUR tutorial figured out. Save your example as a .fla and .swf files, name them clearly and put on the server. other sources for Tutorials When you have a question about these effects the person above will be the one to ask. Learn from each other, teach each other. So PEOPLE be experts in your area. ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Homework Concept: for this project i would like you to write a short paragraph describing the look and feel for each concept (you need 3). Start off with a comparison, then a couple of sentences to back it up. Create 3 concepts, moodboard, and first frame for each one. NO I WANT TO do this and that.. Just compare, and tell a short story. THEN. Create 3 different 11 x 17 moodboards image, image style, icons, illustrations, typography. AND THEN. Create a first screen. What will the first screen in your flash project look like? Create it in illustrator or photoshop using layers, RGB, 800 x 600 pixels. save all (visual map, 3 looks, and 3 intro screens) as a a pdf and put it on the server before class starts. we will start ontime if your "stuff" isn't on the server when class starts your work will not be discussed. organize your pdf each is a page... ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Put pdf on server before class begins. You should have at least 12 pages (frames) in the pdf. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: You need to do the tutorial while it is being explained to you. You need to practice what is being taught. Please save everything as a .fla file and then export to a .swf file for process (you will be showing me those for part of your process grade) What you don't do in class you will have to do or redo as homework. You must know and understand scenes, movie clips, buttons, animated buttons, easing, rollovers, bitmap to vector art and any other "effects" that you think you could use in your tutorial. Practice and test them before you start building your flash tutorial. This is the order the tutorials will be presented. Practicing Tutorials: Taking what you learned inclass. Make an example of a movie clip, button, animated button, different variations on an image turning it into vector art and any other 2 tutorials that you think you will use in your flash tutorial. save them and export them as .swf files. You will include these in your process. ALSO you will need your flash files for class: mainly the button and animated button so we can make them link to somethin AND. Based on your strongest concept and visuals. Create a storyboard (using real images and type) Frame each of the main/important screens in your visual map. Write down transitions on how someone will move through your "tutorial". Full-Size frames, ONE FRAME per page. Create it in illustrator or photoshop using layers, RGB, 800 x 600 pixels. Storyboard should be key frames letting us the viewer see the main points of the tutorial. ADD: Under each frame should be description of the transition from frame to frame, any voiceover or sound. (final flash animation has to have sound). Add to your storyboard: Under each frame the "transition/action" that will occur in flash from frame to frame: __ fades out, __ grows, expands, reveals, transforms... ALSO what needs to be clicked to move forward to the next screen, how will someone go back or somewhere else. Put pdf on server before class begins. You should have at least 12 pages (frames) in the pdf. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Small groups: message, the look, meaning "on target", storyboard. Spend time with each member of the group. Read the concept statements, advise on how to make them better, does the concept match what the tutorial is about (feeling/message), does the first frame match the "look" based on the concept, stoaryboard do you know how to move through the tutorial. any advice. any advice about transitions... *note: about the project and process. for the rest of this semester every class has something due. what ever is due should be on the server before class begins. it has to be on the server so we can discuss it. that is process. if it isn't on the server you get a "0" for process for that day. what is due at the end of this project... Poster. for this project you will be handing in a poster 18 x 24 on the epson plotter (we did a test it takes about 5 minutes to print.. example is in our 200A lab. You design it the example show you the content and the structure. Please write it down and sketch it up so you know what you are working towards. (it is not due until the final. Below basically captures what you need as content. You will be fillin in the content on your personal website so when you go and design your poster you have it all in front of you. Update personal web page so you can post all your process online + put it on the server (again your process grade is based on if it is on the server). Your personal webpage will be your process book for this project. We will start this today in class. It will be your responisbility to keep it up to date. (swf files can't be uploaded to your blog.) Make a folder for this project that you can upload to the web (no spaces not punc except _). in that folder have an images folder (all lowercase) put a copy of your pdf in it, put all your .swf files in the images folder. (always do that first, put a copy of whatever you want to link on your page into the images folder first). open template. save as index into this project folder. update text, change color, change link color, link pdf, link .swf files. log into the KU server using FETCH. people.ku.edu, your user name, SFTP, your pass. drop your entire folder (that has your index.html file and the images folder in it) INTO the publc_html folder. (do not have anything in your web project folder except the index and the images folder with all your pdf and swf files in it. keep you project folder separate (fla files, tutorials etc)
Blog: update your blog and comment on at least 4 other students blogs. ON ANYTHING. Refine Concept: Take this opportunity to nail it! It must have a Quote or Comparison. Your design has to reflect your concept and be approprate for your tutorial. Refine Storyboard. This is very important that your storyboards are final and GREAT. Audience: 1 or 2 audience profiles (writen as a story(s)) who are they, what do they like. be specific. use adjectives. Associated word list and key words: long list, 6 key words identified and defined Moodboard(s): tool kit of parts, type, images... Refine Visual Map. they are looking UGLY, be aware that you will have to make them look like a design professional did them -- not some type 1 student. Personal Web: Update/start filling in the stuff above. Even if you don't have Dreamweaver get your text togheter. The copy and paste into dreamweaver in the lab. tips: 2. movie clips: too keep your animation from not being 600 frames long, make parts as movie clips (will also be easier to edit), move the movie clip onto the stage. (see lynda movie clips if you understand movie clips from the begining your life will be easier) 3. scenes: use different scenes, using actionscript goto scene you can easily move from scene to scene. for example for you intro animation save it as a scene, when you then makeing the next part save it as a scene. Scenes are in the same fla file. and save as often. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Homework :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Homework :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: To suggest are sentences/phrase not just words... Update personal web: page so you can post all your process online + put it on the server (again your process grade is based on if it is on the server). Your personal webpage will be your process book for this project. We will start this today in class. It will be your responisbility to keep it up to date. (swf files can't be uploaded to your blog.) Make a folder for this project that you can upload to the web (no spaces not punc except _). in that folder have an images folder (all lowercase) put a copy of your pdf in it, put all your .swf files in the images folder. (always do that first, put a copy of whatever you want to link on your page into the images folder first). open template. save as index into this project folder. update text, change color, change link color, link pdf, link .swf files. log into the KU server using FETCH. people.ku.edu, your user name, SFTP, your pass. drop your entire folder (that has your index.html file and the images folder in it) INTO the publc_html folder. (do not have anything in your web project folder except the index and the images folder with all your pdf and swf files in it. keep you project folder separate (fla files, tutorials etc) :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Open the photoshop first frame psd. save your first frame (or representative image) in the photoshop first frame file. save it as RGB, yourlastname.jpg (last name only). put it on the server before you leave class today. save your first frame (or representative image) in the photoshop first frame file. save it as RGB, yourlastname.jpg (last name only) Homework :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: I will be available to meet on Friday for feedbacka and help. -:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1) swf file (yourlastname.swf) on the server (please name it just your last name) 3) poster. printed out 18 x 24 (or larger NOT smaller) on the epson plotter. example is in our 200A lab. You design it that is the content and structure.
|
|
|
|
|
|
|