DOCSLIB.ORG

Simple Flash Animation Flash Is a Powerful Graphics-Oriented

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Simple Flash Animation Flash Is a Powerful Graphics-Oriented Simple Flash Animation Flash is a powerful graphics-oriented animation and programming environment. Flash has many uses, from simple movie animations to interactive games. This example contains no user interaction so it is not necessary to learn Flash’s programming language – ActionScript, but it will step you through creating a movie that runs for a specific period of time. 1. StartAll ProgramsAdobe Adobe Flash Professional CS6. To make a new movie, click on File New, and in the dialogue box, select “ActionScript 3.0” and click OK. 2. On the top of the flash interface that appears on the screen, you will see a classic Windows-style menu bar. Below the menu bar, is the stage, which looks like this: The stage shows the frame of your movie that was selected along the timeline. This is your design workspace. Below this is the timeline which looks like this: The timeline tells you which file is currently active, which layer is currently active, and at which frame in the movie you are. To the right of the window is a properties window. This is where you adjust the settings of the different objects you add to your movie. There is also a Library tab with all of the files. To the right of this window is a bar with various tools. 3. The first step in making your movie is to set up your workspace, which is unique to every movie. You should always name your file before you do anything. (FileSave AS …) If you know your canvas size, input that now by clicking the button in the properties panel. Next, make the background color similar to the one on your destination. Digital signage monitors in the College of Engineering have a light yellow/brown background, so pick a light yellow by clicking on the Stage color palette below the size button. Next, adjust your frame rate by clicking on the blue number to the right of FPS. 30 frames per second (fps) makes a nice, smooth movie. There is a trade off to adding more frames though; if you set a movie to 30 fps as opposed to 15, and they are both “x” seconds long, the 30 fps movie will have twice the frames as the 15 fps movie. In theory, this is not a problem, but while actually making the movie, there is a tendency to cut things too short. With this said, 30fps is ideal for viewing, 12 is on the low end and will look choppy, and higher than 30 can get unmanageable while making the movie. Now that the workspace is set up, we can start designing the first frame. 4. To add text, select the “T” icon from the vertical toolbar on the Right side of the window. Click once where you want the text to go, and start typing. You can adjust font, size, color, and other settings in the properties pane while the text (box) is selected. 5. Graphics can simply be added to the stage by dragging them in. If you have many graphics, see Flash help to use the image library. You can adjust an image’s proportions using the free transform tool, third from the top of the vertical toolbar. To resize an image without losing proportions, grab a corner while holding down the shift key, resize, then let up on the mouse before letting up on the shift key 6. Now that you have an idea of how to design in the Flash window, the next step is to animate your objects. In order to keep things simple and not take away from the message trying to be conveyed, make animations simple. They need not do anything more than provide a smooth transition between ideas. There are many ways to animate in Flash. If you want to learn ActionScript, you can code your own animations, giving you the ultimate flexibility in design. For our purposes, motion tweening does a fine job, and is simple to learn and use. 7. To use motion tweening, you need to have the object, or group of objects that will be animated on their own unique layer. Right click the object(s), and select “distribute to layers”. 8. Once all the objects are on their own layers, you need to tell Flash how and when you want the object to begin and end. Flash will take care of getting it from beginning to end. The following example shows how to transform a large circle into a small circle. 9. Start off by drawing a large circle on its own layer. To do this, select the oval tool from the shapes menu, ninth from the top on the vertical tool bar on the Right. Once the tool is selected, shift-drag to make a large circle. (dimensions of 252x252 would be ideal). Right-click the circle and select “distribute to layers” to put the circle in a new layer. 10. You just drew the first frame of the animation. Shapes, lines, and text in Flash need to be converted to symbols before they can be animated. When an object is converted to a symbol, we can create instances of it. This limits the amount of editing that can be done to the object to only simple procedures, like using the free transform tool. To convert an object to a symbol, either right-click the object and select “convert to symbol”, or tap the F8 key. Click OK when the dialogue box shows up. You now have a symbol that can be animated. 11. Depending on how long you want the animation to be, and the amount of fps you chose, click the frame on the timeline where you want the animation to end. Tap the F5 key. You will notice that all the frames up to and including the one you clicked turned gray. If you drag the playhead (the red bar over the timeline) over this gray area, you will not see anything change over the duration of those gray frames. Now that you have a static clip you will need to earmark the end as a keyframe. This lets Flash know that you either want to start or end an animation at that point. Click the last frame in the timeline and tap the F6 key. You will notice a black dot appear on that block. This means that the particular frame is a keyframe. 12. Now that the start and endpoint of the animation are defined, you need to make the end different from the beginning. Select the keyframe that you just made, (the one with the black dot) and transform the circle to a smaller one using the free transform tool. 13. If you were to play the movie as it is now, the circle would be big, and jump to a small one all of a sudden. To make a smooth animation out of this, which takes up the entire area between the beginning and the keyframe, select any frame before the ending keyframe. In the top menu bar click on insert, then Classic Tween. The gray box should turn light purple, and you will see an arrow pointing right over the length of the box. 14. To test out the animation, bring the timeline back to the beginning and tap the Enter key. To get a Flash movie that can be played on digital signage in .swf format, select “test movie” under the control menu, or tap Ctrl+Enter. Not only will a finalized movie looping in its own screen, but a movie in .swf format will show up in the same directory of the original movie. 15. Between the free transform tool and motion tweening, you will be able to make many neat-looking animations in Flash. Be creative. If you need inspiration, there are many sites on the internet that show simple Flash animations. Below are some basic guidelines, but the rest is up to you. Helpful Hints: SAVE OFTEN!!! • The more frames per second (fps), the smoother the animations. 12 should be the minimum, although keep it in mind that it looks choppy. 30 frames per second are nice and smooth, just make sure your animations don’t go by too quickly. • Find out your canvas size before you start • Be aware of your background color. The white, default stage color in your Flash window will not show up on digital signage; it will typically be a light brown or yellow on the big screen, so set your background to a similar color before you start. • Make your text BIG. Digital signage is like a highway billboard for the hallways; be sure it is readable at least ten feet from the screen. • Use Simple fonts that can be bolded for clarity, but AVOID WRITING IN ALL CAPS; proper writing style applies here as well. • Use contrasting colors for text. If you have a busy background, and one color won’t show up over everything, consider outlining the text. • Stay close to primary colors that are calming to the eyes. Have you ever tried reading something in neon or fluorescent colors? • Rule of Thumb: If it takes 10 seconds to read a headline, it should stay up for close to 20 seconds. • A complete message should take no more than half a minute to convey. • Transitions look great, but people will not read moving text. Make sure it freezes long enough for a person to read it completely. • It is easy to get carried away with graphics and animations. Don’t make your movie too busy: its purpose is to grab attention, then deliver a message.
Load more

