Home

Design and Applied Technology (Secondary 4 – 6)

1. Design and Applied Technology Secondary 4 6 Es 7 Es Clone Stamp Tool 5 The clone stamp tool paints a ae Pattern Stamp Tool 5 with a sample of an image aA om Be History Brush Tool The history brush tool Sif Art History Brush paints a copy of the selected state or snapshot into the current image window A sales The magic eraser tool erases HF Background Eraser Tool 27 Magic Eraser Tool solid coloured areas to transparency with a single click DE E radient Too The gradient tools create g Dai Duat Ted straight line radial angle reflected and diamond blends between colours The paint bucket tool fills similarly coloured areas with the foreground colour oe ae The blur tool blurs hard edges A Sharpen Tool in an image va Smudge Tool The sharpen tool sharpens soft edges in an image The smudge tool smudges data in an image Design and Applied Technology Secondary 4 6 aFey x en a i Ga ee Podge Too The dodge tool lightens areas in A m Burn Tool an image a Sponge Tool The burn tool darkens areas in an image The sponge tool changes the colour saturation of an area n e The path selection tools le Direct Selection Tool make shape or segment selections showing anchor points direction lines and direction points T T Horizontal Type Tool The type tools create type on an IT Vertical Type Tool image o
2. B is bigger than A rena M a Seeing an image T Ga W a VST a Vis O A a A i i r B When we interpret incorrectly we understand the object wrongly Such incorrect interpretation is called illusion Illusion is sometimes a useful tool for expressing certain ideas or concepts in the context of art and animation Design and Applied Technology Secondary 4 6 a Explain what human perception is when something is seen through a human eye b In figure there are three cylinders in each Group A and Group B Does Group A or Group B appear to have cylinders of the same sizes Explain using human visual perception A B 1 1 3 Source vs Destination A source is a basic element of a communication or information processing model It is the origin of a message which will subsequently be encoded and transmitted via a channel to the receiving end which is a destination Design and Applied Technology Secondary 4 6 c Source vs Destination A sound source is an example of a source Human perceive sound by hearing one of the six senses of human as described in a previous section The transmission of sound is a series of vibrations sound wave that travel with air as a medium The vibrations hit a person s ear drum s which in turn convert s the vibrations into messages for the brain to interpret 1 e becoming audible In this case the person a broader sense or the ear
3. Di Click Set Keys to create the first keyframe c 0 200 gt i 100 150 200 S E sjm ayfa Auto Key Selected a NG Kep Filters Him Click and drag to select and move The first keyframe We are going to create a 4 sec camera animation change the time indicator to 100 frames lt 107200 __ P zx 10 ll i 40 BU 0 ai s0 1 0 1 Camera Selected S H x 0 501 a 3 30 Design and Applied Technology Secondary 4 6 lt lt EEE Ee oe T De o ee SST gt ie a e Move the camera backward on the top view until you see the whole logo in the Camera 01 view Also adjust the position in the front view 1 95 I I RR TE Le e al Bi tis A JP e ISe E o p p p 0 p 170 1 Camera Selected ig E TE 501 7 177 005 F 7 329 aa Grid 10 0 Or a Auto gao Maja Click and draq to select and move objects Add TimeTaa Key Filters ala F Click Set Keys once you want to confirm the sec keyframe Now you can see the animation that you have just created pag an ne e O with the play animation button WUT Play animation PA Step 8 Create the Logo Rotation Animation We are now going to create rotation animation for the logo gt Goto frame 100 where the camera animation just stop select the logo and click on the OF Set Keys button bal to create the first key frame to create the gt Go
4. PEAK Institute of Professional Education and Knowledge p D Galea ais 5 gE L 6t hy Ok Fi 20 O2 Hema Ba M s 25 3 Chanminglane Microsoft Internet Explorer BRO SED WA BREA IAM RAD ar O O MAO lee kma 2 2 a LAs Hatt D a http Avww channinglane org catalog index php v f ia Google G G08 OE YW Bookmarksy G69 blocked P Check v 4 AutoLink v H AuioFl e Sendtow A Q Settings A Chatec inc te Ul My Account Es Cart Contents Checkout Top Catalog z Categories x a TY Y Charmin What s New Here A Bracelet 30 Earring 16 Hair m 6 Welcome Guest Would you like to log yourself in Or w ould you prefer to create an account A AF Handbag 20 p ye gt Learning Class Necklace 52 Welcome a om Semi Gemstones Pendant 3 ae inks Phone strap 2 New Products For May Ring 30 Shopping Watch 8 4 Cart Designer s a Collection 123 A O items Bestsellers ellers Designers AMYW1001 Ladie silver ring Men silver ring Men silver ring Ladies silver ring Tied heart Two alia one U D 45 05 USD 42 47 USD 45 05 USD 45 05 USD 45 05 together EEN J USD 4247 aber at cme pearls and j beads 02 SHH N 1007 03 AMY N 1006 04 SHH B 1001 Shaking Tree yukW1002 i yukW1001 yukR 1005 yukR 1004 yukR 1003 yuKN1011 05 shhN1008 USD 32 18 USD 38 35 USD 38 35 USD 10 04 USD 10 04 USD 10 04 USD
5. i y j Mii i Bad Bad Better No headroom Excessive headroom Right spacing headroom Pre filming planning can help the project team to decide what the important part of event to be recorded is and what is not Otherwise the whole event may have to be recorded in order not to miss any critical moments Formal production with scripts marks the starting point of a movie migrating from abstraction to reality Design and Applied Technology Secondary 4 6 Phase 3 Postproduction Postproduction or post is the tasks done after shooting It is the final stage before a masterpiece goes life Postproduction includes different tasks such as downloading footage onto a computer and editing it using Movie Maker Ulead Video Studio iMovie etc These software packages allow users to trim video clips add transitions between keyframes sequence the clips add music sound effects and voice overs add titles apply special effects etc It should be noted that a Downloading footage is a real time activity requiring the same length of time as the video lasts for b Saving video in hard disk is space consuming It needs about one gigabyte of storage for every five minutes of video Design and Applied Technology Secondary 4 6 Case Study A Promotion Campaign for Hong Kong The major study of this project is to let students analyse the usage of multimedia products in the Hong Kong economical market Then they nee
6. 3 operations Union Intersection and different KF we Design and Applied Technology Secondary 4 6 E a a Er mi a r Sia see z i a 25 Clone the train Cabinet and hide the new Cabinet at the Display Panel 26 Select the Train body and the Boolean Compound Object icon at the Compound Tab 27 Pick the Operand B button and select the Train Cabin object 28 Unhide all display panel and complete the Train Cabinet as following with the use of Boolean A polygon is a type of deformable object Polygons are useful for creating complex object You can convert a primitive geometry into an editable Polygon The method of modeling in polygon is to start with a simple primitive collapse it to an editable polygon and then move vertices and extrude and scale polygons to get the basic form you want Design and Applied Technology Secondary 4 6 SX EE EEE Oe Practical Task 2 Polygon modelling 1 In the front viewport drag out a cylinder with the following dimensions Radius 150 Height 100 Height Segments 2 Cap Segments 2 Sides 30 2 In the Modify panel right click cylinder in the stack and choose Convert To Convert to Editable polygon 3 3 Go to the vertex sub object level With the Circular option chosen from the Selection Region flyout select the inner ring of vertices of the cylindercap 5 In the front view select the vertices on t
7. The aim of the resource materials is to provide information on the Compulsory and Elective Part of the DAT Secondary 4 6 to support the implementation of the curriculum The resource materials consist of teacher s guides and student s learning resource materials of each Strand and Module of the DAT Secondary 4 6 arranged in eight folders All comments and suggestions related to the resource materials may be sent to Chief Curriculum Development Officer Technology Education Technology Education Section Curriculum Development Institute Education Bureau Room W101 West Block 19 Suffolk Road Kowloon Tong Hong Kong Introduction Chapter 1 Media Literacy 1 1 Communication via digital media 1 2 Digital media products and related business 1 3 Social economic and technological factors Chapter 2 Digital Media Design 2 1 Conceptual development 2 2 General rules of visual composition 2 3 Basic principles of communication design in creating digital media Chapter 3 Digital Media Production o OOS OS Gt 1 Ce ee Ee Ee ee El E E E a E E en 2 3 1 Project planning and idea presentation methods 3 2 Manipulation of visual and audio equipment 3 3 Application software Theme based Learning Tasks Design Project Global Warming Design Project School Logo Animation Design Project School Life Video Case Study A Promotion Campaign for Hong Kong Assessment Tasks Quiz Design Projects
8. bigger e Negative Afterimaging Negative afterimages are the loss of eyes sensitivity resulting from over simulation of the eyes In many cases when encountering over simulating images eyes move away slightly from the images automatically the movement is small enough to be unconscious to the viewers However if the image is too large such that the slight movement does not matter the eyes more exactly some of the cone cells in the eyes may feel tired and stop transmitting any G Design and Applied Technology Secondary 4 6 colour signals to the brain If the eyes move to look at a white area then those cone cells concerned may not respond completely while the cells nearby are normal These normal cells thus send stronger signals to the brain then those cone cells do As a result the brain interprets the colours received as opposite colours forming negative afterimages lt Design and Applied Technology Secondary 4 6 mee me a a is i Wa 2 3 BASIC PRINCIPLES OF COMMUNICATION DESIGN IN CREATING DIGITAL MEDIA It is a very common practice for business and even non business organizations to deliver their corporate messages with graphic design What designers have to do is to create designs that can convey these messages in a well organized and impressive manner To be qualified to do so designers have to have the basic principles of communication design knowledge skills an
9. how interesting gt Mirror by repeating the respondent s answers in own words 4 Factual questions gt How old are you 5 Numerical Questions 6 Reflective Questions gt Comments ego reinforcing manner gt You seem to enjoy teaching 111 More things to do 1 Learn from the interview 2 Consider moral issues 3 Pay attention to body language 4 Maintain eye contact and 5 Conduct the interview in a suitable environment Design and Applied Technology Secondary 4 6 3 1 6 Storyboarding Designers and directors use films and or animations as a visual language to illustrate the project objectives Thus they have to know how to make use of each individual shot within a scene a Basic Structure of a Single Frame Storyboard A storyboard has to be clearly introduced the following elements G Camera Framing Angles and Movements Refer to Section 3 2 3 Video shooting for details i Shot Duration 111 Audio and Dialogues Image Shot description Describe actions as well as Camera angles and movement Sound Indicate ideas for key effects such as ambient sound narration and music Shot Duration How long will the action movement phrase or shot be b Basic Structure of a Storyboard Sheet A single frame of storyboard cannot tell the whole story but a storyboard sheet containing many frames does Such a sheet describes the flow of the story The following templa
10. is Er Tie c How props are being designed i Ergonomics According to International Ergonomics Association definition as of 2007 ergonomics is a biological science used to design objects and systems which study the relation between humans and their environments Ergonomics is an applied science that maximizes human productivity by minimizing operators fatigue and discomfort through specially designed equipment Ergonomics is also known as biotechnology human engineering and human factors engineering Details can be found from http en wikipedia org wiki Ergonomic Reference movie Twins effect 2003 i Colour and Texture Colour and texture are two important elements to prop design Props should look like what they are supposed to be For example in A Chinese Tall Story 2005 the Buddha statue was made of Styrofoam By using the effects of colour and texture a piece of foam was turned into an old and weathered bronze statue Reference movie A Chinese Tall Story 2005 111 Materials For safety purpose dangerous weapons are usually replaced by dummies in films or plays For example knifes are made of EVA foam This kind of material is lightweight and shockproof but rigid enough to be shaped Design and Applied Technology Secondary 4 6 e r I is Er Saas eee Materials There are different kinds of materials suitable for making props Consider the following questions before making a decision
11. The type mask tools create a selection in the shape of type hy mg Pen Too The pen tools let you draw smooth edged paths vy Add Anchor Point Tool N Delete Anchor Foint Tool s Sv Freeform Fen Toal E Convert Point Tool m Rectangle Tool The custom shape tool makes Lg Rounded Rectangle Tool customized shapes selected from C 3 Ellipse Tool Polygon Tool AN Line Tool Custom Shape Tool a custom shape list Design and Applied Technology Secondary 4 6 F Fj Eyedropper Tool Color Sampler Tool fe Measure Tool Colour settings Quick Mask mode The eyedropper tool samples colours in an image The hand tool moves an image within its window The zoom tool magnifies and reduces the view of an image The current foreground colour appears in the upper colour selection box in the toolbox the current background colour appears in the lower box Quick Mask mode lets you edit any selection as a mask without using the Channels palette and while viewing your image Design and Applied Technology Secondary 4 6 E D Making selections x Method 1 Using Magic Wand Tool ks The magic wand tool lets you select a consistently coloured area for example a red flower without having to trace its outline You specify the colour range or tolerance for the magic wand tool s selection Tolerance so I Anti aliased 7 Contiguo Tolerance fo I Anti aliased Fe Contiguou
12. To do List c Findings in background research information optional d Documents and reference materials collected optional e Ideas generated optional Design and Applied Technology Secondary 4 6 PROJECT LOG SHEET Project Title Project Supervisor Week Number Date Activities and Progress Made Sample Logbook Design and Applied Technology Secondary 4 6 3 1 5 Scriptwriting According to digital media production a script is as important as to drama production A good script gives readers a thorough understanding about the production In addition scriptwriting 1s a detailed plan that combines visual and text elements for video production or sound effects and text for audio production As a result in order to achieve its maximum benefits the format and language of scripts have to be reader centric and reader friendly Write a five minute script for a five character role play either a short video documentary or a comedy about your school s open day with a scene list and planning and Produce the video accordingly a How to do Research Research is the process of information collection It could be a document or a real life research Document research means that information is collected from documents such as books magazines newspapers and newsletter Real life research refers to daily observations interview etc A good research can enrich the story and the production as a
13. You can create empty layers and add content to them or you e m E can create new layers from existing content When you create Layers X Channels Paths OO Ps a new layer it appears either above the selected layer or Mermal Opacity within the selected layer set in the Layers palette Lock O uy i Fill joos Layer sets help you organize and manage layers You can use layer sets to easily move layers as a group to apply attributes and masks to groups of layers and to reduce clutter in the Layers palette You cannot create a new layer set within an existing layer set Lf ao a A q E 1 Create a new layer 2 Delete layer 5 Displaying the contents of layers You can use the Layers palette to selectively hide and display Layers the contents of layers layer sets and layer effects You can y y y Fass Thr Opacity 100 also specify how transparent areas are displayed in the image lok TF RS Fe Oe In the Layers palette click the eye icon next to a layer _ gt odighlights layer set or layer effect to hide its content in the document window Click in the column again to redisplay the content 1 Select a layer or layer set in the Layers palette 2 Drag the layer to the New Layer button SI or drag the layer set to the New Layer Set button 4 6 Duplicating layers Duplicating layers is an easy way to copy content within an image or between images When duplic
14. a b c d e f Is the material light enough for transportation Can the material transformed into desired shapes easily Is the material durable Is the material waterproof Is the material heatproof Is the material shockproof iv Simplification Making props too fancy and meticulous may delay the production process In order to find balance between quality and time the following tips may help gt Make props with ready made products gt Apply modular design concept to simplify the workflow and Separate props into various parts and assign to craftsmen with different expertise In Purple Storm 1999 there was a protective tank for biochemical weapon The tank was made of modular pieces that were sprayed with silvery paint Reference movie Purple Storm 1999 Design and Applied Technology Secondary 4 6 a 1 I ie ca as ie 3 2 MANIPULATION OF VISUAL AND AUDIO EQUIPMENT There are various types of visual and audio equipments available in the market A good designer is expected to have basic skills to master these equipments and have basic knowledge of capturing media products from different environments 3 2 1 Sound Recording Sound and voice have indispensable effects to every film movie animation or even in presentation of a sequence of still images Sound and voice provide audience with atmospheres that producers establish and leading moods of audience towards desired directi
15. Binary means duals or pairs Instructions are received in the form of opposites for example a On or Off b Positive or Negative c Something or Nothing d Light or Dark and e Yes or No Design and Applied Technology Secondary 4 6 Decimal Since computers recognize only O s and 1 s which represent different levels of electrical potentials such instructions have to be converted into binary digits or bits in short accordingly ASCII American Standard Code for Information Interchange or ASCII is a system converting English alphabets numbers and symbols into numbers and ultimately binary codes ASCII codes are used in many computers and IT equipment that work with text Over the years ASCII has evolved into many modern character encoding systems ASCII s original version represents 128 characters with 7 bit binary numbers from 0000000 to 1111111 For example an a in ASCII is 1100001 while an A is 1000001 Successors to ASCII can represent more characters with 8 bit binary numbers 1I S amp 4 0 1234567 89 lt gt ABCDEFGHUKLMNO PQRSTUVWXYZ JA_ abcdefghijklmno pqr s tuvwxyz ye aT T T Bo n Tr zx a 1 2 DIGITAL MEDIA PRODUCTS AND RELEVANT BUSINESS Design and Applied Technology Secondary 4 6 Digital media products are ubiquitous nowadays They are no longer luxuries as they were a decade ago many of
16. Hands on Assignment Useful Websites References Glossary of Terms Acknowledgements Appendices User Guide on Selected Software Basic Function of PhotoShop Basic Function of 2D Animation Flash 3D Animation 3 practical tasks l 2 16 27 4 42 50 66 82 83 99 118 oe Eo ee 134 136 139 144 149 152 153 157 158 160 164 165 169 170 171 189 201 TION Information technology IT has provided artists with many creative options that people could not imagine in the old days However IT is more a state of the art tool than a source of the ideas A creative process in fact relies heavily if not solely on the contents This module will show students how to create works both traditionally and digitally While many students are skilled with digital media software they need to know how to be more creative and how their concepts and ideas can be realized using digital media professionally After studying this module students will be equipped with solid foundation and conceptual ideas for creating digital media works Rather than being used mostly in the production processes digital tools were use in design processes in the recent years Having said that the goal of creating best possible works has never changed regardless of the media used The approach of this module addresses both practical and theoretical points of view Design and Applied Technology Secondary 4 6 CHAPT
17. Physical characteristics any bodily deficiency processed in a system left or right hand etc Tasks to be bias health etc Software performed what is to Cognitive programs or be accomplished characteristics display used mental processing of Instructions data learning ability commands and conceptual skills etc rules to be followed by human keyboard mouse monitor and information are UOTOLIOU T uono users Certain items of human or a computer can be both input and output channels depending on how they perform their functions For example an eye as an item of a person can receive visual signals or messages and informs a system to process it Similarly a monitor can be both an input device touch screen and an output device to a computer E Design and Applied Technology Secondary 4 6 Further input and output are relative As illustrated below the outputs from a user are Input inputs to a computer After Output rocessing the user s inputs the s Computer computer generates outputs l which become inputs to the user nput Input Output Interactivity This cycle iterates in an interactive fashion Game Hardware Interfaces and Accessories A game interface is perhaps one of the most typical examples of HCI nowadays The game with hardware and software integrated as a whole shows a particular scenario to the player s output from the game and i
18. members of a group With the book the members themselves can easily recognize if the group is newly formed or remember if the group is to be dissolved each other The website Facebook is a social networking website that makes use of this idea Facebook allows new and old friends to appear in a virtual global meeting place Reference www facebook com iTune iTune is a digital media player software It can manage the contents played in Apple s iPod and iPhone Customers can purchase and download songs videos games and books etc to their devices through websites such as iTune Store ye Design and Applied Technology Secondary 4 6 13 SOCIAL ECONOMIC AND TECHNOLOGICAL FACTORS This section will compare different digital media products in the local and global markets Given the media rich society nowadays its pros and cons of social economic and technological aspects will be discussed 1 3 1 Traditional Media Today media are can be divided into two means namely digital and traditional or legacy As described in the previous section digital media refers to computer and video games digital games e books etc Traditional medias refer to the communication and expression forms that were the only means before the ubiquitous spread of the Internet For example printing press radio video television and telephone Of course they are still in use though their impact and profits may not be as large as in the old d
19. 19 05 06 Wi Tied heart together SARS 06 Wired peace at w Hill gt eij AB CIC YS A typical e shop Design and Applied Technology Secondary 4 6 a Website Design and Prototypes Designing a website has to take three factors into consideration Firstly and most importantly whether or not the contents are what the target readers want Secondly how the contents are presented 1 e the attractiveness of the website s graphics text videos etc Thirdly whether or not the website s technology is acceptable it may not necessarily be a state of art one For example an excellently designed website may not be popular if it takes ten minutes for the web surfers to download The first factor needs a writer the second a designer and the third a technician Designers have to ensure that the objects in websites are of reasonable sizes so that web surfers can download the objects within a reasonable time In addition similar to printing materials website contents have to be presented in a clear and logical manner Again similar to the traditional medium i e printing materials some websites consist of wide range of much information such as Wikipedia org and Yahoo com while some focus on a certain item event or person etc Examples are photo sharing websites music download websites and idol s websites An example is football star David Backham s personal site If you are aske
20. 2 2 5 Laws of Grouping Laws of grouping are often used in printed materials and website layout development Grouping things together can help readers to relate items in certain logics Grouping can be achieved by alignment design proximity with whitespace and some other techniques Design and Applied Technology Secondary 4 6 Er a m aeeoo r a 1 Phe nha ee e a H e H Laws of Grouping Alignment The menu at the left hand side of a webpage of VIC s_ website http www vtc edu hk vtc web template text jsp tidr_id 196 shows how alignment works There is an imaginary origin at the top left corner of the menu and an imaginary alignment axis along the left Functions that are near the axis most Corporate Information Home About VTC Member Institutions etc are of the same group Functions a step away The Council Senior Directorates etc belong to another Text Only Siap pE Studying at VTC Alumni Media Contact VTC Course Search Quik Links Corporate Information gt About TC i m s Corporate Information a Print Home About Vocational Training Council a Tha Council Established in 1982 the Vocational Training Council VTC is the largest vocational education aie training and professional development group in Hong Kong YTC provides valuable Senior Directorates credentials for over 180 000 students each year through a full ra
21. 3 In the front view click and create a cylinder with radius 30 units o Ae Eo and height 210 units Standard Primitives Object Type i 4 Go to the Modify panel and change the parameter as follows AutoGrid V Radius 30 Box Coe Sphere Creosphere Height 210 P Tube Height Segments Torus _ Pyramid Sides 24 Teapot Plane 5 Change the name of the cylinder to Train Body at the top of the Modify panel Object ye Design and Applied Technology Secondary 4 6 Name edit box 6 Go to the Create Panel and Select from the Pull down list Extended Primitive Extended Primitives comprises a collection of complex primitives 7 Select ChamferCyl Chamfer Cylinder then enable AutoGrid x WA T Extended Primityves by clicking in the AutoGrid checkbox ee AutoGrid Iv Hedra Torus Knot ChamferBox Charafercyl il Tank Capsule i rl AutoGrid lets you automatically create objects on the Spindle L Ext surface of other objects by generating and activating a Gengon Ext dd temporary construction plane based on normals of the face Hose Frisa that you click Ring Wave What is normals NORMALS The normal of each face can point in a different direction A normal is a vector that defines which way a face or vertex is pointing The direction of the normal indicates the front or outer surface of the face or vertex 8 In the front vi
22. A primary character is the main character of the story gt A secondary character plays a significant role in the video despite not being the focus gt A tertiary character or extra may even have no dialogues at all Shooting Schedule A shooting schedule is a project schedule stating a detail shooting arrangement In many cases the quality of a movie is directly proportional to the time spent in the movie s preproduction Having a concrete objective before shooting can save the project team much time and effort such as shooting exactly what the team wants instead of shooting excessive shots for later editing Design and Applied Technology Secondary 4 6 Developing Idea There are several mandatory components when developing initial program ideas The first one is the program s subject What messages will the program communicate Who are the target audience How can ideas be best communicated to the audience Without program design and conceptualization i e subject treatment visual potential and feasibility program ideas can never be executed Subject A subject should be considered from at least two perspectives namely content and structure It is very important to address the questions of what message will be communicated and why it is important to the audience Treatment Upon identification of a subject the next question follows How should the program idea be presented Visual Potential Visual
23. New Century Ser Pine Forge Press Steve Curran 2000 Motion Graphics Graphics Design for Broadcast and Film Rockport Publishers Timothy Samara 2007 Design Elements A Graphics Style Manual Pageone Vaughan Tay 2001 Multimedia Making It Work Osborne McGraw Hill Wen Ching Su KX Jen Yen R Chang Franw Lee 4 4 2007 Application of Semiotics and Cognitive Psychology to Visual Design A X EIL EFH Design and Applied Technology Secondary 4 6 a GLOSSARY OF TERMS Alignment is the setting of text flow or image placement relative to Alignment a page column table cell or tab The type alignment setting is sometimes referred to as text alignment text justification or type justification Alpha Channel Alpha channel is the process of combining an image with a background to create the appearance of partial transparency Animatics Animated storyboards used for testing commercials previewing scenes of films and laying out rough templates for video game industry Annotations The act or process of furnishing critical commentary or explanatory notes Compositing In the film industry compositing refers to the artificial combination of two images or more in the same frame Connotation It refers to signs that are used as signifiers for a secondary meaning It contains also a cultural meaning of signs e g the word rose signifies passion Decoding A reverse process of encoding convert tho
24. SHH B 1001 Shaking Tree yukW1002 yukW1001 yukR1005 yukR1004 yukR1003 yukN1011 ys shhN1008 USD 32 18 USD 38 35 USD 38 35 USD 10 04 USD 10 04 USD 10 04 USD 19 05 06 Wired peace at Lt gt a http www chamminglene org catalog product_info php products_id 267 0sCsid Shaulohvloy bud 7arlulaiIto3 D RE Visit an e shop e g http shopping yahoo com to study the mobile shopping process and compare with the e commerce process c Interactive TV Watch television has been part of Hong Kong people s daily life for about four decades Traditionally television broadcasting is only in one direction viewers are the receivers Interactive television rewrites the story How interactive are interactive television Viewers can i Select programmes and even part of programmes among a collection of choices to watch anytime instead of following preset schedules ii Affect the story endings for example of programmes that they are watching by voting or other means ti Watch programmes over the Internet through computers or even mobile phones instead of either wireless or cable TV networks Reference www now com hk Design and Applied Technology Secondary 4 6 Is traditional media outdated The popularity of new digital media such as the Internet mobile phones and portable TV increased rapidly through the years Does it imply that traditional media such as newspapers magazines and TV broadcasting are obsolete Cas
25. Such movements can represent the movement of the subject or the movement of the observer Camera movements can also be interpreted as the change of distance and position between the camera and the object such as pan tilt tacking shot and zooming Design and Applied Technology Secondary 4 6 Pan Tilt For a tilt or camera rolling a position fixed camera moves up and down Design and Applied Technology Secondary 4 6 eet ee _ r st Er e Tifa Track For a track a camera moves as the subject moves Ke in ee Zooming Zooming brings objects from far positions to near zoom in or vice versa zoom out Zooming also enables exaggeration of a scene A zoom in shot maximize perspective distortion effect and zoom out minimizes it Design and Applied Technology Secondary 4 6 S T O P A N D Imagine that a lady is riding a bicycle for work in a morning a sequence which is made up of several shots the lady arrives at the building she works gets off the bicycle chains the bicycle to a bicycle stand takes off her gloves takes off her helmet tucks her gloves into the helmet walks into the building Every single minor detail is critical to the sequence as a whole Literally a well allocated shoot size combination should be 1 50 percent close ups and extreme close ups 2 25 percent medium shots 3 25 percent wide shots As such the sequence of the
26. among teenagers Teenagers communicate with mobile devices in voice and other forms such as text messaging picture exchange and social networking site e g Facebook visiting e Design and Applied Technology Secondary 4 6 E ee a m S 7 ae ee ioo me o ir a 2 4 Charminglane Microsoft Internet Explorer BE fx BRDO KED HA AREWA IAM RAW a 0O O AO Or kam O Ba DUK FED Eez te Google G v Go 2 O ES YY Bookmarksy 69 blocked P Check 4 AutoLink 9 AvwFill a Send tov A Q Settingsw Al Lill Top Catalog _ MyAccount Cart Contents Checkout Categories we Ps tT x Z TO p z E rmn What s New Here TEs Bracelet 30 Earring 16 i j Hair Ae 6 Welcome Guest Would you like to log yourself m Or would you prefer to create an account A oe Handbag 20 Sar rs Se rs Learning Class Necklace 52 Welcome r we gt s gt oi i A gt Semi Gemstones Pendant 3 K a Links Phone strap 2 Ring 30 Shopping Watch 8 Cart i Designer s Collection 12 i l h Sa 2 N AMYW1001 Ladie silver ring Men silver rin Men silver ring ring Ladies silver ring Tied heart Two become one USD 45 05 USD 42 47 USD 45 05 USD 45 05 USD 45 05 together heart Please Select w 01 Aqua string to z USD 42 47 USD 42 47 fia cee esBOrOr aca i beads ame 02 SHH N 1007 N 03 AMY N 1006 04
27. consumption and delivery formats Hand drawn animation 3D animation Design and Applied Technology Secondary 4 6 a New Trend of Digital Publishing through WWW Publishing is the process of producing literature or information making it available to the public In the past publishing mainly refers to printed matters such as books and newspapers Nowadays the meaning of publishing extends to making literature or information available through websites blogs and forums etc Blogs are common YAHA BLOG MyBlog communication tools among especially the youth Some artists or even Government officials publish their views tei FH 2 thuk e ceryOne news etc in their blogs eO VAN E AN OVA SE BS rors mR SE HH REP thuk e ceryOne ta aA TA hEALTHE wORLD 6 10 AA s Digital media goes into BE Logon information About the Platform education as well Globally there are already many tertiary institutions having their own Web Based Learning Platform Please be informed that the old web based learning platforms e The We CE6 is now i Students can download learning win production click the followina URL materials work on quizzes discuss and submit assignments through the platforms VTC WebCT learning platform webct vtc edu hk b Mobile phone Shopping and Communication Although mobile phones are common today mobile phone shopping is more popular
28. for representation or approximation Vertex is a point in the 3D space Two vertices will form an edge Three edges can form a triangle which is the simplest polygon Design and Applied Technology Secondary 4 6 c Polygon Modelling Polygon defined by vertices and edges iv Transformation in 3D In a 3D coordinate system X and Y axes form a plane to which the Z axis is perpendicular to Translation Rotation and Scaling are 3 operations which you can change the 3D object Move Translation or move is the location change of an object Users have to provide the software with the distance and direction of change for implementing such an instruction Rotate Rotation is the direction change of the face of an object Most software requires users to provide a rotation axis for implementing such an instruction This requirement uses the Euler s Rotation Theorem Scale Scaling is the size change of an object Scaling an object is done along the three axes 1 e X Y and Z If the changes of size along the axes are multiplied by the same factor it is a uniform scaling If the scaling factor is zero the object becomes a point Design and Applied Technology Secondary 4 6 E 1 Transformation in 3D Key frames and In between Key frames are the beginning and end frames of an action or change In betweens are the frames between key frames Many digital animation software packages such as Flash 3D Max and May
29. http www hkedcity net 2 BERG Ea b gt http www cyberport hk 3 Amazon com http www amazon com 4 Cgvisual com http www cgvisual com 5 Digital Media news amp Views _ http www digitalmediathoughts com 6 Hong Kong Education City http www hkedcity net 7 Inside digital media http www insidedigitalmedia com index php 8 The answer com http www answers com 9 The Digital Media Association http www digmedia org 10 Wikipedia http en wikipedia org Design and Applied Technology Secondary 4 6 REFERENCES Alex Fung Alice Lo amp Mamata N Rao 2005 Creative Tools The Hong Kong Polytechnic University Fernando Ferri 2007 Visual Languages for Interactive Computing Definitions and Formalizations IGI Global August 10 2007 J P Telotte 1995 The Seductive Text of Metropolis University of Illinois Press Jim Krause 2001 Idea Index How Design Books Jim Krause 2001 Layout index How Design Books Mare Davis 2000 Readings in Human Computer Interaction Toward the Year 2000 Media Streams An Iconic Visual Language for Video Representation Rayport Jeffrey F Bernard J Jaworski 2002 Cases in e commerce Boston McGraw Hill Irwin Marketspace U Robert Klanten Mika Mischler and Silja Bilz 2007 The Little Know It All Common Sense for Designers Berlin Die Gestalten Verlag Roger Fidler 1997 Mediamorphosis Understanding New Media Journalism and Communication for a
30. images or animation Broadly speaking there E Design and Applied Technology Secondary 4 6 A SS r a a EE in EE ee are two types of computer animation namely stop motion animation of 3D models and frame by frame animation of 2D illustrations Objects or models of 3D animations are created on screen We start by creating objects or illustrations of 2D animations on separate transparent layers The starting appearance of the limbs body eyes nose mouth etc of the 2D figure concerned is determined by the animator and shown on a key frame while the ending is on another key frame Then the transition between the two appearances or key frames is handled by the software The process is called tweening or morphing Refer to the appendices for operations of common animation software such as Autodesk 3D Max and Adobe Flash a Animation 3D Workflow The prerequisite of creating 3D animation is to create 3D models of the characters pops or objects Assign the models with materials textures and surface properties such as colour They were then placed in an environment with a camera and lighting effect forming a scene For each desired motion the animator or designer fixes the starting and ending appearances each in a key frame and let animation software to process the transition in between After refinement and testing the images are finalized Step 1 3D mathematical
31. its primary additive colours of Red Green and Blue The combination result of them in equal intensities is white With the different intensities of the colours different colours can be resulted The intensity of a colour ranges from 0 to 255 The lowest intensity with no light emitted is zero and the highest 255 R 255 R255 R240 G 255 G0 GO G 110 B255 BO BO B168 Again as its name implies the CMYK model bases on its subtractive primary colours 1 e Cyan Magenta Yellow and blacK Other colours are formed by mixing these four colours with different intensities The intensities are on a scale from 0 to 100 CMYK s gamut is different from RGB s therefore conversion of images between RBG and CMYK in either direction might be unacceptable in some cases Design and Applied Technology Secondary 4 6 E Digital Images Combined with Channels Digital images are combined with different channels such as RGB and CMYK Decompose the following image into channels and explain which colour model s you are using 2 2 8 Texture and Pattern Texture is the details of a surface or 3D model Pattern is a repetitive shape or a unit of texture on a surface or 3D model Symmetry repetition contrast afterimages and negative afterimaging are some commonly applied techniques for texture and pattern a Symmetry Symmetry or equilibrium refers to the visual balance or opposition of the elements of a composition It provides t
32. models are designed Step 2 Add basic colour Step 3 Add materials and textures on models Step 4 Create an environment with a camera and lights Design and Applied Technology Secondary 4 6 E 1 Preproduction Stage The preproduction stage gives a project a foundation It includes conceptualization planning research script writing project planning cost scope and time storyboarding initial design for scenes and characters etc Pre production Research Story eee Character design Scence design Production Planning Storyboard Pre production process 11 Production Stage The production stage consists of modelling rigging animation shading and rendering Modelling is to model the characters objects scenes and environments Virtual modelling tools may be used to sculpt objects and 3D digitizers may be used to capture the shapes of physical objects After modelling 3D characters are rigged with virtual skeletons for animation Skeletal animation or rigging 1s a technique in computer animation EH I his Texturil W em uing N mmzemea Modeling Ss Aegm Binding Character setup i j V t3 ARBEN Ek TBR Om Background Layout Animation Lighting Rendering Compositing Production workflow 111 Postproduction Stage After rendering and before shown to audience images have to be manipulated through several postproduction techniques such as retouching
33. moving the accelerometers and pointing on screen supported by optical sensor technology users can interact with items in the game rv ie Design and Applied Technology Secondary 4 6 Perception from Seeing Seeing is in fact an interpretation process called perception When people see things their eyes capture the image of that object in one form of message The message is subsequently transmitted to their brain for interpretation Interpretation by people s brain is a process of adding their own meanings to the message based on their own background such as knowledge and experience By then a person understands what that thing is Interpret p B are correctly e same Seeing an image aii a size i A B When we interpret correctly we understand the object correctly However along the line from seeing to understanding it is possible that the message is mishandled distorted image incomplete message transmission wrong interpretation etc making the results interpreted strange or misleading For example a kid who has seen only pencils only but never seen ball pens might interpret a ball pen as a pencil Similarly a person may think what it is not but it actually is For example a person sees something is moving but in fact it remains static Another example is that an object is dark just because it is surrounded by lighter coloured objects Interpret
34. oT ie Ea z r A Se Interface is a layer of software or hardware enabling a user to execute tasks on a computer Examples are Software Interface An icon that allows a user to delete an object Image from Adobe PhotoShop software Hardware Interface A steering wheel of a computer car race simulator Motion platform car racing game Department of Multimedia and Internet Technology IVE TY Instruction Interface A dialogue box informing the user of an event or activity or suggesting the user to reply or react to a a eet ee DE A request Full screen writing i not available Image from Wintab software Human Machine Interface and Interaction There are three components namely Input Process and Output Input can be seen as an entrance while Output as the exit Process is what is done in between The following example shows a person using a calculator Design and Applied Technology Secondary 4 6 oe oe T T Bo n Tr zx a Process Input M DA gt 1234 Output Output Feedback Input output of human and machine Human Computer Interaction through an interface The following example illustrates how human and computers interact through interfaces Explore why and how these interactions occurred a Background age a Hardware a Hardware devices education culture devices any hardware operated by Information processing how data inclinations etc b
35. of A B Group A and Group B See Figure B1 Does Group A or Group B appear to have cylinders that are the same size Figure B1 Explain using human visual perception why you think so 3 There are different groups of base colours from different backgrounds the RGB and the CMYK Use a table similar to the one below to explain what the letters stand for and where each group is used 4 What is a human vestibular sense Show examples of applications of how vestibular senses can be applied to a digital multimedia environment 5 Over the last thirty years as computer and video games have become more popular an entire sub culture has arisen Explain why the game culture and marketing have been growth rapidly Design and Applied Technology Secondary 4 6 DESIGN PROJECT 1 Video Shooting and Editing Project Photo Storytelling Each student should create a photo sequence to present story by shooting with a digital camera The sequence should contain 5 to 7 photos All pictures must be original and no made up or compositional ready The photo format should be JPEG files size 640x480 2 Video Shooting and Editing Project Abstractions 1 Shoot a three minute video in your everyday environment 11 Capture the abstracting elements from their contexts so that they lose their normal representational value iii Edit in the camera to make a sequence of shots describing your living environment without revealing the conte
36. saving and an open folder represents file opening Describe the function of the following icons at amp 7 Ass The Hong Kong Observatory launched a set of weather icons in 2007 to facilitate its communication with the public Design and Applied Technology Secondary 4 6 c Indexes An index is a sign that indicates a fact or condition Unlike iconic signifiers indexical signifiers communicate in a more indirect or subtle manner Indexical Colour Colour is an indexical signifier For example in many alert systems red refers to an alert of high severity since it is the most emotionally intense colour 2 1 4 Signifier and Signified a Signifier A signifier is an item that signifies expresses another item 1 e signified A signifier can be a graphical sign a word or else b Signified A signified is the item that a signifier refers to It has no absolute meaning by itself its meaning is subject to where it is 1 e the context In other words a signifier can carry many meanings or refers to many signifiers For example a Stop sign asks a driver who is driving on a road to stop in front of the sign The same sign can be placed in a classroom to ask students to stop talking Design and Applied Technology Secondary 4 6 H Signifier and Signified iPOP This i stands for I want The above iPod posters illustrating 1Pod s original images can be used
37. series of processes from conceptualization and planning to modelling and execution In short it displays the whole life cycle of presenting ideas in web pages Trace Artwork It is a function of Illustrator It is to create graphics by tracing pencil sketch drawings or electronic raster images Images of before and after tracing Symbol Creation Illustrator allows users to create symbols from its objects such as paths compound paths text objects raster images mesh objects and any combinations thereof Artwork created with symbolism tools Design and Applied Technology Secondary 4 6 Text Text can be handled in many ways in desktop publishing Walk away quietly in uf For example columns and rows of text can be created text jrma and taste ae e freedom of the can be created within a shape or along a path and text can mountaineer Camp ee yg the grasse be manipulated as graphic objects The fonts and spacing ieee of placial of text can be also chosen meadows in craggy arden nooks full of nature s darlings Climb the mountains and get their good tidings Nature s peace flow inte you as sunshine flows into trees The izen will T Overflow text Identify what tools in Adobe Photoshop have been used to create the following two pictures Digital image Creation Digital Painting 3 3 3 Video Software Video software is for editing video sequences It allows users to import and export
38. the bridge still selected extrude a value of 250 to form the bridge 14 Use Bevel function to complete the end of the guitar lt gt Design and Applied Technology Secondary 4 6 Practical Task 3 Animation and Rendering Every time we switch on our television or go into a cinema we can easily watch a 3D logo animation before the TV program movie start A good logo animation design can help to recall audiences memory of an organization Objectives After completing this lesson you should be able to 1 Understand the basic 3D animation production workflow 2 Create your own 3D logo 3 Create a 3D camera 4 Completed a simple 3D logo animation Preparation 1 Design a Logo 2 Draw the logo it in Adobe Illustrator 3 Save it in AI format in version 8 or lower Step 1 Import AI file into 3ds Max Untitled Autodesk 3ds Max 8 File Edit Tools Group Views Create P Mew Chrl h All Reset Open Chrl a Open Recent _ mE Select File to Import Save As SED O into x Save Copy 4s Ref Objects Ref Scene File Link Manager Merge Merge Animation Replace fae wD jlogo10 ai RAED fee te TS Adobe Illustrator AT HA Import oe Export hee Tea eave gt Select Import function in animation software rehive gt Select the AI format Summary Info File Properties View Image File Exit a KZ we D
39. the camera operator Firings placement Entrance HEGN Jini Cable AMENE ANE Kitchen Camel Design and Applied Technology Secondary 4 6 E Suggested answer Suggested answer Mise en sc ne There are many possible arrangements and the picture above is one of the best Most films are character centred The characters should be given the most comfortable activity to act with during the play It could be cooking in the kitchen sitting on the sofa or chatting on the bed In most cases there is more than one camera to ensure sufficient camera angles for retaining audience attention In addition depth of field 1s an important storytelling technique with cameras This can be achieved with a foreground object For a close inspection on the set some interesting foreground to background relationships among the four numbered drama area can be found Design and Applied Technology Secondary 4 6 USEFUL WEBSITES HU el http www ulead com tw learning vid Explain digital video e04 pagel htm production RABIS hup big5 cgan net science publish ot PESTS ETRA oy hers FIGURELHTM GESAR INBE ae EH DIY http www hkedcity net article media fg SUE hH AUER PI ed_learning 030612 R l A i I PE E STE 003 note phtml type Ea LRE ae fe e BEE RE AY http res hkedcity net general 0003 46 IRETE r E WHA A AN S He es ERG BB 88 130
40. the size of image files In addition to merging layers you can stamp layers Stamping allows you to merge the contents of more than one layer into a target layer while leaving the other layers intact Typically the selected layer will stamp down to the layer below it Design and Applied Technology Secondary 4 6 ye 12 Flattening all layers In a flattened image all visible layers are merged into the background which greatly reduces the file size Flattening an image discards all hidden layers and fills the remaining transparent areas with white In most cases you won t want to flatten a file until you have finished editing the individual layers Make sure that all the layers you want to keep are visible Choose Layer gt Flatten Image 13 Setting layer opacity j A layer s opacity determines to what degree it obscures or Layers o reveals the layer beneath it A ae wan 1 opacity Sn appears nearly transparent while one with 100 opacity Lock O 9 f appears completely opaque 14 Choosing a blending mode j mx b wan underlying pixels in a image u can create a Moma E Opacity hoos T variety of special effects using blending modes larma Fill hoos gt A layer s blending mode determines how its pixels blend Layers Tai 4 Paths W By default the blending mode of a layer set is Pass Through which means that the layer set has no blending properties of its own When you choos
41. them even become necessities In this section the following digital media products will be looked into a Computer and Video games b Digital television c Electronic books E books d Mobile phones e World Wide Web 1 2 1 Computer and Video games Video games which may use a TV display are a subset of computer games Computer games on the other hand are a subset of electronic games Computer and video games can be classified as follows PC games arcade games console games handheld games and Internet games PC Games PC games are those played on personal computers no matter whether it is an IBM compatible or Macintosh one The input devices are often standard keyboards and mice In some cases devices like joysticks or trackballs are used The output devices normally used are display monitors and audio loudspeakers The outputs can also be directed to TV sets etc Arcade Games Arcade games are games on standalone devices located in game arcades They are also known as coin operated games The input devices vary and often tailor made subject to the theme of a game For example the input device of a shooting game is a gun those of driving games are steering wheels and pedals The output device is mainly a display monitor embedded in the arcade game unit Design and Applied Technology Secondary 4 6 Console Games Console games are also known as box games because their dedica
42. to elaborate semiotics a Signifier Words 1 1Pod and The 1 stands for b Signified Concept of iPod i Portable digital audio players designed and marked by Apple Inc 1 Simple user interface designed around a central scroll wheel i11 Build in harddisk for storage of up to 15000 songs or 25000 photo images iv Simple idea and trendy looking c Symbolic sign i Haircut gesture posture for young and trendy people ii Dancing enjoy music with iPod d Iconic sign 1 White colour digital audio players ii Silhouette no shadow no lighting suitable for everyone e Indexical sign G High contrast colour Black people and white iPod emphasize iPod as a focus point ii Sharp colour represent the disco lighting fresh sporty happy feeling Design and Applied Technology Secondary 4 6 Analyse Hong Kong s visual identity the powerful and energetic dragon as the government describes to figure out what semiotics has been used Image from HKSAR Government www gov hk Team Logo Logos of sports teams are an important application of signifiers and signifieds A good combination of symbols and colours gives life to the team as a whole building up the team s and its fans sense of belonging Not to mention the financial rewards that follow a business of billions of annual income from branded merchandise Manchester United Football Club in the United Kingdom is a
43. to the layer contents When you move or edit the contents of the layer the effects are modified correspondingly For example if you apply a drop shadow effect to a text layer the shadow will change automatically when you edit the text The effects that you apply to a layer become part of the layer s custom style When a layer has a style an f icon amp appears to the right of the layer s name in the Layers palette You can expand the style in the Layers palette to view all the effects that comprise the style and edit the effects to change the style When you save a custom style it becomes a preset style Preset styles appear in the Styles palette and can be applied with just a click of the mouse Photoshop and ImageReady provide a variety of preset styles to fill a wide range of uses a Design and Applied Technology Secondary 4 6 E i tris E aco ae e Layers D Layers fy Normal Ki Opacity hoos FI Normal Opacity ions FI Lock jaja Fit loos Lock Djaja hoof E A fje Cir Epa H a 7 1 ka E Drop Shadow A Bevel and Emboss Ea F Pattem Overlay 6 O ee Ss 3 Illustration of a layer without a style F Illustration of a layer with a style Note You cannot apply layer effects and styles to a background a locked layer or to a layer set No effect Drop Shadow Inner Shadow Outer Glow Inner Glow Bevel and Emboss Colour Overlay Gradient Overl
44. various storage methods such as 8cm recordable DVD s MiniDV videotapes MicroMV videotapes memory cards or hard disks G Design and Applied Technology Secondary 4 6 d Video Format Videos captured by digital camcorders can be saved as different formats such as Quicktime MOV Window Media Player AVI RealNetworks rm and MPEG2 mpg2 MOV and AVI files are supported by many players and over the Internet rm files are a streaming video format that can be played and at the same time downloading the contents MPEG2 mpg2 files are of high quality and suitable for high resolution displays such as DVD format Design and Applied Technology Secondary 4 6 ae e 1 7 B E e Ss 3 3 APPLICATION SOFTWARE Executing multimedia projects require different software for authoring editing images sounds animation motion videos etc capturing images from screens and translating file formats This section will go through several techniques used in image and sound editing animation and video software 3 3 1 Image Editing Photoshop PhotoImpact Fireworks and Paint Brush are examples of raster image software They are for production of crafted bitmap images CorelDraw Illustrator FreeHand and Designer are examples of vector image software They are for production of vector based images Refer to the appendices for operations of common graphic design software such as Adobe PhotoShop a Image Fi
45. very good example Name more examples 2 1 5 Denotation and Connotation A signifier and a signified can be connected through denotation or connotation Denotation is the exact meaning of a word For example red may be defined by a dictionary as a colour with certain attributes Connotation is the underlying subtle meaning embedded or suggested by a word given some personal or social backgrounds A word s connotative and denotative meanings coexist For example red is a colour by nature Its connotations may cover danger happiness blood etc Denotation and Connotation Denotation is the most fundamental meaning of a sign For example the word rose refers to a kind of flower Connotation gives a deeper or derived meaning For example rose especially red ones signifies passion and love Design and Applied Technology Secondary 4 6 Describe the denotation and connotation of the following signs Design and Applied Technology Secondary 4 6 E 2 2 GENERAL RULES OF VISUAL COMPOSITION Design is a presentation of organized selected elements for a specific purpose Following are some general rules of visual composition a Proportion b Framing c Cross lines d Laws of grouping e Shape recognition f Colour g Texture and pattern 2 2 1 Proportion Golden Ratio Golden Mean In the context of design proportion measures the relative sizes and positions among v
46. whole The following are some common terminologies Shot A continuous sequence of images Scene A single part of a film for a particular place and time A series of scenes of a film comprising a major part of which Plot Point A turning point of a film s story affecting the fates of the characters The following example of scriptwriting comes from a movie Name of movie FH ZER Original work Screenwriter FLEURY Director According to the Best Hong Kong Movie Script Collection of 1997 98 FAX HZ EL Script Publisher Hong Kong Movie Screenwriter Association Design and Applied Technology Secondary 4 6 ACT 1 Pa PLease BRA PEP EK o FARA AMENT E be Se Ee ll amp Lily BARKA HE AEE EEK BEE Lily SEERA ASCE LEER IU EIB fET HE LABEA fe EN SR We ae e Be coe TEMES E Em TH e Plot Point1 HALTER CIAL SIRER 5 KEPT BARRE TEIARS 1 BLAS SBE ACT 2 TSB BR ICER ASH AGIA AL i AEA o TS BREET RTE AES Bs ESL CP ABD SPR Es BZA AB TS BRAS THEE BERGE aes EMRE RASCAL KEANE HERS BB Gaui S RERE E es ae Re BOLT Sl a TS BREIR RK Rei BLASER SAHE LEAN HITIA E E Se SHS BBR ea Fe ti A BLOC See FRF TAJ RUSE T BPRS ARES Plot Point2 i SERS NEC BAWEAN Lily RA SS KRM SER OUROEE CEERI DEBE M BLA SZE SPRITE MATE MEIER lt ACT 3 i TZR SREE RRNA TERR E EEEE SBR Bee MARERE SBR EGE WARE GR RISA RSE FEIE BN Se RTOS A ties bre
47. 7625114 htm ia ae Ee E Bla 195 el aS J http www hkedcity net article media N XE 2 9 EE BRAY SAAL ed_learning 030123 for fy BE E ASEH OQO9 index phtml type mediaed PAE ER SY Sp http swik socialnet org hk swikportal H Sa eR LEER AE DesktopDefault aspx tabIndex 3 amp ta AREAS EINE x bid S50 amp ItemID 545 2 1 A RS FP 1 A E http proton phys tku edu tw UNIX D 5 AA EA AREA E APA m rdh02 html TAKA A PTER AR ES T3235 http xocial free fr research hci htm 2 BE at HY 55 itl oo Ie ATE E http www nsc gov tw _newfiles popu Hja tA Hes Beye lar_science asp add_year 2003 amp pops c_aid 267 http www cau SCRA aK ets aS le aqua net index php option com_conte 575 nt amp task view amp id 17 amp Itemid 38 LER FE Gl Ee http www creativelife org tw creative ZAREK ST Seat As TR ae 32 EY creat_artist php article_id 46 BID SE ACS PTH Sg AY SC Bae CEPI http ihome cuhk edu hk 7Eb10571 FA HE PICK BAAR 3 article goldenratio html s2 EFE EE 0 618 http www lktmc edu hk 7Emathem MENE SE AS SLE Bl atics history golden htm Design and Applied Technology Secondary 4 6 el Se SE 8 Ss AG http www pconline com cn FH alia al en Production animation production http www hippasus com resources v1 scomp index html shooting Digital Media http www suite101 com Explain an idea of digital Production media production CAD 3D rendering ht
48. Century Cyber Works or PCCW is a good example of using a wide range of advertising media Design and Applied Technology Secondary 4 6 il or ail T I a Advertising on Buses a nw epcocw a 2 pocw WANTS YOU Ss VANTS YOU Advertising on TV Other examples also include advertising on websites of others and their own i Design and Applied Technology Secondary 4 6 Every year there are many visitors coming to Hong Kong from around the world Many of them do not understand the major languages used in Hong Kong such as traditional and simplified Chinese written Cantonese and Putonghua spoken and English written and spoken at all How can digital media help these visitors For example can a device be developed to help Hong Kong International Airport Design and Applied Technology Secondary 4 6 CHAPTER 2 DIGITAL MEDIA DESIGN Definition If media are considered a tool for communication good planning should be a critical success factor for media development Students have to understand the basic concepts and rules of digital media development This chapter covers the following topics 2 1 Conceptual development 2 2 General rules of visual composition 2 3 Basic principles of communication design in creating digital media Technological Design Concepts These topics include learning materials and activities that facilitate students in a Description of the rela
49. ER 1 MEDIA LITERACY Definition What is media literacy It is the use of different media forms modes types etc to communicate among people Communication involves access to analysis evaluation and creation of messages This chapter will discuss media literacy through the following topics 1 1 Communication via digital media 1 2 Digital media products and relevant businesses 1 3 Social economic and technological factors Technological Design Concepts These topics include learning materials and activities that facilitate students to a Understand various communication modes and stages in different contexts b Identify the features of communication via digital media c Compare different digital media products in the local and global markets d Evaluate the pros and cons of a media rich society in terms of social including cultural and historical economic and technological factors Technology Development There will not be any software package training in this chapter However students have to understand the processing and outcome of using different media to communicate Students should conduct some exploration and research to understand these media Such exploration and research can also help students understand the strengths and limitations of each medium 1 http en wikipedia org wiki Media_Literacy Design and Applied Technology Secondary 4 6 1 1 COMMUNICATION VIA DIGITAL MEDIA This module cove
50. ESS pibe pisa idi ae Tint We Be eee eT ii H 286 8 Y 153 0 Advanced bitmap caching 28 Change the parameter next to Colour into 0 Properties x Filters Parameters Graphic Instance of logo Color Alpha H 100 a Swap Loop si First 1 w 370 4 x 302 9 Blend Norma H 2786 8 Y 1153 0 Use runtime bitmap caching 4 Properties x Filters Parameters e Graphic gt H Instance of logo Color Alpha F ox ie a Swap Loop First 1 w 370 4 x 302 9 Blend Norma x H 286 8 Y 153 0 Use runtime bitmap caching 29 Test the animation again and a logo fades in 30 Repeat the step 23 to 27 at the end of this animation A fading out effect is applying to this logo animation too 31 Test the animation one more time VTCNTC lt lt Design and Applied Technology Secondary 4 6 Part 3 Exporting the animation 1 Select File gt Export gt Export Movie 2 Save as vtc_logo swf and press OR 3 Try these settings Export Flash Player Version Flash Player 9 lng Info Load order Bottom up re ActionScript version ActionScript 3 0 1 Settings Options Generate size report Protect from import Omit trace actions _ Permit debugging iM Compress movie F Optimize for Flash Player 6 r65 Kd Export hidden layers Export SWC Password Script time limit 15 seco
51. Each grid becomes a mini area for a design This system is particularly good for designing documents with multiple pages A grouped on the same page typical example is newspapers different news of a similar nature such as financial news are HHH Alignment Both the websites of Yahoo Hong Kong and Yahoo China website are full of information news links advertisements financial market data etc To facilitate better user friendliness both sites apply laws of grouping with different look and feel gt Explain how the two sites are different gt Give examples from magazines commercials or websites that apply the same law of grouping Design and Applied Technology Secondary 4 6 ye 2 2 6 Shape Recognition Shape is a carrier that brings the underlying message or meaning of a form out to the viewers The form of an object is a tool for human brains to identify or recognize the object Shape recognition defines the composition space enhancing the figure ground relationship the sizes of the shape and its surrounding space This relationship affects the perceived presence of the shape The entry pass of the ia Hong Kong Game Fair of 2006 is an example of shape recognition The shape of the pass is identical to that of the Game Fair s logo providing the exhibitors and visitors a strong and appealing feel Design and Applied Technology Secondary 4 6 Shape Recognitio
52. Expected Learning Outcome Students should be able to gt Better understand the design concept of logo animation production gt Create funny and interesting animation with 3D animation software gt Understand basic workflows of 3D animation production such as modelling animation and rendering The following software may help students complete the project Flash 3Ds max Maya and HexaSuper5 Corporate logo animation of Pixar Animation Studios The small hopping desk lamp of Pixar Animation Studios US is a good example of logo animation The lamp can please audience because it is funny The idea of the logo came from Luxo Jr a short computer animated film produced in 1986 by Pixar It demonstrated that the newly established company was capable of producing animations Reference WWW pixar com B Production Project Brief Students will need to produce a 10 seconds 3D logo animation to promote their school with the help of 3D animation software Each project has its own unique demand Designers can choose their own workflows But in general all workflows are common in certain aspects ideas are developed and are then drafted on paper initially Creation of 3D models and addition of colours and textures are next Finally animations are applied and rendering is done Design and Applied Technology Secondary 4 6 10 Preproduction Animation and refine Final Render i of Ser a Dele Work on Animatio
53. RESF FEA SCALE ES RUE 24 AUR GIR ae fe EYEE VH Organised according to the scriptin AFHZ EP AS hie Scene Scenel to 16 Scene 17 36 Scene 37 to 39 Scene 40 to 56 Design and Applied Technology Secondary 4 6 b How to do an interview 1 Stages of the Interview 1 Define the purpose of the interview gt What information do I need gt Who is the most suitable person to provide such information 2 Conduct background research gt Look for a NEW angle 3 Plan the interview gt Plan how to initiate a conversation with someone you just met gt Plan how to break the ice gt Write down to be asked questions 4 Use small talk gt Use small talk to make the conversation atmosphere humane and warm gt Avoid robotic conversation like a Q amp A session 5 Ask questions with mutual interest 6 Building mutual trust which is a pre requisite requirement for a good interview 7 Ask no personal questions which may embarrass the interviewee and 8 Seek approval if audio or video recording is required 11 Types of Questions 1 Open end versus close end questions gt Open end question Can you tell me about yourself gt Close end question What type of prize did you win in the competition 2 Opening questions gt Be easy to answer and gt Reinforce the respondent s self esteem 3 Follow up questions gt Be passive probe e g Hmmmm I see gt Be responsive e g Really
54. With the Free camera icon highlighted click to the front view Design and Applied Technology Secondary 4 6 WE am S EEE Ee EE EEE T r gt View the camera view If you want to change the Perspective view to camera right click on the Left corner of the viewport and select views gt Camera 01 short cut key C Camera Parameter gt Lens and FOV o Wews o Smooth Highlights y wireframe Other Edged Faces Transparency Show Grid Show Background Show Safe Frame viewport Clipping Texture Gorrection Disable view Unde view Pan Perspective User Front Back Top Bottom Left Right Active Shade Schematic Grid Extended Shape You are looking at the view of Camera 01 Parameters Lens 43 456 mm FOV 45 0 deg Orthographic Projection Stack Lenses 15mm 20mm 24mm zamm Jamm Bimm 86mm 136mm 200mm Type Target Camera Show Cone Show Horizon Environment Ranges Show Near Range joo S Far Range ficco 0 S Clipping Planes Clip Manually Near 1 0 Far 1000 0 Multi Fass Effect Enable Preview Depth of Field Render Effects Per Pass Target 300 503 Fy we Design and Applied Technology Secondary 4 6 E Ee ee a EE ot i a me oo SSS ae The Lens and FOV function together changing the lens setting to millimetres also adjusts the camera s Field of View In real
55. a can complete an action by supplementing in betweens between the key frames provided by users A sequence is composed Ney ene 1 Key Frame 2 ae of numerous actions or change and thus has many key frames h Key Frame 2 2 Transformation in 3D Motion path and Frame rate An animation can be as simple as moving an object along a path 1 e a linear motion path A frame rate is the number of frames used within an assigned period of time Path animation Design and Applied Technology Secondary 4 6 v Shading Material and Texturing Shading is to apply materials and textures to an object making it realistic Materials refer to properties that are used for shading object surfaces such as colour reflection refraction transparency and specular highlight Three different materials applied to the same 3D model Sometimes for more realistic appearance photos or other patterns are applied to materials i e texture mapping Three different materials and texture mappings applied to the same 3D model vi Lighting Lighting is an important component in 3D scene It enables people to see the objects in the 3D world and sets the desired mood of the scene Lighting makes the animation scene more realistic T lt lt Design and Applied Technology Secondary 4 6 be rre a a a a Sts gg SE ee ee Lighting in 3D can be classified as point dist
56. a l 4 In Toolbars palette Pen Tool b and Brush Tools oer and Oval Primitive Tools oa provide a tool for drawing 5 Select Import gt Import to Library and choose the reference image to trace Here is the reference VTC 6 Drag the imported image into the default layer Rename the default layer into reference by double clicking Layer 1 as ile it View Insert odi ext Commands Contro ebug indow Help bin t gt Sd 0 20 B Mon 18 37 um Viola Flash File Edit Vi Modify T G dsa Deb Wind Hel A cag Mon 18 37 11 Shum Viol Q aAA EVT fia Fa cach 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100 pff Color x Swatches Fez ki 7 m Type Solid MA Siep 2 moe La sc a st iP rR 255 f7 Qijaoas cs oe oos EE EID c 204 fr IT it amp A Scene 1 2 logo Workspace 6 100 fa B 51 A Alpha 100 FFCC33 Lt ra i ra Pd H Ubrary x i 2 VTC fla wa a Saf 3 items a E 2 f E VTC ps Lesh Name al Type So J logo Grapho a skyipg Bitmay P C A E like this Mllalfreterence GARE Design and Applied Technology Secondary 4 6 ye 7 Lock the reference layer and create a new layer by clicking Insert Layer al ql Layer al reference B B a 8 Rename Layer 2 as vtec and click on the frame in this layer 9 Use the Pen Tool to draw V
57. ackground color LJ Framerate 12 fps Ruler units Pixels red Step 3 Corp B Importing image from other application 1 Prepare an image in Photoshop and set the size as 600 pixels width and 300 pixels height ar rs a wt Sm el sky jpg 66 73 RGB 8 n 200 0 00 fad A A A AE Doc 527 3K 527 3K 2 Return to Flash and select Import gt Import to Library and browse this image in your computer Co o 7 oo Design and Applied Technology Secondary 4 6 E images H Q search FPartA D Parts S sSkyjpg Name sky jpg Size 88 KB Kind Adobe T II Photoshop Il able All Formats Cancel Import to Library p Z 3 This image is automatically imported into the Flash library like this X Library ae VTC fla As H One item in library Name Type E sky jog Bitmal O A O lt gt C Drawing objects in Flash In order to draw a graphic in Flash using a symbol to contain the graphic is highly recommended To create a symbol select Insert gt New Symbol Name this symbol as logo and set the type as Graphic oe wel Design and Applied Technology Secondary 4 6 E Create New Symbol TE i Type Movie clip _ Cancel Button Graphic Advanced 3 Symbol logo is automatically selected in the library and allow to draw into the Canvas Name A Type logo Graph O sky jpg Bitm
58. an be a graphical sign a word or else Standard Definition Standard definition TV or SDTV makes use of analogue signals SD for broadcasting There are two common standards for SD video signals namely NTSC and PAL Steadicam A hand held film camera that has built in shock absorbers and which has a harness device so that the camera operator can attach it to their bodies allowing them to move around and yet still produce steady shots Storyboarding A storyboard is a simple graphical presentation by sketching for example of the script that shows the key actions of the story Symbol A symbol is a sign that represents a physical or logical item The relationship between the item being represented and the symbol may or may not give people direct association Synopsis A synopsis is an in depth summary of major points of a subject matter It often refers to the facts of a film Text A written passage consisting of multiple glyphs characters symbols or sentences Design and Applied Technology Secondary 4 6 The rule of thirds According to Rule of Thirds each picture concerned should be divided by four grid lines namely two vertical and two horizontal Major elements should be placed at the intersection points of these lines It is a simplified version of Golden ratio Transitions Transition effects through Cut Dissolve Wipe etc are basic video editing techniques Typography Typography is the art and techn
59. ance Reference The Incremental Row Offsets sO DP o oo emon E 2 PP oo oe Total in Array 4 Reset All Parameters Cancel T Design and Applied Technology Secondary 4 6 E p eee CEE EE EEE T 2 Se er Ce _ SST gt a cylinder 17 In the Left viewport create a chamfered cylinder with the following parameter Radius 25 0 Height 3 0 Fillet 1 5 Fillet Segs 3 Sides 24 gt Rename the object to Train Wheel 18 Align the wheel as follow 19 Create a Cylinder in the Left viewport with the following value Radius 2 0 Height 60 0 Height Segments 1 Sides 12 KZ Sr Design and Applied Technology Secondary 4 6 E gt Rename the cylinder to Axle 20 Use the Align tool to center the Axle to the Train Wheel 21 Cone the Train Wheel and move it toward another side of the Axle 22 Align the new wheel to another face of the Axle 23 Select the two wheels and the Axle and select Group from the Group pull down menu Name the Group to Wheel Assembly 24 Create an Array of the Wheel Assembly group so that there are 3 wheel assemblies instanced along the length of the Train Body Understand Boolean A Boolean object combines 2 objects by performing a Boolean operation on them In the software a Boolean object is made from 2 overlapping objects The original 2 objects are the operands A and B and the Boolean object itself is the result of the operation There are
60. and abstract sound is not as functional It is used to enhance the messages emotionally A successful message can make use of abstract sound to evoke audience s mood Audio Audio is often considered an integral part of a message Motion graphics designers may be responsible for the design and editing of the audio part in addition to graphics of a sequence Therefore motion graphics designers have to study and accumulate experience on timing impact etc of sound effects Design and Applied Technology Secondary 4 6 ere a ee i 7 Ss Tr zz a 2 3 3 Image and Graphics Image can express messages effectively Graphics and animations are commonly used modes of image a Conceptual Elements of Images A basic structure of design is composed of basic elements 1 e points line plane and volume The most basic unit of image and graphics are points A point is zero in length width and height conceptually otherwise it becomes a line area or volume A point is often represented by a dot visually A line is formed by joining countless points It is zero in width and height conceptually otherwise it becomes an area or volume The simplest form of a line is a straight line The variations of line forms are countless a form is created whenever a line is bent a little If a line has a definite length it may also be called a line segment A plane is a two dimensional 2D area It is zero in height conceptually
61. anging the order and attributes of layers In addition special features such as adjustment layers fill layers and layer styles let you create sophisticated effects Illustration of how transparent areas on a layer let you see through to the layers below 2 Layer palette The Layers palette lists all layers layer sets and layer effects F Layers A Normal in an image You can accomplish many tasks such as creating hiding displaying copying and deleting layers using the buttons in the Layers palette You can access additional commands and options in the Layers palette menu and the Layers menu Photoshop Layers palette A Layers palette menu B Layer set C Layer D Layer thumbnail E Layer effect 3 About the background layer When you create a new image with a white background or a coloured background the bottommost image in the Layers palette is Background An image can have only one background You cannot change the stacking order of a background its blending mode or its opacity However you can convert a background to a regular layer When you create a new image with transparent content the image does not have a Design and Applied Technology Secondary 4 6 ye background layer The bottommost layer is not constrained like the background layer you can move it anywhere in the Layers palette and change its opacity and blending mode 4 Adding layers and layer sets
62. ant and spot Point or Omni light is a bulk like light source It shines radially Distant parallel or directional light are light rays beaming to the same direction working like the sun or a very distant light source A spotlight is similar to a point light but its light rays form a cone to a particular direction Omni Light Light rays go to all directions Directional Light Parallel light rays go to a single direction ASh Design and Applied Technology Secondary 4 6 _ EF eS a i S _ r meie T er a a ae es Spotlight Light rays form a cone vii Rendering Rendering is a major topic in 3D animation It refers to the creation process of finishing an artwork or animation by turning wireframe views of 3D models into shaded 2D images Practically rendering is often used along with other techniques Rendering is the last major step in animation production It finalizes the appearance of the models and animation Rendering can be used in movie and TV production for special effects and design for visualization Design and Applied Technology Secondary 4 6 c ee a m i C i i r eer i ae ed peiye iin ir es ihe a a ee es a ae The production process starts with idea concept model making lighting and animation setup and ends with rendering Design and Applied Technology Secondary 4 6 THEME BASED LEARNING TASKS Theme based learning tasks
63. applied as follows Divide an image into two in a ratio of 1 2 The left hand side picture below gives people a rather static and less interesting impression With Rule of Thumb applied as shown in the right the picture becomes more balanced Design and Applied Technology Secondary 4 6 E a I e e a ir ae i merrer z peig a es a a 2 2 3 Framing Each image is limited and controlled by a frame Framing can give an image no matter whether it is a still one or a video a totally different meaning from the original ideas Framing a picture from different compositing angle Human brains have an image reassembling function If a single or a series of still images move quickly in front of a person s eyes the person s brain will form a moving scene of these moving images In digital media production all images are constructed with a series of still frames each frame itself 1s a main unit of digital media production A frame shows a three dimensional image through two dimensional media With proper design for colour graphics images spacing and texts a sense of depth can be created Framing Sometimes the major element of a picture can be framed by the surrounding For example the water around the rock in the following picture highlights the rock s central position on which viewers will focus Design and Applied Technology Secondary 4 6 E Frame A picture without a dominant obje
64. are learning activities that focuses on the technological and design contexts of authentic problems Through exploration students can bring in their own experience and develop capacity in innovation and entrepreneurship Both design projects and case studies are used in this module Design projects are problem solving activities Case studies invite students to investigate valuable design issues Both approaches rely heavily on practical activities Students are also given opportunities to conduct research in technology through reading product analysis interviews observation and discussion Students are more likely to start serious exploration of possibilities when facing authentic challenges While learning activities provide students with meaningful context to learn at the same time they provide students with enjoyment as well as developing a sense of ownership and commitment Activities of theme based learning in this module may be inter connected such as case studies design tasks and practical exercises For example Investigative and experimental work Individual and group activities Evaluation of existing media productions Thinking to deal with problems v v v v v Direct instruction demonstration and discussion The amount of academic activities arranged in theme based learning are at teachers discretion depending on students individual capabilities More capable students can be given more demanding activities The expe
65. arious visual elements Golden ratio or Golden mean is one of the most commonly known proportion Golden ratio is mathematically denoted by The value of gt Golden ratio in art and design is approximately AREA 1 6180339887 A lden mean grid applied to a single image The mathematics of the golden ratio and of the fibonacci sequence are closely interconnected s ra i j i ay ee The golden ratio The fibonacci sequence Design and Applied Technology Secondary 4 6 ae ee ae ae Golden ratio The rectangle BA is a golden rectangle The ratio of b a is 1 If Square B is removed the rectangle A becomes another golden rectangle The ratio is approximately 1 6180339887 Fibonacci Sequence 1 A Fibonacci spiral is also known as Golden Spiral The spiral is constructed with a quarter circle tangent to the interior of each square The length of the side of a square to that of the next smaller square is in Golden ratio 2 2 2 Proportion Rule of Thumb According to Rule of Thumb each picture concerned should be divided by four grid lines namely two vertical and two horizontal Major elements should be placed at the intersection points of these lines It is a simplified version of Golden ratio Ey Design and Applied Technology Secondary 4 6 ers Rule of Thumb Rule of Thumb promotes asymmetry It can be
66. ating layers between images keep in mind that the layer s content will appear smaller or larger if it is copied to a file with different resolution Design and Applied Technology Secondary 4 6 7 Linking layers By linking two or more layers or layer i Channels sets you can move their contents Layers together You can also copy paste align merge apply transformations to and create clipping groups from linked layers as Norma Opacity lock Te OS i ye j 3 a S Mew Layer Duplicate Layer Delete Layer Mew Laver Set Mew Sek From Linked Lock All Linked Layers Layer Properties Blending Options Merge Linked Merge Visible Flatten Image Layers k Channels 4 Paths Norma Opacity fit bck Pe Fe S a Ea aayer 1 1 Select a layer or layer set in the Layers palette 2 Click in the column immediately to the left of any layers you want to link to the selected layer A link icon appears in the column 8 Locking layers You can fully or partially lock layers to protect their contents When a layer is locked a lock icon displays to the right of the layer name The lock icon is solid when the layer is fully locked it is hollow when the layer is partially locked To lock all properties of a layer or layer set 1 Select a layer or layer set 2 Do one of the following gt Click the Lock All option in the Layers palette To partial
67. ay e book e magazines and e newspapers can be read through e book readers or e book devices such as personal computers PDA s and dedicated hardware devices As technology advances a new very thin hardware device dedicated for e materials is being developed It is expected that this initiative will bring a great impact on people s reading habits e 4G Mobile Phones While 3G is still an emerging technology in the market its next generation 4G also known as Beyond 3G is approaching It is considered as the fourth generation of wireless communications because its higher data transmission rate enables Anytime Anywhere communication through voice data and streamed multimedia Digital Media s Impact on Consumer Practice Digital media enables the development of e commerce 1 e trading products and services and settling products and services and money via the Internet Over the years e commerce has involved various media from data text web pages to Internet telephony Internet desktop video etc The following table compares the traditional commerce and e commerce Nature Traditional Commerce E commerce a information Magazines and flyers Web sites and online catalogues a Letter phone and fax Emails and websites communications Design and Applied Technology Secondary 4 6 ya T es s al Labour required Salespeople method Cash credit cards and cards and pay EPS _ Hard goo
68. ay Pattern Overlay 188 Design and Applied Technology Secondary 4 6 c 16 Removing layer effects You can remove individual effects from a layer style and remove a style from the layer To remove an effect from a style In the Layers palette expand the layer style so you can see its effects Drag the effect to the Trash button 17 Converting layer styles to layers To customize or fine tune the appearance of layer styles you can convert the layer styles to regular image layers Once you have converted a layer style to image layers you can enhance the result by painting or applying commands and filters However you can no longer edit the layer style on the original layer and the layer style will no longer update as you change the original image layer Note The layers produced by this process may not result in artwork that exactly matches the version using layer styles In Photoshop you may see an alert when you create the new layers To convert a layer style to image layers In the Layers palette select the layer containing the layer style you want to Choose Layer gt Layer Style gt Create Layers ae ee O peg H Bi u T TTET me 7 TT F D gt Design and Applied Technology Secondary 4 6 E Appendix Basic function of 2D Animation Flash Part 1 Preparation for the graphics and text A Creating a new document in Flash Method 1 1 Choose to create a new Flash File Actio
69. ays a Printing Press Examples of printing press can be found almost anywhere books newspaper flyers and posters etc They are commonly used for mass communication b Radio Radio was also known as wireless telegraph for its transmission of sound signals without wires when it was a new communication medium to the world Radio is still a popular mass medium today c Video Video cameras were widely used for feature films commercials and short independent films d Television Television or TV broadcasting transmits sound and pictures signals forming television s suffix vision over a distance forming television s prefix tele without wires The first generation of TVs showed pictures in only black and white As the technology evolved colour broadcasting was enabled afterwards e Telephone Unlike the previous four media telephone communication enables interaction It carries sound voice over a distance Design and Applied Technology Secondary 4 6 gt Compare how people capture an image in the old days say 30 years ago and today gt Compare with your group members how people publish their ideas in the old days say 20 years ago and today Present your group s view briefly 1 3 2 Digital Media Digital media and modern computing are inseparable Digital refers to the use of digits 0 and 1 to represent different levels of electrical signals Digita
70. been brought to the market by Apple Inc since 2006 iPhone provides users with the basic communication functions such as telephoning and text messaging In addition it can be a camera a portable media player and an Internet access device for e mail web browsing etc through local Wi Fi connectivity With its media player or iPod function iPhone allows a user to sort its media library on songs artists albums videos playlists genres composers podcasts audiobooks and compilations iPhone s user interface is a multi touch screen with virtual keyboard and buttons Name some media that play both the sender and receiver roles 1 1 5 Message Carrier Channel Medium a Message Carrier A message carrier or storage enclosure is a means of sending and holding recorded messages voicemails images and videos to and from mobile phones answering machines and movable computers such as laptops personal digital assistants or PDA and game consoles Design and Applied Technology Secondary 4 6 Short Message Service Short Message Service or SMS is a text messaging service mostly used between mobile phones The SMS standard also supports other types of broadcast messaging AFeCEEERRS ARC CEEE S cr TIT Name some other services other than SMS that are message carriers b Channel A channel is the path between a sender and a receiver It is the medium used to convey information between the
71. cameras the lens and the FOV function together but various camera and lens setups have differing lens to FOV ration The other factor influencing the FOV is the aspect ratio of the image expressed as X Y gt FOV measurement buttons The FOV is measured horizontally this is the standard method of measuring FOV The FOV is measured vertically The FOV is measured diagonally Step 7 Animate the camera We are going to create camera movement animation Switch to the front view and select the camera with move button When you move the camera you can see that the camera 01 view is updated according to your movement 81 9 Mi Ah RC LolS aM 8 6 168 ho GS LN z t gt Setup the timeline duration We have to change the timeline duration from 100 to 200 Animation is created by the rapid change of a sequence of still pictures In film and television industries we use frame rate per sec to represent the number of picture will be displayed per sec and it index the speed of the picture changed In Hong Kong our Television system uses 25 frames per system If we want to create 10 seconds animation the timeline should has 25 frame x 10 sec 250 frame duration Design and Applied Technology Secondary 4 6 Click on the Time Configuration Button on the right bottom corner i i m 1 M i O Auto Kep Selected paa all li lea R C ms j Set Key N Kep Filters hi 0 ai a iea Time Con
72. ced Lighting T Compute Advanced Lighting when Required 3 Render Output Specify the output path e and select the video picture format 5 F Save File Files Production Preset 4 Click the Render Button to output the ActiveShade Viewport Camera w animation ug maid ONH AN SANARI ANE A a ae NPS ca Se Technology Education Section Developed by Curriculum Development Institute Institute of Professional Education Education Bureau And Knowledge PEAK The Government of the HKSAR Vocational Training Council
73. ct may not impress its viewers much A frame in such a case can help draw the viewers attention to what the author wants the viewers to focus on minimizing the distraction from those unimportant surrounding objects Select some dull pictures and locate a frame for each of them 2 2 4 Cross Lines Golden Ratio s another simplified version is Cross Lines which are to guide viewers attention A cross line start or end at a far edge of the picture concerned for better attention drawing a Cross Lines Horizontal Vertical Diagonal Converging and Curved Cross lines can be straight horizontal vertical diagonal and converging or curved lines With cross lines pictures can be more dynamic and vivid They can also arrange rhythmic patterns of movement create visual focal points define space form a visual hierarchy and suggest direction Design and Applied Technology Secondary 4 6 et om 1 I ie ca as ie b Cross lines Motion Graphics Sequences Cross lines are often used in motion graphics design ranging from films videos to animations Instead of pure straight lines cross lines may be used along with some effects such as different shapes colours and dimensions Design and Applied Technology Secondary 4 6 E a r 1 in Tr TE Cross Lines Motion Graphics Sequences Asia Television or ATV News makes use of cross lines in its starting animation
74. ctation on less capable students will be relatively adjusted The Design Project Approach It is common that design projects require more time to complete since students take time to apply their knowledge and experience It is a good opportunity for students to produce outputs that meet real needs and wants Projects should be a challenge without pre defined frame It should challenge current ways of thinking and behaving and should be open enough without being confined to any particular area or context Students can gain experience of genuine technological thoughts and activities through working along the design cycle There should be different difficulty levels set for design projects Students should be assigned to an appropriate level of projects according to their abilities and previous experience G Design and Applied Technology Secondary 4 6 The Case Study Approach The objective of case studies in this module is to develop students innovation as well as research and communication skills Students may present their projects by submitting reports or through oral presentation Students are encouraged to apply the processes of each case study to develop innovation and design their own projects Both report writing and oral presentation are critical activities Design and Applied Technology Secondary 4 6 a 1 I ie Ea z rs A Design Project Global Warming Students are required to study a poste
75. d intuition 2 3 1 Text Alternation of the outlook of text and letters to draw viewers attention to the meaning of a message including words phrases or sentence is a common technique Besides in a dialogue script such alternation can hint the speakers where they have to adjust their tones or any other necessary vocal or gesture actions Working with Type and Image To most people a text full screen or page is equivalent to boredom In other words it is an ineffective delivery of messages One of the many ways to improve such situation is to insert graphics there giving the viewers a breath an idea of the messages and time to E sine 4 1 yo Desin 4 bi RO ce eee _ si ke ee fit WASSER ety oft fe A a m aena ThE Tthnae Te reer pia eae re ci ammi MERRE AES AIO FS ee All text in poster feel boring Necessary photograph and images are needed Design and Applied Technology Secondary 4 6 Type as an Image Type is visual materials All lines dots shapes and textures in a type have to be integrated with all other elements in a design For the opposite poster the type s displacements help the poster s composition 2 3 2 Sound Sound can be classified as literal or abstract Literal sound carries specific meanings to the audience It is referential and for supporting daily life For examples the sound spoken by people and the sound arisen from the environment are literal On the other h
76. d listen in the interview without nodding or any other gestures 3 2 5 Storage and Formats Images and videos captured digitally have to be stored digitally That s why the storage formats and devices matter a Image Storage Device Portable storage devices are used to store images taken by compact digital cameras As technology advances the physical sizes of storage devices become smaller and smaller while the storage sizes become larger and larger sandisk 23 512 epee bP Lra CompactFlash CF I Memory Stick Secure Digital card xD Picture Card SD xD Design and Applied Technology Secondary 4 6 res MiniSD microSD Mini CD USB flash Card right left Drive Multimedia Card MMC Microdrive SmartMedia CF ID b File Format and Resolution There are many commonly used lossless file formats Most digital cameras support more than such formats to keep captured images Users can view them through PCs or even television sets whose screens are made up of pixels The maximum number of pixels of an image that a camera can capture is called resolution id File Formats ra a RAW JPEG ST a bd giant psd 61350063 TH Gic_O001 NEF OS_30D ing le al H bs d itema 25 46 GB available c Video Storage Device There are many kinds of digital camcorders in the market Most of them support High Definition Video HDV with
77. d palette i OLE Color o C Tool Box The first time you start the application the toolbox appears on the left side of the screen Some tools in the toolbox have options that appear in the context sensitive tool options bar These include the tools that let you use type select paint draw sample edit move annotate and view images Other tools in the toolbox allow you to change foreground background colours go to Adobe Online work in different modes and jump between Photoshop and ImageReady applications PY of per Rectangular Marquee Tool Mm The marquee tools make a a pF _ Elliptical Marquee Tool M rectangular elliptical single cza Single Row Marquee Tool row and single column i Single Column Warquee Tool i selections he The move tool moves selections layers and guides g m g Lasso Tool L The lasso tools make PA Polygonal Lasso Tool L freehand polygonal straight T Magnetic Lasso Tool i edged and magnetic snap to selections Design and Applied Technology Secondary 4 6 r The magic wand tool selects similarly coloured areas jai The crop tool trims images Je m Slice Tool K The slice tool creates slices Slice Select Tool K of Healing Brush Tool J The healing brush tool v fe paints with a sample or pattern to repairs imperfections in a image AF au The brush tool paints brush P Pencil Tool E strokes The pencil tool paints hard edged strokes
78. d to design a website for your school what kind of information will you put in it What is your plan to structure the site b Web s Yesterday Today and Tomorrow Websites are a star in the field of digital design WWW evolved rapidly in the past decade it keeps evolving today Websites showed mainly text and simple graphics in late 1990 s Nowadays they can contain full frame videos high quality audios much easier interaction and navigation systems for downloading and uploading What can websites do tomorrow Who can really predict Design and Applied Technology Secondary 4 6 ees 1 T in Er z Eia H Blog Blog stands for weblog 1 e a logbook in the format of a website It is a type of website that allows the bloggers the blog s owners to express themselves in text images voice etc Some blogs are the bloggers personal diaries some are forums of particular topics Blog readers can leave comments in the blogs to interact with the bloggers Reference WWwW xXanga cOmM YouTube YouTube means Your Tube television It is a video sharing website for users to upload video clips for sharing The variety of videos available in YouTube is diverse For example there are movie clips TV clips music videos video blogging and short original videos Reference www youtube com Facebook A face book is a book printed with the faces photos and personal information of the
79. d to do a research project themselves using multimedia tools and products from a website to develop a promotion campaign This time we have chosen Hong Kong Tourism Board s website as an example The aim of this student project campaign is to promote Hong Kong tourism Expected Learning Outcome Students should be able to gt Understand the nature of and experience creative activities gt Develop creative thinking and attitudes to be used in their project activities gt Work in teams in project work that requires creative thinking and input gt Participate in creative activities and acquire experience from them gt Enhance their ability to communicate ideas effectively Students are recommended to use multimedia tools to complete and present the project Background The Hong Kong Tourism Board HKTB is a government subvented body It was founded on 1 April 2001 under the HKTB Ordinance It was reconstituted from and replaced the Hong Kong Tourist Association HKTA which was established by Government Ordinance in 1957 The primary responsibilities of the HKTB are to market and promote Hong Kong as a worldclass tourist destination as well as enhance travel experiences of its visitors once they have arrived The HKTB s mission is to maximize the social and economic contribution that tourism can make to the community of Hong Kong and to consolidate Hong Kong s position as a unique world class and most desired place to visit In
80. distortion and colour Design and Applied Technology Secondary 4 6 correction In addition the sound and voice b Production methods G 3D Animation Working Environment A fundamental difference 3D and 2D animation production is their working environments between For 3D animation it works in a three dimensional space for 2D it is a two dimensional space sequences have to be edited for example by adding 2 Linge Mie mas P Phrasal Ht for Cararercha Uer Bebe Lice Fie Ger Tek Guo Ae Create Peien Owais neater mir Gehi Pesdeirg Custer Baten Hep Oe AU Cas Ora JE gt eh oe ei a Es A TAA GA Pare Es y ee bOveR ES a m mm m ai p e Epy he a BE me G E eee Suey kam fo a oA eee ee EG a si To create 3D animation we have to move rotate and scale Geometric Primitives Gi the object by changing scales in the X Y and Z axes The creation of 3D animation starts with modelling All 3D animation software enable users to create simple shapes with geometric primitives Primitives are basic modelling objects such as cubes spheres cylinders and cones Geometric Primitives cylinder cube sphere and cone 111 Polygonal Modelling Polygonal Modelling is one of the most common techniques provided by 3D animation software for modelling surfaces Polygonal modelling defines an object by applying polygons on the object s surface
81. ds and services a goods services and soft goods hours Depends 24 hours 7 days a week Study Amazon com s website to see what kinds of digital media this e commerce based company has used to set up its online selling business Examples of digital media includes but not limited to compact discs digital graphics digital videos e book systems video games Internet mobile phones digital TV and digital audio 1 3 5 Usability n Media In the context of communication media usability refers to suitability of methods used for communication It can also refer to the efficient use of media to communicate or expose such as posters or a websites Usability is not only a matter of media or technology but also messages that designers have to deliver to the public Individuals are different by definition Therefore applying differences in perception and attention method is needed In addition different combinations of media may be used in multicultural communities such as Hong Kong to form different usability scenarios PCCW s Advertisement Both traditional and digital media are used widely for advertisement Examples of advertising through traditional media are advertising through printed flyers rack cards cinema television shopping carts bus stop benches magazines newspapers buses and aeroplanes Examples of advertising through digital media are advertising through web banners and mobile telephone screens Pacific
82. e 1 e global warming Past examples such as the family of the Dragon of Cleanliness may give you some insights Draw out your character using graphic software Photo retouch A fantasy world of a future city was required Andrew fine tuned a picture of Central Hong Kong making Central looked different Hints for your project Various digital filters can be added to your photos Changing its Hue and Saturation may also help Don t forget to use separate layers for different image components in order to facilitate your further editing Typography A title was added to show the topic 1 e 2005 Asia Game Show Shading and growing effects were added to the typography to draw viewers attention Big captions are often placed at the upper part of posters Hints for your project Add the topic title Global warming harm our world into the poster Don t forget to select suitable font s and font sizes Compositing Finally export all output to a JPGE file Design and Applied Technology Secondary 4 6 Design Project School Logo Animation A Introduction Many companies design logos for image and brand building A logo design is successful if it can help to advertise Nike s swoosh logo is a good example Some companies may use animation to promote their logos For example Pixar uses two lamps Luxo Jr This project leads students to go through the design and production processes of logo animation
83. e gt Create Motion Tween The grey bar becomes purple and an arrow appears EEE ee 5 Select Modify gt Transform gt Rotate and Skew 6 Go to frame 1 and rotate the object Design and Applied Technology Secondary 4 6 c 7 Click Scene 1 on the top left corner to the canvas to switch back to the main scene Flash only allows to test the movie which is shown in the scene 8 Drag the symbol logo into the main scene to play the animation 9 The symbol logo is automatically added into the layer 1 Select Insert gt Timeline gt Frame to add 120 frames in the Scene 1 10 Select Control gt Test Movie Exporting Flash Movie Stop 11 Now it s the turn to animate layer t In this layer add frames until frame 45 by selecting Insert gt Timeline gt Frame Insert keyframe in frame 24 and frame 48 12 Select Insert gt Timeline gt Create Shape Tween Design and Applied Technology Secondary 4 6 E gt i 1 T Es Tr bas ee g ED O fe de he ee ee ik eb eS a ee So se Se ies es al blue Oi al orange E al pink B wl green q TE m CUPP E Ee eee eee eee 13 Delete the frame at frame 1 in layer t by clicking frame 1 and then delete 14 16 Use Oval Primitive Tool to draw a circle and fill with yellow at frame 24 17 Test the animation again The followings are the snapshots of the animati
84. e Study Examine Your Daily Life To understand the impact of digital media you may start with examining your daily life by keeping a diary Use the following sample as a diary template to record your use of both traditional and digital media of a week DATE TIME MEDIA MEDIA D T CONTENTS COST 23 10 l l T Leon Lai s f aspm 200pm HKG P 00pmm 5 30pm www akso After the week summarize the details with respect to the following questions a Calculate how many hours you spent on each medium on a daily basis b Calculate how much you spent on traditional media and digital media respectively c Identify whether you used digital or traditional media more in terms of time and money Did the result match your expectation d Identify your media usage patterns in terms of place attitude purpose individual or as a group usage etc 1 3 4 Chronology of Major Technological Advances in Digital Media The speed of technological change in the past two to three decades might be the highest in the history Perhaps no one can correctly predict whether technology will be developed in the same a slower or a higher speed in the next two to three decades One thing for sure is that given the increasing popularity of digital media many industries such as the entertainment industry and mass media are rethinking their business models e ye Design and Applied Technology Secondary 4 6 As digital media s rapid developme
85. e a different blending mode for a layer set you effectively change the order in which the entire image is composited All of the layers in the layer set are composited first The composited layer set is then treated as a single image and blended with the rest of the image using the selected blending mode Thus if you choose a blending mode other than Pass Through for the layer set none of the adjustment layers or layer blending modes inside the layer set will apply to layers outside the set Design and Applied Technology Secondary 4 6 15 About layer effects and styles Layer Style l x Styles Blending Options SS General Blending Blending Options Default Blend Wade Normal Cancel T Drop Shadow a hoog Capacity _ at Mew Style I Inner Shadow I Outer Glow Advanced Blending lw Preview Fill pacity 7 foa H I Inner Slow r Channels Jw R r ic r E Bewel and Emb P eras Enockout Mone F contour Blend Interior Effects as Group l Texture ri Blend Clipped Layers as Group I Satin Jw ivensparency Shapes Layer E Layer Mask Hides Effects F color Overlay Vector Mask Hides Effects T Gradient Overlay Blend If aray z Pattern Overlay z This Layer E 255 Stroke Photoshop and ImageReady provide a variety of effects such as shadows glows bevels overlays and strokes that let you quickly change the appearance of a layer s contents Layer effects are linked
86. e captured or recorded Design and Applied Technology Secondary 4 6 ye A sensory device can be a magnetic device that emits magnetic pulses or an optical one that makes use of reflection Motion capture systems capture every frame without key frames or interpolation input from the animator As a result the data sizes are very big Motion Capture Movie The Polar Express The Polar Express was produced by Sony Pictures Imageworks and launched in 2005 Its production combined full digital animation with highly advanced motion capture technology Actors had to perform in a studio with many optical cameras attached Data captured from the actors were restored to the virtual characters Reference http polarexpressmovie warnerbros com index html Design and Applied Technology Secondary 4 6 Both 2D and 3D animations have been developed rapidly especially in feature films video games and commercials for the past few years Prepare a presentation of 3 to 5 minutes with one of the following topics a Your favourite Short Animation or b Your favourite Game Opening The presentation should be a Short b With one focus c Practical In addition state what kind of special effects and editing methods are used in the animation Design and Applied Technology Secondary 4 6 CHAPTER 3 DIGITAL MEDIA PRODUCTION Definition This chapter introduces the process development and the workflow of digital med
87. e is made differently However they all go through the same process preproduction production and postproduction Students are suggested to use the following tools to complete the project gt Software Movie Maker Video Studio iMovie and Premiere gt Hardware Digital Video Expected Learning Outcome Students should be able to gt Acquire basic knowledge in handling photography filming video and audio production together with a brief understanding of the industries workflow gt Understand the chemical reaction and techniques of combining sound and vision Phase 1 Preproduction The preproduction stage of a movie refers to the formation of ideas and initial planning There is no concrete or scientific definition It could be simply a collection of impressions or attractive insights or shots that the project team can think of On the other hand there may already be a complete script a detail storyboards casting etc Idea is the heart of every movie Without basic ideas the movie can never succeed gt A script is a written plan for a video Its author is called a screenwriter gt A storyboard is a graphic presentation of the story It is an initial primitive visualization or imagination of the final product gt Casting is the selection of actors for the video Design and Applied Technology Secondary 4 6 EE ee eee iL EEE ee i i m n ini iia Se Three Types of Cast gt
88. eceive image sequences sound and music Digital television allows higher quality images and sound than analogue television does As a member of digital television high definition television or HDTV broadcasting system has been introduced to Hong Kong in December of 2007 HDTV provides Hong Kong audience with double liner resolution of the traditional television systems Therefore HDTV display in ages in greater detail than both analogue television and normal DVD In addition the technical standards for broadcasting HDTV handles the 16 9 aspect ratio images perfectly as HDTVs are 16 units in width and 9 units in height HDTV resolution SDTV resolution HDTV Source For the increasing popularity of large screens LCD displays and projectors SDTV s comparative disadvantage in quality becomes obvious To enhance the quality of TV pictures HDTV compatible televisions set as well as HDTV broadcasting signals are required Typical sources of HD signals are as follows a In Hong Kong HDTV is available in major broadcasting networks over the air To receive HDTV signals an HDTV tuner is required It can be a standalone tuner for those HDTV sets without such a tuner or a built in one which perform in most recent HDTV sets ye Design and Applied Technology Secondary 4 6 Jaya Channel T thome Channel AS teal channel At world channel Digital TV in Future i a Ge seyachannel Arv ahome Channel Jaya C
89. ect you want to show about the harm of global warming e g the environment human lives or the death of animals and Use your imagination to incorporate the key elements to a poster 2 Research To get a clearer picture about what style and tone the poster will use Andrew has done research about human perception of a future city and game development Moreover he has decided to use Photoshop and Maya as the production software Hints for your project Looking into other designs is probably a good way to start your creative process You should start by collecting photos and posters about global warming or similar topics such as environmental preservation 3 Drafting Andrew used the photos he collected and made a simple draft of his poster design to figure out the pros and cons Moreover a draft is good for designers to communicate ideas to customers Hints for your project Other than matching the photos chosen some space should be left to introduce a character to catch the audience s attention The poster size will be A4 either portrait or landscape Photoshop Firework or other similar graphic software can help to draft the poster 4 Character design The singer Mr Leo Koo was the poster model Andrew gave him a special game character like image as sketched below Design and Applied Technology Secondary 4 6 5 6 7 Hints for your project Design a cartoon character for your poster to highlight the them
90. ed features and lower picture quality For example in many cases digital photos are stored in JPEG compression mode Although some compact digital cameras have built in flashlights the flashlight power is low and is only sufficient for nearby subjects Design and Applied Technology Secondary 4 6 aoa me u 7 ay a in ie Ses OE Peed SO View find or LCD display shows an approximation of the image frame Light source Digital image sensor Lens gt Camera Operations 1 Shooting Mode There are many camera shooting modes The fundamental two are automatic and manual Nowadays compact digital cameras provide a wide range of shooting modes such as close up night party and sport etc 11 Shutter Shutter Speed Shutter speed measures how long a shutter is held open when taking a photograph Through an open shutter light can reach the film in traditional cameras or imaging sensors in digital cameras Shutter Speed Shutter speed is measured in seconds ye Design and Applied Technology Secondary 4 6 111 Aperture Depth of Field Depth of Field DOF is the total distance within the picture from the foremost point of the subject to the farthest point of the subject The area within the DOF range appears sharp in focus while those beyond this range became blurry Depth of Field iv Exposure Exposure refers to the total amount of light falling on t
91. ed to natural science such as biosemiotics or zoosemiosis a Symbols A symbol is a sign object or character that represents a physical or logical item idea concept or abstraction For example in Hong Kong s traffic system a red octagon is a symbol for stop Given Hong Kong s bilingual environment a Chinese character of f and an English word of STOP are attached for elaboration Symbols evolve over time For example the i rectangular symbol in the left was used in the old SN is of students Today a triangular symbol of two STOP ERG CAUTION Hong Kong to alert drivers to the possible passage running children is used Symbols A simple example of symbols is the numerical system which captures the quantity concept into numbers The Yin Yang symbol is well The medicine known to Chinese It summarizes symbol the concept of Yin and Yang s co symbolizes the existence and their mutual bacteria genes inclusion A double happiness symbol reflects Chinese s concept of wedding is a happy event in double quantity Design and Applied Technology Secondary 4 6 b Icons An icon is a sign that has similar graphical characteristics and thus signifying to the item object or action that it represents In computer interface icons are used extensively in those software packages with graphical user interface For example a 1 44MB floppy disk represents file
92. efined in the final render process gt Time output It is the sequence s duration that is to be rendered The longer the duration the bigger the file size and the longer the rendering time is required gt Output size Resolution The output size or resolution is subject to the purpose of the sequence For example an animation for standard Hong Kong TV broadcasting may need an output size suitable for PAL 1 e 768 x 576 pixels gt Output format The choice of output formats depend on the rendering stage Movie outputs may use window media format avi or QuickTime format mov Regardless of the format each file should be specified with a compression option for reduction of file size Design and Applied Technology Secondary 4 6 Design Project School Life Video This project attempts to create a school life video to be played at school or on the web Video creation is easy nowadays With an inexpensive digital video camera a computer and editing software you can create anything from a five minute drama club trailer to a feature length film Video is not only a kind of entertainment it is also a medium of communication that brings messages to audience Some people may use it for educational purposes others for artistic expression You can use digital pictures video music sound effects voice overs titles and special video effects to deliver messages through your own movies There are many types of movies and each on
93. eled duth gr ipm1 multi pro multimedia project ect project html media project Communication in digital media Ray s Introduction http www eng fju edu tw English_ Lit Introduce the study of to Literature erature terms denotation htm American and British literature Recording History http www recording Introduce the technologies of history org HTML tech php sound recording Semiotics and http web aiweb cn info 1 246 html Define semiotics and signified Signified Signifier and http changingminds org explanations Define signifier and signified Signified critical_theory concepts signifier_sig nified htm Story from Start to http multimedia journalism berkeley Explain a story from beginning Finish edu tutorials reporting starttofinish to complete Taking digital http www imphotorepair com digital Explain the technologies of pictures cameratips html taking digital pictures The Rule of Thirds http www hippasus com resources vi Introduce the basic concept of scomp index html rule of third Video Shooting http www medialab tv services prod Explain the technologies of uction vidshoot htm video Soong Visualization http mit vtc edu hk Introduce visualization Game System system in he Department of Multimedia and Internet Technology in IVE Tsing Y1 http www wii com Introduce Will technologies Design and Applied Technology Secondary 4 6 E Useful Reference Websites L ABAJA
94. ender Scene Default Scanline Rende GEE 1 Tim gt Outp ut Render Elements Aaytracer Advanced Lighting Single Render current frame ae ae gt Active Time Segment Renders the current range of frames shown on Track 3 B Time Output aa Single Ever Mth Frame i gt Range render according to your selection of which frame to start and stop File Number Base E ra i 2 Output Size Give you control over the ooe B resolution and the pixel aspect of the ture Width rm 20 120 final rendered picture PAME r6Ss576 1804135 gt Preset drop down list This list provides val H ele na instant access to a variety of industry Image Aspect 1 33333 Pixel Aspect 1 00000 image formats Options W Atmospherics T Render Hidden Geometry IY Effects Area Lights Shadows as Points 34mm 1 376 7 Full Aperture cine fa Displacement Force 2 Sided 35mm 1 371 Academy cine l 35mm 1 66 1 cine Wideo Color Check Super Black Jamm 1 75 1 cine Render to Fields 35mm 1 55 1 cine J5rmm Anamorphic 2 35 1 Advanced Lighting Sor Anamorphic 2 35 1 squeezed dioi anann fOmm Panavision cine rimm MAS cine Compute Advanced Lighting when Required VistaVision S5mm 24mm ss 3bmm slide Berm bem f2 1 4 1 2 1 4 slide 4 5 of 810 slide NTSC D 1 video NTSC DY video PAL video PAIL BM video Autodesk ME Image Sequence File imaq HOTS vided ee Lighting M Use Advan
95. esign and Applied Technology Secondary 4 6 E items 5 nee a woe i a a u Sse m gt After you select the AI file a pop up window A Import will appear and ask you to make a selection Do you want to If there is nothing else in your scene you can select the first option Merge objects with Merge objects with current scene current scene and click OK C Completely replace current scene nE n Cesl Cancel gt Another Option box will appear and select the first option Single Object Import Shapes s f Single Object C Multiple Objects Select Single Object can help you to Cancel group all logo elements into one single aK object gt The logo has already imported into the 3D environment as a Editable Spline SR Ce UA TA lt gt Design and Applied Technology Secondary 4 6 Step 2 Turn the lines into a 3D geometry You imported the logo into the 3D environment and we are going to turn it into a 3D object gt Click on the Modify panel and you can see that the logo is a Spline We are going to change it to a 3D geometry i Zae wT pE Geomety New Vertes Type Linear Bezier Smooth Bezier Comer Modifier List Create Line Break Attach l Reorient Attach Mult Cross Section tal H T E Refine Connect F Linear Eind first Rendering i Closed f Bindlast Inter
96. ever to address the customer s need A design concept is a preliminary solution which may not have particular details yet A superior design concept takes care of both practical and artistic issues It provides design and the development process with a feasible framework The result is a collection of design concepts feasible for further development Computers can help speed up this time consuming process 2 1 2 Semiotics Semiotics is the use of signs to deliver messages to the audience A sign is a mark with a certain meaning There are three types of signs namely gt Symbols A symbol is a sign that represents a physical e g the word of apple for a fruit or logical e g the word of Apple for an IT company in the US or a newspaper company in both Hong Kong and Taiwan item The relationship between the item being represented and the symbol may or may not give people direct association gt Icons An icon is a sign that has similar graphical characteristics to the item that it represents For example a painting of an apple carries the major characteristics of an apple gt Indexes An index is a sign that indicates a fact or condition For example in terms of human health a chest pain may indicate different health problems such as heartburn and a smoke may imply that there is fire from source of the smoke Design and Applied Technology Secondary 4 6 Semiotics Signs are ubiquitous in daily life For e
97. ew drag over the front face of the cylinder A temporary grid appears as you drag over the face 9 Adjust the parameter at modify panel as Radius J29 Height 5 0 Fillet 2 5 gt Design and Applied Technology Secondary 4 6 Fillet Segs 4 Sides 24 10 Rename this object to Train Body Rim 11 With the Train Body Rim object selected click on the Align Tool button in the Main Toolbar Select the Train body object and the Align Selection dialog ie 12 Turn off auto grid 13 Create a Box and modify it parameter as Length 50 Width 70 0 Height 70 JE Cancel Apply Align Position Worldy lw E Curent Object Target Object C Minium Center C Pryot C Wlaxinum Align Gnentanon Locali TX Axi TY Axis T ZAK latch Scale TX Axi TY Axis T AAK C Minimum Center C Fivot Wlaxitoum 14 Rename the Box to Train Cabin and align it to the end of the Train Body Understand Array 15 Select the Train Body Rim object 16 Click the Array icon and change the parameter as following Incremental ka T a ka Array Transformaton World Coordinates Use Pivot Point Center Totals ie ga 70 0 SO Sa ee e100 SO ee a a foo z foo Rotate gt 0 0 0 pi S degees V Pe Crier m0904 000 S 00 S lt Scale gt p000 S iodo S M000 S percent f Unifom Type of Object Array Dimensions Count in EN 7 y Cop C Inst
98. fectors Outputs from a human a Noise b Movements Design and Applied Technology Secondary 4 6 pak fe ers ae ond a a Ea a j ie Tas jel G H L The Vestibular Sense and Entertainment While visual and audio are two major senses that entertainment targets to satisfy the vestibular sense is increasingly being developed for enhancement of reality a Dynamic cinema In dynamic cinemas 3D projection systems with special in situ effects so called 4D are installed to provide audiences with unique experience that normal theatres cannot For example Mickey s PhilharMagic in Hong Kong Disneyland presents a 3D journey with some most memorable moments in Disney s animated films b A simulator system A simulator system provides users with realistic experiences artificially through presenting certain key characteristics or behaviours of the systems or experiences being simulated For example there is a car game system that was developed by students in IVE Tsing Y1 This simulator system models the environments of Central and Wan Chai allowing the users to gain insight into the eventual real effects of alternative conditions and courses of action Motion platform car racing game Department of Multimedia and Internet Technology IVE TY c Vibrating game controller As its name implies a vibrating game controller focuses on its motion sensing capability Through physically
99. fferent kinds of Animation Production 1 Stop motion Animation Stop motion animation is to take pictures on manipulated objects frame by frame Each frame captures a gesture of the object with minor differences from its preceding frame Stop motion animation can be applied to clay animation cut out animation object animation etc For example King Kong a film made by Willis O Brien in 1933 Clay Animation Clay animation or claymation is one kind of stop motion animation The objects photographed are figures made of clay or similar malleable materials For example The Wallace and Gromit shorts 1989 1995 of the United Kingdom Design and Applied Technology Secondary 4 6 fo g T T Gees Ee Fe is Cut out Animation Cut out animation is another type of stop motion animation The objects of this type are 2D pieces made of paper cloth etc Nowadays objects of cut out animation can be made digitally with scanned images or vector graphics The South Park TV series 1992 present is an example of cut out animation Object Animation Object animation is produced with inanimate objects The Brickfilm is made by plastic toy building objects LEGO is an example i 2D animation Like stop motion animation 2D animation was handmade frame by frame traditionally but now can be done with computer technology There are two types of animation software packages namely bit mapped animation and vector based a
100. figuration Frame Rate Time Display ers ein Frames SMPTE PAL of Cust pe FRAME TICKS FPS 25 S F MM SS TICKS Playback I RealTime M Active Viewport Ony Loop Speed q x C 1 28 Js f Ox O de Direction Forward Reverse Ping Pong Animation Start Time T Length 200 End Time 200 Frame Count z0 Re scale Time Current Time 11 Kep Step W Use TrackBar I Selected Objects Only M Use Curent Transform Position W Rotation W Scale gt Create Animation Cancel Jase Ea In the Time Configuration Dialogue Box 1 Change the Frame Rate system to Pal 2 Change the End Time to 200 For an 8 second animation 3 Click OK to confirm the new setup In 3D animation software you can have two methods to create animation Auto Key and Set key In Auto Key mode all changes will be recorded and create animation automatically In the Set Key mode you have to confirm your selection after you change any parameter In our logo animation we will try Set Key mode In the bottom of the window select the Set Key Button p F h k m 5 is i La di aR ae z Grid 10 0 SEE ee r Add Time Tag E e a a SVE rer Toggle Set Key Mode Set wey Fey Fiter hi i Design and Applied Technology Secondary 4 6 E r a ee aa T ao ee eee eT ee a Change the position of the camera on the top view move it close to the logo
101. formation provided by The Hong Kong Tourism Board website The website of The Hong Kong Tourism Board keeps surfers informed of all main events activities and milestones in Hong Kong s fast developing tourism sector It uses different colours for different sections and linking the information step by step which include words graphic photography video and animation Reference website http www discoverhongekong com login html Design and Applied Technology Secondary 4 6 ye It starts from providing basic information about Hong Kong such as the visa services and transportation facilities The linkage of different pages are clearly arranged to show the details graphically Following the territory s label of the heaven of shopping the website points out various shopping centres in Hong Kong maps are shown in the web page for visitors to know the locations The website also introduces places to visit and eat where to join heritage tours and where festivals are held Many photos are used to show the scenery and tourism spots in Hong Kong inviting foreigners to come In addition it provides visitors such as business travellers family travellers and couple travellers with different itinerary travel plans visit plans Brand Advertising Multimedia technologies have been adopted for promoting Hong Kong Both traditional and digital ones have been used since each of them has it own specialties and characteristic
102. four common factors Representation The theme of a computer game is related to the reality in different forms and extents It can be a simulation for the sake of learning for example to drive a car It can also be simply for fun by participating in the story of a game such as raising a child or fighting against enemies Interaction Computer games enable interaction with the players and even among players themselves A player may compete against the time constraint imposed by the game answer the difficulty increasing questions raised by the game or fight against the enemies played by other players Tetris Conflict Similar to the stories of dramas and movies computer games provide the main characters the players in this context with different conflicts A player has to clear these conflicts or obstacles before achieving the goals Safety As mentioned previous computer games are virtual products The conflicts or obstacles that they present are only psychological experiences not harming the players direct Having said that still there may be some side effects on players For example looking at the screen for an overly long period of time or too intensively may harm a player s eye s Design and Applied Technology Secondary 4 6 1 2 2 Digital Television Standard definition TV or SDTV makes use of analogue signals for broadcasting Digital television makes use of digital signals to send and r
103. hanne Py Sec Cannel sayta A 1001 11 00 01101010 TWIworld Channel 391110111110010 1I111111110111 Ee Other Channel A other Channel 1011102L01101110 b Many cable television companies offer HDTV broadcasts through their digital broadcasting service with tuners set top boxes provided by the companies c Video game machines such as Xbox PlayStation 3 and Xbox 360 and digital media boxes such as the Apple TV can output HD signals d Many computer graphics cards or TV cards in the market already enable image or video output to HDTV sets through either HDMI or DVI interface Computer TV card e Blu ray an optical disc standard of storage 25GB to SOGB can be a large enough storage medium for HD video contents u ray Disc Design and Applied Technology Secondary 4 6 1 2 3 Electronic Books An electronic book or e book is simply an electronic document with a layout similar to a usual printed book E books can be read on personal computers PDA s or dedicated hardware devices such as e book readers or e book devices user viewing an electronic page on an e book reading device Advantage of Electronic Books a Writers and publishers may produce e books in different file formats Readers users or viewers can choose e books in file formats that fit the viewers own devices b Readers can search various parts through text strings in e books This feature gives e books a large ad
104. he film or image sensors when a photograph is being taken How much exposure is required is subject to the sensitivity of the medium in use For traditional films sensitivity refers to film speed which is measured on a scale published by the International Organization for Standardization ISO Exposure is a result of the time and level of photosensitive materials exposed to illumination The former is controlled by the shutter speed while the latter by the lens aperture Aperture Shutter Speed Exposure Value v White Balance To humans white is white To digital cameras white is a value with reference to a value with which other colours are calculated recognized To some digital cameras white balancing is automatic while some require manual settings vi Colour Temperature Colour temperature is a measurement of the quality of a light source using the ratio of the amount of blue light to the amount of red light with green light ignored The measurement unit used is Kelvin K A light with a higher colour temperature has more blue than green and hence is referred as a cooler light Design and Applied Technology Secondary 4 6 3 2 3 Video Shooting The variety of digital camcorders is wide Most of these camcorders support High Definition Video HDV In terms of storage methodology 8cm recordable DVD s MiniDV videotapes MicroMV videotapes memory cards and hard disk are available in the market For ho
105. he perimeter of the cylinder that are just above the vertices in the midsection of the circle aS EE yr Design and Applied Technology Secondary 4 6 c 6 Check use Soft selection and set the falloff to 125 The Soft Selection controls make a sub object selection behave as if surrounded by a magnetic field Unselected sub objects within the field are drawn along smoothly while you transform the sub object selection the effect diminishing with distance This falloff is visible in the viewports as a colour gradient surrounding the selection 7 Nonuniformly scale the vertices toward the centre of the cylinder until a guitar like form is achieved 8 In the front view move the inner circle to the upper half of the guitar 9 Go to the bottom view select the vertices of the inner circle Click Collapse to collapse these vertices to a single vertex 10 Go to Polygon sub object level Select the polys inside the inner circle on the front of the guitar In the Edit Geometry rollout click Extrude type in a value of 5 and press Enter Press the Delete key to create the hole of the guitar 11 Select the two polygons at the very top of the guitar non uniformly scale them along the X axle Design and Applied Technology Secondary 4 6 12 Select the top polygon toward the top of the guitar perform an Extrude with a value of 40 Scale and Move the polygon 13 With the top polygon of
106. he viewers with a sense of balance stability and order through equal visual weighted forms and or colours of elements about an axis EE ee eo _r Design and Applied Technology Secondary 4 6 E Symmetry is the oldest known formal Radial symmetry in three dimensions arrangement b Repetition Repetition is a recurrence of a design element shown in a planned uninterrupted and regular fashion Repetition provides the viewers with a sense of static and stillness Repetition is the recurrence of a design element Repetition is often applied in animation design and character models For example the hair of a character is formed by repeating a reference model Reference image Repetition texture 3D character model c Contrast Contrast is the use of the effect of difference Contrast can be created with size colour font etc Design and Applied Technology Secondary 4 6 d Afterimaging An afterimage which is also known as ghost image 1s an image of an object that viewers can still see after they have already moved away their sights from the object It is an optical illusion Animation and cinema work with a similar phenomenon which is called the persistence of vision Afterimage Follow the steps below to experience afterimage a Look at an object b Close eyes c Open eyes again Look at the line in the middle and blink The line should become
107. ia production through the following topics 3 1 Project planning and idea presentation methods 3 2 Manipulation of visual and audio equipment 3 3 Application software Technological Design Concepts These topics facilitate students a Identifying the needs for digital media production b Outlining and distinguishing different building blocks in digital media production c Managing the activities of digital media production d Producing simple digital media works with appropriate visual and audio equipment and application software Technology Development There are different types of visual and audio software packages equipments in the market After the Chapter students are expected to have a Basic operating skills of these software packages and equipments b Basic knowledge of capturing media products in different environments Design and Applied Technology Secondary 4 6 3 1 PROJECT PLANNING AND IDEA PRESENTATION METHODS Before starting a multimedia project the designers should have at least a rough idea about the project scope and contents They should consider what methods available are the best for conveying messages across to the target audience 3 1 1 Production Timeline The designer should develop a Production Timeline which shows project milestones and deliverables with due dates The following is an example for a website development project Production Timeline of Website development project leve
108. ia Pacific Tournament are typical examples Animation E card People can send e cards in this section With different card designs to choose from people can send greetings and messages to their friends and family around the world Of course the cards can have motion graphics showing the spectacular themes of Hong Kong such as the Chinese New Year festival or other attractive items to promote Hong Kong Design and Applied Technology Secondary 4 6 ASSESSMENT TASKS There are two main purposes of assessment namely assessment for learning and assessment of learning Assessment for learning involves using feedback on learning and teaching to make learning more effective and improve teaching strategies It is a formative assessment since it forms or shapes learning and teaching Formative assessment should be performed on a daily basis Attention should be paid to every detail of learning Assessment of learning emphasizes the determination of learning progress It is a summative assessment because it summarizes how much the learners have learnt Summative assessment requires periodic reviews such as on a yearly basis to see how much has been learnt Formative assessment is different from continuous assessment It is considered more preferable than summative assessment which was mostly used by many schools in the past Formative assessment is especially useful for refining instructional decision ma
109. ideo camera and use those camera techniques you have learned Ww Design and Applied Technology Secondary 4 6 E Eo E a S a Rr a O a T 3 2 4 Lighting Equipment Lighting not only enables cameras and video recorders to work properly it can also create desirable atmosphere or mood Three point Lighting Three point light is the standard lighting scheme for classical narrative cinemas It makes use of three light sources to create a sense of depth Backlight differentiates the subject from its background creating depth Key light accentuates the subject Fill light minimizes the faint shadows created by the key light Key Light A key light is the key or primary light source that draws viewer s attention Back Light A back light is a light source from the back It brings up the subject from the background to the audience Design and Applied Technology Secondary 4 6 k EE a a ee T iD ls ie ee SSE 2 es a Fill Light A fill light source fills light in and thus softens the shadows that the key light creates It should be more diffuse less intense and less focused than the key light is Rim Light A rim light is a member of the back light family It outlines the object and emphasizes the edges a Lighting Contrast Contrast the proportion difference or effect observed when light and dark areas are put together High contrast i e larger diffe
110. in the vtc layer Stroke width colour and style can be set up in the Property Palette at the bottom of the workspace Properties x Filters Parameters Pen Fes LJ l l Solid Custom Cap Tool Stroke hinting Scale Normal l Miter 3 Join 2 gt 10 Paint Bucket 4 allows to fill the colour into a closed path The colour can also be adjusted into the Fill Colour in Toolbars o 11 Use the Selection Tool to pick the stroke as the following and then delete it Design and Applied Technology Secondary 4 6 E 12 Create a t and c layers and trace the logo into these separate layers 13 Repeat creating layers and draw the triangular rainbow in different layers and named with their colours blue af crange pink green c t v Ea Design and Applied Technology Secondary 4 6 E Part 2 Animating the symbols A Setting up the rotation animation 1 Click frame 120 in layer v and highlight it and Inserting frames by selecting Insert gt Timeline gt Frames H gt 8 oT 100 105 110 115 120 au blue o al orange H wu pink al green D al c al t i H go go w blue B a orange H a pink o w green uc gt aut 2 Select Insert gt Timeline gt Keyframe 3 Click any frame in between frame 1 to 120 in layer v Select Insert gt Timelin
111. iques of type design The arrangement of type is the selection of typefaces point size line length leading and letter spacing Video Video is a technology of capturing recording processing storing transmitting and reconstructing images in motion Visualization To recall or form mental images or pictures Whitespace Whitespace is often referred to as negative space It is that portion of a page left unmarked the free space between elements like graphics margins gutters columns lines of type or figures and objects drawn or depicted Wipe A wipe is a gradual spatial transition from one video to another One video is replaced by another with a distinct edge that forms a shape G Design and Applied Technology Secondary 4 6 ACKNOWLEDGEMENTS The authors wish to thank the following organisations companies for permission to use their photographs in this resource package gt Photographs used on pages 13 14 16 28 58 and 97 under the GNU Free Documentation License Every effort has been made to trace the copyright for the photographs and images as needed We apologize for any accidental infringement and shall be pleased to come to a suitable arrangement with the rightful owner if such accidental infringement occurs Design and Applied Technology Secondary 4 6 E APPENDICES All trademarks of products quoted in this resource material are owned by the corresponding registered companies organisations
112. jects of four or five feet high with a little space left Medium Close up MCU Objects in an MCU framing are fairly large for example a person s chest up can fill most area of a screen It is a common shot scale Close up CU Objects in a CU framing are relatively large Human heads or objects of similar size can fill the frame The scales for CU are established with reference to other frames of the same film without a designated definition Extreme Close up ECU Objects in an ECU framing are very large In many such shots small objects or part of a human body especially faces fill the whole screen c Camera Angle Shots can be taken from levels similar to lower or higher than the subjects The latter two are called low angle and high angle respectively Often the relationship between the subject and the object that the camera represents can be revealed through such angle of framing Angle of framing can also be used to create striking visual compositions Design and Applied Technology Secondary 4 6 c EE eee H 7 m i eier e F water iia 2 ie 3 SEE ee Normal Eyelevel The camera is placed at the eyelevel of the observer High Angle The camera is at a significantly higher level than the subject Low Angle The camera is at a slightly lower level than the subject d Camera Movements Camera movements change the observer s angle of view
113. king in teaching and generating feedback to improve learning While formative assessment encourages students to learn from practice and experience summative assessment which includes both external public examinations and moderate school based assessments SBA is still part of the whole assessments framework At the same time internal assessment and public assessment should be differentiated Internal assessments are assessments used by the teachers of a school to evaluate the learning and teaching process throughout a period of three years senior secondary studies Public assessments are assessments conducted for all students of the same academic level in the community Under the framework of Hong Kong Diploma of Secondary Education or HKDSE the Hong Kong Examinations and Assessment Authority or HKEAA supervises internal assessments and conducts public assessments Internal assessments are tend to be formative while public assessments are summative Meanwhile school base assessment SBA has been incorporated into public assessment in order to enhance formative assessment or assessment for learning within the context of the HKDSE Design and Applied Technology Secondary 4 6 1 2 3 4 5 6 QUIZ Which of the following does interaction refer to in a computer game a The game player and the computer hardware b The game player and the game software c The game pla
114. l User Requirements 16 Jul 20xx Identify Deliverables Required 20 Jul 20xx Develop Project Production Standards and Compile Technology Brief 22 Jul 20xx Draft Contract Compile Cover Sheet and Website Proposal 24 Jul 20xx Submit Proposal to Client for Review and Arrange Proposal Sign off with Client Y Design and Applied Technology Secondary 4 6 3 1 2 Gantt Chart A Gantt Chart is a graphical project schedule It provides project stakeholders with the start date end date and task dependencies The following is an example for a game development project Pa 4 6 8 10 12 14 16 18 30 22 24 26 28 30 Literature Research a Deion TE SS Character a B T E Bi 3 1 3 Project Resources Plan A project resources plan documents what resources are required in project execution The following is an example Equipment 4 PC s with Game Engines and Development Kits and environment Maya for Modelling Virtools for Game Design C and Virtools SDK for Game Development Body Scanners for 3D Model Digitalization Motion Capture System for Animation Design and Development 3 1 4 Logbook A logbook is to facilitate the project manager to monitor and manage the project s progress Project team members have to complete their own sheets regularly such as weekly or fortnightly A logbook may contain the following information a Tasks completed in the last reporting period b Tasks to be completed or
115. l media devices encode signals such as audios and videos into different combinations of O s and 1 s for storage Digital media players then decode the works to human friendly forms such as images and sound Binary system data H 10101101 E 01010101 l Chips that used in computer system 11011011 E 01010111 K Personal Computer aroe Main components to identify a new digital media system Design and Applied Technology Secondary 4 6 ee S EE eee a z tor o a See 2 i a a Although audio data are stored digitally in audio CD s CD ROM s and DVD s analogue data can still be output ultimately sample hold a and ADC digital L ooto ADC and filter speaker madium alr analog medium air Audio signals recorded and played Design and Applied Technology Secondary 4 6 E 1 3 3 Traditional Media Against Digital Media Digital media so far is not a replacement for traditional media They co exist While the Internet computers and mobile phones are necessities of people s daily life newspapers books and fixed line telephones are still important communication channels to ordinary people The traditional mechanic printing machine in a very The consumer digital printer we use at office or large size which just appear in printing factory home widely nowadays The 12 inches Black vinyl which usually allow The digital audio CD commonly used in music recording music f
116. lady can be broken down as follows 1 A wide shot arriving at the building A medium shot getting off the bicycle A close up parking and chaining the bicycle to the stand An extreme close up taking off her gloves An extreme close up looking at her hands taking off her gloves and tucking the gloves into the helmet A close up straightening her hair looking at the building Medium and wide shots walking into the building with the helmet tucked under her arm e Composition and Framing Composition is to arrange elements of a scene in a desired fashion to convey messages and meanings f Headroom Headroom is the space between the top of the head of model and the upper edge of the frame Design and Applied Technology Secondary 4 6 g Looking Space A looking or talking space is the space between the head of model and the edge that the head facing to The space should be large enough so that the model seems to look at something or someone or talk to someone h Reverse Shots A reverse shot is taken from the back of the previous shot It is commonly used to present the situations of two people in conversation ma wae ann oe a E 1 Point of View A Point of View POV shot is taken from the character s point of view It puts viewers into the character s shoes creating a subjective viewpoint a Pair up with a classmate b Work in pairs and film your partner to show who he she is using a v
117. le Format Image file formats are standards for organizing and storing image data especially photographic images Most image files are raster data others vector geometric Vector images have to be rasterized to pixels when displayed b Image File Size The size of image files are measured in bytes In general the size increases as the number of pixels and the colour depth increase An 8 bit 1 byte pixel can store up to 256 colours and a 24 bit 3 bytes 16 million A 24 bit colour image is of true colour Relationship between Image File Format and Size Joint Photographic Experts Group JPEG or JPG is a lossy format Almost all digital cameras support JPEG which enables 24 bits 8 bits for each red green and blue The sizes of JPEG files are relatively small A flower image compressed with successively more lossy compression ratios from left to right AS Design and Applied Technology Secondary 4 6 E a aa m ir Ee ia e c Image Manipulation Image editing is to edit or alter the images of digital photographs traditional analogue photographs and or illustrations Specifically editing traditional analogue images is called photo retouching It uses airbrush to modify photographs or edits illustrations with traditional art media Editing digital images is performed in computers Digital images do not only mean the photos taken by digital cameras it also include digi
118. lopment Centre Integrated vocational Development Centre VDC Yeo Chei Man Senior Secondary School CM and Skills Centre Central Administration Partnership with Industry Media Corner Visiting VTC Vision To be the leading provider of vocational education and training in the region Design and Applied Technology Secondary 4 6 E amea i 7 is Tr zz a Laws of Grouping Design Design is a very critical element to all digital media Itis not only related to the outlook but also the final product as a whole ATV News shows an example of presenting different information on a single screen i m 1 4765 ayaa 114 Ba 11 BE e UG00 2 0o04 U 60865 0 9011 Wiebe 1 1798 Re a x ipa I TRL i i i f CC air ram hi Ce DE ETI k E A E Grouping is also applied to role playing games or RPG and real time strategy or RTS games Images from Football Manager 2008 and Command and Conquer Warcraft Laws of Grouping Proximity with Whitespace Grouping with proximity needs separators between items for contrast effect Whitespace is often used Design and Applied Technology Secondary 4 6 Business Card Design Some people want to present their every single detail on their business cards What is the impact on the cards by doing so How can a designer solve the problem Laws of Grouping Grid System The grid system divides the presentation space into grids
119. ly lock a layer J BI U Layers gt Lock Transparency Ito confine editing to the opaque portions of the layer This option is equivalent to the Preserve Transparency option in earlier versions Design and Applied Technology Secondary 4 6 of Photoshop gt Lock Image to prevent modification of the layer s pixels using the painting tools gt Lock Position to prevent the layer s pixels from being moved 9 Renaming layers As you add layers to an image it s helpful to rename Ee Layers E Morral Opacity 100s Lock O ff Fee Fil ioes F layers based on their content Using descriptive layer names allows you to easily identify layers in the Layers palette Double click the layer or layer set s name in the Layers palette and enter anew name 10 Rasterizing layers You cannot use the painting tools or filters on layers that contain vector data such as type layers shape layers and vector masks and generated data such as fill layers However you can rasterize these layers to convert their contents into a flat raster image Select the layer you want to rasterize Choose Layer gt Rasterize and choose an option from the submenu 11 Merging layers When you have finalized the content of layers you can merge them to create partial versions of your composite image The intersection of all transparent areas in the merged layers remains transparent Merging layers helps manage
120. mage s states and in Photoshop to create a document from a state or snapshot 7 Layers palette The Layers palette lists all layers layer sets and layer effects in an image You can accomplish many tasks such as creating hiding displaying copying and deleting layers using the buttons in the Layers palette You can access additional commands and options in the Layers palette menu and the Layers menu 8 Document window The document window is where your image appears Depending on the screen display mode the document window may include a title bar and scroll bar B PALETTE DISPLAY 1 To change the size of a palette drag any corner of the palette Not all palettes can be fal Ee History actions Tool Presets Co Type Tool resized p Move Merge Linked Duplicate layer effect 2 To display a palette menu position the pointer on the triangle in the upper right corner of the palette and press the mouse button a ES History actions Tool Presets f D Dock to Palette m j Step Forward Step Backward l T I HI p z Mew Snapshot Delete Clear History Layers Mew Document Morral Lock O History Options T Design and Applied Technology Secondary 4 6 E Fo f T I a Er ex ms 3 To collapse a group to palette titles only click the Minimize Maximize box or double click a palette s tab You can still access the menu of a collapse
121. me users For advance users For business For professional users videographers Camcorders for different users a Storytelling in Video Shooting A single video shot is sufficient to tell a wonderful story Successful storytelling relies heavily on the size and placement of the shots In addition well composed shots can create a logical and dynamic sequence paving the way for later video editing b Size of Shots The following six stationary camera shots have their respective inherent narratives and psychological effects Extreme Long Shot ELS Long Shot LS Medium Long Shot MLS Medium Close up MCU Close up CU Extreme Close up ECU v v v v v v Design and Applied Technology Secondary 4 6 ee ae 4 Extreme Long Shot ELS A screen using ELS is usually full of buildings landscapes or people which are all very small in scale ELS is often used as the first or last shots of a sequence acting as establishing shots Long Shot LS Objects in an LS screen are small The height of a person in an LS screen is about that of the screen The shots are relatively stable enabling accommodation of movement without reframing As a result LS is commonly used when a full body action is to be seen 4 Shot MLS CU MCU MS knee FLS MCU ES ELS XLX Design and Applied Technology Secondary 4 6 ee Medium Long Shot MLS An MLS framing is usually able to show ob
122. n Colour correction is to adjust the colour or colour temperature of a work in order to Design and Applied Technology Secondary 4 6 ofS f a 1 i His T ts Ta enhance the quality of the video or for specific purposes It can be applied to photography television cinematography and other digital media Many post production software packages provide users with filters for adjusting the colour balance saturation and hue of an image Major colour problems include highlights mid tones and shadows Before colour correction After colour correction Blue Screen Shooting Blue Screen Shooting or chroma key in technical terms 1s a technique for mixing two images or more It is done through inserting or keying in technical terms a background image over a flat coloured background Sometimes a green screen is used Blue Screen shot Composite with virtual image 2 3 5 Animation a Animation Introduction Animation is ubiquitous in everyday life It appears on television commercials and movies It also brings joy to children and adults How does animation work It thanks to Persistence of Vision Persistence of Vision is Design and Applied Technology Secondary 4 6 ee a iia Er ii Eee e e a physiological phenomenon that connects a series of static images together making human eyes perceive motion Human eyes focus on images for a slightly longer durati
123. n When a person comes across a circle the person s mind will attempt to recognize the shape A sun A moon A coin On the other hand a square has corners and four sides equal in length Such shapes are less common People s scope for recognition may thus be narrower In short a right choice of shape and form facilitate better human communication Circle Square 2 2 7 Colour Human eyes can recognize some 7 000 000 colours Some of these colours and colour relationships are harmonious and some may be eye irritants People can make use of the attributes of each colour to achieve objectives of their designs There are two types of colour models namely subtractive and additive An additive model displays colours by transmitted light Such colours are called RGB colours Red green and blue lights are combined in different ways to reproduce different colours A subtractive one displays colours by printing inks with reflected light Such colours are called CMYK colours Colours are formed by mixing various colours in other words a mixture absorbs some wavelength and reflects the others Itis the principle of mixing paints dyes inks and natural colorants R G Additive colours RGB R Red G Green B Subtractive colours CMYK C Cyan M Blue Magenta Y Yellow K Black Design and Applied Technology Secondary 4 6 ST T T Bo n r sx as H RGB vs CMYK Colours As its name implies the RGB model bases on
124. n Final Movie Brainstorm dea Create 3D models Develop storyboard Refine and fine tune render Workflow in Animation production Design and Applied Technology Secondary 4 6 Stage O Pre production gt Idea development Students should plan and design before starting production Background research and fact finding should be done to gather information on for example 1 design concept of the school logo 2 school history and its relationship with the logo 3 school spirit After collecting the information students have to decide the message to communicate to the audiences in the animation gt Storyboard Storyboards arrange ideas into a story format showing the overall structure and message development at a glance You can use a pencil sketch to create your storyboard for the animation G Design and Applied Technology Secondary 4 6 Stage Create Resources Students will use 3D computer animation software to create a 3D model for the animation Students may use popular software such as 3ds Max Maya XSI and Blender Refer to Appendix 3D Animation to learn the step by step operation in 3D animation software for helpful production techniques gt Logo and Type In the 3D context logos and types are very important topics It is as simple as extruding the logo and text concerned and giving them depth 1 Create logo outline Students can use the shape tools in 3D software t
125. n has a deeper meaning of signs Connotation is the most basic or literal meaning of a sign c Denotation and connotation are signifiers d Denotation and connotation are symbols 10 Which of the following is not a conceptual element of design a Line b Point c Plane d Pattern 11 In order to maintain visual continuity of two shots in the same scene which of the following rules should be applied a Rule of Thirds b 180 Degree Imaginary Line c Both of the above d None of the above 12 The function of back Light is to a Pick out the subject from the background b Draw the viewer s attention c Eliminate the shadows of the principal subjects d Enrich the atmosphere Design and Applied Technology Secondary 4 6 E 13 A camera movement with the camera body turning from left to right is called a Tilt b Pan c Tracking d Zoom 1n 14 Which of the following refers to the visual drawings and sketches of shots needed in a movie a Storyboarding b Etch A Sketch c Visualising d Script 15 Which of the following makes a soft transition between two scenes whereby the first one gradually disappears as the second one gradually appears a Fade out b Wipe c Dissolve d Cut Design and Applied Technology Secondary 4 6 SHORT QUESTION 1 Explain briefly what human perception is when we see things with our eyes 2 There are three cylinders in each
126. nScript 3 0 Fl ADOBE FLASH CS3 PROFESSIONAL Open a Recent Item Create New Create from Template O Open Flash File ActionScript 3 0 mt Advertising File ActionScript 2 0 Ti BREW Handsets fi Flash File Mobile Ti Consumer Devices i ActionScript File T Global Handsets Fi ActionScript C munication Fil T Japanese Handsets I Flash JavaScript File gt More A Flash Project Method 2 1 Select File gt New Choose Flash File ActionScript 3 0 from the General tab OG c S32 Fri 23 59 57 ShumViola Q Flash File Edit View Insert Modify Text Commands Control Debug Window Help bi e N Coe oe On oe ee ee ee Ot et on ee Oe ee ee OO ee ee De ee Oe ee ee a 120s 00 eS KIC Workspace amp amp 100 B 204 A Alpha 100 0066CC new document Properties x Filters Parameters Document Size 550 x 400 pixels Background BP Frame rate 12 fps Fl VTC fla Publish Settings Player 9 ActionScript 3 0 Profile Default Document class 2e a Bae ao jai a a N Design and Applied Technology Secondary 4 6 E wee 2 Select Modify gt Document 3 Set the document as the following picture Document Properties Title Animation Channel Step 1 nufaro ran O Description Dimension 600 pixels x 300 pixels Step 2 Dimensions height Match Printer Contents Default B
127. nds l i JPEG quality Z EEE i 0 100 Audio stream MP3 16 kbps Mono Set Audio event MP3 16 kbps Mono Set _ Override sound settings Export device sounds Local playback security Access local files only Cancel OK j 4 A progress bar shows and disappears when it is done Exporting Flash Movie a Stop J 5 Done ye Design and Applied Technology Secondary 4 6 Appendix 3D Animation Practical Task 1 Primitive modelling After completing this lesson you should be able to 1 Use Primitive objects to create simple effective models 2 Manipulate object parameters to refine your model s objects 3 Understand the usage of the tools cloning and Array 4 Use Boolean operations 5 Assemble objects together using Attach Groups and Linking What is Geometric Primitives All 3D modelling computer programs provide a collection of tools for creating simple shapes with a fixed structure known as geometric primitives such as cubes spheres cylinders cones and toruses They are standard shapes that the modelling program can create and manipulate effortlessly and usually from a simple predefined mathematical description Geometric primitives may be modified or used to build more complex objects with a variety of utility tools for trimming attaching and blending among others Getting Started 1 Reset the file 2 Go to Create Panel and create a cylinder WAA ON T
128. nes or mics should be placed in the right position to obtain the best recording input For example 1 Overhead fat teman 2 Uneren neg Design and Applied Technology Secondary 4 6 eet a 1 1 B T zz s 1 Mics are placed overhead in most occasions enabling easy and quick movements of the mics 2 Another common position for mics is underneath However there will be limited position to place the mics if actors tend to move around 3 Microphones can also be hidden in actors clothes Sound Level During recording the sound level should be monitored continuously to make sure recorded sound will not be overloaded or distorted Desired sound level should be surfing close to the maximum level but never beyond 3 2 2 Photography The word Photography came from two Greek words namely phos light and graphis stylus or paintbrush In other words it means drawing with light The product of photography is photographs photos in short or simply pictures The term image is gradually replacing photos since the introduction of digital photography gt Compact Digital Camera Compact cameras or compact digital cameras are initially designed for easy to use and higher portability The smallest of them are even called subcompacts The trade offs for these compact digital cameras against traditional cameras are the deficiency of certain advanc
129. nge of pre employment and in service programmes with internationally recognised qualifications Strategic Plan News amp Information At VTC through the breadth of the programmes offered across our Group member institutions we strive to open the door to an increasingly diverse and rich world of learning opportunities Publications Our think and do approach offers students the chance to cultivate their passions for learning Environmental Policy while imparting the necessary skills and know how for them to succeed Career Opportunities Our professional teaching staff are committed to fostering interactive and creative learning s COTAR environments where every student can shine Meanwhile industry partners can continue to Tender Notice look to us for proactivity in developing our programmes so that we continue to produce the Contact VTC valuable talent that Hong Kong needs to be competitive in the global knowledge economy Member Institutions There are 13 member institutions under YTC Group They are Institute of Professional Education AndKnowledge PEAK School for Higher and Professional Education SHAPE Hong Kong Institute of Yocational Education IVE Hong Kong Design Institute HKDI School of Business and Information Systems SBI Hospitality Industry Training and DevelopmentCentre HITDC Chinese Cuisine Training Institute CCT Maritime Services Training Institute MSTI Youth College YC Training amp Deve
130. nimation Refer to Appendix 2D animation for a production tutorial Sequences of 2D animation 11 3D animation 3D animation has been rapidly developed for the last few decades It has been used extensively in feature films video computer games and TV commercials Design and Applied Technology Secondary 4 6 mee c Sequences of 3D animation Advanced 3D Animation Technology i Animation in Motion Dynamics 3D animation systems produce animation by simulating object motions Firstly the physical properties such as mass and density of an object have to be defined in the software The simulation software then simulates the required animation by applying external forces such as wind and gravity Gi For example the scenario that a ball falls downstairs can be simulated as a type of collision Motion dynamics technology can also be used for soft body For example how the shapes of clothing and hair will change in response to the changes of their physical properties can be simulated In Monsters Inc produced by Pixar there was more than 2 million of computer animated hair on a single character Motion Capture Motion capture or mocap is to capture or record the motions of objects usually the actors for later animation They have to put on suits with sensory devices attached As they move within a designated area where sensors are installed their movement with 3D coordinates can b
131. nput to the player s As the player s react s to the scenario output Input from the player s and input to the game the game responds and shows another scenario Input Output Interactivity For better enjoyment in addition to the traditional input devices for games such as joysticks there can be some special accessories as well For example drum sticks and drums are used for a drumming game Name two HCI examples in addition to games with input output interactivity For each example explain how human and computers interact ES Design and Applied Technology Secondary 4 6 aro e a st i ae Ti 1 1 2 Communication among peoples The interaction between human and their outside world is a typical communication system Human receives information input mainly through six senses and output through motor control of effectors H Human six senses e Vision Seeing with eyes and the visual system e Audition Hearing with ears and the auditory system e Cutaneous Touching with skin e Olfactory Smelling with the nostril and nasal airways e Gustation Tasting with the mouth and tongue e Vestibular Balancing with the vestibular labyrinthine system in the inner ears Cutaneous Vision Audition Effectors Effectors are devices organs of human bodies that a human use for expression Common effectors of a typical human are limbs fingers eyes head and vocal system Ef
132. nt there has been a so called 3C integration arising 1 e the integration of Computer Communication and Consumer In addition there is a trend of integrating the media communications and broadcasting industries New Forms of Computers a Handheld Game Consoles As its name implies a handheld game console should be small enough for players to hold and play video games Thus it is light in weight portable and all in one with control screen and speakers integrated in a single device Similar to other handheld electronic devices handheld game consoles are evolving to incorporate other features and functions such as photo taking expandable external storage larger screens improved speakers on line game purchasing and downloading and audio The Nintendo Dsi playing b Wearable Computers Some computers can be put on users bodies Wearable computers have been applied to medical entertainment etc different areas For medical wearable computers are used for behavioural modelling and health monitoring For entertainment head mounted displays are an example c Multi touch Screen Displays Touch screen technology has existed for long time A more recent application is Microsoft s Surface which is a tabletop display that enables several people to work independently or simultaneously without mice or keyboards Design and Applied Technology Secondary 4 6 Microsoft Surface d E paper Tod
133. o create a logo outline and text tools to create text 2 Import Adobe Illustrator files into the 3D software Alternatively students can create a logo outline by importing an Adobe Illustrator file AI file 3 Extrude the outline into a 3D logo Creation of a 3D logo can be achieved by extruding the logo outline gt Create 3D objects Other models can also be created for animation assembling Geometric Primitives or using Polygon Modelling gt Create Camera Cameras can be created for further camera animation processes Design and Applied Technology Secondary 4 6 Stage Create Animation Animations for 3D models can be achieved through keyframing 1 e recording a 3D object onto keyframes with in betweens filled by software Students can animate the logo as follows gt Camera Animation Camera Animation is commonly used in animation Students can adjust the camera position rotate the camera and use other attributes including lens size and focal length gt 3D Model Transformation Transformation animations such as object position rotation and scale can be applied to 3D models gt Others Students can apply animation to their 3D models by changing various parameters for example the Extrude or Bevel features Stage Rendering and output Before becoming a finished artwork for exhibition the sequence of pictures has to be rendered to form a 3D scene The following items have to be d
134. o ensure the art integrity of a play research should be done on the play s theme and style before the scenic design In Divergence 2005 the assassin s house was decorated with old fashioned furnishings The nostalgic style used was to reflect his primitive and drifting life Reference movie Divergence 2005 Which of the following pre design research methods is most suitable for designing a ballroom with old Shanghai feel Why a Internet searching b A journey to Shanghai c Documentary searching d Library searching 1 Scenic Visualization Scenic visualization is a type of prototyping It facilitates the project team s mutual understanding before the actual production There are four methods of scenic visualization namely freehand sketch photo collage miniature and computer generated imagery or CGI Each has its own benefits and drawbacks Benefit and Drawback of Different Scenic Visualization Methods a Freehand sketch It is the most flexible method and suits designers with good drawing skills Reference movie The Fifth Element 1997 Benefit and Drawback of Different Scenic Visualization Methods b Freehand sketch It is the most flexible method and suits designers with good drawing skills Reference movie The Fifth Element 1997 Design and Applied Technology Secondary 4 6 Benefit and Drawback of Different Scenic Visualization Methods c Freehand sketch It is the mos
135. of the signal or information Common analogue signals or information are electric current water waves light sound etc A vinyl record is also an analogue medium The signal or information can be converted back to sound by using a turntable needle to contact the record physically Vinyl Record Analogue medium Design and Applied Technology Secondary 4 6 r eia i merrer z pige i A digital medium carries signals or information through keeping the 0 s and 1 s that are readable to computers These values kept in digital media are discrete Digital signals are very common nowadays due to IT s popularity For example sound can be converted back from a compact disc through reading by light beams Compact Disc Digital medium 1 1 6 Encoding vs Decoding In the context of communication coding is a conversion rule of a particular piece of information such as words and phrases into another form Encoding refers to the conversion process that is done to facilitate the transmission After transmission there is a reverse conversion process called decoding to facilitate the receiver s understanding Binary coding and ASCII are two widely known coding systems Binary Coding Like human brains a computer consists of millions of cells which are small interconnected circuits and switches for thinking data processing Computers thinking method is known as a binary system
136. on 18 Try to animate the layer c Here is the sample Design and Applied Technology Secondary 4 6 E F K TC TC Tips To animate this animation it is a simply a Skew transformation 19 In the layer green add a keyframe at frame 72 frame 80 and frame 120 20 Add a motion Tween in between 72 and 80 and then move the green triangle out of the canvas VTC V T 21 Test the animation again The green triangle is now entering the frame 22 Repeat the step 17 and 18 for the pink orange and blue triangles with time offset 23 Test the animation again 24 Go back to the main scene by clicking Scene 1 on the top left corner 25 Select the logo symbol in the canvas Add two keyframes at frame 1 and frame 5 and create the motion tween L vic_logo E ale 26 Click the symbol in the canvas again the property palette has been changed into the property of the symbol itself Design and Applied Technology Secondary 4 6 gt 1 5r 4 Er car s ee Properties x Filters Parameters FA Graphic b Instance of logo Color None H ml Swap Loop ew First fa w 370 4 x 302 9 Blend Norma H 286 8 Y 153 0 Use runtime bitmap caching 27 Toggle the Colour type into Alpha Properties x Filters Parameters Graphic i Instance of logo Cole None BH lew Swap Loop First 1 BHGFUN
137. on of time than the images actually projected on the retina As a result fast moving images are projected on the retina in an almost continuous manner This phenomenon builds a perceptual foundation for all sequential media Like many arts animated films or images were handmade with the help of thaumatropes flip books and also line and cell animation Today digital technology helps a lot Refer to Chapter 3 3 5 for more animation skills and technology Thaumatrope A thaumatrope is a toy making use of string spinning and Persistence of Vision The first two pictures are on two sides of a card each showing a bird and cage If the card is spun around a vertical axis a combined image can be seen as the third picture shows Flip Book A flip book is a book of a series of pictures The pictures differ from their next ones gradually When the book is flipped rapidly the pictures on the pages appear to animate By John Barnes Linnet from the kineograph in 1886 THE HTibb MAirFH Design and Applied Technology Secondary 4 6 aT T T Bo n Tr sx Ts Line and Cell Animation Line and Cell Animation is a well known but time consuming animation method Pictures are drawn on papers or transparent sheets of celluloid or cell frame after frame Each picture is then photographed onto films Mr Bug Goes to Town Anton Leob by Fleischer in 1941 Ponto iy MIN ALEC Brani by DAVE LESEREN PT PPE b Di
138. onal TV transmits continuous analogue signals Digital TV improves picture quality by eliminating reception problems such as double imaging or interference The advantages of using digital TV include a Ghost free reception b Widescreen pictures c Standard definition TV SDTV and high definition TV HDTV programmes d High quality audio and surround sound e Multi channel programming f Closed captioning of programmes for the hearing impaired g Electronic programme guide EPG with now and next programme information h On screen programme guide channel with same day programme information i Multi angle views and enhancements j Interactive TV services such as home shopping and computer games k Data casting services such as financial data weather updates and traffic news Design and Applied Technology Secondary 4 6 E Timetable for DTT Implementation Analogue 7 Broadcastin Broadcasting g 2004 2007 2008 2012 Formulate Select technical Achieve 75 Target to terminate framework standard and digital analogue broadcasting launch DTT coverage Timetable for Digital TV Implementation In the past comic artists would sketch a drawing in pencil and then ink with either dip pens or brushes Nowadays artists draw digitally Analyse and compare the working procedure for producing traditional hand drawing animation and that for digital animation in terms of costs equipment time
139. ons Sound and voice can be added to works using computer software or from well prepared sound libraries after production However in many cases sound and voice are captured live During sound recording it is very important that the loudness sound pressure level sampling rate and resolution bit depth of sound are properly set Sound Recording Sound Pressure Level is measured in decibels or dB It is a logarithmic measure of the sound pressure with respect to a reference value Sampling rate or frequency is the number of samples taken per second The accuracy of the digital representation of the sound recorded is higher if higher sample rates more samples are taken per second is used For example the sampling rate for CD quality audio is 44 100 samples per second accurately reproducing audio frequencies up to 20 500 Hz The frequency range of human hearing lies between 18 Hz and 20 000 Hz Design and Applied Technology Secondary 4 6 E g e z j D r e J i I as Ma s an a Sound Recording Equipment The quality of location sound captured determines how good a footage can be To capture location sound properly certain basic audio equipment is required Recording microphones used in Beijing Olympia Games 2008 Sound Recording gt Name some professional sound recording equipment gt Name some audio equipment which is commonly used in news broadcasting b Microphone Placement Micropho
140. or 12 minutes per side industry start from 80 s which can record 74 minutes per disc Digital Media s Advantages Digital media s advantages can be discussed in technological economical and social terms i In technological terms 1 Easy manipulation of and infinite no quality loss reproduction of data 2 Easy creation storage editing and delivery of data no matter whether it is a complete document or a segment of a document Design and Applied Technology Secondary 4 6 et om 1 I ie i as ie 3 Greater interactivity For example people can watch a goal in a football match on a TV with self selected camera angles 11 In economical terms 1 Almost anywhere anytime and low cost modification of digital media products and information and 2 Almost anywhere anytime and low cost access to update information i11 In social terms 1 Easy interpersonal communication around the globe through chat rooms instant messaging online video games video conferencing etc 2 Rapid development of knowledge globalization and 3 Decentralization of working locations such as working at remote offices or simply at home Digital TV An Example of Change Digital TV is the broadcasting of TV signals in digital format through radio communications 1 e terrestrial satellite cable or broadband network As its name implies digital TV transmits discrete digital signals bits of information while traditi
141. otherwise it becomes a volume A plane can be opened without definite dimension or closed with definite dimension 1 e enclosed by one line or more A volume is a 3D enclosure Conceptual Elements of Images from 2D to 3D Point ye Design and Applied Technology Secondary 4 6 b Computer Graphics Introduction 1 Bitmapped Graphics A raster graphic image is a pattern of dots or a bit map and usually called bitmapped image It can be viewed through computer screens paper or other display media Raster images can be saved in computer files in different formats such as BMP and JPEG 3 1 24 1 A bitmap image at different levels of magnification 11 Vector Graphics Vector graphic images cover lines squares rectangles circles etc They are represented as mathematical formulae Graphic elements can be combined while keeping each element s own integrity and identity in computer databases Thus they can be selected modified and resized independently 3 1 24 1 A vector image at different levels of magnification c Computer Graphics Manipulation i Image Cropping and Tweaking An image can be presented as it 1s or adjusted through cropping or tweaking for specific purposes Design and Applied Technology Secondary 4 6 E r mpka ion ee o mige ia eS ee H G H Image Cropping A designer may wish to crop an image into different forms such as rectangle circle squa
142. p Design and Applied Technolo Secondary 4 6 piss s gji m m T a T B Creative Digital Media Literacy cam E Digital Media Desig a Digital Media Design and Applied Technology Secondary 4 6 Elective Module 2 Creative Digital Media Learning Resource Materials Resource Materials Series In Support of the Design and Applied Technology Curriculum S4 6 Technology Education Section Developed by Curriculum Development Institute Institute of Professional Education Education Bureau And Knowledge PEAK The Government of the HKSAR Vocational Training Council Technology Education Section Curriculum Development Institute Education Bureau The Government of the Hong Kong Special Administrative Region Room W101 1 F West Block Kowloon Tong Education Service Centre Project Advisor Ms Cheng Kar Wai Joanna Authors Mr Chan Kam Kong Mr Hui Ka Man Kaman Mr Hung Shiu Chau Autumn Mr Li Pak Kei Ms Wong Cheuk Yan Cherine Associate authors Ms Shum Wing Man Viola Mr Tsang Hin Pang Project Co ordinators Mr Li Yat Chuen Mr Tsang Siu Wah 19 Suffolk Road Kowloon Tong Hong Kong Reprinted with minor amendments 2010 Head Department of Printing amp Digital Media IVE Kwun Tong VTC Lecturer Department of Printing amp Digital Media VE Kwun Tong VTC Lecturer Department of Printing amp Digital Media IVE Kwun Tong VTC Lecturer De
143. p 3 Create the Wording gt Select the Create panel and click on the Shape mode a then select the Text option to create the wordings Design and Applied Technology Secondary 4 6 S gt You can enter the wordings in the Text box and also change the word type according to your preference 7 esa 000 to J p date gt Click your mouse on the viewport and the wordings appear on the viewport Design and Applied Technology Secondary 4 6 ae ee noe oe T SD a sae It may be extremely large and we will change it in the modifier panel gt Turn on modifier panel and amend the wording parameters zl iF dihal i Modifier List Size Kerning Leading Text wji alm 1 u E 3 3 Size foo 4 Keming 00 Leading 00 4 Text Hong Kong Secondary Sch wT You can amend the parameters of the wordings Sets the text height Sets the distance between letters Set the distance between lines Amend the wordings Design and Applied Technology Secondary 4 6 Eee eee EEE eed i ee mig eee gt Step 4 Use Extrude Modifiers to create the 3D text gt Inthe modifier panel select the Extrude modifier to create the 3D geometry w O BT Texto E Edit Patch Edit Poly Edit Spline Face Extrade FFD 2eex2 FFD 3x33 FFD datat FFD box The 3D logo and wording are completed If yo
144. partment of Printing amp Digital Media VE Kwun Tong VTC Lecturer Department of Multimedia and Internet Technology IVE Tsing Yi VTC Lecturer Department of Printing amp Digital Media VE Kwun Tong VTC Teaching Associate Department of Printing amp Digital Media VE Kwun Tong VTC Workshop Instructor Department of Printing amp Digital Media IVE Kwun Tong VTC Senior Training Consultant PEAK VTC Training Consultant PEAK VTC The copyright of the materials in this package other than those listed in the Acknowledgments section and the photographs mentioned there belongs to the Education Bureau of the Government of the Hong Kong Special Administrative Region Copyright 2009 Duplication of materials in this package other than those listed in the Acknowledgements section may be used freely for non profit making educational purposes only In all cases proper acknowledgements should be made Otherwise all rights are reserved and no part of these materials may be reproduced stored in a retrieval system or transmitted in any form or by any means without the prior permission of the Education Bureau of the Government of the Hong Kong Special Administrative Region A set of curriculum resource materials is developed by the Technology Education Section of Curriculum Development Institute Education Bureau for the implementation of the Design and Applied Technology Secondary 4 6 curriculum in schools
145. polation Connect Copy Selection I Connect Threshold 0i Named Selections E End Point Autotwelding rE E gt Click on the Modifier List button and you can find a list of different modifiers Select Extrude Sl Sl O 7 Shapet ooo Edit Normals a Edit Patch B Edit Poly Edit Spline Face Extrude FFD 2c FFD Secses FFD 4mduet FFD box FFO cul Fillet Charnter Fles Garment Maker UCM E Design and Applied Technology Secondary 4 6 lt lt EE re a ee ieee a Ee eee gt The logo is converted to a geometry and you can see the face of the logo GT Modifier List Editable Spline gt To make it become a 3D object we amend the parameter of the Extrude modifier to add depth to the shape With the selection of the Extrude modifier we amend the Parameter Amount 2 it sets the depth of the extrusion to 2 units We converted the line into a 3D object Design and Applied Technology Secondary 4 6 a lt 1 B T aa ee RAAN T Shape1 Modifier List Editable Spline ajil 8 lE Parameters Amount ED Segments 1 X Capping W Cap Start W Cap End Moaph Grid Output C Patch Mesh C NURBS Generate Mapping Coords Realworld Map Size lV Generate Material IDs Use Shape IDs F a e Ste
146. potential of the subject is an integrated part of production Subjects with more visuals are often better received than those with less Feasibility Feasibility dictates the fate of a program proposal infeasible programs should never be born An initial feasibility study should emphasize the ability of gaining access to the subject and the resources available to support the production Phase 2 Production A visualized concept is a permit for the project team to enter into the Production stage Today s digital video cameras are already good enough to capture images and sound and to produce movie standard works Design and Applied Technology Secondary 4 6 ae i i an a i a a eed geige i iii a Sound Recording Level Under recorded Correct recording Over recorder Tae problem erg is thal thev is ow fevel The wavelran peaks hgh bal ral over Lhe Thos ts Samphole disaster as the signal wil of signal whith meas any inkereat mone limit ac there is good dynmsic ange dated This recording will rare than likely be Zoulc be increased when the siona is Eootec uausable Imaging capturing is an art Camera operators have to analyse when taping what should be include in the picture and what should not be whether or not there is enough light and whether or not the camera is recording sound Composition through Framing Bad Better Coincident lines are distracting No distraction between figure and backdrop
147. r characteristic of visible light It can be used in photography video production publishing and other fields Colours of lower colour temperature are more reddish those of higher colour temperature are more bluish It is interesting that colours of lower colour temperature are referred to as warm colours such as red and yellow for their associations with fire and sun In reality fire and sun mean higher temperature Similarly colours of higher temperature are called cool colours such as blue and green for their linkage with water and ice In reality water and ice represent lower temperature Design and Applied Technology Secondary 4 6 Shooting Tips a Ask the interviewee to look at the interviewer not at the camera b Shoot the interviewee from a slight angle to either left or right without straight on shots c Move the camera to the interviewee for larger image instead of using the zoom feature for close up shots Arrange the interviewee to sit in a chair without wheels avoiding squeaky noise e Ask everyone around to keep silent while shooting avoiding creating noise for example jangling changes or keys in pockets f Give the interviewee some general ideas about the topics to be discussed but not pre interview at all before the interview pre interviews make the responses stilted in the real interviews Allow the camera rolls for several seconds before the first question is asked Relax an
148. r example to facilitate production of their own posters by using the multimedia software they learnt in class The main theme of the poster is to bring out the global warming message to the readers Expected Learning Outcome Students should be able to gt Learn fundamental computer graphics theories and techniques gt Learn basic image generation techniques gt Know some computer graphics applications Students are recommended to use the following tools to complete the project Software PhotoShop Illustrator Painter Example study Title and Dates of Event g2 4 27 123 FE Wi UN uF ek Ee 3D Back Bay Abs ie ZHZ HE ground Character s Photo Pa i Sample poster illustrating the concept of the 2005 Asia Game Show poster Mr Andrew Lee who is working in the UK now designed a poster to promote the 2005 Asia Game Show His creation processes are presented as follows T Design and Applied Technology Secondary 4 6 G 1 Creative thinking Firstly Andrew was thinking of turning Hong Kong into a future city in order to present the high technology show to be held in Hong Kong Therefore he chose Central as the background of the design for its fullness of modern city high rise buildings Furthermore he planned to add some cyber and game elements into the design to display the central idea of the game Hints for your project Brainstorm as many elements as you can in global warming Figure out what asp
149. rces All the above can be done easily with emails and new software Nowadays people can use web pages to show text images and other multimedia In fact WWW is one of the services available under the Internet Web sites are linked together through hyperlinks People can travel from one website to another easily without geographical restrictions The problem that people face regarding information is no longer unavailability but overflow Design and Applied Technology Secondary 4 6 a a a ae i i ls e o e Se Lo oma A PEAK Institute of Professional Education and Knowledge Microsoft Internet Explorer X BRO KEO HAO BHOREY IAM KAW ay Qr O HAG Pas km O 2 2 a DAS watt D a http ivww peak vte edu hk vi EJ8z ta Google G Go gt OB T Bookmarks E Popups okay P Check Q AutoLink 4 AvtoFill e Sendtow A Settingsv A Home SiteMap Search Useful Links Tell My Friends ContactUs Paz Text Version 7 Prvaramme search adult learners 2 Featured Courses Ij Academic Partners Professional Diploma in Master of Business 4 BA HonsjAccountancy Insurance PDI Admin O BA Hons Business UNIVERSITY AUSTRALIA Graduate Dip of Financial tere Admin Services BSc Hons Creative Technologies yg Institute of Professional Education And Knowledge BREE SBe r RaAdvace ME WTA Taune ST Wand Daad t tlanehai Uana Iann Cranstivinn SOIR 1N33 Cmail naal Ante men hl AA a MS
150. re and triangle with different sizes edges and zooming treatments for presentation Design and Applied Technology Secondary 4 6 Image Tweaking A to the point tweaking can enhance the value of an image or graphic and brings life to the whole design no matter it is a page website video or animation For example a designer can add a border to the picture add a shadow to the object in the picture colour the background or tilt the picture ii Surface and Dimensionality Images can also be manipulated by shadowing extruding and simulating Harder shadows can simulate a direct light while softer shadows simulate a bounced or filled light An extruded object provides viewers with a floating effect The effect can vary with different directions of the light source Design and Applied Technology Secondary 4 6 Logo of the Hong Kong Cable Television Limited The logo of the Hong Kong Cable Television Limited has been manipulated below to show different effects Shadowed Extruded A corporate identity or logo exists for the whole company instead of solely a single product Some companies may use different surface patterns on the same logo design But the designs of these variations must align with the corporate identity Identify other corporate identities in Hong Kong An example of logo design 2 3 4 Video Video technology in the context of digital media refers to the digital technology of making a
151. re image If you want to replace a selection be sure to deselect everything before applying this command To refine an existing selection use the Colour Range command repeatedly to select a subset of colours For example to select the green areas in a cyan selection select Cyans in the Colour Range dialog box and click OK Then reopen the Colour Range dialog box and select Greens The results are subtle because the technique selects parts of colours within a colour mix Design and Applied Technology Secondary 4 6 E Selection Image Selection Preview None Method 5 Using Alpha Channel Masks control how different areas within a layer or layer set are hidden and revealed By making changes to the mask you can apply a variety of special effects to the layer without actually affecting the pixels on that layer You can then apply the mask and make the changes permanent or remove the mask without applying the changes mi mask jpg psd 100 Background copre M Ea 200 250 Channels Ctrl C trl CLtrl 2 Ctrl 3 lt gt Design and Applied Technology Secondary 4 6 E E Filtering 1 About layers Layers allow you to work on one element of an image without disturbing the others Think of layers as sheets of acetate stacked one on top of the other Where there is no image on a layer you can see through to the layers below You can change the composition of an image by ch
152. recording movements for 3D animation Motion path An animation involves an object moving through space This movement can be defined along a linear motion path National Television NTSC stands for National Television System Committee It is a System Committee popular analogue television broadcast system across North America NTSC Japan and most of Latin America Design and Applied Technology Secondary 4 6 Odd field In a SD video signal the display device actually does it in 2 passes the first pass displays the information of the odd numbered lines of the frame is the odd field Phase Alternating Line PAL PAL is the acronym for Phase Alternating Line It is a common analogue television broadcast systems used mainly in Europe and the rest of the world A technique of depicting volumes and spatial relationships on a flat surface Production timeline An organized outline and a plan Progressive Scan Progressive scan is any method for displaying storing or transmitting moving images in which all the lines of each frame are drawn in sequence RGB RGB consists of three channels namely red green and blue They roughly align with the colour receptors of human eyes and are used in computer output displays and input scanners Semiotics is the use of signs to deliver messages to the audience A signifier is an item that signifies expresses another item 1 e signified A signifier c
153. rence can be created by using a low key lighting in a dark scene It is often used horror films Low contrast 1 e smaller difference is often used for a more naturalistic lighting High Key Lighting High key lighting is a lighting scheme that the fill light is of almost the same intensity as the key light is The images concerned are usually very bright with few shadows on the subjects Design and Applied Technology Secondary 4 6 T aa i z iin oo for Low Key Lighting Low key lighting is a lighting scheme with very little fill light creating high contrast images Overexposed If the light hitting on a camera CCD chip is excessive overexposure will be observed Overexposed images on video may be un saveable because of no details in complete white areas b Lighting Colour Meaning of Colours Logos of many financial institutions and hospitals are in blue Logos of many fast food restaurants are in orange Why It is due to the subtle impressions and different feelings that the colours represent Coloured light are often used to express time of scenes For example blue is used for a cold winter and yellow for a hot summer It can also create desired atmospheres triggering audiences emotions as the story develops Refer to Section 3 2 2 Photograph Colour Temperature c Colour Temperature Colour temperature whose measurement unit 1s Kelvin K is an attribute o
154. rs 1 basic concepts of human computer interaction 2 design and communication of user interfaces in digital media 3 how humans process information and 4 how humans machines and systems interact Upon completion of this module it is expected that students understand how human information processing is done and how human machines and systems interface with each other 1 1 1 Human Computer Interaction Human Computer Interaction HCI in digital media production is an academic discipline for improvement of software products focusing on the interface between human and computers According to Association of Computing Machinery Special Interest Group on Computer Human Interaction Curriculum Development Group HCI is the discipline concerned with the design evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them In addition to the interface between users and computers HCI caters for more such as the hardware and the software in the computer side and the background and characteristics in the user side Interaction Human Computer Interface e Background e Hardware devices e Hardware e Physical characteristics e Information processing e Software e Cognitive characteristics e Tasks to be performed e Instructions Human Computer Interaction through an interface Design and Applied Technology Secondary 4 6
155. s gt Television Commercials Television commercial TVC is a very useful and effective tool for drawing public s attention gt Video Making use of YouTube movies is a rather new move to promote Hong Kong http hk youtube com hongkongtc Some of the clips are advertisements done by Hong Kong Tourism Board some are documentary of special events in Hong Kong and some are programs to introduce special attractions Video is an effective tool to provide full visual view of Hong Kong for web browsers People may view Hong Kong through different angles in the clips gt Photography There is a Photo gallery in the interactive section of the promotional website People may appreciate the best scenery of Hong Kong through the pictures They provide views of the places taking at different times and angles E gt L lt lt Design and Applied Technology Secondary 4 6 E a aa a E n N iiis gt Printing Press Printing press graphics such as posters leaflets and banners are a traditional but are still an effective choice Tourists can see these printing press graphics in their local newspapers and magazines HAPPY NEW YEAR Sponsorship This is an advertising method to promote goods products and events through traditional and digital media The main purpose is to get more exposure to the public Asian Aerospace Exhibition Standard Chartered Marathon and the Little League As
156. s ear drum s or even the brain a narrower sense 1s the destination Source Destination gt AMAA Wave A light source is another example There are different sources of light A common one is thermal such as sunlight In animation movies virtual sunlight is used to glow the virtual sense In this case the virtual sun is a source while the objects that the virtual sunlight reaches are the destinations 1 1 4 Sender vs Receiver A sender is the initiator of a message A source as described in the previous section is the first sender in a communication model Along the path between the source and the destination there may be other senders A receiver is the receiving end of a transmission A destination is an ultimate receiver in a communication model Again along the path between the source and the destination there may be other receivers Design and Applied Technology Secondary 4 6 Broadcasting can be considered a sender while the audience is the receiver The messages between the sender and receiver are audio or video signals A digital media receiver is a device for home entertainment It connects a home theatre system to a computer network to play music pictures videos etc from media files Users can use a device to browse file trees and use the metadata there to organize media files iPhone iPhone is a phone product with multimedia and Internet access enabled It has
157. s I Use io Ir ia r 1 Method 2 Using Marquee Tool The marquee tools let you select rectangles ellipses and 1 pixel rows and columns By default a selection border is dragged from its corner Rectangle marquee Lito make a rectangular selection Elliptical marquee to make an elliptical selection Single row 2or single column marquee to define the border as a 1 pixel wide row or column You can smooth the hard edges of a selection by anti aliasing and by feathering Specify a feathering setting in the options bar Turn anti aliasing on or off for the rounded rectangle or elliptical marquee Design and Applied Technology Secondary 4 6 E Feathe Ce ti aliased Style Normal Feathe e ti aliased Style Normal Background copy ROB JOE Pateren cory ROD Jo e a E a a a a a e a lie e l e e e e e e e e e e e e Method 3 Using Lasso Tool Ea The lasso and polygonal lasso tools let you draw both straight edged and freehand segments of a selection border With the magnetic lasso tool Photoshop the border snaps to the edges of defined areas in the image The magnetic lasso tool is especially useful for quickly selecting objects with complex edges set against high contrast backgrounds Method 4 Using Select gt Colour Range The Colour Range command selects a specified colour or colour subset within an existing selection or an enti
158. se code symbols back into information understandable by a receiver Denotation The most basic or literal meaning of a sign e g the word rose signifies a particular kind of flower Dissolve A dissolve is a transition of one image to another gradually by controlling the exposure of the two images DSLRs DSLRs are Digital single lens reflex cameras based on film single lens reflex cameras SLRs both types are characterized by the existence of a mirror and reflex system Effector The physical output from a human body such as noise and movement Encoding A process to convert information from a source into symbols Equilibrium Equilibrium and symmetry in design means the elements of composition are in visual balance Even field In a SD video signal the display device actually does it in 2 passes the second pass displays the information of the even numbered lines of the frame is the even field Film editing Film or video editing is the activities of cutting rearranging and consolidating pictures of one source or more into one film or video Design and Applied Technology Secondary 4 6 Form Forms are presented in everything that is visible In digital media forms include 2D images 3D images and typography Frame It is a measurement unit of pictures Golden Ratio Golden ratio or Golden mean is one of the most commonly known proportion Golden radio is mathematically denoted by The
159. sender and the receiver In the context of digital media a channel may also be referred to as a communication channel image channel and media channel Each colour digital image is made up of pixels Each pixel is made up of a combination of primary colours For example an image from a standard digital camera has three different channels namely red green and blue RGB Channel An RGB image consists of three channels namely red green and blue RGB channels correspond to human eyes colour receptors and are used in computer equipment such as display screens as output devices and scanners as input devices An image can be decomposed into three 8 bit images representing each red green and blue In other words the RGB image is of 24 bits Design and Applied Technology Secondary 4 6 E amea i 7 is Er zz a The colour of the red dress in the red channel is much brighter than that in the other two Similarly the green part in the green channel is much brighter than in red and blue Since there are few blue parts in the picture the blue channel does not show particularly brighter objects c Medium A medium is either analogue or digital It is the means that something is communicated on A medium can be a canvas for painting a page for printing a VHS cassette for videotaping etc Analogue vs Digital media An analogue medium carries signals or information by recording the quantity changes
160. sequence of pictures that show motions dynamically by capturing recording processing storing transmitting and reconstructing Television systems are the first generation of video technology As digital media becomes popular video recording also becomes a household activity e Design and Applied Technology Secondary 4 6 a Standard Definition Vs High Definition Traditionally there are two common standards for Standard Definition or SD video signals namely NTSC and PAL NTSC stands for National Television System Committee It 1s a popular analogue television broadcast system across North America Japan and most of Latin America NTSC enables 487 line display with a frame rate of 30 frames per second or FPS Its pixel ratio is 1 0 9 PAL is the acronym for Phase Alternating Line It is another common analogue television broadcast systems It is used mainly in Europe and the rest of the world PAL enables 576 line display with a frame rate of 25 FPS Its pixel ratio is 1 1 067 The aspect ratio for both systems is 4 3 Their maximum width resolutions are 720 pixels High Definition or HD is a newer digital video format than SD HD s native aspect ratio is 16 9 with 1920 x 1080 pixels HD s recording can be done at 24 or 60 FPS b Video Editing Video editing is the activities of cutting rearranging and consolidating pictures of one video source or more into one video It involves the re organi
161. t A zoom in shot narrows the area shown on a shot a wider area to a particular part focus A zoom out shot does the opposite INES Design and Applied Technology Secondary 4 6 Production Procedure a Partner with two or three classmates b Write down the theme of your production c Express your ideas using storyboards d Present your ideas to your class 3 1 7 Scenic Design a What is scenic design Scenic design stage design set design or production design is the process that creates theatrical scenery A stage picture refers to the decoration of the stage for a play It is not stand alone but rather a combination of props actors shapes and colours being used It should be able to express the ideas of a play or a scene and appeal to the audience b What is the importance of scenic design A scenic design can provide a play with suitable performance environment and a pleasant atmosphere for audience to enjoy the play Purposes of A Scenic Design a To provide audience with a visual clue a historical backdrop and hints of events happening To reflect actors mental status or minds through geographical location c To smooth over the transitions between scenes To reflect the characters social status e To supple information of a play Design and Applied Technology Secondary 4 6 c How scenic design is being made 1 Visual Research In order t
162. t flexible method and suits designers with good drawing skills Reference movie The Fifth Element 1997 d Photo collage It can save much time on production when all furnishings are ready Today it is common to use software packages like Photoshop to handle image collage Reference movie Maybe 2003 Miniature It is a time consuming method therefore not so popular to use However it is still a cost effective way to present scenes of natural disasters for live shooting Reference movie Independence Day 1996 CGI Computer Generated Imagery It 1s the most powerful and multi functional method It provides three dimensional virtual scenes that enable neat and clear visualization For it supports precise proportion and detailed textures it can highly reduce the confusion and misunderstanding that may occur during parallel production It is suitable for large scale production that involves many action scenes Reference movie Star Wars 1986 111 Lighting Use of lighting colour is important in scenic design since it can stimulate human emotions Designers can create different dramatic atmosphere by using different colour tone For example horrific stories often use green tone lighting a Explain why PTU 2003 used blue tone lighting to show the night scenes b Explain whether or not a yellowish lighting can be used Why or why not Reference movie PTU 2003 iv Mise en Sc ne Mise en Sc ne is a French
163. tal images of transparencies negatives and printed photographs that are captured through scanners d Selective Colour Change Images can also be edited with colour change Some image editors enable colour swapping for specific items in an image e Colour Adjustment Change of colour can also create fade in and out effects or change of tones with curves or other tools Improvement on the colour balance can be achieved especially for pictures taken indoors with daylight films or those taken with incorrect adjustment of white balance f Contrast Correction and Brightening The contrast of an image can be altered as well brightening or darkening the image Technology even enables pixels below a particular luminosity threshold to be brightened automatically without affecting the rest of the image concerned An example of contrast correction Design and Applied Technology Secondary 4 6 ee oe 1 I ie Te as g Special Effects Special effects can also be implanted in images in forms of distortion artistic effects geometric and texture effects and combinations thereof m ia i Special effects added to a picture 3 3 2 Graphic Design and Desktop Publishing Desktop publishing or DTP makes use of personal computer based page layout software to compile publication documents regardless of the publishing scale Refer to the appendices for operations of common graphic design software s
164. te is an example of a storyboard sheet for project production Design and Applied Technology Secondary 4 6 Project title Shot Shot Shot Page Sound Duration Sound Duration Sound Duration Design and Applied Technology Secondary 4 6 EE ee ee i S a Er i i p e Sie ie EEE a Monsters Inc from Storyboard to Outcome A storyboard is a simple graphical presentation by sketching for example of the script that shows the key actions of the story c Indication of camera movement Using storyboard in movie making and animation production can facilitate design teams to prototype making and the final product conversion Storyboards can be drawn from left to right or vice versa In many cases in order to facilitate the communication within a design team directional arrows are used to show the expected camera movement in storyboards Tilt Shot Vertical Pan A tilt shot refers to the movement of a fixed camera along a vertical axis Pan Shot Horizontal Pan A pan shot refers to the movement of a fixed camera along a horizontal axis Design and Applied Technology Secondary 4 6 Dolly Shot A dolly shot refers to the movement of a camera of either moving towards dolly in or away dolly out from a subject OT or Glose up Wide shot Ending Camera Position B Track Shot A track shot refers to the movement of an object or person Zoom in ou
165. ted hardware is in the form of a box Console games input devices are usually standard console controllers E sT 2 ne n 4 d L Their output devices are typically household TV sets Microsoft Xbox 360 PlayStation3 and sometimes computer and sometimes designated devices for particular games monitors and display projectors Handheld Games They refer to the games that can be held in the hands which can be played while moving around opposed to those that must be connected to a computer or a TV set The input devices are usually buttons and directional controllers The output device is usually a small screen on the unit such as a mobile phone or even a digital watch Unlike others handheld game units are usually powered by battery for mobility As a result their processing power is limited So they were generally shorter games and until Nintendo DS and PSP release PSP Nintendo DS Internet Games Internet Games are games that can be played over the Internet They can be accessed by personal computers PlayStation3 Xbox360 PDA mobile phones etc Internet Games are considered an application of technology connecting people over the Internet instead of a E game genre Design and Applied Technology Secondary 4 6 Elements Present in a Computer Game Product Instead of a physical good or product computer games are sometimes considered virtual products or services Computer games usually have
166. tionship among text sounds static and dynamic images graphics and animation video in communication via digital media b Creation of ideas for conveying messages and information efficiently and effectively meaningfully c Application of general rules of visual composition in digital media design d Evaluation of usability readability and interactivity of different digital media products by referring to the basic principles of communication design Technology Development There are different skills and tools in digital media Students should understand the basic development and technologies in digital media through appropriate software packages Students should be able to produce digital images 2D or 3D animation and video shooting Design and Applied Technology Secondary 4 6 2 1 CONCEPTUAL DEVELOPMENT In simple terms Digital media design is using computer to design Computers enable designers to work and produce in an efficient and cost effective manner Computer and Internet technology also enables designers from around the world to exchange ideas and practice enlarging the professional network In addition to skilful use of technology a good design requires creativity and innovation 2 1 1 Design Process and Design Concept A design process is a problem solving process During the process a designer uses her his creativity and innovation to develop a solution which can be a product a service a logo or whatso
167. to frame 120 rotate the logo ___L 5 va Ie and click Set Keys second key frame E Ws Design and Applied Technology Secondary 4 6 E Ee EE oe T ee i i eee See gt a e Cameralll b O A Wie gt Goto frame 120 rotate the logo ____L back to it original angle and click Set OF Keys had to create the last key frame We have just created the logo animation after the camera movement You can use the same method to create your own logo animation Step 9 Final renderin To output the logo animation we have to render the pictures Select from the menu bar Rendering gt render or click the Render Scene Dialog button Graph Editors Rendering Customize MAxScript Help m view Re ns er m F10 i r Environment Effects Advanced Lighting Render To Texture Batch Render Ravtracer Settings Ravtrace Global Include Exclude mental ray Message Window ActiveShade Floater 4ctiveShade viewport Material Editor Materiali Map Browser Video Post Show Last Rendering Panorama Exporter Print Size Wizard RAM Player Design and Applied Technology Secondary 4 6 The Render Scene Dialog The COMMON panel is where you setup various parameters of the final output animation It includes different specification of the frames you want to render the resolution size of the each picture the time output duration the file path to save etc R
168. tp www rhino3d com Explain the process of 3D production CAD 3D rendering http www tutorialized com tutorials Explain the process of 3D 3DS MAX 1 production Composition and http www scienceandart org Define the composition and the the elements of elements of visual design visual design http www photozone de Cross lines introduction Digital http www hippasus com resources vi Define the digital storytelling Storytelling Basic scomp index html basic thoughts about visual Thoughts about composition Visual Composition Human Computer http www hcibib org Explain Human Computer Interaction Interaction Resources Image balancing http photoinf com Introduce the general rules in visual composition Interactive http www kenjiko com Introduce the interactive artwork DIGITI artwork DIGITI by Hong Kong digital artist Kenji Ko iPhone http www apple com Introduce iPhone technologies technologies Lode s Computer http student kuleuven be Explain computer graphics Graphics The Golden Ration http photoinf com Introduce the golden ratio The Hong Kong http www hko gov hk Illustrate how simple and Observatory elegant graphics are used to communicate abstract weather information Design and Applied Technology Secondary 4 6 Media Influence http www aber ac uk media Semiotics for Beginners Daniel Chandler Denotation Connotation and Myth Planning a aaa aa
169. u want to make amendments you can adjust the parameters on the modify panel Step 5 Create a Camera Animation We will create camera movement in this section with the use of keyframe skills 3D camera frames the scene providing a controllable point of view It offers a great deal of control over the look and feel of a 3D image Preparation Rotate the logo 90 degree along the X Axis gt Select the logo and right click on the Rotation Button v then enter 90 in the Rotate Transform Type in box Design and Applied Technology Secondary 4 6 EE ae oe 7 mr m TAE 2 r r i See Oak Je rig deg Rotate Transform Type In Ax Absolute world Offset world xpo a xfor i woo s a a zoi g zpi a gt Use the same way to rotate the wordings and change their positions Step 6 Create the 3D Camera We will create the camera on the front view gt On the Command panels choose Create gt Cameras gt Free r AACN T OS Ba a Target camera Standard xl Target cameras view the area around a target object When you create a target camera you see a two part icon representing the camera and its target a white box You can create 2 types of cameras b Free camera Free cameras view the area in the direction the camera is aimed When you create a free camera you see a singe icon representing the camera and its field of view In our case we create free camera gt
170. uch as Adobe PhotoShop a Layout Design 1 Page A page in layout design is a predefined size of area that enables editing and view in a WYSIWYG manner in editing software A4 and Letter are two popular paper SIZES 2 Printing Components Text Natural Scanned Images and Artificial or Creative Images are three major components laid out on a page 3 Layout The process that lays elements on the page aesthetically and precisely is called layout 4 Graphic Design Each single piece of art is a combination of images typography or motion graphics Graphic designers are primarily responsible for creation of graphics for publishing to printed or electronic media such as brochures and advertising They may also take care of typesetting illustration and web design E Design and Applied Technology Secondary 4 6 fa ee te me r E I is Er Tia 5 Typesetting Typesetting is to present textual material in graphic forms on paper or other media Before desktop publishing becomes popular printed materials were typeset in print shops by compositors manually with or without help from machines b Digital Media c d e Digital media are media in electronic or electromechanical formats for audience or end users to gain access to On the contrary access to traditional printed media does not need electronic means though traditional materials may be created electronically Web Design Web design refers to a
171. untries the number of mobile phones is over that of fixed line phones already In fact many families do not install household fixed lines anymore In the USA and Hong Kong about half of the children population have mobile phones already 3G Third Generation Mobile Phones 3G is the short form for third generation It is a technology standard for mobile phones 3G is named after its radical change to the mobile industry providing network operators with a greater network capacity Network operators can in turn provide their customers 1 e the end users with more services such as wide area wireless voice telephony video calls and broadband wireless data Design and Applied Technology Secondary 4 6 PDA Personal Digital Assistant A PDA is a handheld computer It can act as a mobile phone calculator dairy workstation for gaining access to the Internet using email word processing and spreadsheet calculation video recorder address book bar code scanner radio etc JNOHd A QLOHd LINUAUNI aw 1 2 5 World Wide Web or WWW Teenagers today may regret that they missed the chance of witnessing a revolution the Internet has evolved from a technology distant from ordinary people to a necessity in only less than a score of years Teenagers have seen but probably seldom use the following methods these days Communication Using letters and fixed line telephones Research Using library resou
172. value of Golden ratio in art and design is approximately 1 6180339887 Hertz is a unit of frequency of one cycle per second High Definition High Definition or HD is newer digital video format than SD HD HD s native aspect ratio is 16 9 with 1920 x 1080 pixels HD s recording can be done at 24 or 60 FPS Icon An icon is a sign that has similar graphical characteristics to the item that it represents The extent to which something is interactive the extent to which a computer program and human being may have a dialogue Interface The interface is an additional layer of software or hardware that D econ Interlaced Scan The interlaced scan pattern in a CRT cathode ray tube display is carried out from the top left corner to the bottom right corner This process is repeated again only this time starting at the second row in order to fill in those particular gaps left behind while performing the first progressive scan on alternate rows only Key frames Key frames are the beginning and end frames of an action or change Mise en sc nes Mise en Sc ne is French with different meanings but no unique definition For example it can mean arranging scenes or designing and arranging frames It covers locations design props design of actors clothing and additional props for supplementary information about the characters Motion capture Motion capture mocap is a technique of digitally
173. vantage over traditional printing materials It facilitating readers in making cross reference dictionaries reference works and certain kinds of textbooks etc c e books require much less physical storage space As long as its memory is large enough a single device can store up to thousands millions or even more e books d The reproduction cost for e books are usually lower than that for printing books on paper e Because of their limited requirements for storage space and production costs e books can be offered over time without the out of print issue Authors can keep earning through copyrights Readers can also gain access to older books easily f e books can be delivered electronically downloading an e book may need only seconds a lot faster than obtaining a paper book There are many advantages of electronic books How about disadvantages Write them down and discuss in groups Design and Applied Technology Secondary 4 6 oe oe T T Bo o n Tr zx han 1 2 4 Mobile Phones Mobile phones are moveable electronic devices for people s voice and data communications Data communication includes Short Messaging Service or SMS email access to the Internet etc In addition to communications many mobile phones today are equipped with other functions such as camera and video taking functions To most Hong Kong people communicating with mobile phones is part of their daily life In many co
174. videos cut and paste video clip segments and add special effects and transitions Certain software even enables users to encode videos for creation of DVD web videos mobile phone videos and video podcast Refer to the index of user guides of for example Ulead Video Studio and Microsoft MovieMaker for more functions Traditional methods such as A B roll editing are linear editing Digital methods are also known as nonlinear editing Adding transition effects through Cut Dissolve Wipe etc is a basic video editing technique Design and Applied Technology Secondary 4 6 E Cut Dissolve Dissolve is to transit one image to another gradually by controlling the exposure of start and end images gt ee 536 z r b PEE I Ea J Pi D oe Design and Applied Technology Secondary 4 6 E Wipe Wipe is to spatially transit one image to another gradually with a distinct edge Expanding circles are commonly used a Sound Editing Sound editing is to edit music voice and other audio recordings including but not limited to addition of echo amplification and noise reduction b Waveform Sound can be represented visually as waveform the louder the sound the higher the wave Waveform helps editors to locate which segments are to be edited MO o ri BAAR bhd Ma bad dhas ii ld i 3 3 4 Animation Software Animation software is for creation of moving
175. word It refers to arranging scenes or design and arranging frames It covers locations design props actors clothing design and additional props of supplementary information for characters Reference movie Election 2005 Design and Applied Technology Secondary 4 6 eer i aes z et i Mise en Sc ne Mise en Sc ne is an important scenic design skill Election 2005 is an example showing a good practice of furnishing arrangement Mise en Sc ne helps to provide a Sufficient camera angles for shooting b Sufficient room for shooting equipment c Visual layers for composition d Foreground and background for depth of field effect 3 1 8 Props Set up a What are props Props are items on the stage for a play In general props refer to small objects used by the characters like glasses and books Larger objects such as chairs and tables are considered as part of the set b Why is prop design important Props are considered as silent actors It helps an actor to deliver extra meaning to the audience For example a pistol in a cop s hand is representing justice On the contrary if it is in a robber s hand it symbolizes crime Such complicated implications on props make prop design work challenging For example guns played a heavy role in Infernal affairs 2002 Reference movie Infernal affairs 2002 Design and Applied Technology Secondary 4 6 E rome e 3
176. xample there are many planets or objects in the universe They reflect light and become visible to human on the Earth Human refers such planets and objects as stars symbol and use some graphics to represent stars icons for communication When there is any change in a star s locus for example some people may think that such a change hints something index The natural sky photo at night A cartoon star icon Hand draw star icon Major Principles in Semiotics a The use of signs varies from culture to culture There is no natural meaning or definition b Signs can carry more than one level of signification and thus meanings Items exist and are described by words signs etc but not exist due to the existence of words signs 9 etc Semiotics Helps Communication with Others Semiotics helps business people communicate and advertise Consider the following questions with respect to Ribena and Yahoo a Why is purple used b What meaning does purple carry c Does purple make the product prestigious d Can purple tell people our brand is fun Design and Applied Technology Secondary 4 6 a r 1 iin Er cs 2 1 3 Symbols Icons and Indexes Semiotics which is also known as semiology is the study of semiosis signs and symbols It deals with the meaning and usage of signs and symbols Many people consider semiotics a discipline related to anthropology It is appli
177. xt iv Include a title at the head of the sequence and your name at the end 3 Photography Project 1 The frame In this project you are asked to produce a set of six photographs investigating natural or man made forms Your work should demonstrate how the frame could be used to create compositions of shape line and pattern You should consider not only the shapes of your subject but also those formed between the subject and the frame You can choose one of the following themes 1 Patterns in nature 11 Rhythms of life iii Urban patterns 4 Photography Project 2 Photomontage In this project you are asked to produce a photomontage in response to one of the following titles 1 Phobia an abnormal or morbid fear of something 11 Metamorphosis a change of form character or conditions 11 Decay decompose iv Strange but true 5 Prop and Scene An office after 10 years 1 Form a group with 3 4 members 11 Make a research of modern office setting 11 Base on the information found hold a discussion about a prediction of an office setting 10 years later iv State your group discussion result in point form v Visualize the office setting in the space provided Design and Applied Technology Secondary 4 6 HANDS ON ASSIGNMENT Imagine that you are the art director of a film Now you have to design a room for a couple How would you arrange the furnishings so that there are sufficient shooting angles for
178. y Design and Applied Technology Secondary 4 6 A eer i merrer z eter a a E Appendix Basic function of PhotoShop A Photoshop Interface Fle Gok mage Laver Select Fiber View ynde Helo IAG 10 5 amp EF AGH ADE EE Fe 04 ees ke u JA ms D De Seo fhe ea dr efira cropping frere ee SAHT AE meri for ioral oplan 1 Menu bar The menu bar contains menus for performing tasks The menus are organized by topic For example the Layers menu contains commands for working with layers 2 Options bar The options bar provides options for using a tool 3 Toolbox The toolbox holds tools for creating and editing images Palettes Palettes help you monitor and modify images 4 Info palette The Info palette displays information about the colour values beneath the pointer and depending on the tool in use other useful measurements B Design and Applied Technology Secondary 4 6 5 Colour palette The Colour palette displays the colour values for the current foreground and background colours Using the sliders in the Colour palette you can edit the foreground and background colours according to several different colour models You can also choose a foreground or background colour from the spectrum of colours displayed in the colour ramp at the bottom of the palette 6 History palette You can use the History palette to revert to a previous state of an image to delete an i
179. yer and the game content 1 e the story d All of a b and c Which item shown is considered an interface a A b B c C d d All of a b and c A dialog box as shown is used a As a form of Facebook b To inform the user about something IN ER eap DIRFE MOTTE 2 c To start a dialog between the Cawg _ za _ ma computer and the user d All of a b and c A dialog box A digital signal is recorded in terms of a 0 and b 1 and 2 c 2 4 8 64 128 d Frame by frame Which of the following is NOT a traditional media a Telephone b Radio c Cable Television d Newspaper Which of the following are the three primary electronic colours a Green Yellow amp Red b Red Yellow amp Blue c Blue Red amp Green d Green Blue amp Yellow Design and Applied Technology Secondary 4 6 7 When a frame is divided with four spots where the lines intersect it 1s a Rule of Thirds b Golden Mean c Grouping d The grid system 8 An icon Is a A sign that carries out an arbitrary relationship to which it stands for b A sign that is an indicator of a fact or condition c A Sign resembling to which it stands for d None of the above 9 What is the different between denotation and connotation a Denotation is the most basic or literal meaning of a sign Connotation has a deeper meaning of signs b Denotatio
180. zation of the pictures story music etc It is an art at least an important process where the fate of the final video relies on Refer to Chapter 3 3 4 for detailed editing skills and technology c Video in Compositing and Blending Compositing or matting in the film industry s terminology is to combine two images or more into a single frame Traditionally compositing is done through masks or mattes A mask is a stencil like erey scale image It protects part of an image from compositing Combining images without masks is image blending There are different types of blending such as addition and difference Design and Applied Technology Secondary 4 6 Alpha Channel with Mask The Secret of the Magic Gourd The movie was produced by Centro and Disney in 2007 It mixes the magic gourd and other characters with real life actions d e Reference Centro www centro com hk Video with Special Effects Special effects in videos usually involve computer generated images particularly 3D computer generated elements Videos with good special effects have to consider the object scale lighting quality atmosphere or mood and camera s point of view etc Similar to any other successful activities good planning which means at least a detailed storyboard in this context is mandatory for successful special effects Video Image Foreground Elements Composite Video Colour Correctio

Design and Applied Technology (Secondary 4 – 6)

Contents

Download Pdf Manuals

Related Search

Related Contents

Design and Applied Technology (Secondary 4 &ndash; 6)

Contents

Download Pdf Manuals

Related Search

Related Contents

Design and Applied Technology (Secondary 4 – 6)