Recommended publications
  • The Uses of Animation 1
    The Uses of Animation 1 1 The Uses of Animation ANIMATION Animation is the process of making the illusion of motion and change by means of the rapid display of a sequence of static images that minimally differ from each other. The illusion—as in motion pictures in general—is thought to rely on the phi phenomenon. Animators are artists who specialize in the creation of animation. Animation can be recorded with either analogue media, a flip book, motion picture film, video tape,digital media, including formats with animated GIF, Flash animation and digital video. To display animation, a digital camera, computer, or projector are used along with new technologies that are produced. Animation creation methods include the traditional animation creation method and those involving stop motion animation of two and three-dimensional objects, paper cutouts, puppets and clay figures. Images are displayed in a rapid succession, usually 24, 25, 30, or 60 frames per second. THE MOST COMMON USES OF ANIMATION Cartoons The most common use of animation, and perhaps the origin of it, is cartoons. Cartoons appear all the time on television and the cinema and can be used for entertainment, advertising, 2 Aspects of Animation: Steps to Learn Animated Cartoons presentations and many more applications that are only limited by the imagination of the designer. The most important factor about making cartoons on a computer is reusability and flexibility. The system that will actually do the animation needs to be such that all the actions that are going to be performed can be repeated easily, without much fuss from the side of the animator.
    [Show full text]
  • Jobs and Education
    Vol. 3 Issue 3 JuneJune1998 1998 J OBS AND E DUCATION ¥ Animation on the Internet ¥ Glenn VilppuÕs Life Drawing ¥ CanadaÕs Golden Age? ¥ Below the Radar WHO IS JARED? Plus: Jerry BeckÕs Essential Library, ASIFA and Festivals TABLE OF CONTENTS JUNE 1998 VOL.3 NO.3 4 Editor’s Notebook It’s the drawing stupid! 6 Letters: [email protected] 7 Dig This! 1001 Nights: An Animation Symphony EDUCATION & TRAINING 8 The Essential Animation Reference Library Animation historian Jerry Beck describes the ideal library of “essential” books on animation. 10 Whose Golden Age?: Canadian Animation In The 1990s Art vs. industry and the future of the independent filmmaker: Chris Robinson investigates this tricky bal- ance in the current Canadian animation climate. 15 Here’s A How de do Diary: March The first installment of Barry Purves’ production diary as he chronicles producing a series of animated shorts for Channel 4. An Animation World Magazine exclusive. 20 Survey: It Takes Three to Tango Through a series of pointed questions we take a look at the relationship between educators, industry representatives and students. School profiles are included. 1998 33 What’s In Your LunchBox? Kellie-Bea Rainey tests out Animation Toolworks’ Video LunchBox, an innovative frame-grabbing tool for animators, students, seven year-olds and potato farmers alike! INTERNETINTERNET ANIMATIONANIMATION 38 Who The Heck is Jared? Well, do you know? Wendy Jackson introduces us to this very funny little yellow fellow. 39 Below The Digital Radar Kit Laybourne muses about the evolution of independent animation and looks “below the radar” for the growth of new emerging domains of digital animation.
    [Show full text]
  • LEVY-MASTERSREPORT-2017.Pdf (7.541Mb)
    Copyright by Dylan Olim Levy 2017 The Report Committee for Dylan Olim Levy Certifies that this is the approved version of the following report: Animating History and Memory: the Productions and Aesthetics of Waltz with Bashir and Tower APPROVED BY SUPERVISING COMMITTEE: Supervisor: Lalitha Gopalan Charles Ramìrez Berg Animating History and Memory: the Productions and Aesthetics of Waltz with Bashir and Tower by Dylan Olim Levy, B.A. Report Presented to the Faculty of the Graduate School of The University of Texas at Austin in Partial Fulfillment of the Requirements for the Degree of Master of Arts The University of Texas at Austin May 2017 Abstract Animating History and Memory: the Productions and Aesthetics of Waltz with Bashir and Tower Dylan Olim Levy, M.A. The University of Texas at Austin, 2017 Supervisor: Lalitha Gopalan Films like Waltz with Bashir (2008) and Tower (2016) are unique in that they not only fit within accepted frameworks of documentary filmmaking, but they also use animation as their primary method of storytelling. Anabelle Honess Roe thoroughly explores animated documentaries in her book Animated Documentary, arguing that animation is used in these kinds of films to either “substitute” for traditional means to represent the real world (24), such as live action footage, or to “evoke” the psychology, emotional states, and other subjective experiences of an individual (25). Ultimately, Roe argues that animation is a suitable “representational strategy for documentary” filmmaking because of its “visual dialectic of absence and excess” (39). This report applies Roe’s arguments to the analysis of the aesthetics and roles of animation in Waltz with Bashir and Tower.
    [Show full text]
  • Exploring the Magical Girl Transformation Sequence with Flash Animation
    Georgia State University ScholarWorks @ Georgia State University Art and Design Theses Ernest G. Welch School of Art and Design 5-10-2014 Releasing The Power Within: Exploring The Magical Girl Transformation Sequence With Flash Animation Danielle Z. Yarbrough Follow this and additional works at: https://scholarworks.gsu.edu/art_design_theses Recommended Citation Yarbrough, Danielle Z., "Releasing The Power Within: Exploring The Magical Girl Transformation Sequence With Flash Animation." Thesis, Georgia State University, 2014. https://scholarworks.gsu.edu/art_design_theses/158 This Thesis is brought to you for free and open access by the Ernest G. Welch School of Art and Design at ScholarWorks @ Georgia State University. It has been accepted for inclusion in Art and Design Theses by an authorized administrator of ScholarWorks @ Georgia State University. For more information, please contact [email protected]. RELEASING THE POWER WITHIN: EXPLORING THE MAGICAL GIRL TRANSFORMATION SEQUENCE WITH FLASH ANIMATION by DANIELLE Z. YARBROUGH Under the Direction of Dr. Melanie Davenport ABSTRACT This studio-based thesis explores the universal theme of transformation within the Magical Girl genre of Animation. My research incorporates the viewing and analysis of Japanese animations and discusses the symbolism behind transformation sequences. In addition, this study discusses how this theme can be created using Flash software for animation and discusses its value as a teaching resource in the art classroom. INDEX WORDS: Adobe Flash, Tradigital Animation, Thematic Instruction, Magical Girl Genre, Transformation Sequence RELEASING THE POWER WITHIN: EXPLORING THE MAGICAL GIRL TRANSFORMATION SEQUENCE WITH FLASH ANIMATION by DANIELLE Z. YARBROUGH A Thesis Submitted in Partial Fulfillment of the Requirements for the Degree of Master of Art Education In the College of Arts and Sciences Georgia State University 2014 Copyright by Danielle Z.
    [Show full text]
  • How to Create Animations
    Adobe Flash Professional Guide How to create animations Overview of tweening A tween is an animation you create by specifying a value for an object property in one frame and another value for that same property in another frame. Adobe Flash Professional calculates the values for that property between those two frames. The term “tween” comes from the phrase “in between.” You can tween movie clip, graphic, and button symbols and text fields. A tween span is a group of frames in the timeline in which an object on the Stage can have one or more properties changed over time. A tween span appears in the timeline as a group of frames in a single layer with a blue or green background. You can select a tween span as a single object and drag it from one location in the timeline to another, including to another layer. Only one object on the Stage can be animated in each tween span. This object is called the target object of the tween span. A property keyframe is a frame within a tween span where you explicitly define one or more property values for the tween target object. Each property you define has its own property keyframes. If you set more than one property in a single frame, the property keyframes for each of those properties reside in that frame. You can view each property of a tween span and its property keyframes in the Motion Editor. You can also choose which types of property keyframes to display in the timeline from the tween span context menu.
    [Show full text]
  • Cartoon Animation Free
    FREE CARTOON ANIMATION PDF Preston Blair | 224 pages | 25 Oct 1996 | Walter Foster Publishing | 9781560100843 | English | Laguna Hills, CA, United States ToonyPhotos - Turn Photos into Cartoons Animation is a method in which figures are manipulated to appear as moving images. In traditional animation Cartoon Animation, images are drawn or painted by hand on transparent celluloid sheets to Cartoon Animation photographed and exhibited on film. Today, most animations are made with computer-generated imagery CGI. Computer animation can be very detailed 3D animationwhile 2D computer animation can be used for stylistic reasons, low bandwidth or faster real-time renderings. Other common animation methods apply a stop motion technique to two and three-dimensional objects like paper cutoutspuppets or clay figures. Commonly the effect of animation is achieved by a rapid succession of sequential images that minimally Cartoon Animation from each other. The illusion—as in motion pictures in general—is thought to rely on the phi phenomenon and beta movementbut the exact causes are still uncertain. Television and video are popular electronic animation media that originally were analog and now operate digitally. For display on the computer, techniques like animated GIF and Flash animation were developed. Animation is more pervasive than many people realize. Apart from short filmsfeature Cartoon Animationtelevision series, animated GIFs and other media dedicated to the display of moving images, animation is also prevalent in video gamesmotion graphicsuser interfaces and visual effects. The physical movement of image parts through simple mechanics—in for instance moving images in magic lantern shows—can also be considered animation. The mechanical manipulation of three-dimensional puppets and objects to emulate living beings has a very long history in automata.
    [Show full text]
  • Flash Animation a Beginner’S Course
    Flash Animation A Beginner’s Course Table of Contents About the Workshop .................................................................................................... i Prerequisites................................................................................................................ i Workshop Objectives ................................................................................................... i Getting Started ........................................................................................................... 1 Creating a Flash Document ................................................................................................. 1 Familiarizing Flash Interface ............................................................................................... 2 Managing Workspace ......................................................................................................... 3 Setting Movie Preferences .................................................................................................. 3 Objects and Drawings ................................................................................................. 4 Vector vs. Bitmap ................................................................................................................ 4 Setting Tool Options and Creating a Shape ........................................................................ 5 Reshaping an Object ........................................................................................................... 5
    [Show full text]
  • Foundation Flash Cartoon Animation
    Foundation Flash Cartoon Animation Tim Jones Barry J. Kelly Allan S. Rosson David Wolfe Foundation Flash Cartoon Animation Copyright © 2007 by Tim Jones, Barry J. Kelly, Allan S. Rosson, David Wolfe All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-59059-912-9 ISBN-10 (pbk): 159059-912-8 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected], or visit www.springeronline.com. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected], or visit www.apress.com. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work.
    [Show full text]
  • Introduction: Frictive Pictures 1 Cartoon Internationale
    Notes Introduction: Frictive Pictures 1. There may be even earlier social groups united by an interest in pre-cinematic visual technologies or animation-like performances such as shadow-plays. But before animation came into being as a cinematic genre between 1898 and 1906 (Crafton 1993, 6–9, 21), these groups could not be properly termed “anima- tion fan communities,” and should be called something else, such as “zoetrope hobbyists” or “utsushi-e [Japanese magic lantern] audiences.” For that reason, I have chosen to begin with film animation in the early twentieth century, starting specifically in 1906–7 with the earliest verifiable hand-drawn ani- mated films in the West and somewhat less-verifiable experiments in Japan. Readers interested in the international influences of earlier visual media such as painting and printmaking on animation should consult Susan J. Napier’s fascinating history of fine arts influences between Japan and Europe, From Impressionism to Anime (2007). 1 Cartoon Internationale 1. For more on the technical specs of the Matsumoto Fragment, see Frederick S. Litten’s “Japanese color animation from ca. 1907 to 1945” available at http:// litten.de/fulltext/color.pdf. 2. Since the mid-2000s, there has been a small but heartening swell of inter- est in recovering and preserving early anime among film conservators and distributors. Some major DVD collections of pre-1945 animation include: Japanese Anime Classic Collection. Tokyo: Digital Meme, 2009 (4 discs, English, Korean, and Chinese subtitles); The Roots of Japanese Anime Until the End of WWII [United States]: Zakka Films, 2008 (English subtitles); Ōfuji Noburō Collected Works.
    [Show full text]
  • Animation Fandom in North America and East Asia from 1906–2010 By
    Animating Transcultural Communities: Animation Fandom in North America and East Asia from 1906–2010 By Sandra Annett A thesis submitted to the Faculty of Graduate Studies of The University of Manitoba in partial fulfillment of the requirements for the degree of DOCTOR OF PHILOSOPHY Department of English, Film, and Theatre University of Manitoba Winnipeg © 2011 Sandra Annett Abstract This dissertation examines the role that animation plays in the formation of transcultural fan communities. A ―transcultural fan community‖ is defined as a group in which members from many national, cultural, and ethnic backgrounds find a sense of connection across difference, engaging with each other through a mutual interest in animation while negotiating the frictions that result from their differing social and historical contexts. The transcultural model acts as an intervention into polarized academic discourses on media globalization which frame animation as either structural neo-imperial domination or as a wellspring of active, resistant readings. Rather than focusing on top-down oppression or bottom-up resistance, this dissertation demonstrates that it is in the intersections and conflicts between different uses of texts that transcultural fan communities are born. The methodologies of this dissertations are drawn from film/media studies, cultural studies, and ethnography. The first two parts employ textual close reading and historical research to show how film animation in the early twentieth century (mainly works by the Fleischer Brothers, Ōfuji Noburō, Walt Disney, and Seo Mitsuyo) and television animation in the late twentieth century (such as The Jetsons, Astro Boy and Cowboy Bebop) depicted and generated nationally and ethnically diverse audiences.
    [Show full text]
  • The Potential of 2D Animation As a Digitally Produced Art Form
    2D Animation as a Digitally Produced Art Form | 1 The Potential of 2D Animation as a Digitally Produced Art Form Tyler J. Kupferer www.base14.com December 1, 2008 2D Animation as a Digitally Produced Art Form | 2 The computer graphics imagery revolution of the past decade has brought 3D animation to the forefront in Hollywood cinema, leading to the popular opinion that 2D animation is obsolete. However, digital animation techniques are giving rise to a new incarnation of 2D animation as a digital art form. The quality, accessibility, efficiency and vitality of digital production allows for new styles of 2D animation not possible before the advent of computer graphics. Computers allow for entirely new ways of producing, managing and enjoying animated films. Much of the public sees 3D animation as the product of this digital revolution, and anything else as obsolete. But 3D animation is only half of a larger digital revolution for all forms of animation. The success of 3D has led to a major oversight of the potential for 2D animation in a digital medium. This potential will begin to be realized in the coming years as digital 2D animation processes mature and rising artists push the boundaries of innovation that digital production systems allow. Background While many pioneers of animation were dabbling in film and drawings during the late 1800s, the first true example of American animation is by James Stuart Blackton, who was introduced to filmmaking by Thomas Edison. Blackton produced several pieces combining live action with some stop‐motion animation, and eventually made Humorous Phases of Funny Faces (Fig.
    [Show full text]
  • Limited Animation Budget Cutting and Time Saving Technique by Prof
    D’source 1 Digital Learning Environment for Design - www.dsource.in Design Course Limited Animation Budget Cutting and Time Saving Technique by Prof. Phani Tetali and Phidi Pulu IDC, IIT Bombay Source: http://www.dsource.in/course/limited-animation 1. Introduction 2. History 3. Development 4. Techniques 5. Processes 6. References 7. Video 8. Contact Details D’source 2 Digital Learning Environment for Design - www.dsource.in Design Course Introduction Limited Animation Budget Cutting and Time Saving Technique Limited animation is a technique or process in animation where reusing of animated frames, mirroring of images by (characters) and drawing new frames only when necessary are done to limit down the work, save time and ulti- Prof. Phani Tetali and Phidi Pulu mately reduce the budget. IDC, IIT Bombay Source: http://www.dsource.in/course/limited-animation/ introduction 1. Introduction 2. History 3. Development Limited Animation runs on 4-12 or 8-12 frames per second. It started as an artistic experiment, later its cost cut- 4. Techniques ting capability made it more popular. 5. Processes 6. References 7. Video 8. Contact Details D’source 3 Digital Learning Environment for Design - www.dsource.in Design Course History Limited Animation Budget Cutting and Time Saving Technique Limited Animation could be traced back to films like “The Newlyweds” by French animator Emile Cohl (1857-1938). by He adopted this film from a popular comic strip by McManus in an American newspaper. It included recurring Prof. Phani Tetali and Phidi Pulu players, but featured little to no actual animation of them; most of the human figures were static.
    [Show full text]