Home

Flash Tutorials

1. PlayPauseButton X 33 40 Y 40 35 Swe P W 480 00 H 270 00 Keep defaults Align x7 COMPONENT PARAMETERS C Property Value i al ria align center Ly Distribute autoPlay M zg et a om Match size Space dvrFixedDuration 2 Hl ia x dyrincrement 1800 E Bs si dvrincrementVariance Ea M Align to stage dvrSnapToLive M isDVR LJ isLive I preview None Color e scaleMode maintainAspe _ skin SkinUnderAll s 2 z L2 Solid color skinAutoHide o EJ skinBackgroundAlpha 0 85 HA skinBackgroundColor o source BFB BBC mp4 2 volume 1 vy CUE POINTS O mA Name Time Type RapMan video from BBC Step 3 Publishing a flash file that uses video If you plan to publish the flash file on a web site or if you mail your application do not forget to include all the files for example e flash cs6 mp4 video html the HTML file optional e flash cs6 mp4 video swf the Flash file e BFB BBC mp4 the video e SkinUnderAIINoFullscreen swf the skin library Example files e flash cs6 video component html 1 e flash cs6 video component fla 2 Flash source BFB BBC mp4 P original video The video shows the first 3D printer I owned a RapMan bought sometimes in 2009 Flash video component tutorial 240 Using File import As an alternative you could use the File import menu However you might make w
2. Jag antila Kom oss M i Scene 1 6 4 Drawing interpolation movement is the tool polystar Create a motion path for an animated object Let s now enhance the moving sun animation e We want the sun pulsating i e change color and size in regular intervals e Add a motion animation using the rocket from the Flash frame by frame animation tutorial flash cs6 rocket symbol html 61 This is a fairly simple task We just need to add an frame by frame animation to the sun and then create a new motion tween for the rocket For the rocket we will have to substitute the flight path and also adjust rotation in various locations If you plan to work along while you read we suggest starting either from e flash cs 6 motion tweening empty fla 6 only includes a sun e flash cs6 motion tweening fla g includes the sun animation e A rocket movie clip 6l can be found in the library of flash cs6 rocket symbol fla 7 Look at the result e flash cs 6 motion tweening a clip html 8 Below is a screenshot explaining the architecture Flash CS6 motion tweening tutorial 92 Commands Control Debug Window Help N Designer p L q temp r Rocket motion we Sun motion q Sky A a I4 lt 41 P i gt bi eS BOB i 24 00fps 0 0s Two motion tweens using 2 embedded movie clips Flash CS6 motion tweening tutorial 93 Adding a frame by frame animation to the sun e Double click on the su
3. Then you can change the colors of the stroke and the fill Step 6 Morph e Right click on an empty frame between the two keyframes and select Create Shape Tween e Alternatively you also could click into an emtpy frame and select Shape Tweenin the Insert menu on top Flash shape tweening tutorial 99 Create Motion Tween CreateyShape Tween Crete Classic Tween PoI SINS sert Frame shape tween dragon ega fla flash cs6 shape tweening in SAS Scene 1 4 Insert Keyframe Insert Blank Keyframe Cex keyframe Convert to Keyframes Convert to Blank Keyframes Cut Frames Copy Frames Paste Frames Clear Frames Select All Frames Actions Create a shape tween between two keyframes that contain editable graphics Step 7 Repeat the other way round e Insert a new empty keyframe around frame 40 e Copy the picture from frame 1 select it and hit CTRL C in frame 1 e Paste in place it to the empty keyframe CTRL SHIFT V e Add the shape tween as above Test e Move around the playhead e Menu Control gt Test Movie If the animation is too fast drag the keyframes to the right e Click on the keyframe first You should see a cursor with a rectangle e Only then you can drag Extend shape tween span by dragging the second keyframe Done Result and source You can admire the result Hl Source flash cs6 shape tweening intro fla PI Directory http tecfa unige ch guides
4. File Flash cs6 cue points properties panel png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 cue points properties panel png License unknown Contributors File Flash cs6 cue points embedded clips png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 cue points embedded clips png License unknown Contributors image flash cs6 video captions png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 video captions png License unknown Contributors image flash cs6 video captions2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 video captions2 png License unknown Contributors image as_actions_panel_new_popup png Source http edutechwiki unige ch mediawiki index php title File As_actions_panel_new_popup png License unknown Contributors image help png Source http edutechwiki unige ch mediawiki index php title File Help png License unknown Contributors image flash CS5 code snippets jpg Source http edutechwiki unige ch mediawiki index php title File Flash CS5 code snippets jpg License unknown Contributors image flash data grid 0 png Source http edutechwiki unige ch mediawiki index php title File Flash data grid O png License unknown Contributors image flash data grid as3 png Source http edutechwiki unige ch mediawiki index php title File Flash data grid as3 png License unknown Contributors image flash data
5. Cat example file J actionscript3 simple object manipulation swt File View Control Debug Mouse interaction and effects demo Click on the black cat If will move forth and back Hold the mouse down on the blue cat and then release the mouse Drag the red cat hold mouse down and move it without releasing Click on the white cat If disappears and a dog appears Then the reverse Click on the grey mouse then use the mouse wheel to change its size Click on the grey cat lots of times It will change color Demonstration of some mouse events and implementation of property changes The all in one file with the examples we discussed above is here actionscript3 simple object manipulation html Uy actionscript3 simple object manipulation fla 2 Directory with files actionscript3 simple object manipulation http tecfa unige ch guides flash ex6 action script 3 intro Here is the complete ActionScript code A Change cursor form Ewel E Nall cO Ulas Orem wO BEEN cit This way a user understands that he she can do something with the object a black_cat buttonMode true blue_cat buttonMode true mecducat bUETOnMode true brown_dog buttonMode true white_cat buttonMode true empty_cat buttonMode true grey_mouse buttonMode true fi O ActionScript 3 interactive objects tutorial 335 black_cat addEventListener MouseEvent CLICK moveCat cat can be in original position or not
6. Basic interactivity and use of components Flash button tutorial Draft Overview Buttons are interactive interface elements on which a user can click As an alternative you also could start learning how to use component buttons and go through the Flash component button tutorial Learning goals Learn how to use built in buttons from library buttons fla Learn how to create your own buttons Learn some ActionScript 3 in order to implement timeline navigation Applications Simple Flash web sites e g slide shows Prepare for more difficult e g simple games with levels each frame being a level Flash level e Flash CS6 Flash 11 Actionscript 3 e Principles and explanations also work for CS4 and CS5 However fla example files will not open with CS3 to CS5 5 Prerequisites Flash CS6 desktop tutorial or Flash CS4 desktop tutorial Flash drawing tutorial Flash layers tutorial Flash frame by frame animation tutorial Flash motion tweening tutorial for the rocket launcher and the animated buttons Moving on The Flash article has a list of other tutorials We suggest firstly the Flash component button tutorial working with component buttons is actually easier than using the kind of buttons we discuss here Then you can move to other interactivity tutorials e g Flash drag and drop tutorial ActionScript 3 interactive objects tutorial or ActionScript 3 event handling tutorial Quality This text should techni
7. e Menu File gt Publish Setting e Open Advanced and tick Permit debugging Examples with good solutions The following examples makes sure that Scripts and Buttons are restricted to single keyframes and doesn t use a tricky mouse out open the source e flash cs6 mouse over button html 8 e flash cs6 mouse over button fla 9 The next example inserts the mouse over animation of a button into and embedded clip and therefore can use a mouse over that would break the previous example e flash cs6 mouse over button2 html 10 e flash cs6 mouse over button2 fla M Links Technical documentation at Adobe e Working with movie clips 1121 Adobe retrieved Feb 2013 See in particular e Controlling movie clip playback 131 Adobe retrieved Feb 2013 e Handling events nA Adobe retrieved Feb 2013 References 1 http tecfa unige ch guides flash ex6 embedded movie clips kite movie html 2 http tecfa unige ch guides flash ex6 embedded movie clips kite movie fla 3 http tecfa unige ch guides flash ex6 embedded movie clips 4 http tecfa unige ch guides flash ex exams2007 final exam coap2 1 10 2007 fla 5 http tecfa unige ch guides flash ex6 embedded movie clips kites html 6 http tecfa unige ch guides flash ex6 embedded movie clips kites fla 7 http www kongregate com forums 4 topics 3935 8 http tecfa unige ch guides flash ex6 buttons intro flash cs6 mouse over button html 9 http tecfa unig
8. gotoAndStop 1 nextFrame function backward event MouseEvent if this currentFrame 1 gotoAndStop this totalFrames prevFrame This ActionScript 3 0 code firstly adds Event Listeners to each button as we have seen before The forward function has some if then else logic inside Let s look at its if then else statement if this currentFrame this totalFrames gotoAndStop 1 else nextFrame Meaning When the user clicks on the forward button the Flash engine will check if the current frame is the last frame then move to frame 1 else just move to the next frame The backward function implement the following if this currentFrame 1 gotoAndStop this totalFrames else prevFrame Meaning If we are on the first frame then go to last frame else go to the previous frame In order to use this slide show code for your own slide show you do not need to understand it Just copy and paste it but make sure that your forward button instance is called forward_btn and the backward button instance back_btn Tip If this doesn t work make sure that your Publish settings say ActionScript 3 It won t work with ActionScript 2 Also make sure that your button instances are named and that these names correspond to the ones you use in the script It doesn t matter how you name the button symbols we talk about button instances here Step 9 Make sure your buttons extend to all frames
9. lt body gt Timed Text 135 lt tt gt A Timed Text DTD mini DTD lt lt lt i lt lt l lt l Sl lt I lt lt lt lt I lt lt m mise alee Mini Timed TEXT DTD for use with Flash CS3 version 0 9 Sere 27 2007 Copr eig mer Freeware Daniel K Schneider TECFA http edutechwiki unige ch en Timed_Text Disclaimer TELS not complete I don t understand Timed Text I find Adobe s doc shaky My only claim is that this validates their example ELEMENT tt head body gt ATTLIST tt xmlns CDATA FIXED http www w3 org 2006 04 ttafl1l gt ANRETT Sami 9 Iewavey CIoVNWA Fag iD EDEN ATTLIST tt xmlns tts CDATA FIXED http www w3 org 2006 04 ttafl styling gt ELEMENT stylin ELEMENT style ATTLIST style style CDATA 1 ELEMENT head styling gt g Style gt id CDATA REQU IRED ts background tts fontStyle tts textAlign tts wrapOption ELEMENT body ELEMENT div p BES color CDATA Color IMPLIED EMPTY gt PLIED CDATA IMPLIED tts fontFamily CDATA IMPLIED tts fontSize CDATA IMPLIED normal italic inherit inherit tts fontWeight CDATA IMPLIED LLEIEE Seale fail comin SEAT Siac sumimeiesic VW alinineieavice wrap noWr
10. PUR WT Pet OT ES Wed N oT CET TEN PEY et TAN Pet T TE det Peer et Dent Oo Ver eT TEN Se E Pet TEN Pet PES et Cot fot fort Tee PAY T Yer Dr TET TOT eT vet et Wel ET Pet Pel Yard Pet tay Pet tet tee er Pe Poy De p rs button an o h 1 120fps 00s M OO EEE Ee N The Flash CS3 Layers tool If you are lost go back to the Flash layers tutorial Simple drawing There are two modes merge mode and object mode e In merge mode default you draw shapes and over or under paint other shapes e In object mode you draw graphic objects that you later can edit again Most of your drawings should be in object mode So make sure that this icon is on when you select a drawing tool e Only use merge mode when you paint like you would with real paint e You then can assemble these shapes with menu Modify gt Combine Objects gt Union The result is a graphic object Other commands e To select several objects either hold down the SHIFT key use a selection box or the Lasso tool e To break apart a drawing well anything actually right click Break Apart However to edit the shape inside a graphic objects you don t need to break it apart You also can double click on the graphic shape You should see something like Drawing Object in the Edit bar Make sure to return to main timeline editing once you are done If you are lost go back to the Flash drawing tutorial and Flash arranging objects tutorial Flash animation summar
11. Scrolling news credits rolls TickerTape marquee crawls e Text overlay TelePrompter Timed Text 134 Related formats and software Timed Text is supported to various degrees by various software e g e Flash e Real Player There is also an interaction with other formats e g e SMIL e MPEG 4 e 3GPP TT in Flash CS3 Flash CS3 seems to support the W3C Working Draft 27 April 2006 Adobe s manual and example I find the documentation in Flash a bit sloppy Also I don t think that id s should be numbers In addition I tried to validate the Adobe example against both the candidate specification and the older April version and it doesn t validate Maybe it s no only Adobe s fault but I really don t like situations where you are supposed to use a standard and where examples given don t match standards 3 Here is the example from the Using Timed Text captions lin the Flash CS3 Documentation xml version 1 0 encoding UTF 8 lt tt xml lang en xmlns http org 2006 04 xmins tts http 3 org 2006 04 ttafl styling gt lt head gt lt styling gt lt style id 1 tts textAlign right gt lt style id 2 color transparent gt lt style id 3 style 2 tts backgroundColo lt style id 4 style 2 3 tts fontSize 20 gt lt styling gt lt head gt lt body gt lt div xml lang en gt lt p begin 00 00 00 00 dur 00 00 03 07 gt I had just joined lt span tts fontFamily monosp
12. The moon must follow a more or less smooth path i e an arc and not just two lines Tip This is a motion guide tween i e same logic as the almost finished penguin walk 6 Extra animation e Add one other animation effect somewhere that would improve the overall animation Whatever you like e I for myself added a credits button don t try it s not part of this test Cheatsheet and advice Frames e F5 will extend a frame without adding keyframes e F6 will make a new keyframe and copy contents from the prior keyframe in the timeline e F7 will make a new empty keyframe Scaling e ALT CTRL S will allow to scale a selected object Else just use the properties panel Embedded movie clip animation e To edit a movie clip double click in the library on the symbol e g do this for the penguin feet Shape tweening e Right click gt Break Apart will turn a symbol instance into its components You cannot morph symbols e To align objects across frames Lock all layers except the ones you work on Click on Edit multiple Frames on the Edit bar underneath the timeline Move onion skin delimiters Select the objects hold down the SHIFT key and use for example the align panel Be careful with this method e g don t forget to untick Edit multiple Frames Other Advice e Always lock layers you are not working on e Make sure the select tool is on in the tools panel before you think about moving objects or changing their
13. Untitled 1 Target Script Flash Player 11 2 ly ActionScript 3 0 Class PA vy PROPERTIES Distribute za gt Match size S Ei FPS 24 00 Size 550 x 400 px 4 Stage Align to stage vy SWF HISTORY beg clear Solid color Oh 300 Os 75 OB 80 R 204 OG 51 OB 204 AY m Flash CS6 workspaces menu Tips e You can hide show panels with F4 e g if stage size is big e You can save a configuration and give it a name If you are lost go back to the Flash CS3 desktop tutorial Flash CS4 desktop tutorial or Flash CS6 desktop tutorial depending on your version Layers and Frames e Put each object to be animated in a separate layer Yes do not animate two or more different objects in one layer except in frame by frame animation e To create a new layer click on the insert layer icon left underneath the layers e Immediately give this layer a meaningful name e simply double click on the layer name e If objects of one layer should be in front in the back of an other layer you can grab a layer with the mouse and move it up or down e When you edit objects in one layer it s good policy to lock all the other layers Flash animation summary 116 Hide unhide Click to lock unlock a layer or all layers layers
14. User clicked on missile Put initial focus on missile Focus will change when user clicks on another object so don t stage focus missile missile addEventListener KeyboardEvent KEY_DOWN missile_control function missile control event KeyboardEvent void var key event keyCode Val se ang cite FOV mang Cie trace event CODE event keyCode switch key case Keyboard LEFT target x big_step break case Keyboard RIGHT target x big_step break case Keyboard UP target y big_step break Learning goals case Keyboard DOWN target y big_step break ActionScript 3 interactive objects tutorial 348 Sadly this example will not work in a web browser only in the Flash player The missile will never receive focus So it s probably a good idea to move to the next example Example code e actionscript3 keypress move 0 html 8 e actionscript3 keypress move 0 swf PI e Source actionscript3 keypress move 0 fla 10 e Directory http tecfa unige ch guides flash ex6 action script 3 intro Dealing with the tab list problem Flash has the feature that when you press an arrow up left right key it will by default move the focus on the next button In order to inhibit this behavior I found that I had to add some extra code which is below I don t guarantee that this is the most simple solution ATACE TONS CRT OG ier EIME neS CRIPPEN Shows how to move around a fl
15. You also could turn the shape move it or adjust its size so that it would adjust to the new rotation and length of the bone but that s a bit tricky You will learn move about bone and node manipulation later but for starters this it is enough to move bones up and down The picture below shows what happens if you move a shape and change its rotation point The result is not entirely convincing compare with the previous picture above Moving a joint with the Free form tool Result in the IK structure Adjusting joints enter points with the Free Transform tool in Flash CS4 Animation Let s now create an IK animation Before you start make sure that the IK structure is what you want It must be complete You won t be able to change the structure itself later on You only can change poses do some transformations and other more advanced tuning You cannot add other symbols to the armature So here is the procedure e Select the selection tool in the tools panel e If you only have a single frame in the timeline you need to extend the armature span Select the armature layer and drag out frame one watch for the double arrow cursor to appear e Now move the red playhead on top to a new frame and define a new pose In any frame you like you can move all the joints Each time you do this it will create a new keyframe with a pose Keyframes are represented by little lozenges in the armature span in the timeline
16. grey_mouse addEventListener MouseEvent MOUSE_WHEEL changeSize red_cat addEvent Listener MouseEvent MOUSE_WH eS EL changeSize empty_cat addEventListener MouseEvent CLICK transformCatColor R G B A multipliers and R G B A offsets we start with a light grey Care empty_cat transform colorTransform new Colomnkrans norm Oi 0 iO i il 20 20 120 255 2 Below is the complete code This example attempts to write more portable code Any of the functions will work with any movie symbol No more global variables Z pe amn List of objects and Event handlers E black cat will move next to his red friend black_cat addEventListener MouseEvent CLICK movelIt black_cat friend red_cat blue cat will change size on mouse down blue_cat addEventListener MouseEvent MOUSE_DOWN resizeIt We have to test both mouse up and mouse out since user can press mouse and move out Cat in this case would stay big Also we have to test if cat is already big when user moves in blue_cat addEventListener MouseEvent MOUSE_UP downsizelIt blue_cat addEventListener MouseEvent MOUSE_OUT downsizeIt red cat and mouse can be dragged red_cat addEventListener MouseEvent MOUSE_DOWN startDragging red_cat addEventListener MouseEvent MOUSE_UP stopDragging ActionScript 3 interactive objects tutorial 339 grey_mouse
17. var __motion_sun MotionBase if __motion_sun null import fl motion Motion __motion_sun new Motion __motion_sun duration 16 Call overrideTargetTransform to prevent the scale skew or rotation values from being made relative to the target object s original transform _motion_sun overrideTargetTransform The following calls to addPropertyArray assign data values for each tweened property There is one value in the Array for every frame in the tween or fewer if the last value remains the same for the rest of the frames __motion_sun addPropertyArray x __motion_sun addPropertyArray scalexX 1 000000 __motion_sun addPropertyArray scaleYy 1 000000 __motion_sun addPropertyArray SkewX 0 __motion_sun addPropertyArray skewY 0 __motion_sun addPropertyArray rotationConcat 0 __motion_sun addPropertyArray blendMode normal Create an AnimatorFactory instance which will manage targets for its corresponding Motion var __animFactory_sun AnimatorFactory AnimatorFactory __motion_sun __animFactory_sun transformationPoint 0 500000 Call the addTarget function on the instance to target a DisplayObject The second parameter is the number will play the default value of 0 __animFactory_sun addTarget lt instance name goes here gt 0 new new Point 0 500000 AnimatorFactory with this Motion o
18. Finally make sure that these buttons are displayed throughout the movie Flash button tutorial 209 e Select the buttons layer click the last frame where the last picture sits and Right click gt Insert Frame or hit F5 A the end you should see little white rectangle Your timeline should roughly look like this flash cs3 simple slide show fla W Actions W Buttons U Pictures The final time line for a simple slideshow Step 10 Tuning You may want to fix the title page Results e You can look at my published resulthere U7 e Source flash cs3 simple slide show as3 fla 8 e You can grab all the files flash cs3 simple slide show as3 from this directory http tecfa unige ch guides flash ex buttons intro This slide show was fairly simple Now you maybe would like to use fancier buttons See Animated buttons below Image maps with pictures You can make image maps from bitmaps too I e you could use a picture and then insert hot spots Steps more details when I have time Prepare an image e Put an image on the stage e Break it apart Carve out a fragment e Deselect the image e Grab some region with the Lasso tool e Right click gt Convert to symbol Select button You now should have an image fragment in the library Edit this button and change the mouse over and mouse down pictures e Double click on this button in the library You should be in symbol edi
19. Video components are pre built interface elements widgets that will speed up video integration As explained in the Flash video component tutorial the FLVPlayBack Video Component allows to render videos in an easy way since it includes a nice choice of skins for user controls Videos also can be enhanced with captioning i e subtitles or side text as we shall explain in this tutorial For this purpose you need another component FLVPlayback Captioning Learning goals Learn how to encode f14 and older flv files Learn how to use the Flash 10 11 CS5 6 video component for simple video playback Prerequisites for the first part Flash CS6 desktop tutorial Flash drawing tutorial Flash video component tutorial important Timed Text Flash embedded movie clip tutorial maybe Moving on The Flash article has a list of other tutorials Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Level Flash video captions tutorial 295 It both aims at beginners that do have some web technology background and intermediate Flash designers Making use of captions A caption is a text that is displayed dynamically while the video is playing Captions may serve several purposes e You can deploy videos to people with hearing disabilities e Users can look at videos w
20. e Attach envelope points to bones Flash level e Flash CS6 or better Prerequisites e Basic drawing and animation e g the level of Flash animation summary Moving on e See the Flash tutorials Level and target population e Beginners Quality e This is a first draft I will have to complete things add some more screen captures rewrite some stuff and add more examples etc Alternative Version Flash CS4 inverse kinematics tutorial The bones tool is an inverse kinematics IK tool with which one can create armatures for shapes or connected symbols instances These armatures connect objects or parts of shape in a hierarchical tree These parts can be called bones or limbs Outer or child limbs that are moved also will move inner or parent limbs E g In a human avatar if you pull a finger the hand will move too and the hand in turn will move the lower arm etc So in contrast to forward kinematic animation where each movement for each component must be planned only the starting and ending locations of a limb are necessary to get a basic animation going Flash inverse kinematics tutorial 250 A group of several symbols with IK bones attached Copyright Adobe m License Creative Commons by nc sa A shape with an IK armature added Copyright Adobe License Creative Commons by nc sa Simple demo Inverse kinematics is the process of determining the parameters of a jointed flexible object
21. f_diese load request_three var request_four URLRequest new URLRequest http tecfaetu unige ch etu maltt tetris karanis0O stic 1 ex6 G 23 mp3 var g_diese Sound new Sound g_diese load request_four var play_liste 0 dictionary which associates numbers with sounds in order to play the sounds randomly Flash sound tutorial 146 var dictSounds new Dictionary dictSounds 1 d_diese dictSounds 2 ci_diese dictSounds 3 f diese dictSounds 4 g_diese changing the cursor into hand over button in our case we created an instance on the scene and we named it play_sounds play_sounds buttonMode true Listener on the button that will play our sounds play_sounds addEventListener MouseEvent MOUSE_DOWN mouseDownHandler this function will play the sound that correspond to the random number by using the random function we create numbers between 1 and 4 function mouseDownHandler event MouseEvent void play_liste Math ceil Math random 4 dictSounds play_liste play Links e Sound Assets look this up if you need websites with free sounds Documentation e Working with sound Ey Adobe Using sounds some AS2 no AS3 e Sound t2 Adobe AS3 reference e SoundMixer 13 Adobe AS3 reference e Maths functions including Random 14 References http tecfa unige ch guides flash ex6 sound intro flash cs6 cloud animatio
22. var obj event target var resultColorTransform empty_cat transform colorTransform Create a new color transform object and change it red color will peak at 255 blue color offset will cycle from TAS CO L00 resultColorTransform redOffset Math min resultColorTransform redOffset 10 255 resultColorTransform redMultiplier Math min resultColorTransform redMultiplier 0 1 1 resultColorTransform blueOffset 10 if resultColorTransform blueOffset gt 255 resultColorTransform blueOffset 100 resultColorTransform blueMultiplier 0 1 ii Coy chec CO CS CEE obj transform colorTransform resultColorTransform trace redOffset tresultColorTransform redOffset dhe blueOffset tresultColorTransform blueOffset ActionScript 3 interactive objects tutorial 342 permanent size change with mouse wheel function changeSize event MouseEvent void var obj event target obj width event delta 3 obj height vent delta 3 Remote cat control example actionscript3 simple object manipulation buttons swF o x File View Control Debug Demonstration II of some mouse events and implementation of property changes Here is another example that demonstrates the following principles e You can modify an object s properties from an event triggered on another object e g button components e Play an embedded animation I also simp
23. 100 z Library x Components Component Inspector flash cs3 rocket moving fla yi a amp 2 items movie clip swf library items If you want you can Look at the flying rocket e Or get the file flash cs3 rocket moving fla from here http tecfa unige ch guides flash ex motion tweening intro Don t worry about details of swf movie clip reuse The motion guide tweens chapter below will show how to do this in some more detail Flash classic motion tweening tutorial 75 Motion guide tweens Instead of having an object move from one point to another in a straight path we can make it follow an arbitrary path we draw i e a motion guide Note In Flash CS4 there is a simpler alternative i e you can easily create motion guides with the normal motion tween tool Step 1 Create a normal motion tween e Like explained above create two keyframes i e one for start and one for the end Each keyframe should contain a copy of the same symbol as above Then insert a motion tween e This is important else you will fail Step 2 Insert a motion guide layer e Select the first keyframe and layer that starts your animation e On the layer edit bar in the time line click on the little motion guide icon looks like a slinky or Right click gt Add Motion Guide You should get something like in the capture below flash cs3 motion quide tweening fla i san Guide animat 7 WU
24. 149 Windows Meta File Repositories Free e free clip art com 1 Commercial e Graphicsfactory 12 e Prodraw 13 some free bitmaps EPS File Repositories Encapsulated PostScript e Web Design Blog 14 e vecteezy 15 stupid name cool vectors AI Illustrator Repositories e vecteezy 15 stupid name cool vectors The ones I tried give you a zip with EPS AI JPEG inside e Rick Johnson Graffix Clip art for technical Illustrators Some free isometric building blocks Bitmaps only repositories 17 18 e Nuvola icons see also Project Nuvola 2 0 e School Clip Art 19 only bitmaps e Inki s Clipart 7 e Clip Project 21 Wp Clipart P e Best of Clipart 23 needs registration Other Links File formats Fileformat Info P e File format 25 Overview Wikipedia e List of file formats 26 Wikipedia This is quite complete e Alphabetical list of file extensions 27 Wikipedia This is quite complete General e Clip art 78 Wikipedia article e Open Clip Art Library 29 Wikipedia entry Clipart 150 Software Most graphics vector graphics editors can import export various formats e Comparison of vector graphics editors 30 Wikipedia e List of vector graphics editors 31 Wikipedia Free online tools SVG to JPEG PNG TIFF at fileformat info Free Vector editors e Inkscape 33 e OpenOffice Draw 34 References 1 http en wikiped
25. Horizontal Center CTRL ALT 3 Right Align CTRL ALT 4 Top Align CTRL ALT 5 Vertical Center CTRL ALT 6 Bottom Align CTRL ALT 7 Distribute Widths CTRL ALT 49 Distribute Heights CTRL ALT SHIFT 7 Make Same Width CTRL ALT SHIFT 9 Make Same Height CTRL ALT 8 Set Align to stage Flash CS3 keyboard shortcuts 411 Windows and Panels Open close various Panels F1 Help F4 Show Hide Panels CTRL K Align Panel CTRL T Transform SHIFT F9 Color Mixer CTRL F9 Color Swatches CTRL L Show Hide Library F9 Actions If your screen is big enough you won t need these a lot CTRL F3 Properties Inspector CTRL F2 Tools Panel CTRL ALT T Timeline CTRL M Modify Movie Properties CTRL E Toggle between Edit Movie amp Edit Symbol Mode CTRL SHIFT L Show Hide Timeline CTRL SHIFT W Show Hide Work Area Frames and Symbols most of the time position first inside the timeline F5 Add frame extend the timeline SHIFT F5 Delete Frame F6 Add Key Frame and copy over old contents SHFIT F6 Clear Key Frame F7 Add Blank Key Frame and leave the stage empty F8 Turn into Symbol CTRL F8 Make new Symbol CLICK DRAG Move keyframe Select release then drag CTRL DRAG Select several Frames Timeline Enter Play Movie CTRL 0 zero Rewind Movie lt Previous Frame gt Next Frame CTRL ENTER Test Mo
26. O Click to Go to Previous Scene and Plz O Click to Go to Scene and Play gt Gj Animation gt Load and Unload Gj Audio and Video m Naming Frames e Flash then will create an Action Layer if it doesn t already exist and insert the following code Click 0 Go to Frame and Play Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and continues playback from that frame Can be used on the main timeline or on movie clip timelines IAVSHE TALICIE t OAS 8 1 Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked a launch_button addEventListener MouseEvent CLICK f1_ClickToGoToAndPlayFromFrame function f1_ClickToGoToAndPlayFromFrame event MouseEvent void gotoAndPlay 5 e All you have to do is make some minor modification In our case you will have to replace 5 by 2 and add a stop 0 e You can look at my published result flash cs6 rocket launcher as3 code snippets html 4 e You can grab the flash cs6 rocket launcher as3 code snippets fla BI file and compare it with the solution above As you can see the behavior of both is identical e Directory with files http tecfa unige ch guides flash ex6 buttons intro Flash button tutorial 203 Menu based flash sites and named frames You can build little flash web sites
27. This will stop Flash from playing all the frames User must stay in Frame 1 stop Associate a different handler function for each button instance Syntax button_name addEventListener Event type function_name Lines below mean Tf the user clicks on the btn_rainbow with the mouse then the function clickHandler defined below will execute E btn_rainbow addEventListener MouseEvent CLICK clickHandlerl btn_tecfa addEventListener MouseEvent CLICK clickHandler2 btn_bosses addEventListener MouseEvent CLICK clickHandler3 btn_my_computers addEventListener MouseEvent CLICK clickHandler4 btn_credits addEventListener MouseEvent CLICK clickHandler5 Each function defines where to move the playhead in the animation E g clickHandler2 will go to frame 3 and then stop s Flash component button tutorial 234 function clickHandlerl event MouseEvent void gotoAndStop 2 function clickHandler2 event MouseEvent void gotoAndStop 3 function clickHandler3 event MouseEvent void gotoAndStop 4 function clickHandler4 event MouseEvent void gotoAndStop 5 function clickHandler5 event MouseEvent void gotoAndStop 6 This shows how to open an URL in a WebBrowser btn_edutech_wiki addEventListener MouseEvent CLICK GoToUrl function GoToUrl event MouseEvent void var request URLRequest new URLRequest
28. Waist if you have one is midway between shoulders and crotch Arm length From shoulder to mid thigh or shorter Feet length About the same as forearm Face is an oval about 6 8 smaller than the total size Eyes are roughly in the middle Adjust properties Select a bone and play with the options in the properties panel Speed refers to the rotation speed in relation to the rest default is 100 Joint rotation constraints are rotational constraints on the joints of a bone structure Flash inverse kinematics tutorial 258 Animation by user action You can produce a inverse kinematics armature that the user can manipulate To do so e Only use frame 1 of the Armature layer i e don t do any animation kill all the other frames in the Armature layer e Select the armature layer e In the properties panel choose Type gt Runtime O bi KAP T OS Shape_armature LZ AA alna shape JEDOMED M S gt Runtime Armature no animation the user can play e You now can play the movie publish it and play as in the demo that we showed at the beginning of this tutorial e Demo symbol vs shape armature html U7 e Source symbol vs shape armature fla 8 Directory http tecfa unige ch guides flash ex6 inverse kinematics Flash inverse kinematics tutorial 259 Tools and objects overview This is a sort of short manual for the IK tools an objects Tools overview Below is
29. at Normal ant alias for readability w 4429 x 535 E Single line aia o E var Dynamic Text Step 3 Action script code Register mouse event functions blue_btn addEventListener MouseEvent MOUSE_DOWN mouseDownHandler blue_btn addEventListener MouseEvent MOUSE_UP mouseUpHandler red_btn addEvent Listener MouseEvent MOUSE_DOWN mouseDownHandler ae red_btn addEvent Listener MouseEvent MOUSE_UP mouseUpHandler Define a mouse down handler user is dragging function mouseDownHandler evt MouseEvent void var object evt target we should limit dragging to the area inside the canvas object startDrag Flash drag and drop tutorial 319 function mouseUpHandler evt MouseEvent void var obj evt target obj dropTarget will give us the reference to the shape of the object over which we dropped the circle var target obj dropTarget If the object exists AND it is the blue button then we change the text in the TextBox Since obj dropTarget is a Shape we need its parent if target null amp amp target parent blue_btn textField text Made it else textField text Missed obj stopDrag Results e Admire the result 7 e Get the source from http tecfa unige ch guides flash ex drag and drop intro files flash cs3 drag and drop intro2 Improvements to be made e
30. black_cat x 200 black_cat y 200 A statement like cat x 100 is called an assignment and means The x property of the cat object will become 100 If you want to move the cat forth and back you d rather use this code black_cat addEventListener MouseEvent CLICK moveCat cat can be in original position or not true false var black_cat_ori_pos true function moveCat event MouseEvent void if black_cat_ori_pos true plackiecedti x t 200 black_cat y 200 black_cat_ori_pos false else plackiceat sk 200 bilackicatay 200 black_cat_ori_pos true In this function we use a so called if then else statement The line if black_cat_ori_pos true checks if the variable black_cat_ori_pos has the value of true If this is true we then execute the clause black catyex win 7 Dlack cat y sasss that follows If it is not true we execute the other clause after the else ActionScript 3 interactive objects tutorial 331 Also note the difference between an assignment and an equality test The latter will test if two values inside the conditional of an if Use are the same Note to beginners never use just the Let s describe this at a more conceptual level black_cat_ori_pos can be called a flag variable since it will register whether the cat is in a new position or the original old position If it s in the new one we will move i
31. e Media Encoder Help Help and tutorials 7 at Adobe retrieved Feb 18 2013 References 1 http tecfa unige ch guides flash ex6 component video intro flash cs6 video component html 2 http tecfa unige ch guides flash ex6 component video intro flash cs6 video component fla 3 http tecfa unige ch guides flash ex6 component video intro BFB BBC mp4 4 http video google com videoadvancedsearch 5 http help adobe com en_US flash cs using WSb03e830bd6f770ee 70a39d6 12436d472f4 8000 html 6 http help adobe com en_US flash cs using WS62A3 1643 EF23 45ec 80D0 04DB8CE1AB1F html 7 http helpx adobe com media encoder topics html Timed Text Definition The Timed Text specification should cover all necessary aspects of timed text on the Web Typical applications of timed text are the real time subtitling of foreign language movies on the Web captioning for people lacking audio devices or having hearing impairments karaoke scrolling news items or teleprompter applications Timed Text I retrieved 18 16 27 September 2007 MEST Timed text also called TTML or simply TT is quite a complex format but in some contexts e g Flash captioning understanding of a small subset will do See also WebVTT another similar standard Typical applications According to this 2 e Subtitles of movies on the Web foreign languages e Captions for people lacking audio devices or having hearing disabilities e Karaoke
32. flash cs6 simple slide show menu html 4 Source flash cs6 simple slide show menu fla 5 Flash component button tutorial 233 e Grab the flash cs6 simple slide show menu files from http tecfa unige ch guides flash ex6 components intro A simpler but longer solution Too complicated You may use a simpler but less elegant code if you have no programming knowledge and feel not comfortable with the switch statement The result will be same though I changed the color of the background menu based slide show with simple AS code 6 So here is what you need to change 1 Event listener registration So the principle is For each button you got to register an event listener function Change The number of addEventListener definitions here we got five e Make sure that each btn xxx corresponds to names you gave to your own button instances myButton addEventListener MouseEvent CLICK Handler_A 2 Define event listener functions e Copy Paste Change definitions of functions e So change the name of the function e g clickHandler into clickHandler2 and the frame it has to jump to function clickHandler2 event MouseEvent void gotoAndStop 2 Note Formatting in ECMAScript languages does not matter You could have written the above line as function Handler_A event MouseEvent void gotoAndStop 2 However make sure to keep delimiters like the Start from this complete code
33. http edutechwiki unige ch en Flash_components_tutorial navigateToURL request _blank Results and source code e flash cs6 simple slide show menu fewcode html 6 e Source flash cs6 simple slide show menu fewcode fla g e Directory http tecfa unige ch guides flash ex6 components intro Moving on If you got more and or bigger pictures you actually should not include the pictures in the swf but rather load these from the Internet You then have to learn how to use program a preloader we will cover this in some other tutorial e You may add text labels to each picture e You also could add another URL button e g I should add one to the TECFA Logo on top left Exercise e Add some contents to frame one and add a home button to navigate there Flash component button tutorial 235 Customizing buttons You can customize button skins but this is not easy e Double click the button on the stage However before you try this e Be aware that you can change width and height simply though the parameters panel e Color will adapt to background buttons are transparent Read more about Customizing the Button 8 at Adobe Buttons that work only in a single frame It is easy to add buttons that only work in a single frame But you will have to understand this e The Script must see the button i e you can t define a script in frame 1 for a button that sits in frame 2 e Button instance names therefore must be
34. http www brighthub com internet web development articles 1425 1 aspx http www brighthub com internet web development articles 14372 aspx http www bukisa com articles 3 1590_papervision 3d programming tutorial bitmapviewport http www bukisa com articles 32125_papervision 3d programming tutorial environment mapping http www bukisa com articles 32650_papervision programming tutorial skybox http www bukisa com articles 32992_papervision programming tutorial animations http www bukisa com articles 33410_papervision 3d programming tutorial texture smoothing http www bukisa com articles 33421_papervision 3d programming tutorial mouse selection http www bukisa com articles 34039_papervision 3d programming tutorial enhanced fog http www bukisa com articles 3455 1_papervision 3d programming tutorial terrain http www bukisa com articles 35656_papervision 3d programming tutorial simple lod http www bukisa com articles 36723_papervision 3d programming tutorial mesh splitting 409 Other Flash articles of interest Flash CS3 keyboard shortcuts Authors Daniel K Schneider TECFA and Marielle Lange n WidgEd This page contains the most important Flash CS3 keyboard shortcuts There may be some mistakes and omissions for now e g programming debugging is not covered Table size optimized for Mozilla Windows The useful list Standard windows commands not shown here F5 Add simple fra
35. image flash cs4 shape ik stickman png Source http edutechwiki unige ch mediawiki index php title File Flash cs4 shape ik stickman png License unknown Contributors image flash cs4 fixing curves ik png Source http edutechwiki unige ch mediawiki index php title File Flash cs4 fixing curves ik png License unknown Contributors File Symbol vs shape armature 1 png Source http edutechwiki unige ch mediawiki index php title File Symbol vs shape armature 1 png License unknown Contributors image Bone_tool png Source http edutechwiki unige ch mediawiki index php title File Bone_tool png License unknown Contributors image Bind_tool png Source http edutechwiki unige ch mediawiki index php title File Bind_tool png License unknown Contributors image Selection_tool png Source http edutechwiki unige ch mediawiki index php title File Selection_tool png License unknown Contributors image Subselection_tool png Source http edutechwiki unige ch mediawiki index php title File Subselection_tool png License unknown Contributors image Pen_tool png Source http edutechwiki unige ch mediawiki index php title File Pen_tool png License unknown Contributors image Free_transform_tool png Source http edutechwiki unige ch mediawiki index php title File Free_transform_tool png License unknown Contributors image flash cs4 armature properties png Source http edutechwiki unige ch mediawiki index php title File Flash cs4 armature prop
36. true btn_book addEventListener MouseEvent CLICK jumpFlashBook function jumpFlashBook event MouseEvent void var cuePointInstance Object video findCuePoint Flash_book video seek cuePointInstance time trees visible false Without trees btn_laptop addEventListener MouseEvent CLICK jumpLapTop function jumpLapTop event MouseEvent void var cuePointInstance Object video findCuePoint XPS video seek cuePointInstance time btn_book addEventListener MouseEvent CLICK jumpFlashBook function jumpFlashBook event MouseEvent void var cuePointInstance Object video findCuePoint Flash_book video seek cuePointInstance time Example e flash cs6 video goto cues html 61 e Source flash cs6 video goto cues fla 7 e Directory http tecfa unige ch guides flash ex6 component video intro Important notice The code above works with any sort of cue points e navigation cue points that are inserted into and flv file using the Adobe media encoder e or so called ActionScript cue points that were inserted with the component inspector or in a script In some older textbooks you might find instructions that will tell how to navigate to specific types of cue points In particular you will find the two following variants For cue points that are encoded into the video with the Media Encoder use video seekToNavCuePoint XPS For cue points
37. void white_cat visible false Once the cat is hidden the user never will be able to bring it back Therefore in the next example we decided to implement a switch between a cat and a dog can t see the dog for starters brown_dog visible false brown_dog addEvent Listener MouseEvent CLICK hideShow white_cat addEventListener MouseEvent CLICK hideShow function hideShow event MouseEvent void instead of using white_cat visible false we just switch it to the opposite white_cat visible white_cat visible brown_dog visible brown_dog visible ActionScript 3 interactive objects tutorial 333 The used for white_cat visiblein the hideShow function means that the visible property will be set to its opposite E g if the value is true it will become false and the other way round Same technique for the dog which is invisible for starters Let the user drag example The next example shows how to let a user drag the red cat object with the mouse button pressed down and then drop the cat when the user releases the mouse button red_cat addEventListener MouseEvent MOUSE_DOWN startDragging red_cat addEventListener MouseEvent MOUSE_UP stopDragging function startDragging event MouseEvent void WSCl Cele Sai Dragii function stopDragging event MouseEvent void weCl_Ceic SicomDicag For a tutorial o
38. 100 0 100 0 Ease 0 Rotate 4 310 7 y ROTATION Pa ters Rotate 0 time s o AT i sa eee Sa Direction none ly ak 3D Rotation amp Orient to path X 0 09 Y 00 Fo 3D Center point X 719 0 Y 252 4 X 282 8 Y W 721 0 H x7 OPTIONS O Sync graphic symbols Me Editing a movie clip symbol Really make sure that you exactly know at which level you edit Look at the edit bar It should read Kite_movie Step 4 Add buttons and ActionScript code to launch stop the animation e Go back to the scene e g click on Scene 1 in the edit bar e We use two component buttons as explained in the Flash component button tutorial Each of this button has an instance name stop_button and start_button Step 5 Add the ActionScript code e At start we tell the movie clip to stop with the instruction kite stop Else the kit will automatically start flying e The start_button will launch the start_kite function when the user clicks on it This function then will execute kite playQ The stop_button is programmed in the same way Read the Flash component button tutorial if you need some more detailed explanation about the use of buttons kite stop start_button addEventListener MouseEvent CLICK start_kite stop_button addEventListener MouseEvent CLICK stop_kite function start_kite event MouseEvent kite play function stop_kite event MouseEvent kite Stroo p Flash using embed
39. 2 Union the parts into a single shape Subtractive geometry The Modify menu Combine objects group allows to e Union two or more single shapes and or drawing objects into a single drawing object If you sketch a drawing e g human that you later wish to fill with some paint use union first The paint can most often doesn t work on a selection therefore consider union it e Intersect drawing objects e Punch a drawing object into others the one on top will punch e Use a drawing object to crop drawings underneath Flash object transform tutorial 166 Modify Text Commands Control Debug Window Help Document Ctri J 5 1 Convert to Symbol F8 Para Convert to Bitmap Break Apart Ctrl B Bitmap gt Symbol gt i4 lt i gt i gt Shape gt Combine Objects r Delete Envelope Timeline gt Union Transform gt me Arrange gt iaci N Crop Align gt Group Ctrl G Ctrl Shift G Ungroup Punch a moon blue right circle punches yellow left one The Subselection tool This tool allows envelope transformations or rather fixing envelope transforms made with the selection tool or with the transform tool in envelope or distortion mode Handles work like in the Envelope transform tool Let us recall that the little squares are anchor points i e they define the outline of a shape You also can look at these as distortion points At least in CS6 when you select a
40. 3 CTRL V into Flash e Save the image on your computer then click on the Import button in the colors panel Finding textures e See the texture article Using a bitmap e You can use a bitmap graphics either as stroke or as fill color Adjusting grain size With the gradient transform tool you can adjust how a bitmap will be applied You can change e Size i e whether the bitmap is applied as is or reduced or magnified in x y direction or both e Rotation e Skew a kind of distortion Select the Gradient Transform tool underneath the Free Transform tool and then e Click on the fill or stroke e Play with the handles if the bitmap is big you may have to search for these handle way out of the stage Flash colors tutorial 184 v E textures grass4jpg grassSipg Gradient Transform tool on bitmaps Filters for symbol instances You can apply various color changes to all symbol instances movie clips buttons and graphics To do so play with the Color and Blend controls in the properties panel You can add filters e g a gradient glow a bevel or a drop shadow to movie clip and button symbol instances Use the Filters panel to do so click on the tab in the properties panel else use menu Windows gt Properties gt Filters To add filters simply click on the sign and then play with the parameters Using different sorts of Quality also has an important effect on the rendering high qua
41. FLVPlaybackCaptioning lt 7 POSITION AND SIZE amp Scene 1 X 1473 2 W 72 00 x7 COMPONENT PARAMETERS Property Valy autoLayout captionTargetName flvPlaybackName auto showCaptions M caption_box simpleFormatting source timed text2 xml The FLVPlayback Captioning component and its parameters Step 3 Add some style to the XML File Just look at this example file timed text2 xml I don t really understand how some styling tags work I d expect for instance to behave backgroundColor within a span like in HTML but it doesn t I don t know this behavior is a feature or a bug or my misunderstanding of the manual If something is not clear please download the fla DI file and look at it Make sure to verify that both the playback and the captioning component parameters are ok and that you put all the files in your computer or the server including the skin swf the flv and the xml file in the same directory Do not forget to copy the skin lt xml version 1 0 encoding UTF 8 gt lt WDOCINAH cic SxS UNohiow eis cherelUs lt tt xml lang en xmlns http www w3 org 2006 04 ttafl xmlns tts http www w3 org 2006 04 ttafl styling gt lt head gt lt styling lt style id title tts backgroundColor transparent tts color red tts fontSize 24 gt Flash video captions tutorial 299 lt styling gt lt head gt lt body gt l
42. It s a slightly more difficult solution than using timeline videos as above but more flexible and more elegant since the resulting flash files will be small and the external video could be put on a streaming server Let s recall what cue points are with some text that was copied and slightly adapted from Adobe s D muse cue points A cue point is a point at which the video player dispatches a cuePoint event while a video file plays You can add cue points to an FLV file at times that you want an action to occur for another element on the web page You might want to display text or a graphic for example or synchronize with a Flash animation or affect the playing of the FLV file by pausing it seeking a different point in the video or switching to a different FLV file Cue points allow you to receive control in your ActionScript code to synchronize points in your FLV file with other actions on the web page There are three types of cue points navigation event and ActionScript The navigation and event cue points are also known as embedded cue points because they are embedded in the FLV file stream and in the FLV file s metadata packet A navigation cue point allows you to seek a particular frame in the FLV file because it creates a keyframe within the FLV file as near as possible to the time that you specify A keyframe is a data segment that occurs between image frames in the FLV file stream When you seek a navigation cue point the
43. License Commercial Description Good for content and exercise oriented teaching datagrid_AS addItem Name MediaWiki License GPL free Description Good for writing to learn and technical mini projects teaching Fix the size datagrid_AS width 400 Set the height to the number of rows 1 for the header datagrid_AS rowCount datagrid_AS length 1 Position it at x 400 and y 50 datagrid_AS move 300 70 Vf HOD AO nit aS Cr Ole an ss On dartagricl AS nomaZont culls rodslPolncya Seroll olicy ON p Then add it to the stage addChild datagrid_AS Example code Creating and filling with data CS3 e Directory http tecfa unige ch guides flash ex data grid e File data grid 0 fla 3 Flash datagrid component tutorial 307 Creating a DataGrid and filling it with data using pure ActionScript This is a section that non programmers or persons who don t want to learn a lot of ActionScript programming should skip In order to do this you first should also DataGridFill Cs3 fla Color Swatches Align x S sago 0 3 0 read 5 10 15 0 5 x 5 4 45 50 Fa Seo Peo e i i 1 Distribute The Writing and using AS Code ee chapter of the Flash ActionScript 3 aoa Pr aT a iim San r A er Scene 1 Workspace M overview in order to understand the mal wees So DataGridFill CS3 fla general AS development 51 tems perspective e The AS3 Compiling a p
44. Project Framerate 3500kbps gt Mobile Web 1280x720 16 9 Project Framerate 4500kbps gt Tablets Web 1920x1080 16x9 Project Framerate 5500kbps gt TiVo Web 1920x1080 169 Project Framerate 7500kbps v DVD amp Blu ray Web 256x144 169 Project Framerate 300kbps gt Blu ray Web 320x240 43 Project Framerate 500kbps gt DVD Web 512x288 16 9 Project Framerate 600kbps v amp Image Sequence Web 640x480 433 Project Framerate 800kbps gt Bitmap Web 768x432 169 Project Framerate 900kbps gt DPX gt GIF gt JPEG gt PNG gt Targa Adding a video to the Adobe Media Encoder CS6 Editing The Media Encoder allows to edit a video file in various ways It is not a full video editor like Premiere but allows to do a few very useful operations e You can remove frames in the start or the end e You can clip each side top bottom left right This is particularly useful if you shot the video yourself e g with a cell phone e You also can add so called cue points However we suggest not to use this feature and rather use so called ActionScript cue points The editor is difficult to find Do the following Select the output video line underneath the imported video see the screen capture above the flv file is selected e Menu Edit gt Export settings or hit CTRL E fine name The picture below explains how to make a few edits e Clip the video Click on the Source tab f
45. STORIO 7 Associate a handler function for each button instance btn_credits addEventListener MouseEvent CLICK clickHandler btn_play addEventListener MouseEvent CLICK clickHandler Instead of writing a function for each button we just create one In order to understand which button was clicked we ask from the ements the label of the button event currentTarget label Flash augmented video tutorial 281 Then we gotoAndStop x to Frame 572 for Credits or we can play the movie by moving the user to frame 2 By function clickHandler event MouseEvent void switch event currentTarget label case Credits GOeOANGS Op OMZ ie break case PLAY gotoAndPlay 2 break This shows how to open an URL in a WebBrowser btn_edutech_wiki addEventListener MouseEvent CLICK GoToUrl function GoToUrl event MouseEvent void var url String http edutechwiki unige ch en Flash_video_component_tutorial var request URLRequest new URLRequest url try navigateToURL request _blank catch e Error ipmac e Uiinererr OcCcurcrcaad MIE Results e flash cs6 video timeline embedd html 3 e Source flash cs6 video timeline embedd fla 4 e Directory http tecfa unige ch guides flash ex6 component video intro Flash augmented video tutorial 282 Cue points Working with cue points is another way to have your video interact with the user and or other animations
46. See the screen capture below which shows the handles for a radial gradient transform Flash colors tutorial 182 Radial Gradient Transform controls Stretching or rotating a linear gradient works in a similar way ip m Linear gradient transform controls turning The alpha channel In computer graphics alpha compositing is the process of combining an image with a background to create the appearance of partial transparency Wikipedia U9 In more simple terms you can set the alpha to some percentage e 100 can t see through e 80 bad see trough e 50 in between e 30 good see through e 10 good see through but very little color 0 no color left Flash colors tutorial 183 alpha 80 alpha 50 alpha 30 alpha 10 Alpha color channel Hint With the alpha channel you can create other effects than see through windows E g you can overlay textures with color or the other way round Drawing with bitmaps You can use any bitmap e g a picture of yourself as color To do so you firstly must import the bitmap file e g a jpg file and then adjust the size with the gradient transform tool Importing a bitmap There are two solutions e You can just paste a bitmap graphic into the library from the clipboard For example if you see a nice and copyright free texture on the Internet with the Firefox navigator do the following 1 View image 2 Copy Image
47. audio and video It contains a scripting language called ActionScript Several software products systems and devices are able to create or display Flash content including Adobe Flash Player which is available free for most common web browsers some mobile phones and for other electronic devices using Flash Lite Wikipedia retrieved May 23 2009 In addition Flash is used as a format for desktop applications under the name of Adobe Integrated Runtime Adobe AIR We could distinguish four kinds of Flash authors a People who use simple offline or online tools to generate applications like slide shows b Multi media authors who create good looking Flash movies c Multi media light weight programmers who create interactive Flash applications and d Real programmers who write so called rich internet applications Today many tools can produce runnable Flash contents However only Adobe s commercial Flash authoring tools allow non programmers to exploit the full capabilities of this format Programmers on the other hand may use Adobe s free Flex software development kit instead of the commercial Flex builder Flash tutorials and articles in EduTech wiki EduTech Wiki includes introductory Flash and ActionScript 3 AS3 tutorials for Flash version 11 using mostly Adobe Flash CS6 Professional and for Flash version 9 using CS3 plus some CS4 CS5 tutorials that introduced new features not in CS3 We used these in COAP 2110 Fa
48. e If you are not familiar with layers please read the Flash layers tutorial now Conversions e To convert an object instance into its original components Right click gt Break apart e To convert some shapes into a drawing object Select them first e g with the Lasso then select Menubar Modify gt Combine Objects gt Union e To convert some shapes into a symbol Right click Convert to Symbol Flash drawing tutorial 23 List of standard tools Also see the figure Items of the Flash CS3 tools panel above in order to identify the corresponding icons in the tools panel Some tools are stacked on top of each other Hold down the mouse button for while to see the hidden ones Selection tool The selection tool amp lets you select elements shapes strokes fills symbols bitmaps in the work area by clicking on it simple click If you wish to select several objects together hold down the SHIFT key or use a the lasso or a selection box click then drag the mouse Advanced uses e Double clicking would put you into object editing mode for various parts depending on where you click To return from this mode which we will not explain here double click in some empty area in the workspace e This tool also can act as a distortion tool See the Flash object transform tutorial If no object is selected e g click on an empty spot in the workspace then you can use this tool to distort shapes Move it close to an edg
49. e Make sure it includes a motion tween else create it now e Then click on the first keyframe e g frame 1 and insert a motion guide layer e Draw the motion guide line with the pencil in this new motion guide layer Jn the animation layer snap the object to the line in frame 1 and the other keyframes e Display onion skins if you want to see the animation path while working on a background for example Tips e You can have several motion tweens in a row in the animation layer e In order to move an object around a perfect circle draw the circle with the oval tool in object mode and without fill Then make a tiny somewhere with eraser tool This will produce a nice curve e Play with acceleration deceleration i e create several keyframes and move objects in the intermediate keyframes along the motion guide e Again Do not create motion tweens for shapes and graphics Use symbols e Again You can only have one symbol instance in an animation layer Put all other graphics in a different layer If you are lost go back to the Flash classic motion tweening tutorial Flash animation summary 120 Shape tweening You can only animate editable objects i e shapes and simple drawing objects Therefore if you want to morph a graphic symbol a textbox a picture etc break it apart You may have to break it apart more than once In case you don t want to break apart a symbol because you also want to use it in a motion anima
50. e There may be syntax errors and Flash will tell you so in the Output panel that will pop up Look at the line numbers e You many have misspelled the button and frame names in the script ActionScript is case sensitive Results e You can look at my published result here 5 Flash button tutorial 205 e Source flash cs3 simple menu site fla 6 e You can grab all the files flash cs3 simple menu site from this directory http tecfa unige ch guides flash ex buttons intro Next steps e You can do the same thing with so called button components You can t change the button form easily but it s a slightly faster procedure See the Flash components tutorial A simple slide show with your own buttons Objectives e We will first show how to create your own simple buttons e Then we show some ActionScript code that demonstrates how to make a simple slide show with only two buttons forward backward and that extend throughout the animation The purpose of this application is again to explain buttons and some Action Script not to make the perfect slide show tool To create a slideshow we will first import the pictures and adjust the stage This way we we can get a feel for the size of buttons needed Then we draw the buttons Finally we will make it interactive Step 0 Open a new file e Select Action Script 3 This code will not run with Action Script 2 0 Step prepare some pictures e Before importing the
51. empty_cat transform colorTransform resultColorTransform trace redOffset tresultColorTransform redOffset hue blueOffset tresultColorTransform blueOffset permanent size change E grey_mouse addEventListener MouseEvent MOUSE_WHEEL changeMouse function changeMouse event MouseEvent void grey_mouse width event delta 3 grey_mouse height event delta 3 Simple repositioning example with better code The example of the previous section uses some kind of baby programmer code e g the functions only work with very specific objects and there are many global variables Somewhat better code will include functions that could work with any object and avoid using variables In the following example you can associate any function with any symbol E g the red cat now can be both dragged and change size using the mouse wheel Same of the mouse The code is also separateed it in two sections On top we define event handlers for objects An end user Flash Designer could just add his her own objects and decide which event handlers to use The all in one file with the examples we discussed above is here actionscript3 simple object manipulation2 html l actionscript3 simple object manipulation2 fla 5 Directory with files actionscript3 simple object manipulation http tecfa unige ch guides flash ex6 action script 3 intro pS sssesS List of objects a
52. fla 1 Adobe tutorials e Creating populating and resizing the DataGrid component 12 e Customizing and sorting the DataGrid component 13 e Filtering and formatting data in the DataGrid component 14 Flash datagrid component tutorial 315 Flex Quick Starts Handling data 15 not very useful Reading an XML file into an XML object 16 not very useful Working with XML 17 Programming ActionScript 3 Other tutorials Using the DataGrid Component 18 by Kirupa July 2006 Official documentation for Flash and AS3 Using the DataGrid 28 Adobe Flash CS3 Documentation DataGrid HH AS3 Language and components reference fl controls dataGridClasses Includes classes that the DataGrid component uses to maintain and display information ActionScript 3 0 Language and Components Reference fl controls dataGridClasses 7 Similar Adobe ActionScript 3 0 Language and Components Reference fl data 7 Reference manual for data associated Adobe ActionScript 3 0 Language and Components Reference More needed and some cleanup too References 16 17 18 19 20 21 http help adobe com en_US AS3LCR Flash_10 0 fl controls DataGrid html http tecfa unige ch guides flash ex data grid data grid 0 html http tecfa unige ch guides flash ex data grid data grid 0 fla http tecfa unige ch guides flash ex data grid DataGridFill CS3 html http tecfa unige ch guides flash ex data grid data gr
53. greensock com http livedocs adobe com flash 9 0 ActionScriptLangRefV 3 fl motion easing package detail html http livedocs adobe com flash 9 0 ActionScriptLangRefV 3 fl transitions easing package detail html http blog greensock com customease http tecfa unige ch guides flash ex4 tween lite tween lite ex 1 fla http tecfa unige ch guides flash ex4 tween lite tween lite ex 1 html http www adobe com devnet flash articles graphic_effects_guide_02 htm http livedocs adobe com flash 9 0 UsingFlash help html content W Sd60f23 1 10762d6b883b1 8f10cb1 fel af6 7d64 html http livedocs adobe com flex 20 1 langref flash filters package detail html http livedocs adobe com flex 20 1 langref flash filters DropShadowFilter html http tecfa unige ch guides flash ex greensock tweenmax photo filter html http tecfa unige ch guides flash ex greensock tweenmax photo filter fla http tecfaetu unige ch etu maltt pixel ghebali4 clef greensock as3 turbo_escargot_vfinale swf http blog greensock com timelinelite http blog greensock com timelinemax http www greensock com FINT particle system 389 FLINT particle system Draft Introduction Learning goals e Learn how to use the FLINT particle library 1 Prerequisites e Flash using ActionScript libraries tutorial Environment e Flash CS3 Moving on e See the Flash tutorials Level and target population e Absolute ActionScript beginners but see the prerequisites This tut
54. gt a FPS 24 00 Eain Match size Sze 550 x 400 px a 2 Eg Stage D Align to stage vy SWF HISTORY Solid color OH o OB OR OG OB A 10 i lt m r Flash CS6 workspaces menu For the kind of stuff you will learn in our Flash tutorials series the best initial bet is to use the designer layout Flash CS6 desktop tutorial 10 Configuring the desktop layout Before we introduce the menu items we suggest that you learn how to arrange your Desktop Firstly we d like to show how to display additional panels tools and libraries Having most tools and resource libraries at your fingertip is in our opinion always a good idea if your screen is big enough If you can afford to buy CS6 it maybe is also possible to invest in a monitor that can display 1900x1200 pixels or more Panels are tools providing various editing and object mangement functionalities Since some of these functionalities can t be found through the menus and the other way round you have to learn what kind of panels exist All existing panels can be opened through the Window menu on top CS6 lets you arrange such panels in various ways e They can be floating undocked Usually you would move them outside the Flash Desktop This is very practical if you have a large screen or dual monitor setup They can be docked to the panel areas to the right the middle or the left In e
55. have a second one Normally one also could position these kites now but see below kitsi 5 ZOO kitel y 250 2 Then add the instances to the scene like this addChild kitel addChild kite2 To play a movie clip you can launch it with the play method kitel play kite2 play However in our case we have to write some more complex code since we want to generate lots of kites Instead of dragging kites on the stage and then name the instance of each kite we create kite instances with ActionScript and put these into an array var kites Array new Array An array is variable with lots of drawers and within each we will store a kite instance So in order to store a kite movie clip we just go kites i new Kite_movie After that we then can modify its properties a bit e g change the size and the position of the movie clip Katie Sales sie cules Maite irran Omi a Ole Suet On a Ooi OO i kites i scaleY kites i scalex ealieexs L al 5 ENONO E i i kiceslil vy Menclaieavaclom Chis slnvestelog 240 100 alpha Math random 0 8 0 2 kites i Finally we want our kites to appear one after each other and for this we use the setinterval function It will call the addKite function i e the kite movie clip factory after each 500 milliseconds setInterval addKite 500 The addKite function will create new kite movies modify them add them to
56. http labs adobe com technologies wallaby 19 http www adobe com devnet flash articles concept_fxg html 20 http www adobe com products captivate 21 http www adobe com products acrobatconnect 22 http www adobe com products flex 23 http www toufee com 24 http silex ria org 25 http osflash org red5 26 http www adobe com flashplatform 27 http ming sourceforge net 28 http swfmill org 29 http haxe org 30 http www flashdevelop org Flash CS6 desktop tutorial Flash CS6 desktop tutorial Draft Introduction Learning goals e Learn about various components of the Flash CS6 Desktop Learn how to configure the workspace and how to save configurations e Learn about menu groups and other ways of interaction with Flash CS6 Prerequisites e none Next steps e Flash drawing tutorial e Flash layers tutorial Alternative e Flash CS3 desktop tutorial e Flash CS4 desktop tutorial The Flash CS6 desktop works like the CS5 and the CS4 desktops Differences are minor and mostly cosmetic See the Flash CS4 desktop tutorial if you own an older CS4 or CS5 version Flash CS6 desktop tutorial Opening the desktop from the Flash welcome screen After launching Flash you will see a welcome panel in the middle of the tool Most of the CS6 functionality are disabled at this stage The welcome panel offers a few options for creating a Flash file ces
57. new Emitter2D emitter counter new Steady 150 emitter addInitializer new ImageClass RadialDot 2 Modified DKS our picture is a bit larger emitter addInitializer new Position new LineZone new Point 5 5 new Point 605 emitter addInitializer new Position new LineZone new Point 5 5 new Point 645 emitter addInitializer new Velocity new PointZone new Point 0 65 emitter addInitializer new ScaleImageInit 0 75 2 emitter addAction new Move Modified DKS our picture is a bit larger emitter addAction new DeathZone new RectangleZone 10 10 620 420 true emitter addAction new DeathZone new RectangleZone 10 10 645 485 true emitter addAction new RandomDrift 20 20 var renderer DisplayObjectRenderer new DisplayObjectRenderer renderer addEmitter emitter 5 T5 FINT particle system 393 addChild renderer emitter start emitter runAhead 10 We keep the same here unlike the original addChild new SnowForeground j 1 archive and made 2 little modifications We only use a single background and commented out 2 lines Also we changed two parameters since our picture is a bit bigger Step 3 Error messages If you see something like this Scenel Layer Script Frame 1 line 22 1172 Definition org flintparticles common counters could not be found then you most li
58. paintings to objects of course By default the object model may be turned off so turn it on by clicking on the Object drawing button You can find in the options section of the tools panel after clicking on some drawing tool e g the Pencil You can see if it s on when there is a rectangle drawn around the button like this O You can see the difference between the 2 kinds of objects created in the Properties Panel e Objects are called Drawing Objects e Simple drawings from the merge model are called Shapes The behavior of tools changes according to mode used and it s not so obvious to remember what Flash does In merge mode e In merge mode when you draw a shape over another shape it erases the shape underneath by default You can change this with the control options see later e When you draw another object line pencil etc it will draw over the painting but not erase it In object mode e Shapes drawn in object mode with the brush tool are drawn either within on top or behind objects depending on how to set the controls of the brush tool e Shapes drawn in object mode with the pencil the pen tool etc are drawn on top of other objects But in the object mode they can be moved behind with the right click gt Arrange context menu If you already tried to draw more complex shapes you noticed that it is difficult to work with a single layer e g to select objects so you now have to learn how to work with layers
59. s7 PROPERTIES FPS Size 550 x 400 px q Stage x7 SWF HISTORY m Empty library Fl Fie Edit View fim Modify Text Commands Control Debug Window Help Designer O o Be New Symbol Ctrl F8 win Sa ot 5 10 15 20 Timeline N a Scene iaae gt i j Name a AS Lin Align Info Transform Align e al Distribute tie T o Match size F o I gs D Align to stage Color Swatches E bo bb dp dd Space e wt go Create new movie clip symbol part 1 e Call it Stickman and make it of type Movie Clip Create New Symbol x Name man Type M Folder Library root Advanced ire o 0 n w 5 0 Enable guides fo ActionScript Linkage Export for ActionScript Runtime Shared Library Export for runtime sharing Import for runtime sharing File Symbol name Create new movie clip symbol part 2 Flash frame by frame animation tutorial 51 e You are now editing the Stickman symbol You should see an empty stage layer 1 and a little sign in the middle e Start drawing around this sign which roughly should be in the center of your drawing Step 3 Frame by frame animation same for both methods e Hit F5 about 5 times e Click in the frame with the white re
60. shape hints4 jpg License unknown Contributors image flash cs3 shape hints0 jpg Source http edutechwiki unige ch mediawiki index php title File Flas shape hintsO jpg License unknown Contributors image flash cs3 shape hints1 jpg Source http edutechwiki unige ch mediawiki index php title File Flas shape hints1 jpg License unknown Contributors image flash cs3 shape hints2 jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs3 shape hints2 jpg License unknown Contributors image flash cs3 convert to movie symbol png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 convert to movie symbol png License unknown Contributors image flash cs3 edit movie clip png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 edit movie clip png License unknown Contributors image flash cs3 shape tweens in motion png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 shape tweens in motion png License unknown Contributors image flash cs6 create movie clip symbol png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 create movie clip symbol png License unknown Contributors image flash cs6 create movie clip symbol2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 create movie clip symbol2 png License unknown Contributors image flash cs6 create movie clip symbol3 png Sour
61. sun e Create a motion tween normal not classic e Right click in the motion tween and Copy Motion as ActionScript 3 e Paste into an editor or directly the CS4 AS Actions window TIMELINE sao 5 10 15 20 25 Sat Layer 1 Sio a OOO O AA yy Remove Tween CER 3D Tween a P Convert to Frame by Frame Animation aa Save as Motion Preset R 0 e Insert Frame e cLa z Remove Frames B 2 z Alpha 100 gt ta G BET 2 Insert Keyframe Untitled Insert Blank Keyframe Clear Keyframe gt aa View Keyframes gt Cut Frames parol Copy Frames Untitled 2 Paste Frames sl Clear Frames Litem Select All Frames Copy Motion Symbol 1 Copy Motion as ActionScript 3 0 N Paste Motion Copy Properties Paste Properties Paste Properties Special Split Motion Join Motions Reverse Keyframes Motion Path Copy Motion as ActionScript 3 Code will look like this i e same thing as above with some useless lines Just make sure to edit the last line in the code I e uncomment and add the instance name in your own animation Before __animFactory_sun addTarget lt instance name goes here gt 0 After __animFactory_sun addTarget sunl 0 You also can substitute these ugly Adobe generated names import fl motion AnimatorFactory import fl motion MotionBase import flash filters import flash geom Point Flash CS4 motion tweening with AS3 tutorial 266
62. true false var black_cat_ori_pos true function moveCat event MouseEvent void if black_cat_ori_pos true plack eat x F 200 black_cat y 200 black_cat_ori_pos false else lpjJLavcle Cee 6 200 pilackicatky ZOOF black_cat_ori_pos true fie OS eang St irs blue_cat addEvent Listener MouseEvent MOUSE_DOWN resizeCat var cat_size 1 function resizeCat event MouseEvent void blue_cat width blue_cat width 2 blue_cat height blue_cat height 2 Carmi aa We have to test both mouse up and mouse out since user can press mouse and move out Cat in this case would stay big Also we have to test if cat is already big when user moves in EJ blue_cat addEventListener MouseEvent MOUSE_UP resizeCat2 blue_cat addEventListener MouseEvent MOUSE_OUT resizeCat2 function resizeCat2 event MouseEvent void se Cele Salve gt 1 DINeECat ea wiceh Neea s s 2 blue_cat height blue_cat height 2 Gee salve gt if fe pregging red_cat addEventListener MouseEvent MOUSE_DOWN startDragging red_cat addEventListener MouseEvent MOUSE_UP stopDragging ActionScript 3 interactive objects tutorial 336 function startDragging event MouseEvent void ceel Ceit Sitecliae Dacca ie function stopDragging event MouseEvent void red_cat stopDrag Pe c p
63. 0 It will also toggle visible to true before the tween starts if the value of autoAlpha is greater than zero timeScale Number Speed up or slow down a tween Number To change a MovieClip s x position just set this to the value you d like the MovieClip to end up at or begin at if you re using TweenLite from Number To change a MovieClip s y position like above scalex Number Scaling in X direction i e making the with smaller or larger scaleY Number Scaling in Y direction i e making the height smaller or larger rotation Number Clock wise rotation in degrees delay Number Number of seconds you d like to delay before the tween begins This is very useful when sequencing tweens ease Function You can specify a function to use for the easing with this variable For example fl motion easing Elastic easeOut The Default is Regular easeOut and Linear easeNone for volume 12 13 You can use all the standard AS3 methods defined in fl motion easing and fl transitions easing 14 If you want to create your own easing equation use Jack s Custom Ease Builder on line tool Example TweenLite to logo 0 4 scaleX 1 scaleY 1 alpha 1 ease Strong easeInOut delay 0 8 overwrite false Example of custom function definition and use import com greensock easing CustomEase CustomEBase create myCustomEase AS3 tweening platform 377 lise cos 509 630 612 820 612 Cos 7ilS S30 41
64. 0 ActionS criptLangRefV3 flash display InteractiveObject html 10 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash display DisplayObject htm l 11 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash events EventDispatcher html 12 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 Object html 13 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash display Graphics htm 14 http www gskinner com blog archives 2006 07 as3_dictionary html 15 http livedocs adobe com flash 9 0 main wwhelp wwhimpl common html wwhelp htm context LiveDocs_Parts amp file 00000219 html 16 http www monkeyflash com flash drag and drop in as3 17 http www lynda com Flash CS5 tutorials flash professional cs5 code snippets and templates in depth Adding drag and drop 72925 4 html 18 http www youtube com watch v ALqG YMsRWxw 19 http www youtube com watch v lhR3CVIdfuY 20 http www youtube com watch v g kvSTHkbtQ 21 http help adobe com en_US AS3LCR Flash_10 0 flash display Sprite html stopDrag ActionScript 3 interactive objects tutorial 328 ActionScript 3 interactive objects tutorial Draft Overview Learning goals The purpose of this tutorial is go a little bit beyond dealing with mouse clicks buttons and button components as seen in previous tutorials i e you will learn how to change properties of objects such as position size and visibility and how to
65. 1 m Align eg dl Distribute ra 2 Ss Match size E i Align to stage Ph bo bb oe d Space ih Use of rocket frame by frame animation embedded movie clips An embedded movie clip also just called symbol or movie clip symbol has its own timeline You can create a new symbol via the menu Insert gt New Symbol Ctrl F8 or by selecting an object on the stage right click gt Convert to symbol Flash frame by frame animation tutorial 45 Fl File Edit View Insert Modify Text Commands Control Debug Window Help Designer 0 Library R EE 2 P TN i A lil n PNRA all EE TEET ly 3 Ff A 2 a ww Q yellow flame O U y E 272m 2 red flame m s al 33 Saoti i lt lt 41 gt i gt gt i Bgd Peh Distribute aeg a h Scale Normal _ v I Hinting Match size Space Cap B v a iE Bs 2 do Join A v Miter 10 0 O Align to stage Editing the rocket frame by frame animation embedded movie clip Once you got a rocket movie clip you can create as many instances as you like Just drag the clip from the library to the stage What s even better is that you could copy one movie clip symbol from one flash file to a different one I e you easily can reuse your components Example e flash cs6 r
66. 1 Create a new layer and import sound to a frame You can attach sound to any frame via the properties panel e Create a new layer for this sound not mandatory but good practice e Insert a keyframe F7 where you want the sound to start e Select a sound from the sound pull down menu in the properties panel e Configure it in the same panel see next Flash sound tutorial 140 Ideally each sound should have its own layer This way it is much easier to control fade in outs when to stop etc Tools ie r STA amp TNGaGs gt ga Animation Ey bern a FONEAP AGS Y E Sounds ag Jt ko H s q background B ay S bird m bee q wind q thunder dog amp scene 1 Properties Type Name Name bee mp3 lv Effect Custom v A v Sync Stream Repeat ly voi 11 kHz Mono 16 Bit 2 2 s 4 6 kB Flash sound layers You also can see exactly how far the sound will extend on the timeline Hit F5 or F7 if you later want to stop the sound somewhere to the right gt 4 Animation D v Sounds C w background 7 bird u bee b u wind B T thunder B Flash sound layers full picture Step 2 Configuration of sounds In the configuration panel you can change certain parameters and also edit a bit Sync Will defined how sound is synchronized with the timeline e Event Sound plays until it is done independently o
67. 113 References 1 http tecfa unige ch guides flash ex frame by frame intro flash cs3 rocket hello html 2 http tecfa unige ch guides flash ex frame by frame intro flash cs3 shaking hello swf 3 http tecfa unige ch guides flash ex motion tweening intro flash cs3 rocket moving fla Flash animation summary Draft This entry is part of the Flash tutorials It should be fully updated to CS6 Introduction This article in our Flash series is a summary of Flash frame by frame animation tutorial Flash motion tweening tutorial and Flash shape tweening tutorial It also includes some of Flash CS3 desktop tutorial Flash drawing tutorial Flash CS3 keyboard shortcuts Flash object transform tutorial Flash arranging objects tutorial Flash colors tutorial and Flash bitmap tracing tutorial Learning goals e Review some technical design guidelines and procedures regarding frame by frame motion and shape animations in Flash CS3 to CS6 Flash level e Flash 9 CS3 or better Public e Beginners about week four of a 4h week Flash course You can use this as self reviewing aid If you don t understand some items you will have to go over some Flash tutorials again This entry also includes two exercises with fla files that we used as tasks for mid term exams General principles Description of the fla file and stage size e Make sure to start with an appropriate stage size Change it via the properties panel or menu M
68. 265 Les ES navigation Conds Sil G7 ubuntu event Adding some embedded movie clips The plan is to trigger a series of stopped embedded movie clips with cue points We will hide stop these clips and then unhide play them at given times So let s create some Flash movie clips as explained in the Flash embedded movie clip tutorial Of course you could use clips that you already have in some other flash file Hit CTRL F8 menu nsert gt New Symbol and select movie clip Then double click on the new library item to get into symbol edit mode Create any animation you like Make sure that you are aware at which level you edit i e make sure to return to the scene when you are done Alternatively you also may import simple Flash animations you made before as movie clips Once you got one or more of these animations e Create an instance of each on the stage and give it an instance name e g movie_books Then in the AS code you may want to stop each movie clip instance and also make some of them invisible e g use code like movie_books stop movie_books visible false Flash augmented video tutorial 288 Timeline Output Compiler Errors Tools ces eters ceca Library Project Compa sag 5 10 15 20 235 3 35 4 45 said t g J2 e T q Tux anim e BE H flash cs6 video cue events as x 3 D Z ay a Trees anim co ee PA Kol 2 Books anim
69. 3 application that would take random pairs and play several scenes The word of an object should be told aloud when the user picks it up CIC a Reference I may move these to some other article sometimes soon Sprites and DisplayObjects Objects that you can drag around are Movie Clips These are children of Sprites Sprites have associated graphics From the ActionScript 3 0 Language and Components Reference DI 9 The class hierarchy looks like this MovieClip 6l Sprite M gt DisplayObjectContainer es InteractiveObject gt DisplayObject NOl EventDispatcher Mls Object 12 When you drop a sprite over another sprite the Flash will give the shape of the target object This shape is a DisplayObject and from a DisplayObject we can get its parent i e a Movie Clip in our case Important When you look at the definition of Class there are buttons to open inherited properties and methods Mostly likely you need these Event Listener Interface Movie clips can use normal Event Handling e EventDispatcher 1 Adobe AS3 reference Graphics e Graphics 13 Adobe AS3 reference Dictionaries e AS3 Dictionary Object 14 gskinner blog TextFields The TextField class is used to create display objects for text display and input TextField Adobe AS3 reference 15 e Basics of working with text for designers Flash drag and drop tutorial 327 Sounds e Sound 12 Adobe AS3 reference e
70. 5 gt My favorite Flash Drawing lt span tts color red gt Book lt span gt lt p gt lt p begin 24 dur 16 style title gt Computers lt p gt lt p begin 25 dur 5 gt My DELL XPS Laptop Flash machine lt p gt lt p begin 30 dur 5 gt My lt span tts backgroundColor yellow tts color black gt Ubuntu Linux workstation lt span gt lt p gt lt p begin 35 dur 5 gt lt span tts backgroundColor transparent gt lt span gt Working hard on Flash Tutorials using the Xemacs Editor lt p gt lt p begin 40 dur 4 gt The outside not my bike lt p gt lt div gt lt body gt lt tt gt Flash CS6 and examples e Flash video captions tutorial e Examples files are the same as for CS3 below Flash CS3 and examples e Flash CS3 video component tutorial e flash cs3 video simple server caption2 htm A e Grab the flash cs3 video video simple server caption2 files from http tecfa unige ch guides flash ex component video intro Timed Text 138 Links Timed Text W3C Home Page Timed Text TT Authoring Format 1 0 Distribution Format Exchange Profile DFXP Timed Text Markup Language TTML 1 0 1 W3C Recommendation 18 November 2010 Timed Text TT Authoring Format 1 0 Distribution Format Exchange Profile DFXP 6 OLD W3C Working Draft 27 April 2006 What is Timed Text 7 InDelv com Aug 2007 Timed Text Tags 8 List of supported tabs Adobe Flash References http www w3
71. Adobe before it acquired Macromedia used to support SVG SVG works well in the Opera browser and increasingly better in Firefox e HTMLS It includes SVG and DHTML e SMIL an XML based multi media integration language that supports timing layout animations etc SMIL is included in the full SVG profile SMILE works with several media players e g RealPlayer and Adobe Media Player A variant exists for Internet Explorer e Microsoft Silverlight BI a mostly failed attempt by Microsoft attempt to have its own Flash Others See also multimedia authoring systems and computer games Some of these have their own format some can export to more common formats Flash Links for software and media elements General Indexes e OsFlash has a large comprehensive list of links to Open Source Flash projects both those hosted on OSFlash and elsewhere Of particular interest are tools that generate flash in various ways Viewers e Adobe F Flash player download Gnash Wikipedia article A project which aims to create a player and browser plugin for the Adobe Flash file format which is free software Authoring tools e Adobe Flash CS5 Professional The commercial authoring tool Students You can get huge discounts either through some stores or Adobe s education program 8 takes some times to fight through this web site and to find the appropriate page In both cases you will have to send proof to Adobe befo
72. Adobe Flex includes how to install the Flex SDK e AS3 Compiling a program e AS3 Tutorials Novice e All the Actionscript related articles are tagged with Actionscript 3 Alternatively see Tutorials Flash ActionScript 3 overview 367 Useful Links pages in this wiki e Flash and AS3 links general Links to Flash AS3 websites propaganda and such e Flash and AS3 links tutorials Links to hopefully good tutorials on other web sites e Flash and AS3 links documentation Flash and AS3 Books Reference Manuals and Cheatsheets e Flash and AS3 links toolkits AS 3 Toolkits Libraries Flash reusable components AS 3 reusable code etc Links Most links are in specialized links pages see just above Development environments 59 e Flash ActionScript3 Programming under Ubuntu Tested this works Blogs and stuff 3 60 e Tag Actionscript at Wordpress e Drawk s blog 61 Publishes also source and a good tweener 62 library e WS Blog 63 by Jens Krause References 1 http www mikechambers com blog 2008 08 14 actionscript 3 and ecmascript 4 2 http www adobe com products flex sdk 3 http www adobe com products flex flexbuilder 4 http www moock org eas3 examples 5 http livedocs adobe com flex 201 langref mxml script htm l 6 http kanuwadhwa wordpress com 2007 10 05 using actionscript in flex applications 7 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 Exampl
73. CE ES white_cat Instance of white cat Movie Clip x7 POSITION AND c5 W 109 70 H 95 75 x7 3D POSITION AND VIEW X 88 7 Y 214 2 2 0 0 W 109 7 H 95 8 Symbol instances you want to manipulate must be named You could imagine dozens of other simple examples but it s not so easy to understand the technical ActionScript documentation which is made for programmers and not designers If you feel more adventurous you may have a look at the class hierarchy described in the Flash ActionScript 3 overview and in particular the Display Object and its children Follow up a link to the Flash documentation and see if you can find other properties that are easy to manipulate ActionScript 3 interactive objects tutorial 330 Simple repositioning example To understand what is going on below you may want to look at actionscript3 simple object manipulation html 1 And also load the fla file actionscript3 simple object manipulation fla 2 In order to reposition an object change its x and y properties In the following example when you click on the interactive object a symbol instance that is called black_cat it will move itself to position x 200 and y 200 Note Position is defined by the center of the display object i e the little sign who s value depends on how you made it black_cat addEventListener MouseEvent CLICK moveCat function moveCat event MouseEvent void
74. Component is really easy to use since it provides a series of ready made skins user interfaces from which you can choose e The Caption subtitle component requires some XML Editing Read the Flash video captions tutorial e For more sophisticated interactions with a video you need to code with ActionScript as explained in the Flash augmented video tutorial The executive how to summary for simple video playbacks e If your video uses a format that is not flv f4v or mp4 of if you plan to reduce its size or trim it then prepare it first with the Adobe Media Encoder This tool is included in the Flash distribution It may differ a bit from the full CS6 version e Drag the FLVPlayBack Video Component to the stage Flash video component tutorial 127 e Open the component inspector panel Choose a skin user interface configuration and provide the file name or URL of the flv video Note In CS3 and CS4 only the Adobe flv format was supported Since Flash 10 CS5 Adobe provides the more efficient f4v format and also directly supports other formats for playback Using the Flash video component Using Flash CS6 and CS5 component is really easy e You can use mp4 videos without prior encoding to a Flash video format e All operations are centralized in the properties panel The only difficulties relate to file path operations correct paths and copying files In most cases you would have to adapt your video file i e at leas
75. Control if all pictures are ok and in place by moving the playhead from left to right red rectangle on top of the timeline So you should have something like this Flash button tutorial 206 Color Swatches Align x Info Transform flash cs3 simple slide show fla L Align CAT I a a a a OEE ee Tej u Buttons E Distribute stage Tag bb wea Ol Match size Space 7A ie l OT Bs S db T Pictures Library x Components Component Inspector flash cs3 simple slide show fla 10 items anag t O BM 8 120fs o6 gt de Scene 1 workspace 6 amp HEM Name Type Use CoL E back_button Graphic forward_button Graphic picture_01 aclus Bitmap picture_O2 gene Bitmap picture_O3 lake jog Bitmap picture_04 ake jpg Bitmap A timeline with keyframes that hold pictures Step 4 Draw a forward a home and a backward button e Create a new layer and name it Buttons and select it also lock the pictures layer e To draw buttons you may use the Polystar tool and a variety of transform tools or just simply draw a triangle and get done with it Then you also want to reduce the alpha channel i e make these buttons transparent In the color panel put Alpha to 40 e Once you got a forward button make a copy and flip it horizontally menu Modify gt Transform gt Flip Horizontal Step 5 convert th
76. Ease H Basic motion Mi No Ease x 98 3 px M Wo Ease g Y 112 3 px Mi No Ease Rotation Z ge No Ease Transformation i No Ease Skew X gs M No Ease Skew Y ihe W L No Ease Scale X 105 3 p M WoEase j Scale Y 10583 p M WoEase Color Effect Brightness No Ease Brightness 29 2 M Cno Ease Filters v Eases Simple Slow 0 Viewable Frames You can for example Adjust the X position in a keyframe by pulling up or down the control or by entering precise coordinate Fit a transform eg size Right click on a keyframe to kill it The motion editor of CS4 Moving laterally a keyframe in the Timeline Flash CS6 motion tweening tutorial 87 The motion controls of the editor The controls of this tool are not too difficult to learn Just know that moving up down means decrease increase value Moving laterally moving means moving in the scenario timeline A B C D MOTION EDITOR Property Value Ease Basic motion v x 3403 px Ei Y 90 px M No Ease tv Rotation Z 9 M No Ease iv Transformation M Notae tv Skew X Q Th 43 A La Does a E A A A R Skew Y 9 S Coase T d oD pPanwnerwnnwnrnnnienninntnndnndendeedendenten leled le Scale X oom A S Petite eee eee e wee neem ee neenenneenennneeee feedecierdecdeotectootes 4 Scale Y 100 b M Co Ease 7 J Q Do pest teeeepeeenoneopnnuenueuounuu uuau sumien teeteenee teeteetes teeeees Color Ef
77. Flash cs3 convert to button symbol png License unknown Contributors image flash cs3 button symbol instance png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 button symbol instance png License unknown Contributors image flash cs3 button over png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 button over png License unknown Contributors image flash cs3 buttons timeline png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 buttons timeline png License unknown Contributors image flash cs3 component libraries png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 component_libraries png License unknown Contributors image flash cs3 parameters panel png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 parameters panel png License unknown Contributors image flash cs3 component inspector panel png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 component inspector panel png License unknown Contributors File Flash cs6 timeline navigation png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 timeline navigation png License unknown Contributors image flash cs6 button component png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 button component png License unknown Contributors File Flash cs6 timeline navigat
78. Make sure that the Action layer extends to the end of your timeline Put code in frame 1 and then hit F5 in the right most frame you use insert frame and not insert keyframe Make really sure that your code is in frame 1 and in the Action layer Make sure that button instance names and label names are exactly the same in the Parameters panel and in your Script Here is the picture of the timeline again q Actions Buttons Credits q Background p E Timeline of the menu based slideshow Notice the little a in frame 1 of the Actions layer It means ActionScript code inside Adding external URLs to buttons This shows how to program a button that will open an URL in a Web Browser look at the example file you can download Code is a bit complicated since it also will test if the URL really exists btn_edutech_wiki addEventListener MouseEvent CLICK GoToUrl function GoToUr1l event MouseEvent void var url String http edutechwiki unige ch en Flash_components_tutorial var request URLRequest new URLRequest url eey navigateToURL request _blank Gaten Er Error trace Er CrO oeCwreecl A simpler way of doing it without testing function GoToUrl event MouseEvent void var request URLRequest new URLRequest http edutechwiki unige ch en Flash_components_tutorial navigateToURL request _blank Results and source code
79. MouseEvent CLICK start_kite stop_button addEventListener MouseEvent CLICK stop_kite function start_kite event MouseEvent kite play function stop_kite event MouseEvent kite stop kite movie html H Source kite movie fla 2 Directory http tecfa unige ch guides flash ex6 embedded movie clips BI ActionScript 3 interactive objects tutorial 346 Dealing with keypress events Flash lets you intercept key presses in the same way you can intercept and deal with mouse clicks There are some subtle differences though and I find key press events more difficult to deal with because figuring out how Flash focuses on buttons is a bit tricky Moving an object with arrow keys example The goal is to implement some code that lets you move around an object with the left right up down arrow keys The basic event handling code is very much the same as for buttons instance_of_symbol addEventListener KeyboardEvent KEY_DOWN key_even_handler function key_event_handler event KeyboardEvent void WNOWA_SUC soooe The following example is based on the assumption that somewhere on the stage you have a sprite e g a movie clip or a component button that is called missile and that you want to be able to move it around with around with the arrow keys You need to implement the following things e A event listener registration like we just explained e Tell the stage to focus on the missile
80. Oke Arrays AS3 tweening platform 375 You have to create an array using Typically this is used to pass parameters to methods e g easeParams 1 5 2 45 Tweenlite Usage summary This class includes a few static methods that you can use like functions TweenLite to create a tween of multiple properties of an object TweenLite from same as above you specify the result of the tween TweenLite delayedCall Call a function after number of seconds TweenLite killDelayedCallsTo Kill delayed calls see previous line TweenLite killTweensOf Kills all tweens of a particular object RA oR ee TweenLite removeTween Removes a tween TweenLite to Description Tweens the target s properties from whatever they are at the time you call the method to whatever you define in the variables parameter Disclaimer Information be wrong and or outdated Daniel K Schneider 17 13 28 October 2008 UTC Syntax TweenLite to target Object duration Number variables Object You can keep track of an instance if you want to e g to kill it var myTween TweenLite TweenLite to target Object duration Number variables Object Alternative object oriented syntax var myTween TweenLite new TweenLite target Object duration Number variables Object This is almost equivalent to the above The former is usually preferable since it will handle garbage collection Mandatory parameters 1 target Object Target
81. SoundMixer 13 Adobe AS3 reference Tutorials e Drag and Drop in ActionScript 3 0 16 A very easy to follow tutorial on how to implement drag and drop in AS3 by MonkeyFlash com FLA file provided This link is not current any more e An easy to follow tutorial 7 about drag and drop in Flash CS5 by lynda com e An other very detailed tutorial approximately 20 minutes in 3 parts e Drag and Drop Tutorial in Flash CS5 Actionscript 3 Part 1 3 18 e Drag and Drop Tutorial in Flash CS5 Actionscript 3 Part 2 3 19 e Drag and Drop Tutorial in Flash CS5 Actionscript 3 Part 3 3 20 Links AS CS4 reference e startDrag and stopDrag 21 References 1 http tecfa unige ch guides flash ex drag and drop intro flash cs3 drag and drop intro html 2 http tecfa unige ch guides flash ex drag and drop intro flash cs3 drag and drop intro2 html 3 http tecfa unige ch guides flash ex drag and drop intro flash cs3 drag and drop matching html 4 http tecfa unige ch guides flash ex drag and drop intro flash cs3 drag and drop matching 2 html 5 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 6 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash display MovieClip htm 7 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash display Sprite html 8 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash display DisplayObjectContainer html 9 http livedocs adobe com flash 9
82. Styling of the textbox You can do this with the filters panel Click on the sign to add filters and then play around with the options e Move the red circle back to its initial position e Special effects maybe Drag and match learning application dumb version The goal is to move objects to a textbox containing the first letter of its name E g Cat should be moved to the C box If there is a hit the user will get some success message and can t move the object anymore If he is done he should get an extra message Step 1 Create movie clips for object to be moved e As above with the red and blue circle e Each object should have an instance name Step 2 Create textboxes e Also as above e Create one for each object E g a C for the cat etc e Make sure they are dynamic and they have a name Step 3 Foreground Background Make sure that the textboxes are in the background or the movie clips in the foreground Otherwise a dropped object will not find its target e Select all the movie clips then right click gt Arrange gt Bring to Front Flash drag and drop tutorial 320 Step 3 Write Action Script code Code below is fairly awful since it lacks abstraction but it has the advantage to use a minimal variety of AS3 var hits 0 Register mouse event functions dog addEventListener MouseEvent MOUSE_DOWN mouseDownHandler E dog addEventListener MouseEvent MOUSE_UP mouseUpH
83. TextField 16 _ Generate a Random Number im L Bring Object to the Front 19 9 Simple Timer i L Countdovm Timer gt 9 Timeline Navigation gt 59 Animation gt Load and Unload gt 59 Audio and Video v Event Handlers O cmm a Event Mouse Wver Event Mouse Out Event Key Pressed Event 4 _ Enter Frame Event le Actions 1 4 Using Flash CS5 code snippets Preliminary work 1 Make sure that you have an Actions layer else Flash will add it for you In other words if you are used to another name like Script rename it This is annoying behavior personnally I don t like Action at all it s just confusing 2 If you plan to add behavior and interactivity to object on the stage e Make sure that they are symbol instances preferably movie clips Right click on the object and Convert to symbol e Make sure that these symbol instances are named Else Adobe will do it for you and you should avoid this since Flash will select names in your place Add code snippets to either an object or a frame 1 Select an object on the stage if you want to add interactivity or behavior of the object Select a frame in the Timeline if you wish to add code that affects the frame as a whole e g timeline navigation If you select an object that is not a symbol instance or a TLF text object Flash converts the object to a movie clip symbol when you apply the snippet If you select an object that does not al
84. The stage Each application has one stage object and it contains all on screen display objects i e containers or simple objects This includes objects that the user can t see e g ones that are outside of the stage e Display object containers i e objects that can contain both simple display objects and other display object containers e Simple display objects Read for example Introduction to the Display List 57 Yahoo developper network or Creating Deleting and 3 58 Accessing Display Objects at Runtime in Flash CS if you want to learn how to code adding and removing display objects Stage and Timeline e http www kirupa com forum showthread php p 2129548 post2129548 To summarize one stage one root per SWF which is the main timeline and that root is an instance of a document class or the MainTimeline class if a document class isn t provided Action Script entries in this wiki Action Script tutorials 1 In this wiki we teach some Action Script to Flash designers e g e Flash button tutorial e ActionScript 3 event handling tutorial e ActionScript 3 interactive objects tutorial Flash embedded movie clip tutorial See the Flash tutorials entry for a full list 2 Then we also have pure Action Script tutorials for people who wish to learn how to program e The entry point is Actionscript 3 As of november 2007 there is a complete list of novice tutorials Other levels are under constuction Start with e
85. TiVo Web 1920x1080 169 Project Framerate 7500kbps v DVD amp Blu ray Web 256x144 169 Project Framerate 300kbps gt Blu ray Web 320x240 43 Project Framerate 500kbps gt DVD Web 512x288 16 9 Project Framerate 600kbps v amp Image Sequence Web 640x480 433 Project Framerate 800kbps gt Bitmap Web 768x432 169 Project Framerate 900kbps gt DPX gt GIF gt JPEG gt PNG gt Targa Adding a video to the Adobe Media Encoder CS6 Editing The Media Encoder allows to edit a video file in various ways It is not a full video editor like Premiere but allows to do a few very useful operations e You can remove frames in the start or the end e You can clip each side top bottom left right This is particularly useful if you shot the video yourself e g with a cell phone e You also can add so called cue points However we suggest not to use this feature and rather use so called ActionScript cue points The editor is difficult to find Do the following Select the output video line underneath the imported video see the screen capture above the flv file is selected e Menu Edit gt Export settings or hit CTRL E fine name The picture below explains how to make a few edits e Clip the video Click on the Source tab first select the rectangle icon to the left then either change the values of left top right bottom or use the clipping rectangle Look at frames Move the
86. a Flash 10 player installed Else it will not work Notice The armatures have been defined as type Runtime meaning that we let the user do the animation manipulate the IK structure Source e symbol vs shape armature fla 8 e Directory http tecfa unige ch guides flash ex6 inverse kinematics Terminology e An armature or IK structure or bones structure defines how bones connect either symbols or various areas of a shape into an articulated whole Nodes refer to symbols connected by a bone to a parent symbol Bones or limbs means connectors of either symbols or elements of the bones structure of a shape e Ik shape refers to a shape that contains an armature A simple armature animation with symbol instances Armatures can be used either for animation or for end user manipulations In this section we shall explain how to create an animation using a set of connected symbols Creation of a simple IK animation with symbol instances 9 Have a look at the symbols ik armature intro example first Flash inverse kinematics tutorial 252 If you want to play along you can start with the following source file It only includes the symbols the IK armature has to be created 10 e symbols ik armature intro fla A connected balls and ovals example Step 1 create the symbols that you plan to connect with a bones structure e Create a new layer e Create a movie clip
87. a kinematic chain in order to achieve a desired pose Inverse kinematics is a type of motion planning Inverse kinematics are also relevant to game programming and 3D animation where a common use is making sure game characters connect physically to the world such as feet landing firmly on top of terrain Wikipedia BI retrieved 27 November 2008 Inverse kinematic animation IKA refers to a process utilized in 3D computer graphic animation to calculate the required articulation of a series of limbs or joints such that the end of the limb ends up in a particular location In contrast to forward kinematic animation where each movement for each component must be planned only the starting and ending locations of the limb are necessary Inverse kinematic animation 4 retrieved 17 52 28 November 2008 UTC The characters in a game have skeletons Similar to our own skeleton this is a hidden series of objects that connect with and move in relation to each other Using a technique called parenting a target object the child is assigned to another object the parent Every time the parent object moves the child object will follow according to the attributes assigned to it A complete hierarchy can be created with objects that have children and parents Once the skeleton is created and all of the parenting controls put in place the character is animated Probably the most popular method of character animation relies on inv
88. a list of tools you may use and their function See further down for how to The Bones tool 4 e Define bones The Bind tool e Associate envelope points with a given bone more later The Selection tool amp e Select bones or associated ikNodes shapes for further manipulation either by dragging ALT dragging or via the properties or transform panel The Subselection tool amp e Allows you to move joints of bones i e make them longer or shorter and rotate of bones within a shape armature I e this won t work with IK structures that use symbols To move bones for symbol armatures use the Free Transform tool e Allows to adjust shapes The pen tool N e As alternative tool to add remove control points to a shape The Free Transform tool e Allows to move joints starting points of bones of an symbol based armature The Transform panel e Change size and rotation of both bones and associated ikNodes shapes Dealing with the armature layer An armature is defined in a special Armature layer By clicking on the layer you then can change some of its properties in the properties panel e Ease You can define ease in and ease out parameters as in other tweening animations e Options e Change type Authortime to animate yourself in the armature layer runtime to allow the user move the IK structure In the latter case you can t have your own animations I e you only can define frame 1 e Style This will display the bon
89. addEventListener MouseEvent MOUSE_DOWN startDragging grey_mouse addEvent Listener MouseEvent MOUSE_UP stopDragging dog and cat switch can t see the dog for starters brown_dog buttonMode true change cursor form here for a change white_cat buttonMode true brown_dog visible false brown_dog addEventListener MouseEvent CLICK hideShow white_cat addEventListener MouseEvent CLICK hideShow white_cat friend brown_dog brown_dog friend white_cat mouse and red cat size change with wheel grey_mouse addEventListener MouseEvent MOUSE_WHEEL changeSize red_cat addEvent Listener MouseEvent MOUSE_WH eS EL changeSize empty_cat addEventListener MouseEvent CLICK transformCatColor R G B A multipliers and R G B A offsets we start with a light grey Care empty_cat transform colorTransform new Colontrans torm 0 i 0 i1 0 i1 1 120 120 120 255 p fe O 7 function movelt event MouseEvent void var obj event target initialize original values if necessary on first pass test if properties ori_ exist if not create them if i Weed sc She Glo ll CDJ o e 9 EDI oP eoJ Ori y Oba yi obj buttonMode true for better UX this could be done before Ts object in original position If so move close to friend if obj ori_x obj x SIDI o CSJ Eulencdeea i a
90. additional properties like rounded corners e Oval tool Draw ovals e Oval primitive tool Define in addition other features such as start end angle inner radius etc e Polystar tool Define polygons and stars there is a small pull down menu in the properties panel that you should not overlook Below you can see a few drawings The screen capture has been taken with the Polystar tool activated Various drawings with the rectangle oval polystar tools CS3 same principle Flash drawing tutorial 25 Pencil tool J With the Pencil tool you make drawings like with a Pen However there is optional support to draw straight or smooth lines since drawing with a mouse isn t very obvious You can define various options Line drawing Options In the options section you can select different ways of drawing support I e the the straight icon looks like this 4 Below is a screen dump that demonstrates the difference between straight freehand and smooth drawing gv PGUNOs XO i 3 i a r on A 5 a The three pencil drawing modes CS3 same principle Stroke color and line properties In the properties panel you can define various options like stroke pen color fill color various dashes or not and how the end of lines should look Brush tool The paint brush tool lets you paint i e create shapes made of simple fills There are several special effects and several modes
91. animation anmi 1 100fps 00s 4 A Motion Guide layer Step 3 Draw the motion guide in the motion guide layer e Make sure that you selected the motion guide layer you just created selected You may lock the other layers and just display their outlines e Then with the pencil tool draw the line your rocket has to follow Use Object mode and Smooth drawing from the tools panel controls see the Flash drawing tutorial if you forgot how to use the pencil In the screen capture below the motion guide would be the red fatter line on top of the hill s outline A rocket motion guide drawn with the pencil in the Motion Guide layer Flash classic motion tweening tutorial 76 Step 4 Snap the animated object to the start of the motion guide e Unlock all layers e Select the animation layer not the motion guide layer and select your start frame e Then drag the object i e our rocket to the start of the line until the little white circle in the center of the rocket will snap to the line Just drag don t click A rocket snaps to the motion guide Step 5 Snap it to the end e Select the end frame first e Then drag the object the rocket to the end of the line until it snaps It should snap with the little white circle Step 6 Orient to path e You can have the object tilt along the path if you want e Select the animation layer not the guide e Select a frame in betwe
92. are prebuilt interface elements widgets that will speed up video integration In particular the FLVPlayBack Video Component allows to render videos without any ActionScript programming It includes a nice choice of skins for user controls Videos also can be enhanced with captioning or they may interact with the rest of the animation This is discussed in the Flash augmented video tutorial Learning goals Learn how to encode flv and older f4v files Learn how to use the Flash 11 CS6 video component for simple video playback Prerequisites for the first part Flash CS6 desktop tutorial Flash drawing tutorial Flash component button tutorial Moving on Flash augmented video tutorial Flash video captions tutorial The Flash article has a list of other tutorials Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Level It both aims at beginners FLV encoding using the video playback component and embedding a video in the timeline and intermediate Flash designers inserting captions and using cue points to trigger animations The executive summary about Flash Videos Flash has built in video management components e The FLVPlayBack Video Component is really easy to use since it provides a series of ready made skins user interfaces from which you can choose e The Caption subtitle component re
93. are two sorts of support Built in help Help from Adobe s website Built in help is quite good although contextual help could be better like being a systematic option on the right click menu For some stuff you can get context dependent help i e learn something about certain objects an item etc It will open a more or less appropriate section in the help tree Select an item first e g in the Workspace or in a panel then either get Help from the Menu hit F1 or click on the little help icon in the properties panel In addition in the built in help menu you can find links to external sites Trouble In some Flash versions and on rainy days help doesn t work for me You may have to update help but you also may have to install upgrade other software e g Adobe application manager or Adobe Air Good luck Upgrade CS6 first Removing older versions is also a good idea if and only if you don t need these anymore E g when I tried to update CS6 documentation I landed in an updater for CS 5 5 However uninstalling also can uninstall software you want to keep E g I lost Acrobat Pro when I removed CS5 5 I never ever had a flawless installation uninstallation experience with any Adobe Master Pack The absolute worst one was with CS3 Within the built in help texts there can be broken links Adobe reorganized their web site on a regular basis Also you should be aware that updating documentation after a new release can
94. article in Flash ActionScript 3 overview 364 this wiki for a discussion presentation of some editing software Finally you also can use the CS3 Flash ActionScript editor if you own this package The class hierarchy At the origin there is the Object 12 Tt has many subclasses about 151 I d say EventDispatcher EventDispatcher implements is the base class for the DisplayObject class i e all displayed objects It is a direct child of Object and has 29 subclasses A few are DisplayObject 10 see below NetStream NetStream es use to deal with streaming connections Sound H use to load play external sound SoundChannel 12 control sound Timer 13 use for time based animation The DisplayObject The ActionScript 3 0 flash display package defines a whole lot of different kinds of visual objects that can appear in the Flash Player DisplayObject is a child of EventDispatcher child of Object Below is summary table of AS3 Flash 9 CS3 interactive display objects not covering Flex It shows that interactive objects are defined as hierarchical classes Methods and properties that work for a parent class e g Sprite also will work for its child classes e g UIComponent Links point to the technical reference manual at Adobe Please note that the graphics are defined by very different classes Graphics are inserted into the graphics properties of display objects 10 14 DisplayObject see
95. at some point look at the Flash video component tutorial since it it show how to augment videos with embedded movie clips If there is no instance of the movie clip on the stage drag a movie from the library to the stage and then immediately give it an instance name Remember that instance names must be symbols e g movie_books not something like wow movie of books Use a letter followed by other letters numbers or the sign only Let s assume that the instance name of a clip is movie_books You now can use ActionScript code to do various things For example Playing a movie clip movie_books play Stopping a movie clip movie_books stop Making it visible or invisible movie_books visible false movie_books visible true Tip Movie clips start playing as soon as they are found in the current frame E g if you put them in frame one they will play forever until the main timeline moves to another frame If this is not desired you can adopt one of the following solutions 1 Stop the movie within its own timelime Edit the movie clip in symbol edit mode double click e Add a layer called script e Add this ActionScript method in frame 1 SOON 2 As above stop it in the maintimeline e Create an Actions Layer or use the coding assistant Insert something like your_clip stop Flying kite example This example shows how to play and stop an embedded movie clip with a component button Look at the f
96. bat dict box_a apple Do NOT change delete any other line Also make sure to respect the syntax e g dont forget the at the end of each line bie END USER Config Flash drag and drop tutorial 322 var hits 0 counts succesful hits var max 0 used to compute dictionary length For each item in the dictionary we add event listeners for each will loop through the values not the keys for each var item in dict item addEventListener MouseEvent MOUSE_DOWN mouseDownHandler item addEventListener MouseEvent MOUSE_UP mouseUpHandler item buttonMode true needed for the hand cursor to work max max 1 Define a mouse down handler user is dragging function mouseDownHandler evt MouseEvent void var object evt target we should limit dragging to the area inside the canvas object useHandCursor true object startDrag function mouseUpHandler evt MouseEvent void var obj evt target obj dropTarget will give us the reference to the shape of the object over which we dropped the circle var target obj dropTarget Tf the target object exists the we ask the test_match function to compare moved obj and target where it was dropped if target null test_match target obj obj stopDrag function test_match target obj Vy CESE aie CaS joes mete if dict target obj Ji We Gere a insi
97. burning Flint Logo 7 To create your own burning logo you need two things e A png file with a logo This file must have the following properties e Background color should be Alpha channel In GIMP for example menu Colors gt Color to Alpha then select the color e g white if your drawing is orange on white Else your whole picture will burn e Color of the letters should be orange FF9900 unless you make more changes to the code FINT particle system 394 e A fireblob i e a small graphic with a radial color gradient see the Flash colors tutorial You can just copy the one that you will find in the source code of this example Step 1 Import logo and the fireblob to your library e Create a logo and put in the library just the drag the png from the file explorer into the library e Copy the blob from our fla file Step 2 Make these linkable classes e This is already done for the fireblob e Right click on the icon of the png bitmap in the library and select linkage e Type Logo not LOGO or anything else and check Export for ActionScript then hit OK Classas bogo You now should have a setup that looks like this minus the fire log which we shall create below Enlarge the picture below if you can t make out the details Step 3 Copy some ActionScript code Logofiretiat tinttire Jogo fia al Color Swatenes Align Transfom meee BS and make a few adjustments Gi flint
98. can change the way textures are applied with the free transform tool see Flash colors tutorial Flash drawing tutorial 32 flash cs3 drawing trees swf Ele View Control Debug A flash document with trees and cats This result is not exactly better but it s different and you can see that you can draw with bitmaps Of course one now also should repaint the house and the trees I also rotated the gradient for the sky by the way Of course one can do better graphics and colors See more advanced Flash tutorials on drawing e g the Flash object transform tutorial the Flash arranging objects tutorial or the Flash colors tutorial Files to download You can download the fla files here e http tecfa unige ch guides flash ex drawing intro e flash cs3 drawing trees fla is the one with a simple background e flash cs3 drawing trees3 fla uses gradients and drawings outside the stage are clipped away so it s a clean version of the above and I will use this one in the Flash motion tweening tutorial e flash cs3 drawing trees2 fla is the one with the textures References 1 http www abc net au creaturefeatures draw draw_a_cat htm 2 http www free clip art com members content cgi bin imageFolio cgi direct Animal_Clip_Art 3 http www learn2photoshop com tilabletex htm Flash layers tutorial 33 Flash layers tutorial Draft This entry is part of the Flash tutorials Introduction Learning goals Lea
99. ch mediawiki index php title File Add_path png License unknown Contributors image remove_path png Source http edutechwiki unige ch mediawiki index php title File Remove_path png License unknown Contributors image tween lite 1 jpg Source http edutechwiki unige ch mediawiki index php title File Tween lite 1 jpg License unknown Contributors image flash CS3 setting classpath jpg Source http edutechwiki unige ch mediawiki index php title File Flash CS3 setting classpath jpg License unknown Contributors image flash cs3 linkage properties jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs3 linkage properties jpg License unknown Contributors image 3d coordinates gif Source http edutechwiki unige ch mediawiki index php title File 3d coordinates gif License unknown Contributors image right hand rule gif Source http edutechwiki unige ch mediawiki index php title File Right hand rule gif License unknown Contributors License 428 License CC BY NC SA Licence EduTech_Wiki Copyrights http creativecommons org licenses by nc sa 3 0
100. change In Flash tint is a color that you can add to a symbol in motion tweening Alternatively but not at the same time you can modify its brightness In addition you can change its alpha value make it more or less transparent See the Flash special effects tutorial tutorial Flash Color Gradients Flash supports there are 2 kinds of color gradients see the picture below e Linear the color changing in one direction e Radial the color changing from the center to the outside Radial 2 colors Radial 5 colors pt Baal Linear 2 colors linar 7 colors Linear turned Linear and radial gradients and Gradient Transform Color gradients work with color bands You can define 2 or more colors and Flash will fill in intermediate colors between them The result then depends e on the choice of colors e onthe width of the color band from one color to the next one You can change these be defining and dragging color pointers in the Color panel Read on Flash colors tutorial 181 Defining color bands There are some built in gradients linear and radial that you may use as is however you most likely want to define your own In order to achieve that you need the color panel and then manipulate the controls in the preview window If you select either linear or radial Type you will see the gradient preview window at the bottom of the color panel Color pa
101. cheese moved cheese cheese name 4 cheese_name score score TweenMax to cheese 2 bezierThrough x cheese x 50 y cheese y 50 Teed sew Filly ease Bounce easeOut box_cheese removeChild cheese stage addChild cheese Verify score validation_btn addEventListener MouseEvent CLICK validateScore function box_down TweenMax to box_cheese 3 bezierThrough TsO ye LOr AS3 tweening platform 386 Ts 0 Weslo i ease Bounce easeOut function box_up TweenMax to box_cheese 3 bezierThrough x 0 y 0 x 0 y 0 ease Bounce easeOut delay 5 Define sounds var sound_request URLRequest new URLRequest too_much_cheese mp3 var too_much_cheese_sound Sound new Too_much_cheese_class var bravo_cheese_sound Sound new Bravo_cheese_class EULLAC ELON Cho morm i Define what s happened wen the player wins the game function validateScore ev if score 8 red_mouse visible false mc_jumping_emilie visible true validation_btn visible false bravo_cheese_sound play j box_down setTimeout do_nothing 10000 TweenLite to mc_jumping_emilie 5 x mc_jumping_emilie x 600 y mc_jumping_emilie y delay 3 9 TweenLite to box_cheese 5 x box_cheese x 600 y box_cheese y 160 delay 4 onComplete onFinishTween function onFinishTween void removeChild box_cheese for each var cheese_def in cheese
102. cite tilDoxSo text_box by the name of a matching dynamic text_box movie by the name of movie instances users can move cat dog rocket bat Flash drag and drop tutorial 324 dict box_a apple Do NOT change delete any other line Also make sure to respect the syntax e g dont forget the at the end of each line A END USER Config Sound should I preload this somehow var request URLRequest new URLRequest applause_3 mp3 var applause Sound new Sound applause load request var request2 URLRequest new URLRequest music mp3 var music Sound new Sound music load request2 var request3 URLRequest new URLRequest baby_laugh mp3 var laugh Sound new Sound laugh load request3 Drag and match code var hits 0 counts succesful hits var max 0 used to compute dictionary length var ori_x var ori Wp For each item in the dictionary we add event listeners for each will loop through the values not the keys for each var item in dict item addEventListener MouseEvent MOUSE_DOWN mouseDownHandler item addEventListener MouseEvent MOUSE_UP mouseUpHandler max max 1 item buttonMode true Define a mouse down handler user is dragging function mouseDownHandler evt MouseEvent void var object evt target ori_x object x ori_y object y object useHandCurso
103. cloud once it is close e g around frame 40 Tip Use a frame by frame animation e g about 10 frames 3 Sun animation e The Sun must rise from the left and from behind the hills then move to the top and finally set behind the hills to the right The sun must follow a more or less smooth path i e an arc and not just two lines Tip This is a motion guide tween 4 Sky animation e Sky should be brighter around the sun e Bonus Also make the sky darker when the clouds arrive Tip This includes at least 2 shape tweens in a row Use color gradients 1 2 color bands should do Do the gradient transform before you start duplicating the sky of frame 1 Alternatively you also can add a glow to the sun with a filter 5 Extra effect e Add one other animation effect somewhere Whatever you like Advice and Cheatsheet Frames e F5 will extend a frame e F6 will make a new keyframe and copy its contents e F7 will make a new empty keyframe Scaling e ALT CTRL S will allow to scale a selected object Shape tweening e Right click gt Break Apart will turn a symbol instance into its components E g the sky as symbol instance will become a Drawing Object e Alternatively double click on a symbol object to edit its graphics Advice e Always lock layers you are not working on e Backtrack ctrl Z as soon as you see a tween object in your library None is needed e Do not kill library objects e Ifyou completely messed
104. defined in the same frame e Hit F7 to create an empty keyframe in the Actions layer e At some point you will have to create other Action layers Flash doesn t care about the layer name but unfortunately the Code snippets panel always will copy code to the Actions layer In other words you may have to copy paste code if you use this tool Example files for self study e flash cs6 simple slide show menu2 html 9 10 e flash cs6 simple slide show menu2 fla Component buttons in an animation example that uses scenes You may consult this example in order learn e that one can add a button anywhere in the timeline e how to work with scenes Scenes can be understood as fragments of a long timeline likes scenes in a theatre They have the following advantage The timeline becomes shorter and more manageable e You can test scenes independently To add a scene e Menu insert scene e To rename a scene menu Window gt Other panels gt Scene then double click on the scene To navigate from one scene to another use code like this The following code will move the user to a scene called Credits in frame 1 and stop after she presses the credits_ btn credits_btn addEventListener MouseEvent CLICK goCredit function goCredit event MouseEvent void COE OAMGSHOMI Ulan Eels su e The following code will move the user to a scene called Animation in frame and play restart_btn addEventListener
105. double clicking on it 3 Carve out shapes with the eraser 4 Transform a drawing object or shape with the select tool envelope transforms Free transform and Envelope transform tools and the sub selection tool 5 Assemble objects see Flash arranging objects tutorial then any of the above Executive summary transform tools in the tools panel e The Select tool amp allows to quickly distort an unselected object by moving the cursor close to it until it changes to curve or edge shape Selection tool The you simply drag the mouse BTW this is a very dangerous tool Subselection tool by mistake you can dammage your drawings if you don t lock the Kt Free Transform tool other layers e Tools for transformations in the tools panel e Use the Free Transform tool f to make simple transforms of the envelope of a shape e g learn how to use the envelope transform The Subselection tool allows draging squares anchor distortion points and turn drag circles curve control handlers You can use the controls underneath the pen tool to change the nature of these so called anchor points e With the Eraser amp you can carve out objects like a woodcutter or a chainsaw artist e Anchor pointer tools underneath the pen tool allow to change the type of anchor points Executive summary transform tools in other places e The menu Modify gt Transform can get you directly into the modes of one of these tools The Tran
106. e it could be flying lower or higher e the size of movie clip it could change from 50 to a 100 of its original size e the color of the movie clip i e the alpha value can vary from 80 to 100 Have a look at the flying kites example DI now If you prefer you can call it flying bats Step 1 Create a movie clip with a motion animation e Make sure that the animation starts a lot to the right and extends a lot to the left of the picture since we will resize the movie clip and it become as small as half the original size e The movie clip in this example is called Kite_movie i e we just build on top of our previous example Step 2 Export for ActionScript e Right click on the movie clip symbol in the library and select Properties e Open the Advanced section little down arrow if needed e Tick the Export for ActionScript box e Optional Change the name of the exported class that you will use later in ActionScript In our example we shall use Kite_movie e Click on ok e ActionScript now can see a movie clip defined in the library By default it ignores everything that sits in your library Flash using embedded movie clips tutorial 273 Step 3 The ActionScript code Create new instances of a Movie clip symbol that was exported as Kite_movie and to add these to the scene 1 In ActionScript create an instance of a class exported symbol like this kitel new Kite _movie kite2 new Kite_movie
107. ea e O O bezierThrough Array Pass points through which the bezier values should move orientToBezier Array or Boolean MovieClip Sprite to orients itself in the direction of a Bezier path The arrays need the following elements Position property typically x Position property 2 typically y Rotational property typically rotation Number of degrees to add optional makes it easy to orient your MovieClip Sprite properly ERN WA Irora iont Olle Note This is an array within an array globalTimeScale Globally speed up down all tweens blurFilter Object Create a blur with one or more of the following properties Parameters blurX blurY quality Example AS3 tweening platform 382 TweenFilterLite to movie_clip 2 blurFilter blurX 1 blurY 2 glowFilter Object Apply a glow effect to display objects Parameters alpha blurX blurY color strength quality inner knockout colorMatrixFilter Object Apply various color filters Parameters colorize amount contrast brightness saturation hue threshold relative matrix Example TweenFilterLite to movie_clip 2 Co LoMisicioisrs lheeies erolons wes Osa OOOO elivoibimie g iL dropShadowFilter Object Will add a drop shadow to an object Parameters alpha angle blurX blurY color distance strength quality Flex Adobe dropShadowFilter doc 20 bevelFilter Object Create a bevel effect gives i e three
108. either out along the line or turn right left To draw a line after a curve click on the last curve control round circle you just created the click elsewhere Controls The tiny rectangles magnify if you can t see them are called anchor points You may later move them with the subselection tool The little dots are called curve controls You can drag them in all directions to create the arces you d like e To close a curve move it over an anchor point A little circle should appear next to the mouse pointer Click Other pen tools When you hold down the mouse over the pen tool you can get three other tools that you may use while your are working on a drawing before hitting ESC e The Add Anchor Point tool To add an anchor point to a segment click on it The Delete Anchor Point tool To delete a point click on it By default the Pen tool changes to the Add Anchor Point tool as you position it over a selected path or to the Delete Anchor Point tool as you position it over an anchor point Later you also can use the subselection tool to repair Links e Drawing with the Pen tool 1 These help pages are fairly well done e g look at e Draw curves with the Pen tool P Adobe Flash Help References 1 http livedocs adobe com flash 9 0 UsingFlash WSd60 231 10762d6b883b 1 8f10cb 1 fe lafo 7e76 html 2 http livedocs adobe com flash 9 0 UsingFlash WS0668 12D8 09 10 4345 ABDB 012C3CBCB685 html 194
109. flash cs3 shape hints fla 8 Bad example Let s now look at a bad example To do shape hinting right each morphed shape should be in a different layer if I understand right and they should be attached to borders In the following example they sit on the shape and do nothing at all Yes I know I should fix this but did not have time Flash shape tweening tutorial 103 Below are three screen captures for keyframe 1 keyframe 2 and keyframe 3 of an animation that starts with a tear on top It then separates into 2 tears In the third keyframe one becomes a hill and the other one morphs into a tree It almost looks good as you can see 9 Shape hints in Flash CS3 No shape hint in first keyframe Unused shape hint in middle keyframe Unused shape hint in last keyframe Results and source e Admire the result 91 It s absolutely dreadful Ok it was done in 5 minutes flash cs3 shape tweening hints fla 10 Source directory http tecfa unige ch guides flash ex shape tweening intro Remember how to view all shape hints Shape hints will disappear from view when edit something e Select the layer s within which you have shape hints and select View gt Show Shape Hints or hit CTRL ALT h e Notice To add new shape hints press CTRL SHIFT h Alternative example e Flash Professional Shape tweening i H Adobe retrieved jan 2013 In the Flash bitmap tracing tutorial we tried shape hints for a portrait morphing A 2 color
110. flash cs6 video timeline embedd html http tecfa unige ch guides flash ex6 component video intro flash cs6 video timeline embedd fla http help adobe com en_US as3 components WS5b3ccc5 1 6d4fbf35 1e63e3d 1 18a9c65586 7feb html http tecfa unige ch guides flash ex6 component video intro flash cs6 video goto cues html http tecfa unige ch guides flash ex6 component video intro flash cs6 video goto cues fla http tecfa unige ch guides flash ex6 component video intro office dks3 flv http tecfa unige ch guides flash ex6 component video intro flash cs6 video cue events html http tecfa unige ch guides flash ex6 component video intro flash cs6 video cue events fla http tecfa unige ch guides flash ex6 component video intro flash cs6 video cue events exercise html http tecfa unige ch guides flash ex6 component video intro flash cs6 video cue events exercise fla http www adobe com devnet flash articles flvplayback_programming htm http tecfa unige ch guides flash ex6 component video intro flash cs6 video component looping fla http tecfa unige ch guides flash ex6 component video intro flash cs6 video component looping html http help adobe com en_US as3 components WS5b3ccc5 16d4fbf35 le63e3d118a9c65b32 7fe9 html http help adobe com en_US FlashPlatform reference actionscript 3 fl video FLVPlayback html http flowplayer org http www longtailvideo com http www hdwebplayer com Flash video captions tutorial Draft Introduction
111. flash ex6 shape tweening intro Trouble shooting If CS6 refuses to create a shape tween you probably work with a symbol e g a movie clip or a graphic symbol or another non editable object Forget it it won t work To extract the graphics from a symbol instance Right click gt Break apart or double click on the symbol or symbol instance to enter symbol editing mode then copy paste the graphics you need Some design tips e You should consider doing a shape transform in several steps i e use several shape tweens in a row for the same shape or use shape hints This wasn t done here Flash shape tweening tutorial 100 e For smooth shape tweening working with objects without borders strokes is usually a better choice set the stroke color to none e g the white rectangle with a red diagonal bar Also unbreak graphics until the whole thing becomes a shape You always can make it graphic again by union it Modify gt Combine Objects gt Union e You can put several shape tweens in different layers Do not use shape tweening for simple re sizing animations A motion tween can do that Simply use the free transform tool to change the size width height of the tweened symbol in some keyframes Morphing traced bitmaps To morph images there are two kinds of solutions e Break images apart right click on the picture This turns it into a shape You then can make a copy of it and manipulate all sorts of things
112. guides flash ex component video intro timed text2 xml 7 http www digital web com articles captions_flash_video_2 8 http help adobe com en_US as3 components WS5b3ccc516d4fbf351e63e3d118a9c65b32 7ee5 html Flash actions frame tutorial Draft Introduction Learning goals e Use code snippets e Use assistance features in the Actions pane Prerequisites e Flash CS4 desktop tutorial or Flash CS6 desktop tutorial e Understand symbols and basic drawing Next steps e none Flash actions frame tutorial 301 The actions frame To add interactivity to your flash animations you need to add little scripts To create scripts embedded in a FLA file create a new layer called Actions then open the Actions panel F9 The Actions panel consists of three panes the Actions toolbox which groups ActionScript elements by category the Script navigator which lets you move quickly between the scripts in your Flash document and the Script pane where you type your ActionScript code A Script panel B Panel menu C Actions toolbox D Script navigator Source Adobe CS5 docs Use context sensitive help from the Actions panel To select an item for reference do any of the following e Select an ActionScript term in the Actions panel toolbox pane on the left side of the Actions panel e Select an ActionScript term in the Actions panel in the Script pane e Place the insertion point before an ActionSc
113. hand for clock move it towards and end the center of the clock Flash classic motion tweening tutorial eSOFQRNVLOV FASO EIE _ tanm E seei roere O Move the center point of the hour hand Rotating clock Step 3 make a motion tween e Make a new keyframe i e hit F6 in a new frame You can leave the object where it is depends on the aim of your animation e Then create the motion tween right click anywhere in between the two keyframes e Now in the parameters panel select Rotate CW clockwise as in the example shown in the picture Btw CCW would mean countclock wise e If you want to rotate it more than once during the animation time enter XX times E g we entered 12 for the minute hand in the clock animation a x rotating clock fla 4 ating gt ih jemma 13 120fps Workspace M SS a rotating clock fla 3 items Motion tween around a center Rotating clock Clock example If you want you can Look Plat rotating clock example e Or get the flash cs3 rotating clock fla 6 file from http tecfa unige ch guides flash ex motion tweening intro and play with it Flash classic motion tweening tutorial 73 You don t like my cats Embedded movie clips As we pointed out in the Flash drawing tutorial you can import professionally made clipart into Flash Furthermore you now should learn how to move animated objects i e use so calle
114. hidden statics text boxes or better substitute text of the same dynamic text box Absolute beginners solution e Put textboxes on the stage and give each a different instance name e g text1 text2 etc e Inthe ActionScript code hide these at start textl visibility false text2 visibility false e Define event handlers for each of these as explained above e In the function that is called when a cue point event occurs textl visibility true Flash video captions tutorial 300 In some distant future we may create an example For the moment implementation is left as an exercise to the reader A totally different solution is to directly edit the video file E g read Captions for Video with Flash CS3 Part Two 71 by Tom Green Digital Web Magazine June We don t know if this solution works and is still accurate Links Timed Text TT Timed Text W3C Specification e Timed Text Tags 8 List of supported tabs Adobe retrieved Feb 2013 References 1 http www freexmleditor com 2 http tecfa unige ch guides flash ex component video intro flash cs3 video simple server caption html 3 http tecfa unige ch guides flash ex component video intro flash cs3 video simple server caption fla 4 http tecfa unige ch guides flash ex component video intro timed text xml 5 http tecfa unige ch guides flash ex component video intro flash cs3 video simple server caption2 fla 6 http tecfa unige ch
115. href Part2_Using_AS3_Components_1 html 2 http tecfa unige ch guides flash ex6 components intro flash cs6 timeline navigation html 3 http tecfa unige ch guides flash ex6 components intro flash cs6 timeline navigation fla 4 http tecfa unige ch guides flash ex6 components intro flash cs6 simple slide show menu html 5 http tecfa unige ch guides flash ex6 components intro flash cs6 simple slide show menu fla 6 http tecfa unige ch guides flash ex6 components intro flash cs6 simple slide show menu fewcode html 7 http tecfa unige ch guides flash ex6 components intro flash cs6 simple slide show menu fewcode fla 8 http livedocs adobe com flash 9 0 main wwhelp wwhimp common html wwhelp htm context LiveDocs_Parts amp file 00000488 html wp149914 9 http tecfa unige ch guides flash ex6 components intro flash cs6 simple slide show menu2 html 10 http tecfa unige ch guides flash ex6 components intro flash cs6 simple slide show menu 2 fla 11 http tecfa unige ch guides flash ex components intro flash cs3 cloud animation sound2 html Flash component button tutorial 237 12 http tecfa unige ch guides flash ex components intro flash cs3 cloud animation sound2 fla 13 http tecfa unige ch guides flash ex embedded movie clips kite movie html 14 http tecfa unige ch guides flash ex exams2007 final exam coap2 10 solution 2007 html Flash video component tutorial Draft Introduction Video components
116. import fl controls DataGrid Flash datagrid component tutorial 313 import fl data DataProvider Va DareGimiel Amie Create a a new instance of DataGrid and name it data_grid var data_grid DataGrid new DataGrid data_grid addColumn Name data_grid addColumn Type data_grid addColumn License var col4 data_grid addColumn Description col4 minWidth 300 Fix the size data_grid width 600 Set the height to five rows data_grid rowCount 5 I Rosdetom 1e On CMe STERE data_grid move 10 70 Then add it to the stage addChild data_grid Pp DataProvider and XML loading code var dp DataProvider define a URL and make it a request instance var tells Sicainc Wile llatsie sami var request URLRequest new URLRequest url define a loader and have it load the request var url_loader URLLoader new URLLoader url_loader addEventListener Event COMPLETE completeHandler url_loader load request define a function that will execute after data has finished loading function completeHandler event Event void var ldr URLLoader event currentTarget as URLLoader create XML datastructure from loaded XML var xmlDP XML new XML ldr data create a new data provider with this and register it with the DataGrid dp new DataProvider xml1DP data_grid dataProvider dp Source code Directory http tecfa unige ch guides flash ex da
117. in these two layers As explained above in frame 2 Right click gt Insert Keyframe Do this for each of the three layers Repeat this for frame 3 Step 4 Change the flames for each frame I simply used the Free Transform tool and dragged the rectangle towards the lower right By doing this you also might have moved the rectangle itself just push it back underneath the rocket either with the arrows or with the selection tool In order to get this right you should each time put all the other layers rocket plus one of the flames in outline mode with the layers tool Flash frame by frame animation tutorial 58 30 B wo wt 2 120fps Dis 4 WVOSRLEZHS VR SY 7 mo SV AGS m pe a IE Rocket with flames in layers Step 5 Tuning e The animation is now a bit too fast We would like to get the kind of effect you see in old and cheap cartoons on TV e If you wish you can drag the keyframes each dot to the right I made a keyframe in every 5 but I also adjusted the Framerate to 30 second That s good TV quality click on workspace and adjust in properties panel rocket Dy W yellow flame Rocket frames stretched e Then you also could improve drawing of the flames see the Flash object transform tutorial and or add more keyframes Finally you could add motion tweens between the keyframes I didn t do this since motion tweening is not part of this tutorial Step 4 Test a
118. is a bug or a feature If you want to fill an area that is not entirely closed you can do so by modifying the gap size by changing the Gap size control in the tool panel options E g choose Close medium gaps Then click again on the shape or inside the area you want to fill e Ifthe paint bucket won t work on the insides of a complex drawing then e Make sure that the area is closed no gaps between the enclosing strokes or shapes e Also try making the area you want to fill into a single drawing menu Modify gt Combine Objects gt Union Eyedropper tool You can select a color from some spot on the workarea The tool will then automatically change to the paint bucket tool see above Erasor tool Erase stuff See the Flash object transform tutorial for details Option controls and tools configuration Some option tools are always displayed some only for certain tools Hand tool e Move the stage around useful for big drawings small screens or with a strong zoom Zoom tool Zoom in out Pen color Select the pen stroke color Fill color e Select the fill color Swap color e Change fill color to stroke color Configuration of the Tools panel The Tools panel can be configured via Edit gt Customize Tools Panel but for now I suggest not to change anything there Flash drawing tutorial 28 Configuration of drawing settings Select Edit gt Preferences and then change param
119. is reusable in the same document or in others Each symbol that you use create is inserted into the library The symbol itself is never directly used in an animation you always must create an instance In practical terms this means that you must drag the object from the library to the scene then give it a name as discussed below For a programmer a symbol can be understood as a kind of class i e a generic object To learn more read Flash embedded movie clip tutorial You also can use symbols as classes in ActionScript code e g create an instance and insert it into the scene You only can animate one single instance of a symbol in the same layer You later can of course replace the graphics inside If you want to create animations with multiple objects use either multiple layers or embedded movie clips When the interpolation includes a trajectory as opposed to a rotation for example a motion path will appear on the stage This path shows the position of the object in each interpolation frame In each frame you can change the position of the object and the interpolated trajectory will change To do so just drag the object to another position This will create new keyframes and therefore modify the path Finally in each keyframe starting ending and those that you added you also can transform other properties of the object for example size rotation tint 3D position etc It is important to understand that you will not change t
120. keyboard events We register keyboard events for missile and the button component The listener function is the same for both The move_it function will ask the target over which key was pressed who it is and then move it A missile addEventListener KeyboardEvent KEY_DOWN missile_control button addEventListener KeyboardEvent KEY_DOWN missile_control function missile_control event KeyboardEvent void move_it event function move_it event var key event keyCode Wels TAGE SVENTE icaAirCiSic 5 trace event CODE event keyCode switch key case Keyboard LEFT target x big_step break case Keyboard RIGHT target x big_step break case Keyboard UP target y big_step break case Keyboard DOWN target y big_step break ActionScript 3 interactive objects tutorial 350 J actionscript3 keypress move 1 swf File View Control Debug Press LEFT RIGHT UP DOWN Click on this text to see focus change Moving a Missile with key presses Example code e actionscript3 keypress move 1 html 11 e Source actionscript3 keypress move 1 fla 12 e Directory http tecfa unige ch guides flash ex6 action script 3 intro Note This code is not optimal for gaming since Flash has to wait for each key press event that the keyboard will send in order to move the missile one more step It s probably a better idea to have the rocket keep moving as long as there isn t a
121. lg 5 x J Fl File Edit Commands Window Help PA Ein RE M 5 Document Fl ib Poo aoe lt 7 PUBLISH Profile Pu Target Ly scipt A Create from Template Create New Learn Glass 7 BD Advertising BD Actionscript 3 0 D 1 introducing Flash 7 PROPERTIES BD AR for Android B Actionscript 2 0 J 2 symbols 4 00 FPS E Animation Bar 5 3 Timelines and Animation dei Yo E Banners BB AR tor Android 4 Instance Names Size 550 x 480 q x FREI BB Media Playback B AR torios D 5 Simple interactivity s lt 00 Y 00 Z 00 Stage M BB Presentations B Flash Lites D 6 Actionscript 90 Y ag z 90 SEN More ActionScript File O 7 Working with Data OCAR pIE Groa clear Flash JavaScript File 8 Building an Application ses peer fees Open a Recent Item Flash Project _ 9 Publishing for Mobile open ActionScript 3 0 Class O 10 Publishing for AIR ActionScript 3 0 interface O 11 Adobe Tv Extend Flash Exchange Getting started HTML Download the Toolkit for CreateJS O New Features Try the Toolkit for CreateJS and start E Developers publishing your Flash Professional CS6 animations for HTMLS F Designers LJ Don t show again Flash CS6 Welcome Screen To start working with a Flash file you may either use t
122. navigate between scenes e Either via the scenes panel or the Edit Bar displayed below the timeline If you can t see it Window gt Toolbars gt Edit Bar One advantage of using scenes is that you can just test a single scene menu Control gt Test gt Scene 37 Basic animation Flash animation overview Draft Overview Learning goals Learn about the various methods to create animations in Flash Learn about timeline representations of the Flash Professional Interface you can consult that later again Prerequisites Flash CS6 desktop tutorial or Flash CS3 desktop tutorial or Flash CS4 desktop tutorial Flash layers tutorial first part Flash drawing tutorial at least some of it Flash frame by frame animation tutorial not absolutely needed but probably useful Next steps Flash classic motion tweening tutorial optional CS3 style tweening for CS3 and better Flash CS4 motion tweening tutorial CS4 CS5 CS6 Flash shape tweening tutorial all AS3 TweenLite tweening engine CS3 CS6 intermediate Moving on Flash CS4 inverse kinematics tutorial Flash animation summary Flash CS4 motion tweening with AS3 tutorial After these or even before you should be ready for interactivity E g do the Flash button tutorial Quality and level This is just an overview article Introduction Animation means changing properties of objects e g position size or color over time In Flash CS3 to CS6 you can crea
123. one a lot Now let s look at mouse events Flash defines 10 different types of mouse events see the event overview table above Each of these events contains extra information the may be useful Let s have a look at the click event ojbect as defined in the Adobe BI reference manual This object conatins about 12 different properties that describe the event Property Value bubbles true buttonDown true if the primary mouse button is pressed false otherwise cancelable false there is no default behavior to cancel ctrlKey true if the Control key is active false if it is inactive currentTarget The object that is actively processing the Event object with an event listener localX The horizontal coordinate at which the event occurred relative to the containing sprite localY The vertical coordinate at which the event occurred relative to the containing sprite shiftKey true if the Shift key is active false if it is inactive stageX The horizontal coordinate at which the event occurred in global stage coordinates stageY The vertical coordinate at which the event occurred in global stage coordinates target The InteractiveObject instance under the pointing device The target is notalways the object in the display list that registered the event listener Use the currentTarget property to access the object in the display list that is currently processing the event What this techn
124. or you are an expert and know what you do Break the tween objects a part then save all your graphics to symbols right click on each and create symbol Then kill the tween objects in the library and start over again e You can have several motion tweens in a row within a layer Just hit F6 F7 to extend again e If you want to rotate an object instead of moving it change the rotate parameters in the parameters panel Classic motion tweening with shape modification 1 You can add a little bit of shape tweening to motion tweening if your animation is based as we told you on symbols To do so e Click on the symbol instances in start frame or end frame Then you can e Change tint alpha etc in the properties panel e Use the Free transform tool to rotate or change the size of an instance e Add filters in the filters panel it should sit next to the properties panel else add it with menu Window gt Properties Filters This is not shape tweening but consider using this technique before you try to do motion with a shape tween putting shapes in different positions in the two keyframes will not just move the shape but also transform it while moving 2 Alternatively add a shape tween inside of the movie clip Double click on the item in the library and edit it Note Timeline effects will be covered in a later tutorial Classic motion guide tweening Procedure e Select the layer for which you want to create a motion guide
125. own library Open the library panel and hit crtl V Next from your library panel simply drag the button on the stage This will create an instance of the button To remove it from the stage select it and hit the delete key You will see in the properties panel something like Instance of rounded orange and you now should give it a name e g my_button Customizing button symbols Editing buttons To customize a button symbol double click on either on the icon of the button symbol in the library panel or on an instance that you dragged to the scene This will let you edit just the contents this symbol i e you could think of it as Symbol editing mode You now could edit any graphic in any frame in any layer e g change font change the graphic or the color For now we suggest to leave the buttons as is for the moment and only adapt the label As you can see in the picture below on the Edit Bar from left to right you can see the that we are editing the orange bubble button Flash button tutorial 197 center center border gradient circle outer circle outer border Editing the Flash button symbol To change the label and font of a button symbol Remember to double click to get in the symbol editing mode You will see a kind of frame by frame animation movie read the Flash frame by frame animation tutorial if you are not familiar with this Lock all layers but unlock the text layer with the lab
126. pcmag com encyclopedia_term 0 2542 t tweening amp i 53271 00 asp 3 http help adobe com en_US Flash 10 0_UsingFlash WS424061 11 940D 4eff A9F3 16EFDA4F1340 html Flash frame by frame animation tutorial Draft Introduction Frame by frame animation means displaying a series of images one image after another That creates the illusion of a movie Real movies actually work that way too Learning goals Learn basic Flash CS6 frame by frame animation one kind of Flash animation Learn about embedded movie clips and symbol edit mode Save a frame by frame animation as reusable movie clip Learn about some object transformation features Prerequisites Flash CS3 desktop tutorial Flash layers tutorial Flash drawing tutorial for starters some of it at some point you ll have to dig into it a bit Flash animation overview Moving on If you want to do serious frame by frame animation you probably better drawing skills In particular you should read the Flash object transform tutorial and the Flash arranging objects tutorial since you ll have to change graphics from one frame to the next one If you respect our advice on being modular you also should look at the first parts of the Flash embedded movie clip tutorial The Flash article has a list of other tutorials You probably should continue with the Flash classic motion tweening tutorial or Flash CS4 motion tweening tutorial It will teach how to make fly things You also can read the
127. plus the head of a research assistant We show how we extracted just the lion about 30 minutes of work Step 1 Trace the picture e Menu Modify gt Bitmap gt Trace Bitmap e Parameters used were Color threshold 80 minimum area 5 Curve Fit tight Corner threshold normal This will lead to a set of shapes that are neither too big nor to small Step 2 Kill unwanted shapes and erase overlapping ones There are several kinds of tools and tactics you may use Vienna Lion picture e Use the Lasso in the tools panel to get rid of most the unwanted background but don t use it too close to the shape you want to keep e Magnify after this to something like 400 percent e Use the eraser tool e Use the lasso again or Shift Click on unwanted objects Then hit the DEL key e Use the eraser to draw fine lines elect a very small rubber if you have to cut wanted unwanted area in the same shape Then kill the unwanted one e Use the eyedropper to select a color and then the paint brush to repair some stuff e Do not use object drawing mode for this e You should set the paint controls to paint behind i e to repair outlines rather paint behind something when you touch it with the brush Step 3 Smooth it and make it a drawing object Select all the shapes hit CTRL A Then e Menu gt Modify gt Shape gt Optimize Set this to maximum e Menu gt Modify gt Union Step 4 Convert to symbol and use it The re
128. png License unknown Contributors image flash cs3 timeline options png Source http edutechwiki unige ch mediawiki index php title File Flash s3 timeline options png License unknown Contributors image flash cs3 framesl png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 frames1 png License unknown Contributors image Frame by frame timeline png Source http edutechwiki unige ch mediawiki index php title File Frame by frame timeline png License unknown Contributors image Keyframe_timeline png Source http edutechwiki unige ch mediawiki index php title File Keyframe_timeline png License unknown Contributors image flash cs6 stickman png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 stickman png License unknown Contributors image flash cs6 create new symbol3 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 create new symbol3 png License unknown Contributors image flash cs6 create new symbol png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 create new symbol png License unknown Contributors image flash cs6 create new symbol2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 create new symbol2 png License unknown Contributors image Free transform tool png Source http edutechwiki unige ch mediawiki index php title File Free_transform_tool png License unknown Cont
129. property Video timeline navigation using cue points In the following example we used the Media encoder to define most cue points i e they are integrated in the flv video file You also can add cue points in the properties panel after selecting the Flv playback component on the stage The second solution is much less time consuming since you won t have to re encode the video However cue points are less accurate Look first at this example e flash cs6 video goto cues html 6 Then you could also grab the source e Source flash cs6 video goto cues fla 7 Video office dks3 flv Flash augmented video tutorial 283 In order to understand this section you must know how to use buttons Read the Flash component button tutorial if you do not e Optional Add cue points using the Media encoder an external program described in the flash video component tutorial This option requires that you have a file in the original source format flv files won t work e Insert a video playback component from the component library Read the Flash video component tutorial if you do not know how e Add a video file using the source parameter e Add cue points in the properties panel as needed e Give the playback component on the stage an instance name like video Then copy paste the code below and adapt i e change the cue point names Alternatively use the Code snippets assistant x7 POSITIO
130. pv3d simple noclass pv3d fla http tecfa unige ch guides flash ex pv3d simple noclass pv3d cs4 fla http tecfa unige ch guides flash ex pv3d simple as pv3d html http tecfa unige ch guides flash ex pv3d simple as pv3d fla http tecfa unige ch guides flash ex pv3d Simplepv3d as http www andrestubbe com downloads papervision3d ExampleBaseCode as http blog papervision3d org http www papervision3d org http dev papervision3d org http pv3world com blog http pv3world com labs http papervision3d googlecode com svn trunk as3 trunk docs index html http dailypv3d wordpress com http pv3d org http wiki papervision3d org index php title Examples http extralongfingers com wordpress cat 4 http dailypv3d wordpress com 2010 01 12 titty bingo 2 http flashenabledblog com tutorials papervision 3d tutorials http flashenabledblog com 2008 05 12 papervision3d tutorials in flex 3 http papervision2 com http www brighthub com internet web development tags papervision aspx http www bukisa com articles 3 1862_papervision programming tutorial 3d text http www brighthub com internet web development articles 12902 aspx http www brighthub com internet web development articles 13650 aspx http www brighthub com internet web development articles 13775 aspx http www brighthub com internet web development articles 13776 aspx http www brighthub com internet web development articles 13880 aspx
131. quality ActionScript libraries available and that can be used by Flash designers that only possess very little programming skills Typical examples of such libraries are e Flash 3D libraries that allow a CS3 developer to create animated and interactive 3D scenes e Special purpose animation libraries like the FLINT particle system M that allows you to create stuff like fireworks and snowflakes e Tweening libraries like TweenLite 2 that allow you to define sophisticated animations with a few method calls instead of spending hours of drawing Physics engines like Box2DFlashAS3 Flash libraries can come in several forms see Flash formats and objects overview In this short tutorial we will deal with e swe compiled clips that include ActionScript code and other stuff e fla Flash CS3 CS4 source code files e as Action script code In this tutorial we just will a short overview If want to go through an example either read the FINT particle system introductory tutorial FLINT is a very useful library to create very cool animations with particles flying around or play around with the easier to use AS3 tweening platform List of libraries that are part of these Flash tutorials e FINT particle system e Flash Papervision3D tutorial e AS3 tweening platform Others e see Reusable AS components and libraries Installing and using libraries overview This is a short executive overview on using ActionScript libraries T
132. red green and blue in appropriate intensities makes white Wikipedia BH Now if you project each of these primary colors with different intensity overlapping colors will change Flash colors tutorial 178 This model is not how colors work when you mix real paint Then you d rather work with a red yellow blue model Color printers yet work with another model i e magenta cyan and yellow or more RGB colors can be encoded in various ways For Internet formats such as HTML CSS or Flash most often a hex triplet is used i e a hexadecimal 6 digit number With 2 hexadecimal digits you can represent numbers in the range of 0 to 255 With ordinary numbers you would represent a full red like this 255 0 0 meaning full red no green no blue The corresponding hex tripletis FF 00 00 FF0000 In terms of percentage of colors you get 100 0 0 Let s now have a look at a few colors in a diagram we copied from Wikipedia B on sept 8 2007 It represents Truecolor i e RGB values in 24 bits per pixel bpp In Truecolor colors can be defined using three integers between 0 and 255 each representing red green and blue intensities For example the following image shows the three fully saturated faces of the RGB cube unfolded into a plane lt 0 0 0 is black 4 yellow green cyan 255 255 255 is white 5 255 255 0 0 255 0 0 255 255 e 255 0 0 is red p red blue e 0 255 0 is gre
133. rocket html http commons uncyclomedia org wiki Main_Page http tecfa unige ch guides flash ex frame by frame intro flash cs3 rocket swf http tecfa unige ch guides flash ex frame by frame intro flash cs3 rocket uncompressed swf http tecfa unige ch guides flash ex frame by frame intro flash cs3 rocket symbol fla Flash classic motion tweening tutorial 63 Flash classic motion tweening tutorial Draft Overview Motion tweening means motion animation with interpolation as explained in the Flash motion interpolation overview In this article we present one of the possible methods i e the so called classic motion tween Learning goals Learn about classic motion animation called simply motion tweening in CS3 and classic motion tweening in CS4 CS5 Motion animation means moving an object from A to B to C through keyframes that you define and sometimes a user defined motion path Add some simple shape transforms to the animated object Learn how to to frame by frame animations with embedded movie clips Prerequisites Flash CS3 desktop tutorial Flash layers tutorial first part Flash drawing tutorial at least some of it Flash animation overview Flash frame by frame animation tutorial not absolutely needed but probably useful Immediate next steps Flash CS4 motion tweening tutorial CS4 CS5 AS3 TweenLite tweening engine CS3 CS5 intermediate Moving on Flash shape tweening tutorial Flash animation summary
134. rule avoid shapes unless you work like a painter or a drawing artist In other words put the controls of the Tools panel in object mode Graphic objects When you draw in object mode then you will produce graphic objects You can transform a graphic object into a shape right click gt break Apart Composite objects When select several objects you have a composite object When you group them together too There exist different variants e Group A group of graphics object and shapes e Mixed A group of graphics and e g a component instance Tip Make sure that you don t work on a composite object when you believe that you just edit a simple object E g watch out what you have selected before you turn it into a symbol Instances Instances are made from objects that you have in your library You only can apply certain transformations to these without changing the library objects E g you can e Change its tint or brightness and alpha transparency e You can scale rotate and skew it with a transform tool But can not apply envelope transforms e you can move them of course You can attach behaviors to instance object in ActionScript 2 In ActionScript 3 you can also do this but only via the timeline Some instances let you edit parameters i e compiled clips Flash formats and objects overview 415 Special objects Modifying lines and shapes can alter other lines and shapes on the same layer Se
135. some basic programming skills conditionals loops and arrays e Flash button tutorial and a little bit how event handling works ActionScript 3 event handling tutorial e Some XML for some sections Moving on e The Flex datagrid component tutorial shows how to do this with Flex e See the Flash tutorials Level and target population e Beginners Quality e Not done yet but this piece should help you solve some easy how to display data problems To do e Interact with the data grid Flash datagrid component tutorial 304 Data Grid level 0 Creating a DataGrid and filling it with data The DataGrid class is a list based component that provides a grid of rows and columns You can specify an optional header row at the top of the component that shows all the property names Each row consists of one or more columns each of which represents a property that belongs to the specified data object The DataGrid component is used to view data it is not intended to be used as a layout tool like an HTML table DataGrid Oy retrieved 10 12 30 October 2008 UTC Let s create a table to display information about Learning management systems i e a data grid with 3 columns Column 1 is called Name column 2 is License column 3 is Description We then also will add 4 rows of data You may have a look at the data grid 0 2 example now or open the thumbnail of the screen dump to the right Below we will show three solu
136. stage addEventListener Event ENTER_FRAME onEnterFrame private function onEnterFrame event Event void ff wen jena SES scene renderCamera camera Flash Papervision3D tutorial 407 Links Official and semi official sites Papervision 3D blog 101 Includes all the information news download information tutorials links good examples etc PaperVision3D 11 PV3D Demo page not very useful links to to blog papervision3d org dev papervision3d org 12 this is the PV3D developers blog to keep in touch with latest developments PV3World H Testing ground tutorial and other resources e directory of examples 14 Papervision 3D downloads 1 at google code ActionScript documentation Papervision3D Official Documentation 15 Packages and classes Other important sites Daily Papervision3d 16 Daily compilation of Papervision3d Websites Pv3d org 17 Papervision3D ActionScript and Flex examples and tutorials by John Lindquist Pv3world com 3 An experimental testing ground tutorial knowledge base and resource center for Papervision3D technology Examples Examples 18 Papervision3D Wiki Papervision Category 191 Meandering thoughts TittyBingo blog post with link Tutorials 21 Papervision 3D Tutorials and Papervision3D Tutorials in Flex3 22 Papervision 2 23 24 Papervision tutorials at Bright Hub Papervision 3D Programing Tutorial 3D Tex
137. stop in the last frame of that animation gotoAndPlay 4 will jump to frame 4 and play the rest as above Other kinds of buttons e Any movie clip symbol and other sprites can be made into a button e See also the built in Flash component button To turn a symbol into a button see for example the ActionScript 3 interactive objects tutorial changes just the cursor into a hand thing buttonMode true V AGG Van evene insener tke OI imo nmnNcall IDUCE ON thing addEventListener MouseEvent CLICK do_something function do_something event launch some animation i e an movie clip that is embedded in the TIMLA o Vi CHUNG SOMEMLAG ooo Links Manuals e Flash Professional Help Creating buttons 13 Adobe retr Feb 2013 Slide shows If you search the Internet you can find lots of Flash slide shows Some commercial some tutorials some good some outdated Here are a few Text tutorials e http www toxiclab org tutorial asp ID 79 e http www flashvault net tutorial asp ID 118 Video tutorials e Creating slideshows in Flash CS3 14 by Craig Campbell The basic version is free Examples of slide show tools e Slideshowpro isi commercial kit Flash button tutorial 212 References 1 http tecfa unige ch guides flash ex buttons intro 3 http tecfa unige ch guides flash ex6 buttons intro flash cs6 rocket launcher as3 fla 5 http tecfa unige ch guides flash e
138. take a few month or more for foreign language versions Therefore you might land in CS5 x documentation which doesn t matter much since the interface remains the same However there is good stuff on Adobe s website Most important Adobe online resources for absolute beginners Video tutorials can be useful to beginners tutorials at Adobe Flash Help topics e Flash Professional Help Help and tutorials 2 e This page centralizes various resources but not all in a single page I includes Adobe videos see above devnet articles see below external resources Adobe help pages and more Flash developer e Flash Developer center BI e You can find thematic introductions to certain topics e g Learn Flash Professional in five steps M or Animation Learning Guide DI e Consult Flash and AS3 links documentation for some navigation aids to Adobe s online documentation The overall Flash Help page e Flash resources 6 e In particular you can find HTML and PDF versions of the built in help You may find online HTML pages more practical than the internal help window since the built in window can not be detached from the Flash workspace and will hide your workspace area while your are reading An good trick is to dock the built in help against the Main tool panel as shown in the screen capture above Finally PDF versions of the on line site can printed consider printing in some cases Flash CS6 desktop tutori
139. that then got rejected or stalled Read Mike Chambers piece on ActionScript 3 and ECMAScript 4 H Basically there are two different ways of using ActionScript 3 Each has sub variants p Within a Flash CS3 environment e Use the Flash CS3 environment more or less as in the ActionScript 2 way i e you add bits of code to certain frames and that refer to objects in the library and or on the stage e Write action code with a class structure in a file then import to a frame through the properties panel e Write your code in a file and compile it you also may use Flash CS3 that way No drawings just code 2 Within an Adobe Flex environment Flex is a framework introduced by Adobe that also compiles into swf files Flex is meant to make it easier to conceive rich Internet applications that contain a variety of interactive interface elements buttons textfields lists of images etc The Flex SDK 2 is free to use but lives in a command line environment Flex Builder P provides a visual development environment It is free for students and educators starting upon request e Use the actionscript compiler bundled in the Flex framework to compile AS3 files See also our own Adobe Flex installation tips and AS3 Compiling a program e Write a Minimal MXML application that contains little else than a call to a main function An example of this can be found in Minimal MXML example by Moock 4 e Write a Flex MXML document that inclu
140. that were defined in CS6 either in the parameters panel or with ActionScript commands use video seek video findCuePoint XPS actionscript time Flash augmented video tutorial 286 Our solution above that is also adopted by the code snippets assistant is more verbose but works with all types of cue points Triggering animations from cue points Implementing animation that is triggered by the video s encounter of cue points works according to similar principles Look at the example first e flash cs6 video cue events html P You also could download the source code However make sure that you also grab the video or else substitute your own Source flash cs6 video cue events fla Video office dks3 flv Knowing all your cue points All cue points that are either embedded in an flv file or defined in the properties panel can bee seen in the properties panel Property Value align center Ly autoPlay M cuePoints palm_tree 00 00 isLive O preview None scaleMode _maintainAs _v skin MinimaFlatC A skinAutoHide O skinBackgroundAlpha 1 skinBackgroundColor E source office dks3 J volume books Navigation missing_ Event XPS Navigation ubuntu Event 00 00 00 00 Cue point list in the properties panel A more complicated solution is to to write a little program that tracks cue points The following
141. the bone of parent A select child B I did not manage to move bone ends with the Subselection tool for symbol based armatures only within a shape based IK IK nodes in symbol based armatures Symbol instances connected with bones become ikNodes I e when you click on a shape with the select tool you will see something like ikNode_3 in the properties panel e In the transform panel you now can change its size x and y and also it s rotation E g if you did some wild bone manipulation stuff you can realign a shape with the bone e Alternatively you also can drag the ikNode shape with ALT drag In both cases the bones will adapt i e stretch and rotate Dealing shape based IK shapes e To edit a shape in a shape based IK structure use the Subselection tool e If you click on the stroke the border of the shape you will see control points You then can drag control points or click on one and adjust the shape with the curve controls that will appear To add anew control point click somewhere on the stroke e To delete a control point select it and hit delete Tip Magnify a lot e g 400 it s really hard to get the right point Also CS4 behaves a bit erratically i e I sometimes have trouble inserting a new control point vs moving a curve control Therefore you also can use the pen tool and its sub tools to add remove controls Bind bones to shape points When you move the bone structure to a different pose you may
142. the pencil tool or the pen tool and then use the Paint Selection or Paint inside mode of the brush tool to apply colors Of course in the same drawings you can mix pencil pre built objects like rectangles and paint E g draw the outline of house with the pencil and then draw the roof with the paint tool Save each object as symbol Once you are happy with a drawing you should convert it to a reusable graphic symbol Right click gt Convert to Symbol Graphic E g call it cat You then can remove the layer you used to draw this object since the raw drawing is no longer needed Type Movie clip Registration Cancel C Button Graphi ERE Advanced Convert to Symbol convert a select object to a symbol Flash drawing tutorial 30 Once you have it in the library you can use several times in various sizes and distortions You also can copy the object and e g make a new one with different colors If you are unhappy with the results as I ought to be you can just break a graphic apart and restart again When you insert a library object into stage you can make it smaller Drag it from your library into the stage but onto another layer and then select the Free Transform tool Press Shift proportional reduction and make it as small or big as you like Importing clipart Flash can handle various vector formats and even better you can modify these within Flash However most free c
143. the playback component this component will not be seen by the end user so you can place it anywhere Customization of the component Click on the component and edit the parameters either in the Parameters or the Component Inspector panel CS3 only Then Flash video captions tutorial 297 set showCaptions to true if you want all users to see captions probably most users don t know how to turn it on or off so turn it on specify the source file of the Timed Text XML file to download So create the xml file now if you didn t so far Make sure to get the spelling right Timeline Output Compiler Errors so eram Projet Components Co Er LPT r gt P Fe Captions Lc ee LZ LAAI q Video o gt User Interface v LY Video JES p s EJ FLVPlayback MeS 4 Jag LE Seeks L Tome izd FLVPlaybackCaptioning GD BackButton jash cs3 video simple server caption2 fla flash cs3 video simple server caption fla x wa BufferingBar Properties Beer 6 4 captionsutton a GD ForwardButton kk SWF FullScreenButton Instance Name D MuteButton GD PauseButton Instance of FLVPlaybackCaptioning amp PlayButton x7 POSITION AND SIZE D PlayPauseButton SeekBar 2a StopButton VolumeBar E W 72 00 H x7 COMPONENT PARAMETERS Property Value autoLayout M captionTargetName auto flvPlaybackName auto showCaptions M es e
144. the two frames enjoy Tune e You also may at the very end after the last keyframe insert the original jpg picture Tracing bitmaps is a very difficult issue since there are many kinds of algorithms you can select from Basically the machine must be told how to group similar pixels together into a vector objects For example an algorithm can group together pixels with similar brightness similar color or try to find lines from similar pixels Publish Inthe HTML setting you probably want to take off the loop option You can admire the result Files flash cs3 shape picture morphing Directory http tecfa unige ch guides flash ex shape tweening intro Tracing a picture with Inkscape The free Inkscape BI editor can also trace If you don t own Illustrator and need more than CS3 can offer you may give it a try e File gt New Select the bitmap file e g a jpg e Select it e Path gt Trace Bitmap item or Shift Alt B e You then will see a popup with various options Click on Update to make as many trials you like Make sure your picture is selected Then play with e Brightness cutoff e Edge detection e Color quantisation Each of these does different sort of traces e Click on OK once you are happy e The original picture will still be there Remove it and save the result with File gt Save As Using two graphics from start This time I used another strategy e I made two different traces with
145. to the task you will engage in You can arrange the Flash Desktop in various ways see below The desktop is arranged in as many columns of panels as you like but usually about three We usually keep the following organization e the main tool panel and the properties panel to the left e the time line and the drawing area stage in the middle column e some tools panels and libraries in the right column Selecting the right desktop layout depends on both the task and the size of your screen Developing Flash with a small laptop is painstaking Play with the provided desktop layouts On top right there is pull down menu that allows you select from several preset configurations The same menu is also available through the Window gt Workspace menu After you added your own configurations the pull down menu might look like this F File Edit View Insert Modify Text Commands Control Debug Window Help Degree 0 g Timeline DKS ROR S a B Aa Animator Tools Mr LPT at ri Classic LI Lala Debug 5 EA kai bisd vV Designer J s Devel m s lt 14 ib rl jo Boe i A TIENE Essentials Small Sc amp Scene 1 erica Reset Designer Properties New Workspace Document Manage Workspaces Fl Untitled 1 7 PUBLISH Profile Default Publish Settings Target Flash Player 11 2 ly Script ActionScript 3 0 Ivy A Class A Distribute vy PROPERTIES zoo
146. tool shift select will select several and double click will select all bones e To killa bone select it and hit delete This will also kill its children e To edit properties of a selected or several selected bones use the parameters panel You can define 3 sets of parameters for each bone or set of bones e Joint translation is disabled by default i e the size of limbs remains the same To allow stretching of bones edit the child s Joint X translation and Joint Y translation parameters You then may define how far in x y direction you can stretch the joint i e the start of the bone Basically when you move a joint in x y direction which normally you can t the parent bone will grow or shrink and change its angle Flash inverse kinematics tutorial 261 e To limit rotation by default you can rotate in 360 degrees edit the Joint rotation parameters Positive numbers mean clockwise To rotate a bone turn it use the selection tool to drag the bone or the shape All bones that are in the same branch also will move But if you select a spot closer to the joint they will move less To rotate a bone without moving the parents shift drag hold down the shift key To move a joint select the joint with the free transform tool In other words you simple move the rotation point i e little white circle you should know from old style CW motion animation You also can play with the transform panel If you want to stretch
147. transform tutorial 155 A simple oval this is not what you want if your purpose it to change its outline Let s now make a banana Ok now let s distort an object Let s start with an oval drawn in object mode See the picture above or below Make a rounded banana with the selection tool e First deselect everything including the banana e g click on the gray workspace area e Select the select tool e Then move it close to the stroke outline e When the cursor turns into a curve then hold down the mouse and drag R Select tool curve icon Here is a result a nice banana A simple oval turned into a banana Make sharper ends e Copy paste the banana if you like the old one select ctrl c ctrl v e Again deselect everything Then hold down the ALT key and slowly search around the ends of the banana e If you see the angle icon then drag The angle icon won t show up everywhere it s basically meant to drag corners Flash object transform tutorial 156 Select tool curve icon Result two bananas of different shape A sharp and a round banana You then can fine tune things with the subselection tool see below Turning lines e To turn a line made with the line tool not the pencil use the select tool and move to one end When the edge icon shows up you can turn stretch a line Edge angle icon turning stretching a line Hint To rotate around a random ro
148. unige ch guides flash ex motion tweening intro flash cs3 motion guide tweening2 fla 13 http www e frontier com 14 http en wikipedia org wiki Anime_Studio 15 http en wikipedia org wiki Toufee 16 http www toufee com wiki index php Main_Page 17 http ktoon toonka com 18 http en wikipedia org wiki KToon 19 http www adobe com designcenter video_workshop 20 http en wikipedia org wiki Flash_animation Flash CS6 motion tweening tutorial 81 Flash CS6 motion tweening tutorial Draft Overview Motion tweening means motion animation with interpolation Learning goals Learn about basic motion animation Add some simple filter transforms e g size color to the animated object Learn how to use frame by frame animations within embedded movie clips Prerequisites Flash CS4 desktop tutorial or Flash CS6 desktop tutorial Flash layers tutorial first part Flash drawing tutorial at least some of it Flash frame by frame animation tutorial not absolutely needed but probably useful Flash motion interpolation overview Moving on Flash shape tweening tutorial Flash animation summary Flash embedded movie clip tutorial explains in some more depth how to use embedded clips After that you should be ready for interactivity E g do the Flash button tutorial Quality and level This text should technical people get going It s probably not good enough for beginners but may be used as handout in hand
149. var f1_ToPlay Boolean true function start_stop_sound evt MouseEvent void want to play aise El torier Need to capture the SoundChannel that is used to play cl SC eplay O else Flash sound tutorial 145 EL SC erao switch state of wanting to play eL UOwley Y tell Wor uilas7 5 Example code e flash cs6 stop start sound fla 7 source e flash cs6 stop start sound html 8 Example using the play and stopAll methods For an example used in the Flash drag and drop tutorial look at flash cs3 drag and drop matching 3 PI e Source flash cs3 drag and drop matching 3 fla 10 Play sounds randomly with one button With this exemple you will learn how to play different sounds with one button import flash utils Dictionary import flash events MouseEvent loading sounds in our case the four sounds correspond to the sounds of the notes C D F G var request URLRequest new URLRequest http tecfaetu unige ch etu maltt tetris karanis0 stic 1 ex6 C 23_2 mp3 var ci_diese Sound new Sound ci_diese load request var request_two URLRequest new URLRequest http tecfaetu unige ch etu maltt tetris karanis0O stic 1 ex6 D 23 mp3 var d_diese Sound new Sound d_diese load request_two var request_three URLRequest new URLRequest http tecfaetu unige ch etu maltt tetris karanis0O stic 1 ex6 F 23 mp3 var f_diese Sound new Sound
150. vector art Clip art vendors may provide images of just one type or both Wikipedia This article is also part of the Flash tutorials Formats used in repositories The most common bitmap formats for clipart distributed on the web is jpg png and fig But one may also find bmp for smaller things or TIFF and TGA Most common vector formats are e Adobe s EPS Encapsulated PostScript also the related PDF format e Microsoft WMF 2 Windows Metafile and its variants e EMF Enhanced Metafile e WMZ Compressed Windows Metafile e EMZ Compressed Windows Enhanced Metafile e SVG in the open source community Illustrator ai file rarely Importing clipart to Flash Most often clipart is distributed in wmf format Windows Meta File format or the more recent emf Windows extended Flash can handle this format It also can handle e Illustrator ai format e Enhanced Windows Metafile emf handles curves better than WMF e Freehand e Flash swf e Autocad dxf It can not handle e SVG EPS to verify To import either copy paste it from an open application or use File gt Import either to stage or to library If you own Adobe Illustrator first import to Illustrator then select copy and paste the Clipart from Illustrator to Flash Illustrator can handle many formats SVG and EPS for example Since most open source clipart is in SVG OpenClipArt 4 which Adobe Flash can
151. web site with the AS 3 button component Design goal of the example The goal is to make a sort of simple Flash web site The user at all times will have a menu to the left that will allow him to navigate to different contents We will build several versions of this Have a look at the menu based slide show 4 example before you start reading Also we will introduce some ActionScript in a way that is hopefully appropriate for non programmers Notice In the Flash button tutorial we also demonstrated how to create similar applications with built in and home made buttons symbols Implementation of a global menu This example explains how to build a simple Flash site i e a series of pages through which the user can navigate Different versions with different buttons are introduced in the Flash button tutorial Example file e flash cs6 simple slide show menu html 4 e flash cs6 simple slide show menu fla 5 Step 1 Planning the layers In this example we will work with five layers e Actions will include a little Action Script code e Buttons will include the buttons displayed on all pages e Pictures Contents we want to display e Credits A special page for the who s done it we also could have used the pictures layer for this e Background A simple background that will remain stable Your layers should look roughly like this Actions D Buttons E Credits D Pictures mn Background T
152. yellow play head e Remove frames from the start and or the end Use the small white triangles Flash video component tutorial 243 v Summary Output 00 00 49 23 Adobe Media Encoder editing export settings Once you are done e Click on OK The click on the green arrow button to encode as above Links Finding videos on the Internet Finding and downloading videos e You may download videos from the Internet make sure that copyright allows you to do so Getting videos from sites like YouTube is not easy without download helpers see below Therefore try sites like http vimeo com first e Firefox video download helper extension https addons mozilla org en US firefox addon 3006 e Google video search http video google com Use advanced search 4 in order to restrict search to duration Video sites e http vimeo com Includes open source creative commons videos After a search you can tick a box for only showing downloadable videos e http vids myspace com Needs special tools to download e http youtube com Needs special tools to download Flash video component tutorial 244 Adobe documentation e Flash Professional Create video files for use in Flash 5 at Adobe retrieved Feb 18 2013 e The FLVPlayback component 6 e Media Encoder Help Help and tutorials O at Adobe retrieved Feb 18 2013 245 More animation Flash mask layers tutorial Draft
153. 0 obj y GO Trien vy 10 else ActionScript 3 interactive objects tutorial 340 GSJ o COJ OLL xF DJ oy OSJ OLL ye Oe Sam a iNe SS OE function resizelt event MouseEvent void var obj event target initialize properties if needed if obj hasOwnProperty bigger obj bigger false remembers its size big or not obj buttonMode true make the object bigger obj width obj width 2 obj height obie neice 26 obj bigger true function downsizelt event MouseEvent void var obj event target if obj hasOwnProperty bigger obj bigger false remembers its size big or not obj buttonMode true if orginal width is not the same as current we assume that it s bigger and then divide it by 2 if obj bigger true ClO Wielcin Clo owichlein 2 obj height obj height 2 fi pegging function startDragging event MouseEvent void ActionScript 3 interactive objects tutorial 341 var obj event target obj startDrag function stopDragging event MouseEvent void var obj event target obj stopDrag Pe Huge function hideShow event MouseEvent void var obj event target target becomes invisible obj visible false friend becomes visible obj friend visible true fu ernro maa we onlie moire Cree enoo S function transformCatColor event MouseEvent void
154. 2 ss0 412 cos0 109 Sesi ep TweenLite to mc 2 x 250 ease CustomEase byName myCustomEase easeParams Array Allows to pass parameters to the ease function see above TweenLite to my_mc 2 _x 200 ease Elastic easeOut easeParams 1 5 2 45 volume Number To change a MovieClip s volume i e the SoundTransform property Set this to the value you d like the MovieClip to end up at or begin at if you re using TweenLite from tint Color_uint To change a MovieClip s color set this to the hex value of the color you d like the MovieClip to end up at or begin at if you re using TweenLite from An example hex value would be OxFFO000 If you d like to remove the color from a MovieClip just pass null as the value of tint removeTint Boolean To remove the tint of a DisplayObject Use the value true frame Integer To tween a MovieClip to a given frame roundProps Array Allows to define inbetween rounding values E g WpSSmMeS CO hy Ne Sip RS SOO AveO Isewaleieg _oxsZ250 37350 I 2 onstart Function If you d like to call a function as soon as the tween begins pass in a reference to it here This can be useful when there s a delay and you want something to happen just as the tween begins onStartParams Array An array of parameters to pass the onStart function onUpdate Function If you d like to call a function every time the property values are updated on ever
155. 5 code i e the previous but still popular version in nov 2008 should look like this package import flash display Sprite import flash events Event import org papervision3d cameras Camera3D import org papervision3d scenes MovieScene3D SWF width 400 height 400 backgroundColor 0x000000 frameRate 30 public class ExampleBaseCode extends Sprite private var container Sprite private var scene MovieScene3D private var camera Camera3D Flash Papervision3D tutorial 406 public function ExampleBaseCode create the container the scene object will place all displayable objects into this container container new Sprite center the containers screen coordinates to the middle of the flash stage the scene world center x 0 y 0 z 0 is now where the screen coordinates of the container are x 200 y 200 container x 200 container y 200 don t forget to add the container to the stage otherwise you ll see nothing aclclClaaLilel concainer p create a scene scene new MovieScene3D container scene new Scene3D container more primitive alternative compare scenes Scene3D as and scenes MovieScene3D as to discover why create a camera camera new Camera3D camera z 500 push the camera a bit backward camera zoom 5 add something to your scene scene addChild something create an enterframe loop
156. 6 or right click gt Insert Keyframe This will copy contents from previous keyframe to the new one To add new keyframes that are empty In the timeline in the right layer click into the new frame or move the read playhead e Then hit F7 or right click gt Insert New Keyframe e Then draw something new or copy paste from an other frame Tips e Play with the frame rate but don t go too low nor too fast To slow down animation you rather should space out keyframes click on a keyframe then drag it in the timeline or hit F5 to extend a frame e To align objects in several frames enable Edit multiple frames in the edit bar Move the onion skin handles on top of the timeline to select the frames you want to work with don t forget to disable this once you are done If you are lost go back to the Flash frame by frame animation tutorial CS4 CS5 CS6 motion tweens e Create a new layer e Place a single symbol instance inside e Right click and select Create motion tween e Modify the motion path either by manipulating the path itself or by selecting a frame in the timeline and then dragging the object If you are lost go back to the Flash motion tweening tutorial Classic motion tweening Most readers could ignore this section You will have to learn this technique if you must work with flash projects made with CS3 Simple classic tweens You only should animate non editable objects symbols text boxes etc I
157. AS3 libraries Oy Be Se The Flash framework In the past Flash was just a web animation interactive multimedia technology Today 2008 Flash is a serious contender for one stop rich internet application technology as the following picture shows Adobe Flash Platform for RIAs a Adobe Adobe Rich Internet Applications Content and Applications Rich Content Client Framework E 54 Adobe Flex ore Ff Adobe Flash Player Runtimes Tmaserpt E rime css ac Operating Systems Mac Windows Linux and others Client XML JSON SOAP RSS ATOM AMF etc Server Sener S7 Lc Fb Adobe Scene7 Adobe ColdFusion AdobeLiveCyde ES Adobe Flash Media Server 3 HTTP HTTPS Raw Sockets RTMP ASP NET PHP Java Web S Python etc Adobe Flash Platform for RIAs Retrieved nov 2008 from http www adobe com devnet actionscript articles atp_ria_guide html Flash Flash versions compared CS3 was a major break from earlier versions Flash 8 and earlier with respect to ActionScript ActionScript 3 is much more difficult to learn than ActionScript since it uses a modern typical user interface paradigm In Flash 8 one could directly attach scripts to objects In Flash 9 and later scripts are attached to frames Changes Additions in CS4 e A completely redesigned interface e Easier motion tweening CS 3 motion tweening was renamed classic tween e inverse kinematics e Support for 3D animation of 2D
158. After that you should be ready for interactivity E g do the Flash button tutorial Quality and level This text should technical people get going It s probably not good enough for beginners but may be used as handout in hands on class That is what Daniel K Schneider made it for It aims at beginners More advanced features and tricks are not explained here Materials fla file you can play with http tecfa unige ch guides flash ex motion tweening intro In CS4 the motion tween tool has been replaced with an easier tool but this tool is still available as motion tween classic as explained further down Flash classic motion tweening tutorial 64 Introduction If you want to work on your own project In this tutorial we will mostly work with graphic and motion clip symbols So the first thing you may have to do if you want to work on your own project is to convert one of your graphics to either a graphic or a motion clip symbol and to put it in a separate layer e Right click on the object click down the right mouse button and then select Convert to Symbol Alternatively just select the object and hit F8 e Each object to be animated should be in a separate layer All the other objects may remain in a single layer Type Movie clip Registration Cancel Button Graphi lag Advanced pai So before we start make sure that you have a least one graphic symbol i e the object
159. Click on the rectangle next to the layer name If this rectangle turns empty then you only should see outlines of its objects e You also can change the outline color by double clicking on the rectangle E g if your background is green like the grassy hills in our example the outline should be of a different color Lock and hide layers Click on the dots below the appropriate hide lock display icons in the panel to apply locking hiding displaying to a single layer or on the icons themselves to apply an operation to all layers e g lock them all TIP Always lock all layers and then just unlock the layer on which you are working This way you can prevent yourself from making mistakes Moving layers To move a layer in the stack simply grab it with the mouse and drag it up or down Position of the layer has an influence on the order objects are drawn E g if a moving object should pass in from of a tree and it doesn t then drag the animation layer up or down Drawing order depends on the load order defined in the Publish Settings File menu Example The following screen capture shows hidden and locked layers e The painting layer is active the pencil is shown The objects layer only shows outlines and in addition it is locked the lock sign is on and the rectangle is empty Its objects are drawn in light green i e the color of the rectangle e The Sky layer is hidden The red X sign is on J amau Gee Geerep sampuna j
160. Contributors image flash_direction_lines png Source http edutechwiki unige ch mediawiki index php title File Flash_direction_lines png License unknown Contributors image flash_direction_lines2 png Source http edutechwiki unige ch mediawiki index php title File Flash_direction_lines2 png License unknown Contributors image flash_direction_lines3 png Source http edutechwiki unige ch mediawiki index php title File Flash_direction_lines3 png License unknown Contributors image flash cs6 underneath pen tool png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 underneath pen tool png License unknown Contributors image flash cs6 free transform png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 free transform png License unknown Contributors image flash cs3 transform size png Source http edutechwiki unige ch mediawiki index image flash cs3 transform rotation png Source http edutechwiki unige ch mediawiki i php title File Flash cs3 transform size png License unknown Contributors ndex php title File Flash cs3 transform rotation png License unknown Contributors image flash cs3 transform skew png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 transform skew png License unknown Contributors image flash cs3 change rotation point png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 change rotati
161. Debug Window Help Designer 5 x lt Instance Name gt Movie Clip Instance of Stickman 7 POSITION AND SIZE X 285 50 Y 205 35 Bgd Pk bh Distribute e fh ty Match size Space am i Align to sti Original No Change O Align to stage Transparent Value First drawing of our stickman In order to edit this movie clip symbol again double click on the object on the stage or double click on the library item In the first case you will see the background as shown in the next picture Flash frame by frame animation tutorial 49 Fl File Edit View Inset Modify Text Commands Control Debug Window Help Scale Normal _ CJ Hinting Cap S v Join A v O Distribute Match size i as D Align to stage First drawing of our stickman Simply click on Scene 1 about the stage in order to return to the stage Step 2 alternative Create a new embedded movie clip first Insert a new symbol Ctrl F8 Flash frame by frame animation tutorial 50 stickman cs6 fla x nasu wurueKet symboLfla x flash cs6 rocket fla x Properties 2 Scene 1 6 4 Document Fl stickman cs6 fla 7 PUBLISH Profile Default Target Script Class
162. Flash Tutorials Daniel K Schneider ed PDF generated using the open source mwlib toolkit See http code pediapress com for more information PDF generated at Fri 31 Oct 2014 04 56 08 CET Contents Articles Flash and the CS6 authoring tool Flash Flash CS6 desktop tutorial Basic drawing Flash drawing tutorial Flash layers tutorial Basic animation Flash animation overview Flash frame by frame animation tutorial Flash classic motion tweening tutorial Flash CS6 motion tweening tutorial Flash shape tweening tutorial Flash embedded movie clip tutorial Flash animation summary Use of external media Flash video component tutorial Timed Text Flash sound tutorial Clipart Texture Advanced drawing Flash object transform tutorial Flash arranging objects tutorial Flash colors tutorial Flash bitmap tracing tutorial Flash pen tutorial Basic interactivity and use of components Flash button tutorial Flash components overview 18 18 33 37 37 40 63 81 96 106 113 126 126 133 138 147 151 153 153 169 174 186 192 194 194 212 Flash component button tutorial Flash video component tutorial More animation Flash mask layers tutorial Flash inverse kinematics tutorial Flash CS4 motion tweening with AS3 tutorial More interactivity Flash using embedded movie clips tutorial Flash augmented video tutorial Flash video captions tutorial Flash actions frame tutorial F
163. Flash shape tweening tutorial which tells how to do morphing animation Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Level It aims at beginners More advanced features and tricks are not explained here Materials fla files you can play with http tecfa unige ch guides flash ex6 frame by frame intro Alternative version Flash CS3 frame by frame animation tutorial deprecated The principle Flash frame by frame animation tutorial 41 Purpose Frame by frame animation gives you very detailed control over the movie since it s the technology used to make animation pictures until recently before different 2D and 3D computer animation techniques came into the existence Disadvantage is that frame by frame drawing is very time consuming work Therefore most often designers use a combination of frame by frame animation and interpolation techniques called tweening in Flash lingo Often frame by frame animation is used to animate single objects that in turn can be used as part of larger Flash animations A typical example are buttons that highlight when you move the mouse over them or when you click on them Flash animations are defined through so called timelines Each flash file has a timeline i e the so called main timeline Within each flash file you then can insert so cal
164. Inkscape e Tused one for keyframe 1 and the other for keyframe 2 and saved them in SVG e Since Flash cannot import SVG why the hell I open these files in Illustrator and then pasted to Flash I then used the erasor tool to isolate a few graphics shapes e g hair and eyes I then put hair and eyes in a different layer e I finally inserted some shape hints see the flash shape tweening tutorial Changing the background color Flash bitmap tracing tutorial 192 e Jadded a new layer and painted a rectangle over the stage in Keyframe 1 e Same for a new keyframe Then I also added a shape animation between the two You can admire the result It s also fairly ugly despite some extra work Source Fla file flash cs3 shape picture morphing fla 12 Directory http tecfa unige ch guides flash ex shape tweening intro Ok that would be the only picture of me in edutech wiki In addition I made these very quickly which is not what you should do in a real production The result is really ugly and useless Links e Convert bitmaps to vector graphics 5 Adobe Flash C3 Help e Control shape changes with shape hints 6 Adobe Flash C3 Help References 1 2 3 4 5 Ga http tecfa unige ch guides flash ex tracing intro flash cs3 tracing parameters html at http tecfa unige ch guides flash ex shape tweening intro flash cs3 shape picture morphing3 htm http tecfa unige ch guides flash
165. Inspector flash cs3 rocket hello fla 2 items Name Type Use Count Lint 4 m Hello and rocket movies in your library Step 2 Drag the symbols movies to the stage Drag the item in the library onto the stage e Use the Free Transform tool to resize it or to rotate it see the Flash object transform tutorial if you don t know how e Hold down the SHIFT key when you resize it from a corner Here is the result with a picture flash cs3 rocket hello swf ol x File View Control Debug Hello and rocket movies used Of course you then also could use imported movie clips within motion animations e g as in this Flying rocket DI Source code is flash cs3 rocket moving fla BI Flash embedded movie clip tutorial 112 Important notice Importing swf files will only work with very simple animations Instead of importing directly the swf you rather should consider the next strategy i e use embedded movie clips Creating an embedded movie clip from a non embedded animation Let s assume that you have an interesting animation in fla file that you rather would use as a embedded movie clip Step 1 Create a new movie clip symbol see above e Let s assume that the file is called clips fla e Menu Insert gt New Symbol e Select Movie Clip and give a good name You now should see a blank stage be in symbol edit mode Hold that Step 2 You can either copy full layers or just selected frame
166. MouseEvent CLICK restart Flash component button tutorial 236 function restart event MouseEvent void gotoAndPlay 1 Animation Example and code x 1 e You can see the flash cs3 cloud animation sound2 example e Source components intro flash cs3 cloud animation sound2 fla 12 The files are here http tecfa unige ch guides flash ex components intro Component buttons to start stop embedded movie clips See the flash embedded movie clip tutorial for details 13 E g in the flying kites example we use the following code kite stop start_button addEventListener MouseEvent CLICK start_kite stop_button addEventListener MouseEvent CLICK stop_kite function start_kite event MouseEvent void kite play function stop_kite event MouseEvent void kite stop kite is the instance name of the embedded Kite movie e kite play will play the Kite movie e kite stop will stop the Kite movie In other words if you want the user to be able to start stop an embedded movie clip you can do this All your embedded animations then can sit in a single lone frame no animation on the main timeline On other example using several frames that is discussed in the flash embedded movie clip tutorial is an example U4 from an exam Links e Using ActionScript 3 0 Components U1 Adobe References 1 http livedocs adobe com flash 9 0 main wwhelp wwhimpl js html wwhelp htm
167. MovieClip or any object whose properties we re tweening 2 duration Number Duration in seconds of the tween 3 variables Object An object containing the end values of all the properties you d like to have tweened or if you re using the TweenLite from method these variables would define the BEGINNING values Putting quotes around values will make the tween relative to the current value For example x 20 will tween x to whatever it currently is minus 20 whereas x 20 will tween x to exactly 20 Here is a simple example that will move a symbol called mouse to position x 120 in about 1 5 seconds TweenLite to clip_mc 1 5 x 120 Properties you can defined in the variables object You can change many properties at the same time and this one reason why this library is so nice In the following example a movie clip called clip mc will move to position x 120 it s alpha will fade to 50 and its volume will fade out completely TweenLite to clip_mc 1 5 alpha 0 5 x 120 volume 0 alpha Number AS3 tweening platform 376 The alpha opacity level that the target object should finish at or begin at if you re using TweenLite from For example if the target alpha is 1 when this script is called and you specify this parameter to be 0 5 it ll transition from 1 to 0 5 autoAlpha Same as changing the alpha property but with the additional feature of toggling the visible property to false if the alpha ends at
168. N AND SIZE S W 352 00 H 225 00 x7 COMPONENT PARAMETERS Property Value align autoPlay M cuePoints palm_tree 00 00 isLive i preview scaleMode _maintainAspe df skin atoi skinAutoHide source office dks3 flv A Navigation missing_ 1 Event Flash_bo 00 00 21 00 ActionScript XPS Navigation ubuntu Event Cue points attached to selected video playback component Tip e Cue points that you add in the properties panel are attached to the playback component instance If you remove Playback instance from the stage the cue points will be gone Therefore you might prefer adding them directly in the ActionScript code like this your_video_component_instance addASCuePoint 40 End video addASCuePoint 120 Hot moment Now let s see how to implement a button that move the user to a given spot in the video The logic is very similar as the one use for timeline navigation 1 Define a button 2 Define a click event handler for the button Flash augmented video tutorial 284 3 In the function define video navigation plus other stuff Below is code fragment that illustrate the principle Note the two lines of code needed for navigation In your own example you would to replace video the name of playback instance on the scene and the name of the cue point i e XPS btn_laptop addEventListener MouseEvent CLICK jumpLapTop function jumpLapTop eve
169. Object or merge mode e In merge mode you only can paint fills e In object mode you can add a stroke to your painting by default it is off Look at the properties panel The Brush Mode With the Brush Mode in the options section not the properties panel you can select the paint mode Make sure to understand these and to verify that the wanted mode is on else you likely run into frustrations e Paint Normal paints over lines and fills on the same layer Like painting with a heavy paint e Paint Fills Fills empty areas leaving lines unaffected e Paint Behind Paints in blank areas of the Stage on the same layer leaving lines and fills unaffected this may be be default I am not sure e Paint Selection Applies a new fill to a selection Therefore before you start painting select a fill color first then select the object with the selection tool then paint This is the quickest way to color drawings e Paint Inside Fills the area within a fill i e where you start paining and does not overpaint lines If you start painting in an empty area outside a fill painting will not affect existing filled areas Selection of brushes and size Choose from the options in the options section Flash drawing tutorial 26 Ink Bottle tool This tool allows you to apply color changes to the strokes of drawings e Select the ink bottle e Then select either a Stroke color and or a Fill Color if the object is a graphic
170. PROPEEN defined above data_grid addItem cl selected_colors 0 c2 selected_colors 1 c3 selected_colors 2 for var i Number 0 i lt button_list length i button_list i visible true selected_colors new Array Here is the complete AS code as in the downloadable fla file see below Import the necessary packages import fl controls DataGrid import fl controls ScrollPolicy import fl controls dataGridClasses DataGridColumn Mit DACCI ORTONE Now create a a new instance of DataGrid and name it data_grid var data_grid DataGrid new DataGrid var coll DataGridColumn new DataGridColumn cl CcolliMheaderke ti auie ehonrcer iie var col2 DataGridColumn new DataGridColumn c2 col2 headerText 2nd choice var col3 DataGridColumn new DataGridColumn c3 colbir headerkex t sLsieCmehi nsec els data_grid addColumn coll data_grid addColumn col2 data_grid addColumn col3 VEE the SEBS data_grid width 300 data_grid height 300 Flash datagrid component tutorial 311 fi Seite tha ineuicive coq lye Lows data_grid rowCount 5 I Posttiom He Ga CNS STERS data_grid move 250 70 Then add it to the stage addChild data_grid Vie Buttons code fii Ta AS Coa ase Gi HASGECAMeS AANS WE Creace wa CSS var button_list Array blue cyan green pink red yellow For all we register the same Event Handler function for var
171. Paste in place CTRL SHIFT V into layer Rocket motion unlock it first e If the rocket flies from right to left get the selection tool right click in the tween span and select Motion Path gt Reverse Path Adjust the rotation of the rocket in the path a Automatic e Select the motion path e Change the setting in the properties panel to auto rotate b Adjust the rotation of the rocket manually creating some keyframes e Move the playhead to the start either left or right e Select the Free Transform tool e Move the rocket a bit and adjust rotation This will create new keyframe that you can see in the timeline e Repeat that a lot until the rocket flies smoothly BD Q T a2 a aaa IAN Z aaa F Rocket motion s s J Sun motion rocket Movie Clip v of Rocket Swap TION AND X 205 70 Y 159 65 S W 108 00 H 108 20 SITION AND VIEW R EFFECT yle None v Adjust rotations Solution e flash cs 6 motion tweening a clip html 8 e flash cs 6 motion tweening a clip fla 9 Flash CS6 motion tweening tutorial 95 Links Creating a simple Flash animation 10 by Doug Winnie Adobe 2 2009 retrieved Jan 2013 Animation Learning Guide for Flash CS 5 5 ok link as of Jan 2013 e Exploring motion tweens m1 e Manipulating motion tweens 12 e Using motion paths in animations 13 e Using the Motion Editor 14 e Animating with p
172. Rocket launcher example The goal is make a flash animation that stops at frame one when the file loads The user then will see a button on which he can click The animation should restart in frame 2 after the user clicked Preparation e Create a background layer we called it sky e Create a layer for the button and insert a button Create a motion tween that starts in frame 2 e If you do not how to create motion animations please read the Flash CS6 motion tweening tutorial e Create a new layer we called it Rocket e Position the playhead in frame 2 e Hit F7 in order to create a new empty keyframe Insert a drawing make it a symbol and then create the motion tween The final structure of the timeline will look like this the Action layer will be added later Flash button tutorial 199 gt a of E T E E T Action B P Rocket n a sky E i aa daeh jannu ii oos E flash cs6 rocket launcher as3 fla gt Esei 6 amp Rocket launcher timeline Drag a button to the stage e You can adjust its size with the Free Transform Tool but make sure that you are not in symbol edit mode i e working on the button graphics e Edit the text field double click twice on the text for example make this label Go for example Name the button instance We have to give the launch button not the symbol in the library but the thing we got on stage a name Once you drag a library item to th
173. S6 there exist two variants 1 Classic motion tweening as known from CS3 and earlier versions See the Flash classic motion tweening tutorial You can skip this 2 Motion tweening a more oject oriented method introduced in Flash CS4 See Flash CS4 motion tweening tutorial 3 Shape animations e Shape tweening since you can position key frames of shapes in different positions 4 Motion and shape tweening with ActionScript code There exist many different possibilities e g e Using a third party library like the Greensocks AS3 TweenLite tweening engine Must need to know for everyone who plans to create interactive educational scenarios e Dynamically changing x and y positions of a display object over time e g through using the Timer class See the unfinished Flash games tutorial for an example e Using the Adobe fl motion classes See the Flash CS4 motion tweening with AS3 tutorial 4 Inverse kinematics e Inverse kinematics is the animation of armatures for shapes or connected symbols instances See Flash CS4 inverse kinematics tutorial What can be animated with built in motion tweening In Flash 9 10 11 you can animate all sorts of compound objects e Symbols i e any object that is an instance of a library object e g e Graphic symbols e Movie clips e Buttons e Compound objects things that you grouped together e Text boxes The ground rules are the following e Motion animation means just changing x y positi
174. This entry is part of the Flash CS3 tutorials and it should be upgraded to CS6 at some point Daniel K Schneider talk 20 12 25 February 2013 CET Introduction Learning goals e Learn how to add mask and masked layers to animations Prerequisites e Flash CS3 desktop tutorial e Flash drawing tutorial e Flash object transform tutorial e Flash colors tutorial e Flash frame by frame animation tutorial e Flash motion tweening tutorial e Flash shape tweening tutorial e Flash embedded movie clip tutorial for guided masks Moving on e The Flash tutorials article has a list of other tutorials E g you could start learning how to make interactive programs with the Flash button tutorial Level and target population Beginners but see the prerequisites Quality e Rather low This tutorial doesn t contain many details just some short how to s and feature demonstrations To Do e Filters For spotlight effects and transitions use a mask layer to create a hole through which underlying layers are visible A mask item can be a filled shape a type object an instance of a graphic symbol or a movie clip Group multiple layers under a single mask layer to create sophisticated effect About mask layers 1 retrieved 16 51 8 October 2007 MEST Flash mask layers tutorial 246 Mask and masked layers Masks are layers that will allow you to see what is underneath through a sort of hole i e a drawing You then can a
175. We suggest you use the selection deselect everything first or the subselection tool to to this 0 n EBELE ET 42 2a yer Additions keyframes and realignment Important If you want to adjust the position of the object in a frame remember to first click into a frame in the animation layer otherwise you will do damage elsewhere Step 7 Transformations of the object In each keyframe you can now make changes These transformations are grafted onto the object but does not alter the symbol itself For this reason using drawing tools will not work To start we advise you to use two types of transformation e Change size or rotation e Change hue color effect For both follow these steps e Select a frame or a blank keyframe first then click on the object Then change the values in the properties panel Ctrl F3 if not already visible Alternatively you can also use the Free Transform tool Flash CS6 motion tweening tutorial 85 RaisingSun Instance of Sun Movie Clip 7 POSITION AND SIZE amp W 90 0 Y 3D POSITION AND VIEW X 186 0 Y 10 9 W 101 3 H 101 3 5 33 0 amp X 275 0 Y 200 0 vy COLOR EFFECT Style Brightness v Bright 63 x7 DISPLAY Blending Normal Ly O Cache as bitmap 7 FILTERS Property Value Transformations with the properties panel You also can add filters bottom panel properties
176. _1 html 9 http help adobe com en_US Flash 10 0_UsingFlash WS3e7c64e37a1d85e1e229 1 10db38dec34 7fa4a html WS026C9121 F7D4 496d 94C8 368BF6938 149a 10 http help adobe com en_US Flash 10 0_UsingFlash WS3e7c64e37al d85e1e2291 10db38dec34 7fa4a html 11 http help adobe com en_US Flash 10 0_UsingFlash W Sd60f23 110762d6b883b18f10cb 1fe1af6 7dc9a html Flash using ActionScript libraries tutorial 373 12 http help adobe com en_US ActionScript 3 0_ProgrammingAS3 WS5b3ccc5 16d4fbf35 1e63e3d1 18a9b90204 7f9e htm AS3 tweening platform Draft Introduction Prerequisite Read Flash using ActionScript libraries tutorial You must understand how to tell CS3 CS4 where to find an ActionScript library Warning Documentation in here refers to an older version I believe that everything should still work fine but newer releases for all libraries do have additional functionality Since I wrote the original piece in 2008 the official documentation has become much better anyhow Daniel K Schneider 12 53 18 April 2010 UTC TweenNano TweenLite TweenFilterLite TweenMax TimelineLite TimelineMax and TransformManager are Actionscript 3 tweening classs written by Jack Doyle GreenSock 1 The purpose of this page is to have a printable version of the documentation useful for teaching in a lab with small screens and to add some examples that could be useful to simple Flash designers e TweenNano a super lightweight 1 6k
177. _list var cheese_name cheese_def 0 var cheese stage getChildByName cheese_name iz chesse i stage removeChild cheese trace The tween has finished gotoAndPlay goodbye_emilie Define what s happened if the player doesn t count correctly not enough cheeses else if score lt 8 red_mouse visible false mc_jumping_emilie visible true mc_jumping_emilie play setTimeout do_nothing 10000 box_down setTimeout do_nothing 2000 box_up Define what s happened if the player doesn t count correctly too much cheeses AS3 tweening platform 387 k else ase SCOT e i box_down red_mouse visible true mc_jumping_emilie visible false setTimeout do_nothing 2000 TweenLite to box_cheese 3 x box_cheese x 10 y box_cheese y 160 ease Bounce easeOut leone iby Z TweenLite to red_mouse 5 x red_mouse x 50 y red_mouse y ease Bounce easeOut box_up too_much_cheese_sound play And we drop to box to the bottom with style http www greensock com tweenmax TweenMax to box_cheese 3 bezierThrough ek O welt sO WeileO p ease Bounce easeOut Feedback if score 8 Trace NOU yaaa e else if score lt 8 trace NOT enough else if score gt 8 Trae HILO nma gt Source Admire the result 23 TimelineLite and TimelineMax to be written TimelineLite is a lightweight in
178. a cuepoint with ActionScript else use the component inspector video_component addASCuePoint 10 5 wonder 3 b Add movie clips to the scene make them invisible and stop them 1 Add more animations here and kill the example anim 2 Your embedded clips must have an instance name in the Flash Scene copy paste the two following lines i e add anim2 etc and adapt animl visible false animl stop Optional Add sound from a sound file in the library Was defined by exporting the music file in the library to AS3 var guitar_music new Guitarmusic var volume new SoundTransform 0 2 0 3 c Add more if clauses to the cuepoint_listener function video_component addEventListener MetadataEvent CUE_POINT cuepoint_listener function cuepoint_listener event get the event name var event_name event info name the next three lines will just print out information to the console Flash augmented video tutorial 292 you later can remove these if you want trace Elapsed time in seconds video_component playheadTime trace Cue point name is event_name trace Cue point type is event info type deal with the cue events If you know how to you d rather use a switch statement here if event_name wonder animl visible true animl play should be stopped at some point guitar_music play remove this start comment line
179. a erif proportionalSerif TheOther tts fontSize 2 gt Macromedia lt span gt in 1996 lt p gt lt p begin 00 00 03 07 dur 00 00 03 35 gt and we were trying to figure out what to do about the internet lt p gt lt p begin 00 00 06 42 dur 00 00 03 15 gt And the company was in dire straights at the time lt p gt lt p begin 00 00 09 57 dur 00 00 01 45 gt We were a CD ROM authoring company lt p gt lt p begin 00 00 11 42 dur 00 00 02 00 gt and the CD ROM business was going away lt p gt lt p begin 00 00 13 57 dur 00 00 02 50 gt 0ne of the technologies I remember seeing was Flash lt p gt lt p begin 00 00 16 47 dur 00 00 02 00 gt At the time it was called lt span fontWeight bold color ccc333 gt FutureSplash lt span gt lt p gt lt p begin 00 00 18 50 dur 00 00 01 20 gt So this is where Flash got its start lt p gt lt p begin 00 00 20 10 dur 00 00 03 00 gt This is smart sketch running on the lt span tts fontStyle italic gt EU pin computer lt span gt lt p gt lt p begin 00 00 23 52 dur 00 00 02 00 gt which was the first product that FutureWave did lt p gt lt p begin 00 00 25 52 dur 00 00 02 00 gt So our vision for this product was to lt p gt lt p begin 00 00 27 52 dur 00 00 01 10 gt make drawing on the computer lt p gt lt p begin 00 00 29 02 du yle 1 gt as lt span tts r cocc333 gt easy lt span gt as drawing on paper lt p gt lt div gt
180. a unige ch guides flash ex6 shape tweening intro flash cs6 shape tweening intro html 2 http tecfa unige ch guides flash ex6 shape tweening intro flash cs6 shape tweening intro fla 3 http openclipart org detail 168398 black_dragon_tatoo by ivoermejo 4 http openclipart org user detail ivoermejo 5 http tecfa unige ch guides flash ex6 shape tweening intro flash cs6 shape tween dragon egg html 6 http livedocs adobe com flash 9 0 UsingFlash WSd60 f231 10762d6b883b18f10cb 1 fe laf6 7d78 html 7 http tecfa unige ch guides flash ex shape tweening intro flash cs3 shape hints html 8 http tecfa unige ch guides flash ex shape tweening intro flash cs3 shape hints fla 9 http tecfa unige ch guides flash ex shape tweening intro flash cs3 shape tweening hints html 10 http tecfa unige ch guides flash ex shape tweening intro flash cs3 shape tweening hints fla 11 http help adobe com en_US flash cs using WS58E1E1A4 9296 4b75 AB74 D9D545892556 html 12 http tecfa unige ch guides flash ex shape tweening intro flash cs3 shape picture morphing fla 13 http tecfa unige ch guides flash ex shape tweening intro flash cs3 shape tweening in motion html Flash shape tweening tutorial 106 14 http tecfa unige ch guides flash ex shape tweening intro flash cs3 shape tweening in motion fla 15 http tecfa unige ch guides flash ex shape tweening intro flash cs3 shape tweening in motion2 html 16 http tecfa unige ch gui
181. a video to the timeline as opposed to using some kind of playback or player component This easy solution suffers from some technical drawbacks and we will introduce it first e You can implement both video navigation and video triggered events with so called cue points labels that identify precise video frames i e time in milliseconds Flash augmented video tutorial 277 Importing a video to the timeline Instead of using the playback component as explained in the Flash video component tutorial we will include the video into the timeline each video frame will be a timeline frame This will allow us to create videos augmented with animations in an easy way Timeline video with simple controls If you embed a video into the timeline then you don t get the ready made video control as explained in the Flash video component tutorial Therefore only embed video in the timeline if you plan to add animations and if the video file is really small Also you shouldn t care about smaller synchronization problems with the audio track Embedded video will make your timeline really long although you can choose to have it its own timeline Anyhow in this example we took the hundreds of frames timeline option We will insert the video in frame 2 We also will add a play button that will jump to frame 2 and play the video Step 1 FLV files Timeline embedded videos only work with the Flash flv video format e You therefore should e
182. ach of these areas you can dock a new panel below or above an existing one e They can be docked in groups of panels each one will show as a tab If at some point all the panels you put on the desktop did disappear just hit F4 or Window gt Show Panels F4 toggles between more space for drawing and more tools To dock a panel simply grab it with the mouse press the left mouse button in a empty area in its top bar and then drag it to a place that will light up in some light blue color e If you see a blue line vertical or horizontal and then release the mouse the panel will dock below or to the right of the line as a lone panel e Ifarectancle will light i e the borders of a panel you will dock your panel next to the other panel s i e it will appear in a tab If this is not clear just play moving around panels and pay attention to lines or rectangles that light up Don t worry about breaking the desktop You always can re start with a standard layout as we described above The following three screenshots should illustrate the general principle Docking in an empty panel area to the right Docking a swatches panel to the right creating a If you want to reproduce this example close all panels see below or new column select the Debug configuration Then open the swatches panel Menu Window gt Swatches or hit CTRL F9 Now try to dock this panel In the sceenshot to the right the Swatches pan
183. active objects tutorial 345 The following line function growCat ev MouseEvent void means that we define a function i e a recipe called growCat When an event happens this function will be called invoked and given a mouse event argument to process We called this argument i e the information to process ev and declared it of type MouseEvent In our code we actually never use this event information but we could for instance figure out at what exact position the user clicked void means that the function will not return any result The function will in fact just modify properties of the cat when the event happens We do not care about the event itself If you script in the timeline this simplified code will also do function growCat ev Gale oiwlelela Car wehea 2p cat height cat height 2 As you can notice in the above code we use for demonstration purposes both the easy scripting syntax and the more object oriented one you need to adopt if you write external ActionScript code that could be loaded into your fla file Stop start movie clips You can stop or start an embedded movie clip like this WNOWALS_ Guilalja tanak movie_clip stop Flying Kite Example This example is discussed in the Flash embedded movie clip tutorial Here we just include the AS code snippet that will allow you to start and stop a movie clip animation with two buttons kite stop start_button addEventListener
184. al 15 Getting ready to work with CS6 In this section we will summarize functionalities of some Flash components We will introduce more functionalities in other tutorials This is just a short overview The Work area and the stage The stage The stage in the middle white by default is the area where you work on your Flash contents It will display the default size of your flash clip as the end user will see it The workarea The stage is part of the work area The gray part of the work area also called backstage can contain graphic elements on which you are working and that you plan to integrate into the stage sometimes i e make them visible to the user In deployed Flash movies this area also could hold motion animation objects that later will walk into the scene Setting up the size of the stage and other parameters You can change the size of the stage i e of the flash clip in two ways 1 Use the Modify gt Document menu e You can redefine the size of the stage Stage size is the size your final Flash application will have Therefore think twice about the size before you start composing e You may change the background color per default it is white and it will display as white in your animation e Inthe same Document menu you also should give your work a title and a short description 2 You also can change size and background color by clicking on an empty spot in the workspace and then modify its param
185. al OxFFO000 Create my_cube and add it to the scene We also define width depth and height my_cube new Cube materials 500 500 1000 Let s create a floor underneath the cube var wire_materials MaterialsList new MaterialsList all new WireframeMaterial OxFFO000 my_floor new Cube wire_materials 800 800 50 ity Jc lloei 67 5007 scene addChild my_cube scene addChild my_floor Create camera Flash Papervision3D tutorial 405 By default the camera looks forward we push it a bit backwards camera new Camera3D camera z 800 camera zoom 5 renderer renderScene scene camera viewport hi Loop private function loop event Event void VY Menace UNG Kreme A my_cube yaw 5 renderer renderScene scene camera viewport e Don t forget to save this file e Then create a new Flash ActionScript 3 file and insert the name of the file without the as extension in the Document class of the Properties panel If don t understand this read AS3 Compiling a program or simply look at the source file Result and Source CS3 e simple as pv3d html 6 e simple as pv3d fla 7 Simplepv3d as same code as above in principle e Directory http tecfa unige ch guides flash ex pv3d Programming with a class structure in PV version 1 5 According to Anre Stubbe s ExampleBaseCode article PI in the Papervision3D wiki basic Papervision 1
186. also Core display classes overview 1 InteractiveObject I base class for all interactive objects 1 DisplayObjectContainer 8 1 Loader 9 Class for loading objects Bitmaps AS3 Sprites or Movieclips or AS 1 2 AVM1Movie 2 Sprite 71 Manipulable container of objects MovieClip 161 refers to a movie clip symbol created in the Flash authoring tool 1 2 FLVPlayback FLVPlayback CS3 only 3 FLVPlaybackCaptioning CS3 only 4 UIComponent 36 only in CS3 Flex has equivalent MXML classes BaseButton 19 BaseScrollPane 20 ColorPicker 21 ComboBox 21 IndeterminateBar 77 _ Label P NumericStepper ProgressBar 24 ScrollBar 25 _ Slider TextArea 16 O MOAN DN FW NY En o 12 26 27 eS pa N Re TextInput UILoader W Flash ActionScript 3 overview 365 3 Stage 28 2 SimpleButton 29 3 TextField H AVM1Movie Bitmap for displaying a bitmap image MorphShape Shape on screen canvas for drawing content Nr BW WN StaticText Frozen text 7 Video contains video Below is a Flash 10 CS5 version e DisplayObject 30 1 InteractiveObject 22 base class for all interactive objects 1 DisplayObjectContainer 31 1 Loader 87 2 Sprite 33 Sprites are like Movie Clips without timeline FLVPlayback H FLVPlaybackCaptioning 34 HTMLLoader MovieClip P UlComponen
187. ample 4 Save your changes to the FLA file Note for Flash designers Some of the code in the Flash doc can be simplified to work with the timeline scripting method Other code can not and you do have to code with a class structure Stand alone AS3 code development SDK and editors You do not need to buy Flash CS3 that s actually a cool thing to program in AS3 and to create swf files You can either use 8 e Flex Builder a commercial Eclipse plugin available from Adobe free for education upon request Just the Flex SDK together with a normal programming editor In addition you may use MXML an XML based user interface markup language Read how to install the Flex Framework Using the compiler e Just type something like mxmlc HelloWorld as This will make an swf file Development support other than Eclipse If you find IDEs e the Flash builder too hard to use you can find editors with ActionScript support or at least syntax support for JavaScript Java e g e Flashdevelop 30 e Emacs read this if you know about Emacs e JEdit P You can use the Java beautifier but you may have to find the plugins with google and install manually Btw JEdit also has a wikipedia mode e If configuring and learning Flashdevelop Emacs JEDIT etc appears too complex to master a very easy to use editor in Unix Linux environments is pico 10 but you will not get any syntax support See text editor
188. an Ree uiuemng swana j Ener See ang ot sagn amp Objects al sky x al a3a8 iot 1 120fps O0s The Flash CS3 Layers tool shown with outlines of layer and a hidden layers Flash layers tutorial 36 Layer folders Once your documents get really complex you can organize layers into folders e g one folder per task Static objects animations background etc To create layer folders either e click on the folder icon in the Edit bar third item e or use Insert gt Timeline gt Layer Folder You then can drag around layers Hiding locking etc works more or less like with folders try it out However at some point you also will have to decide whether you really want to work with an everything is in the main time line model Consider organizing and planning your project with embedded movie clip objects see the tat Flash embedded movie clip tutorial Putting everything in the main time line is like programming with goto s Scenes Once your animation gets bigger you most certainly should break it down to several scenes There is no urgency to work with scenes if you are new to Flash but you should know about this now Scenes are played in the order you defined them To insert a new scene Menu Insert gt Scene To rename reorder the scenes e Menu Window gt Other Panels gt Scene SHIFT F2 Then drag up or down the scenes e To rename double click on a scene name in this panel To
189. and finally you also can add 3D rotations or positions with the 3D Translation tool and the 3D Rotation Tool in the tool panel Step 8 Other Adjustments Animation may be too fast To slow down there are several options e Decrease the frame rate fps Default CS4 use 24 Click outside the stage somewhere and change the fps in the properties panel FPS 16 for example This would give it a more jerky quality thus try to avoid e Lengthen the span eg 60 frames Just pull the tween layer and then with F5 to extend the other layers e You ll also can see that the sun s movement is not very regular This is because we pulled into the sun keyframe left or right instead of moving only vertically Try to adjust this The motion editor The editor allows to move all kinds of operations that are difficult to do on the stage It is a fine tuning tool that may not be necessary for your project Basic use Step 1 Open the Motion editor e Windows Menu gt Motion Editor e It is advisable not to fix it within the workspace because it contains a lot of controls Pull the panel until you see everything Step 2 Adjust the visible frames e Bottom left Adjust the Visible Frames to a necessary maximum Here is a screenshot of the editor and motion which shows our sun example Flash CS6 motion tweening tutorial 86 Movie Clip ly jun Swap ANDSIZE Property Value
190. andler EJ rocket addEventListener MouseEvent MOUSE_DOWN mouseDownHandler rocket addEvent Listener MouseEvent MOUSE_UP mouseUpHandler cat addEventListener MouseEvent MOUSE_DOWN mouseDownHandler EI cat addEventListener MouseEvent MOUS _UP mouseUpHandler MouseEvent MOUSE_DOWN mouseDownHandler bat addEventListener bat addEvent Listener MouseEvent MOUSE_UP mouseUpHandler Define a mouse down handler user is dragging function mouseDownHandler evt MouseEvent void var object evt target we should limit dragging to the area inside the canvas object startDrag function mouseUpHandler evt MouseEvent void var obj evt target obj dropTarget will give us the reference to the shape of the object over which we dropped the circle var target obj dropTarget Tf the target object exists the we ask the test_match function to compare moved obj and target where it was dropped if target null test_match target obj obj stopDrag function test_match target obj test if either one of the four pairs match if target box_c amp amp obj cat target box_d amp amp obj dog target box_r amp amp obj rocket target box_b amp amp obj bat we got a hit WLES lnaliggiar ils textField text Yes You got one make
191. animation fla 16 http freespace virgin net hugo elias models m_ik2 htm 17 http tv adobe com vit f1552v 1001 18 http www adobe com designcenter flash articles Irvid4058_fl html 19 http www virtualitoy com Fashion DressUpDolls Flash CS4 motion tweening with AS3 tutorial 263 Flash CS4 motion tweening with AS3 tutorial Draft Introduction While you d rather would use AS3 TweenLite tweening engine there are ways of doing simple motion tweens with official Adobe classes Example directory e http tecfa unige ch guides flash ex4 cs4 as3 animation Hand crafted example Here is a simple example that shows e how to automatically move a circle e how to create a button that will move another circle with the same kind of motion path To make it work you need to create e A sun symbol Put two instances on the stage one called sun and the other sun2 e A component button called go_button IIMELINt WUEEU I Script Black suns TIONS R 0 x G 0 hd B 0 M Alpha 100 anim test fla 18 items Name 1 gt ia Component As sun g 2 Button a Movie Clip v black_sun ce of black_sun Swap ITION AND SIZE X 11 00 Y 18 00 W 93 00 H 93 00 CS4 motion tween made with ActionScript 3 Flash CS4 motion tweening with AS3 tutorial 264 ActionScript code Copy the following AS3 c
192. animation i e a pulsating sun that is moving from left to right in the sky First we will make a simple motion tween of a yellow circle moving from left to right e Create a new Flash fileand change the size to 800x200 pixels e Draw a yellow circle and put it to the left of the stage e Convert it to a movie clip symbol Right click gt Convert to Symbol Select Movie clip e Hit F6 in frame 120 and move the circle that is now an instance of a movie clip to the right of the stage e Make a motion tween Then edit the sun symbol to create a frame by frame animation a E i ada Editing a movie clip symbol used in a motion tween e As you can see we are editing the sun symbol Look at the Edit bar that sits between the timeline and the stage It displays the editing hierarchy i e Scene 1 and Sun e This frame by frame animation changes both the color and the size of the circle Read the Flash frame by frame animation tutorial if you don t know how to create frame by frame animations Flash classic motion tweening tutorial 74 Do not forget to go back to the main timeline scene once you are done e g by double clicking on the scene in the edit bar on top of the stage or by clicking on the little back arrow When you edit a movie clip you are in symbol edit mode and you should not add anything else by mistake Make sure that you are aware at which level you edit and where to place objects Finall
193. ap inherit inherit div gt gt ATTLIST div xml lang CDATA FIXED en gt ELEMENT p PC ALTLEST js DATA span gt begin CDATA RE dur CDATA IMP end CDATA IMP style CDATA IMPI QUIR IE TE LIED Timed Text 136 lt ELEMENT span PCDATA gt lt ATTLIST span tts backgroundColor CDATA IMPLIED Ets colon CDATA EMEEN tts fontFamily CDATA IMPLIED tts fontSize CDATA IMPLIED CESS TOMESEWILS Caeuenelh icalie inisric Yinosrit tts fontWeight CDATA IMPLIED tts textAlign left right center start end inherit inherit tts wrapOption wrap noWrap inherit inherit I then made this mini DTD that should help you writing these files Disclaimer e I made it in 30 minutes and I hate computers and don t know how to use them e Adobe probably implements more features but this should do for starters Notes about attributes id Attributes of the style element can t be ID attributes the way they are used Same holds for the style attribute of p element and that can refer to one of the styles defined in the styling section color Either use a the typical RRGGBB hex notation or choose from white black silver grey maroon red purple fuchsia magenta green lime olive yellow navy blue teal aqua cyan transparent FontFamily Choose from a combination of mono
194. arani Flash video component tutorial Source http edutechwiki unige ch mediawiki index php oldid 42279 Contributors Daniel K Schneider Flash mask layers tutorial Source http edutechwiki unige ch mediawiki index php oldid 42412 Contributors Daniel K Schneider Flash inverse kinematics tutorial Source http edutechwiki unige ch mediawiki index php oldid 42393 Contributors Daniel K Schneider WikiSysop Flash CS4 motion tweening with AS3 tutorial Source http edutechwiki unige ch mediawiki index php oldid 26802 Contributors Daniel K Schneider Flash using embedded movie clips tutorial Source http edutechwiki unige ch mediawiki index php oldid 42198 Contributors Daniel K Schneider Flash augmented video tutorial Source http edutechwiki unige ch mediawiki index php oldid 42417 Contributors Daniel K Schneider Flash video captions tutorial Source http edutechwiki unige ch mediawiki index php oldid 43105 Contributors Daniel K Schneider Flash actions frame tutorial Source http edutechwiki unige ch mediawiki index php oldid 42390 Contributors Daniel K Schneider Flash datagrid component tutorial Source http edutechwiki unige ch mediawiki index php oldid 23609 Contributors Daniel K Schneider WikiSysop Flash drag and drop tutorial Source http edutechwiki unige ch mediawiki index php oldid 37362 Contributors Daniel K Schneider Loic boujol Widged WikiSysop ActionScript 3 interactive objects tutorial Source http edutechwi
195. ases i zuv Simple Slow 28 Bo LLAH EEL s p E E E EEE Bz Bm Oo A The motion editor of CS4 values change Here is a slightly modified file and the right state of motion editor It has smoothed the curve a bit killed a keyframe animation and inverse size the sun is now smaller when it is up Final Solution e flash cs 4 motion tweening html 4 solution adjusted slightly e flash cs 4 motion tweening fla 5 Fine tuning and replacing the motion path Let s now fine tune the trajectory Editing curves We have already seen that we can add a keyframe in different ways e Right click in an empty frame of a tween layer in the timeline Then select Insert Keyframe and select the type e Move the symbol of a motion tween layer in the timeline e Use the motion editor According to Adobe s Flash CS6 manual you can edit or change the motion path of a motion tween in the following ways e Change the position of the object in any frame of the tween span Move the playhead and the just move the symbol using the selection tool e Move the entire motion path to a different location on the Stage Select and drag it e Change the shape or size of the path with the Selection Subselection or Free Transform tools e Change the shape or size of the path with the Transform panel or Property inspector Flash CS6 motion tweening tutorial 89 Use the commands in the Modify gt Transform menu Apply a custom stroke as motion
196. ash movie with key presses and not LOOSE LOCS Works ONLY if you have 2 objects on the stage A movie clip instance called missile A button component instance called button nie FocusManager package has to be imported import fl managers FocusManager how many pixels to move left right var big_step 9 User clicked on missile If you have buttons in addition to missile on stage then the the missile will not work as expected i e it will loose focus Extra code needed is Tell the missile it s a button and put it on the list of tab buttons and also some code to put it in focus when the user Cilslekes im sie EA Create a focus manager Will help to set us the right focus var manager new FocusManager this J Bue imijeiell Toews OM mul sisal le since focus will change when user clicks on another object stage focus missile works also in principle manager setFocus missile The line below is absolutely bloody vital Missile must be on the tab list else focus will move to the button when key is hold down missile tabEnabled true missile buttonMode true ActionScript 3 interactive objects tutorial 349 The missile will listen to a mouse click we will use to put focus on it again missile addEventListener MouseEvent CLICK change_focus function change_focus ev MouseEvent manager setFocus missile i SE AC CoRRO CUS miasilep Managing
197. asics M1 article is using this library PaperVision3D 11 PV3D is another popular library and you get to see some fish e Papervision 3D blog 19 Includes all the information downloads tutorials links etc PV3World H Testing ground tutorial and other resources e Papervision 3D downloads U1 at google code There is also a CS3 component for version 1 5 made in 2007 Current nov 2008 version is 3 0 e Papervision3D documentation 12 Packages and classes e See also Flash Papervision3D tutorial Sandy 3D Engine 131 Sandy is an intuitive and user friendly 3D open source library developed in ActionScript 2 0 and ActionScript 3 0 for Adobe Flash e list of tutorials 14 WireEngine3D OS isa lightweight free GPL and fast 3D Engine for Flash 8 9 as of aug 2010 last update april 2008 Alternative Platform An SWC library for 3D scenes in Flash Authoring tools and a client server solution will be available later added aug 2008 e Documentation and tutorials home 17 Flare3D i81 3D Engine for Flash optimized for games and animations Flare 3D bridges the gap between Autodesk 3Ds Max retrieved 10 53 26 August 2010 UTC Physics engines WOW Engine 1191 a free AS3 open source physics engine written by Seraf J r me Birembaut capable to handle positions in a 3D environment It uses the Sandy library 13 see above APE lis a free AS3 open source 2D physics engine for use in Flash and Fle
198. atagrid component tutorial in this Wiki Flash components overview 219 List The List component is a scrollable single or multiple selection list box A list can also display graphics including other components You add the items displayed in the list by using the Values dialog box that appears when you click in the labels or data parameter fields You can also use the List addItem and List addItemAt methods to add items to the list Adobe documentation 29 TileList The TileList component consists of a list that is made up of rows and columns that are supplied with data by a data provider An item refers to a unit of data that is stored in a cell in the TileList An item which originates in the data provider typically has a label property and a source property The label property identifies the content to display in a cell and the source provides a value for it Adobe documentation 30 See Displaying images with the TileList component 31 Adobe tutorial by Bob Berry A little ComboBox with ActionScript only After a day or two learning ActionScript I already was fed up with working with the drag and drop method Problem is that I can t remember any instance names label names etc and writing little pieces of ActionScript is very time consuming that way If you have the same problems you should write as much as you can directly in ActionScript For instance instead of dragging a ComboBox to the desktop f
199. ath is a user defined list of local directory paths that determines where the compiler will search for imported packages and classes The classpath is sometimes called the build path or source path Importing packages 6 retrieved 17 37 10 May 2010 UTC Syntax import samples Example from the TweenMax engine of the AS3 tweening platform import com greensock import com greensock easing Flash using ActionScript libraries tutorial 372 IweenMax tome 3 oeZzler ss 27 y 14 esas 2300 vas 34 on ly orientToBezier true ease Bounce easeOut For programmers see the ActionScript 3 tutorials to create your own packages package packageName class someClassName 7 More information about packages can be found in Adobe s Packages and namespaces chapter in the Programming ActionScript 3 0 8 tutorial which is very technical ActionScript document classes According to ActionScript publish settings DI retrieved 17 37 10 May 2010 UTC When you use ActionScript 3 0 a SWF file may have a top level class associated with it This class is called the document class When the SWF is loaded by Flash Player an instance of this class is created to be the SWF file s top level object This object of a SWF file can be an instance of any custom class you choose For example a SWF file that implements a calendar component can associate its top level with a Calendar class with methods and properties appr
200. ations Let s look at the following example Flash embedded movie clip tutorial 108 The registration point cross is slightly off the center I moved the Dragon drawings a bit by editing the symbol e Inthe main scene the dragon instance sits in a position x 300 right and y 260 down a Timeline Output Compiler Errors Tools sadn 5 10 15 DOR 2P 2 Dragon BZA P A Pag a Background JEROME MS gt lt Bc LLa gt gt mL pm Properties k Movie Clip x Instance of Comic Dragon s7 POSITION AND SIZE dnstance Name gt X 300 00 Y 260 00 Registration point is near center The white circle you can see in the middle of a movie clip is called the Center Point and has a similar function It defines where the object will be attached to a motion guide or around which point it will rotate for example You can move it to a different place with the Free Transform Tool If you edit the symbol again you can see that the drawings have negative coordinates since it s origin is not top left but somewhere in the center Flash embedded movie clip tutorial 109 Scene1 N Comic Dragon Registration point is near center In the following screen shot we moved all the drawings so that the registration point is in the upper left 239 30 Registration point is upper left Flash embedded movie clip tutorial 110 Edit
201. awings still sit in frame 1 but they are carried over up to frame 20 This is shown in the timeline by a little white rectangle You now should have something like this j Su a panawang 2E am Ove flash cs3 motion tweening fla Wd House WU Objets Alpha 100 Library x Componer fiash cs3 motion t 5items Name Apple tree cat cat2 Fir tree house aaa A EK 1 x Properties x Filters Parameters Actions Behaviors Strings Fane Tween Motion z V Scale Sound None x Ease 0 z Effect None z Edite Label type Rotate Auto z 0 times Sync Event x Repeat x 1 Name zj 7 Orienttopath V Sync Snap No sound selected OO i lt Frame Label gt history Scene x C D The first result Step 5 Test it e You can glide left right the playhead red rectangle on top of the red line that indicates the current frame in the timeline It will manually move the object through all positions within the interpolation path e Then try menu Control gt Test Movie or hit CTRL Enter This will open a popup window with a Flash preview Flash classic motion tweening tutorial 68 Step 6 Tuning You may find that the cat moves too fast First thing you could do is lower the frame rate second Click on the workarea and change the document properties However thi
202. ayers Create a new keyframe in frame 2 as explained above Flash frame by frame animation tutorial 55 e Hit F6 or Right click Insert Key Frame for the hello layer e Hit F6 or Right click Insert Key Frame for the oval layer e Now you should have a copy of both the hello word and the Oval in the new frame Step 6 Make changes e Now you can make slight changes to your drawings in frame 2 so make sure that frame 2 is selected e Ichanged color a bit for both the oval and the hello word e Unlock the hello layer if it s still locked e Edit gt Select All e Change the color in the properties window e Then twist a little bit some letters and maybe the Oval e You can do this for instance with the subselection tool or the Freetransform tool I only used the subselection tool and basically turned a few Curve control handles Below is a picture of the slightly altered graphics Hello with the pencil second frame Step 7 Add other frames Just two frames will do but you can add more of course This example was a bit more professional We tried to select a good stage size and made some efforts to get the drawings right Rocket science Frame by frame animation is also quite useful if you want to create animated objects that you then can reuse in 12 another animation as a movie clip Let s first look at this little rocket we shall discuss The fla swf and html files flash cs3 rocket can b
203. bitmap graphic e g a photograph into a vectorized object Learning goals Learn about basic Flash 9 CS3 Illustrator and Inkscape bitmap tracing Prerequisites Flash CS3 desktop tutorial Flash drawing tutorial Flash layers tutorial Flash shape tweening tutorial Moving on The Flash article has a list of other tutorials Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Level It aims at beginners More advanced features and tricks are not explained here Materials fla file you can play with http tecfa unige ch guides flash ex tracing intro http tecfa unige ch guides flash ex shape tweening intro Bitmap tracing will turn a bitmap e g a photograph or a non vectorized graphic into vector graphics This allows you for example to e Shape tween portraits see also the Flash shape tweening tutorial e To take bitmap graphics found on the Internet and turn them into somewhat usable vector graphics for animation useful if you can find any appropriate vectorized clipart Flash bitmap tracing tutorial 187 Extracting a drawing from a picture That s a tough problem since a picture got many colors and sometimes objects overlap i e you have to remove these and then repair with painting To the right you see the picture of some lion that can be found in Vienna
204. brary objects and AS variables and function names e Remove errors broken tweens for example e Document your code i e use comments in AS code fill in the documentation menu Modify Document CS3 File gt Document Info CS6 Flash 3D 418 Flash 3D Draft Definition Flash 3D refers to various attempts to create 3D objects or even scenes with Flash This is a short overview piece on various technologies There exist 3 solutions from an designer point of view e Buy a special toolkit e Use ActionScript libraries together with some ActionScript programming either in CS3 4 5 or with the Flex compiler or both e Use the new Flash 10 3D ActionScript library with the free Flex compiler e Use Adobe CS4 CS5 for some 3D animations of 2D objects Since Flash until version 10 was just 2D performance was not outstanding With Flash 10 on a normal computer one can get decent framerates for not too complex scences With respect to 3D contents I d certainly prefer X3D based human readable format solutions but it seems that this may never become popular Industry and many designers don t seem to like such formats We can understand that gaming engines need to be optimized and ultra fast but simple scenes on the web See also e Flash Papervision3D tutorial Products Software that help to create 3D Flash in various ways Firstly you may draw things with a normal 3D modeling software You then can find
205. by repeating the procedure outlined above e Add anew fourth keyframe to the right e g in frame 81 Simply hit F6 again e Right click on an empty frame between keyframe 3 and 4 and add a motion tween as above e Of course you then also adjust the ending frame for the other layers as above hit F5 in column 80 In the screen capture below you can see that we now have several keyframes In the animation cat layer you can see several dots each one represents a keyframe Flash classic motion tweening tutorial 69 flash cs3 motion tweening2 fla l x SA MaE A e EE E AOS E E E A E a e W House a W Obj I Animation cat 7 12 0 fps Properties x Filters Parameters Actions Behaviors Strings J Tween Motion z v Scal Sound None z i Frame 5 ale i EER lt Frame Label gt Ease 12 out Effect None z Edit Moving a cat You can look at the published result the cat will walk back where it came from here flash cs3 motion tweening2 html B The directory including the fla file which you can load into your Flash and play with is here http tecfa unige ch guides flash ex motion tweening intro Adding some motion shape tweening In each frame you can change some properties of the moving object In the next example we will have the cat move up on top of the hill We want to implement 2 effects e The cat should become smaller because it s furth
206. c Browse To Path Audio event compiled then select libary path and select the place where the swc library sits e g the dumb place I put it into Setting the classpath in Flash CS3 C Program Files Adobe Adobe Flash CS4 Common Configuration Components Flint_2_1 2 swe Basically what you have to understand at this point is that your application has to know in which directory to look for the FINT code The org subdirectory of the source code version must be a direct sub directory of the classpath directory you just defined If you want to understand more about packages and classes you ll have to dig fairly deeply into ActionScript programming something we will not do here Step 1 Create a frame for which you want snowfall e Firstly you need a typical winter scene e g a nice photo such as the one that you can see in the original example UN made by Richard Lord A local copy of the swf is here 12 Personally I d like to have some snow in my Office as you can see in our own version 131 So firstly we need to import a picture I made the orginal much darker with higher contrasts in order to be able to see the snowflakes It may be too dark on your screen but on my DELL M1730 laptop it looks just fine e This picture is now in frame one of layer 1 Rename the layer to picture e Add a new layer and call it script Step 2 Add the Action Script e Click in frame 1 of the script layer
207. cal people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Level It aims at beginners More advanced features and tricks are not explained here Learning materials fla and swf files http tecfa unige ch guides flash ex buttons intro Uy Alternative version Flash button tutorial 195 e Flash CS3 button tutorial for the older CS3 version e In this tutorial we will cover ActionScript 3 programming elements Read the flash button tutorial AS2 if you must use ActionScript 2 The executive summary buttons Buttons are interface components to add simple interactivity such as displaying extra information launch a movie clip etc Any object can be button However Flash CS3 provides two built in button types that already include the typical mouse over mouse out and mouse click animations that users need in order to understand that an object on the screen represents a button 1 To create a Flash button e either draw an object and make it a button Right click Convert to Symbol and select Button e or get a button from the built in Library buttons fla 2 To make use of a button e You have to do add some ActionScript code and that will react to a user gesture like a mouse click e Using code snippets is the easiest method for beginners Tip If you lack any sort of programming experience th
208. ce http edutechwiki unige ch mediawiki index php title File Flash cs6 create movie clip symbol3 png License unknown Contributors image flash cs6 create movie clip symbol4 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 create movie clip symbol4 png License unknown Contributors image flash cs3 embedded movie clip edit jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs3 embedded movie clip edit jpg License unknown Contributors image flash cs3 desktop 1000x865 annotated png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 desktop 1000x865 annotated png License unknown Contributors image cs3_layers_annotated small png Source http edutechwiki unige ch mediawiki index php title File Cs3_layers_annotated small png License unknown Contributors Image Sources Licenses and Contributors 425 image flash cs6 video component annotated png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 video component annotated png License unknown Contributors image flash cs6 import video select video png Source http edutechwiki unige ch medi awiki index php title File Flash cs6 import video select video png License unknown Contributors image flash cs6 import video select video2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 import video select video2 png License unknown Cont
209. ce fat ovals with a fat stroke Two of them overlapping Then select the eraser mode This works like the paint tool Use Ctrl Z to undo what you have done so you can try other options Eraser modes Here are the modes Erase normal Will erase as you paint Erase fill Will only erase fills paint Erase lines Will only erase strokes lines contours of objects Erase selected fills Will only erase fills that you have selected hold down the SHIFT key to select several Erase inside Will erase fills inside an object if you start erasing inside the object In the following screen dump we used the erase fill option to take out fills from the oval and the rectangle Flash object transform tutorial 168 A 2 2 VA 7P om m Q P ooa Erase Normal Erase Lines Erase Selected Fills Erase Inside Eraser options The faucet e Will kill any shape on which you click It makes a distinction though between the stroke and the fill of an object Eraser shape e You can select different sizes of circles and rectangles e Use rectangles to carve off rectangles and circles to carve of round stuff The Lasso tool Includes a magic wand see the controls at the bottom of the tools panel to be continued some day Moving on If you already didn t do it try e the Flash frame by frame animation tutorial i e learn how animate movement size tint etc e the Flash shape tweening
210. changes expression you can use a shape hint to mark each eye Then instead of the face becoming an amorphous tangle while the shape change takes place each eye remains recognizable and changes separately during the shift 6 retr nov 2008 e Select the first keyframe e Create one or more shape hints Modify gt Shape gt Add shape hint or hit CTRL SHIFT h e You will see some little letters that appearing e Then drag these onto borders of the shapes in a keyframe until they snap i e to points places of a shape outline that you want to move gracefully to another place in the next keyframe e Repeat this in the next keyframe of this shape tween Drag the shape hints to places on the border where the initial points should go Notice If the shape hints disappear hit CTRL ALT H Example shape hints for letters and webdings e Look first at the live Shape hints 1 example Untitied 1 fiash cs3 shape hints fia olb anag i BD BE 1 120fps 00s do S scenei Workspacer f Correctly applied shape hints for the first letter Correctly applied shape hints for the second letter The shapes have been made with the the text tool Since characters are not shapes you will have to break apart a text right click menu The heart and the forbidden sign was mad with the webdings font Read webdings and wingdings in order to learn about these very special fonts Source shape tweening intro
211. cheeses in the box We used TweenMax http www greensock com tweenmax to build up this game and choose Tweenmax Explorer bezierThrough e Before doing anything else it s necessary to download GreenSock Tweening Platform v11 AS3 http www greensock com v11 e Then copy the com directory to the directory with your fla file no need to copy to the web server later all will be in the swf Here s the AS3 code for the cheese game see the result below import com greensock import com greensock easing stop var score 0 red_mouse visible false mc_jumping_emilie visible true mc_jumping_emilie stop Define a list of cheese indexed by cheese name Arrays are cheese_name x y useless_x2 useless_y2 var cheese_list Array new Array cheese_list cheesel new Array cheesel 23 9 104 3 402 8 222 7 cheese_list cheese2 new Array Ccheese2 109 9 104 3 402 8 194 3 cheese_list cheese3 new Array Ccheese3 192 9 104 3 399 9 166 3 cheese_list cheese4 new Array cheese4 274 9 104 3 399 9 136 3 cheese_list cheese5 new Array cheese5 19 9 149 3 475 9 222 7 cheese_list cheese6 new Array cheese6 109 9 152 3 475 9 170 3 cheese_list cheese7 new Array Ccheese7 193 9 149 3 475 9 196 3 cheese_list cheese8 new Array cheese8 278 9 149 3 471 9 138 3 cheese_list cheese9 new Array cheese9 15 9 201 3 401 6 113 3 cheese_list cheese
212. ck in the top left window on Flash CS3 Professional e Then view in particular Creating animations with motion tweens and Understanding the timeline keyframes and frame rate Other Links e Flash animation 7 Wikipedia Materials used including the fla s Grab stuff from this directory http tecfa unige ch guides flash ex motion tweening intro References 1 http tecfa unige ch guides flash ex drawing intro flash cs3 drawing trees3 fla 2 http tecfa unige ch guides flash ex motion tweening intro flash cs3 motion tweening html 3 http tecfa unige ch guides flash ex motion tweening intro flash cs3 motion tweening2 html 4 http tecfa unige ch guides flash ex motion tweening intro flash cs3 motion shape tweening html 5 http tecfa unige ch guides flash ex motion tweening intro flash cs3 rotating clock html 6 http tecfa unige ch guides flash ex motion tweening intro flash cs3 rotating clock fla 7 http tecfa unige ch guides flash ex motion tweening intro flash cs3 motion tweening sun html 8 http tecfa unige ch guides flash ex motion tweening intro flash cs3 motion tweening sun fla 9 http tecfa unige ch guides flash ex motion tweening intro flash cs3 rocket moving htm 10 http tecfa unige ch guides flash ex motion tweening intro flash cs3 motion guide tweening htm 11 http tecfa unige ch guides flash ex motion tweening intro flash cs3 motion guide tweening2 html 12 http tecfa
213. cket example i e have the animation stop and display some friendly Hello Step 1 Create a new layer e Create a new layer and call it action Add a new keyframe for this layer e Select the layer e Right click after the last frame of your animation and add Insert Blank Keyframe in our case this is frame 21 or hit F7 Add some Action Script e Hit the F9 button e This will open the Actions Frame panel in ActionScript 2 you can dock it to the properties panel or the Actions panel in ActionScript 3 e Insert this in either AS2 or AS3 Stop 9 e As you can see in the screenshot below the last frame in the action layer has a little a in it This means that there is some scripting attached to it Fine tune e In our case I dragged the Background layer to the right or hit F5 e Then I inserted a Hello movie into this last frame I took the one we made in the Flash frame by frame animation tutorial Here is screen dump with the 2 new layers and the bit of ActionScript code Flash classic motion tweening tutorial 78 Flash cs3 motion quide tweening2 fla W background anag do Scene 1 Properties Filters Parameters Actions Frame x Behaviors Strings actionscript 1 0 amp 2 0 Z Spev ZEZE zoom Guna 1 stop B amp a Current Selection fel Action Frame 21 amp Scene 1 fel Action Frame 21 4 Symbol Definitio
214. code will display a trace of all your cue points in the Flash CS6 output window Alternatively To make it work e Insert a video component on the stage and add a flv source as explained before e Give it an instance name I called it video_component If give your component an other name you will have to change the ActionScript code below Flash augmented video tutorial 287 You must import this class even when you just script the timeline 1 import fl video MetadataEvent video_component addEvent function cp_listener eventObject Listener MetadataEvent CUE_POINT trace Elapsed tim INES video_component playheadTime trace Cue point name is trace Cue point type is conds cp_listener MetadataEvent void eventObject info name eventObject info type When you play the flv video you can see these kinds of messages in the output window Bole Cu Gu El Cu Cu El Cu Cu El Cu Cu B Cu Cu apsed time in s e point e point apsed time in s name is type is e point e point apsed time in s name is type is e point e point type is apsed time in s name is e point name is e point type is apsed time in s e point name is e point type is conds 7 485 palm_tree event Condisi irc books navigation Cond PEOR missing_manual event GOmelss
215. component seeks to the keyframe and starts the cuePoint event An event cue point enables you to synchronize a point in time within the FLV file with an external event on the web page The cuePoint event occurs precisely at the specified time You can embed navigation and event cue points in an FLV file using either the Video Import wizard or the Adobe Media Encoder An ActionScript cue point is an external cue point that you can add either through the component s Flash Video Cue Points dialog box or through the FLVPlayback addASCuePoint method The component stores and tracks ActionScript cue points apart from the FLV file and consequently they are less accurate than embedded cue points However ActionScript cue points are still accurate to a tenth of a second In ActionScript and within the FLV file s metadata a cue point is represented as an object with the following properties name time type and parameters The name property is a string that contains the assigned name of the cue point The time property is a number representing the time in hours minutes seconds and milliseconds HH MM SS mmm when the cue point occurs The type property is a string whose value is navigation event or actionscript depending on the type of cue point that you created The parameters property is an array of specified name and value pairs When a cuePoint event occurs the cue point object is available in the event object through the info
216. ct the object s to be transformed first Then select from several options vosyic v Document Convert to Symbol Convert to Bitmap Break Apart Bitmap Symbol Shape Combine Objects Timeline Transform gt Free Transform Arrange r Distort Align Grn Envelope J Group Ctrl G E Ungroup Ctrl Shift G Rotate and Skew Scale and Rotate Ctri Alt S A os ioo a Rotate 90 CW Ctrl Shift 9 z e C4 Rotate 90 CCW Ctrl Shift 7 lt 0 00 p 4 90 tettene Flip Vertical Z N ane l A Flip Horizontal J O Hinting ation Remove Transform Ctrl Shift Z he Y 0 00 Z 0 0 ae The transform group in the Modify menu Basically through the menu one can select all the Free Transform tool options but there is more Flash object transform tutorial 165 Transforming Shapes The Shape Tools You can smoothen out shapes make them blurry or straigthen etc e Menu Modify gt Shape has a few tools You can for example e Smooth i e take away some edges e Reduce the amount of edges optimize e Add soft edges i e make the borders blurry e Straighten Here is an example of soft edges and straighten Blurry cat Straigthened cat Original vector graphics Modify gt Shape Tools Some of the operations do not work with composite objects E g in order to add soft edges 1 Ungroup break groups apart
217. ctangle or the one after it e Hit F6 create new keyframe with a copy of the old one e Modify the drawing a bit e g just turn an arm e Hit F5 about 4 times e Hit F6 Repeat Drawing tips If you play with a stickman then you might learn how to use the Free Transform tool W in order rotate limbs change the center point and rotate e Select the tool Bt e Select a limb and move the little white circle towards and end Then move the mouse to a corner until the mouse cursor changes to rotation Then drag to rotate e Read the Flash object transform tutorial for more information Enjoy Example e stickman cs6 fla 9 source e stickman cs6 html 8 A simple letter after letter animation The following animation was made in the maintime line and with Flash CS3 You can open the example files in Flash CS4 5 5 5 6 without problems The only problem one may encounter with CS3 files is that since CS 5 5 fonts must be embedded that s a small change Have a look at the this simple animation LOI first The fla swf and html files flash cs3 frame by frame hello can be found at http tecfa unige ch guides flash ex frame by frame intro We will produce an animation that will display the word HELLO one letter after each other The principle is quite simple We will insert new letters in new keyframes One could do this by inserting H into keyframe 1 then add E to keyframe 2 etc In order to slow d
218. ctionScript 3 0 components in Flash Part 1 Introducing components B3 Installed fla libraries can be found through the menu Window gt Common libraries You then can dock it next to your library for example Managing external components in CS3 Open Help gt Manage components You then can for example e enable disable e delete The same tool also gives access to the Adobe exchange help files etc Links Reference For Designers 34 35 e Flash CS3 Documentation Select Using ActionScript 3 Components or here then click on top left menu icon Yes Adobe can t manage URLs for pages and menus For programmers e UlComponent 36 Adobe AS3 reference manual For programmers External component files e Working with component files 87 Flash components overview 222 Tutorials e Getting started with Flash CS3 user interface components 38 Bob Berry Adobe e Flash and ActionScript components learning guide 39 e Creating ActionScript 3 0 components in Flash Part 1 Introducing components 33 by Jeff Kamerer Adobe sept 2007 Component libraries e Meta Index at HotScripts com 40 but not sorted by Flash version e Adobe Exchange beta 41 various licences also commercial Not everything a component e Atellis 42 Good reflection component dead References 1 http tecfa unige ch guides flash ex components intro flash cs3 components overview html 2 http tecfa unige c
219. ctionScript byte code An ASO file is recreated when a change in its corresponding class files is detected Occasionally the Flash IDE does not recognize that a recompile is necessary and these cache files must be deleted manually They are located in 7 USERPROFILE Local Settings A pplication Data Macromedia Flash8 en Configuration Classes aso on Win32 Flash8 avi AVI file is a video file standing for Audio Video Interleave Flash includes several compression codecs including some from Radius 12 if A GIF image either a single static frame or multi frame animation 13 Flash formats and objects overview 414 A PortableNetworkGraphic image i4 On the stage On the stage you can have various kinds of graphics objects i e objects that you can move copy delete transform stack align and group See also the Flash drawing tutorial Flash object transform tutorial and Flash arranging objects tutorial for more details Shapes Shapes are the most primitive objects When you draw shapes that overlap each other in the same layer the topmost shape cuts away the part of the shape according to your drawing controls When you draw a graphic like a rectangle in merge mode with both stroke the outline and a fill paint they become separate shapes and can be moved independently You can transform a shape into graphic object with menu Modify gt Combine objects union Tip As a general
220. cts on the stage there exist three solutions e Use the align panel Open it with Window gt Align or CTRL K and dock it next to the Colors panel e Use menu Modify gt Align e Use the shortcuts see Flash CS3 keyboard shortcuts Insert Modify Text Commands Control Debug Window Help Document Ctrl J AA na fA oA J Color Swatches Align x Info Transform Flash cs3 Convert to Symbol F8 Break Apart Ctrl B _ Align See S G fo ae F y Bitmap Distribute stage Symbol gt ZEB bb ob ag H Shape Match size Space Combine Objects E is m Timeline Library x Components Component Inspector Timeline Effects flash cs3 animation summary fla Me E Stick man Graphic Distribute Widths Ctrl Alt 7 Distribute Heights Ctrl Alt 9 Make Same Width Ctrl Alt Shift 7 Make Same Height Ctrl Alt Shift 9 v To Stage Ctrl Alt 8 Various align interfaces of Flash CS3 With the align panel you can align distribute or resize a series of selected objects Transform hh 1 120 0 0s gt T ali JE 2 items welll _ e a MA Align gt Group cre Horizontal Genter Ctrl Alt 2 Ungroup Ctrl Shift G Right Chl alt 3 Top Ctri alt 4 Vertical Center Ctri Alt 5 Name Type Use Cot Bottom Ctrl Alt 6 Flash arranging objects tutorial 172 There are two f
221. d Step 4 Consider some ActionScript 3 principles Let s introduce recall some ActionScript principles here In order to make a symbol e g a Flash button or a button component interactive we have to do three things 1 Give a name to the instance of the component on the stage 2 Adjust some parameters e g add a label for the button We will do this in the parameters panel 3 Add some ActionScript to the timeline that will e Tell the button to associate a user interaction event e g clicks with an action function e Program this action function In our case the function will move the user to another frame in the timeline Step 5 Give a name to each button and change its label e Click on a button make sure to lock other layers e Select the Parameters panel menu Window gt Properties gt Parameters e Give the button instance a unique name e g btn_rainbow is fine btn means button and rainbow because this button will lead to a rainbow picture This naming is necessary for ActionScript to work You will have to adopt a programmer s name e Start the name with a letter n e For the rest of the name you can use letters digits or the underscore _ e Do not use white spaces or punctuation characters or dashes If you do it wrongly Flash will complain e I suggest that you use only lower case letters Names are case sensitive Then you should change the label parameter of the button This is what th
222. d we push it a bit backwards var camera new Camera3D camera z 800 camera zoom 10 Ue Loop function loop event Event void my_cube yaw 5 renderer renderScene scene camera viewport Source CS3 Flash Papervision3D tutorial 403 e simple noclass pv3d fla 4 e Directory http tecfa unige ch guides flash ex pv3d Source CS4 e simple noclass pv3d fla 5 e Directory http tecfa unige ch guides flash ex4 pv3d Let s now take our previous example and make it a class structure An AS version of the rotating cube You can read the AS3 Compiling a program article if you want environments Here we explain how to do it with Flash CS3 116 Have a look at the simple as pv3d html result before to learn how to compile AS programs in various e Create a new ActionScript file not a Flash file Now save it as Simplepv3d as stick to this name unless you want to change code further down e Copy paste the following code package import flash display import flash filters import flash display Stage import flash events Import Papervision3D import org papervision3d cameras Camera3D import org papervision3d scenes import org papervision3d objects import org papervision3d objects primitives import org papervision3d materials import org papervision3d materials special import org papervision3d materials utils import org papervision3d rende
223. d Text is defined with a complex XML Schema but since Adobe Flash only implements a subset it s not worth using this Also Internet Explorer 10 supports Timed Text in the HTMLS5 video tag read HTMLS audio and video Figuring out time for captions There are several methods e Use the Adobe Media Encoder i e the playhead in the Export Settings as explained in the Flash video component tutorial e Use a Skin with full controls then slide the playhead you can see in the component on the stage to the right position Add a cue point It will show the current time Of course don t save these cue points A minimal example XML captioning file As a minimum we suggest to enter the following data For each caption enter Wow e A lt p gt lt p gt tag Each p should include e a begin attribute that defines when the caption should appear e adur attribute that defines how long it will stay on screen Time is in seconds but also may use a more complex format like O48 S055 meaning 2 minutes 30 seconds and a half Flash video captions tutorial 296 Here is the file we called timed text xml and that we used in this example lt xml version 1 0 encoding UTF 8 gt lt tt xml lang en xmlns http www w3 org 2006 04 ttafl1 xmlns tts http www w3 org 2006 04 ttafl styling gt lt head gt lt styling gt lt styling gt lt head gt lt body gt lt div xml lang en gt lt p begin 1 dur 4 gt Dan
224. d animation contained in FLA files retrieved Feb 2011 e The fxp file format is used by Flash Catalyst to create a compressed zipped Flex project archive that is understandable by Flash Builder I e designers can create a project in Catalyst and then hand it over to a Flash Flex programmer who will work with Flash Builder e Conversely fxg enables cross communication among Creative Suite Flash Catalyst and Flash Builder The FXG format is new to Flash Professional CS5 It allows Flash to exchange graphics with other Adobe applications such as Illustrator Fireworks and Photoshop with all of the complex graphic information preserved Flash allows you to import FXG files version 2 0 only as well as save selections of objects on the Stage or the entire Stage in FXG format FXG is based on a subset of MXML the XML based programming language used by the Flex Flash framework Flash glossary FXG 191 retrieved March 7 2011 Special purpose authoring tools There is an increasing variety of tools and for a wide range of people covering casual users to programmers Adobe Captivate 20 An authoring environment to create simulations scenario based training and robust quizzes Can import export to Flash fla documents Adobe Acrobat Connect P formerly called Breeze is a flash based videoconferencing software Adobe Flex 77 is a software development kit and an IDE for a group of technologies to make rich internet app
225. d drawings e g sky is drawn over the objects instead of the other way round just move this layer either to the top or to the bottom depending on your settings A result sort of Here is the result of a three times two trees two of my cats an imported cat and a little house flash cs3 drawing trees swf File View Control Debug A flash document with trees and cats Using textures Of course you may find the grass to be too ugly A good solution might be to replace a background color with textures Search on the web for free textures grass and save the file usually a jpg You should be aware that there are textures and textures meant to be tiled Simple pictures if smaller than the stage will produce tiles that you can see not exactly what you want So instead you can search for something free tileable grass textures If you can t find good tiles you may learn how to do this with this Photoshop BI from DadyyCool e You then can resize the image if it is too big and or crop it e After that deselect all objects click in the gray area or select the object you want to paint Then open the color panel and select type Bitmap from the pulldown menu Import the bitmap and select it you also will find a copy of the bitmap in your library Then paint the outline of your textured area with the brush tool in the Paint behind mode see brush tool above Then fill the rest with the paint bucket e You
226. d embedded movie clips See also the Flash embedded movie clip tutorial Use of embedded movie clips Instead of using the main timeline to create all your animations you also can animate so called movie clips i e instances of movie clips e Menu Insert gt New Symbol e Select Movie Clip and give a good name e Double click on this newly created movie clip in the library You now can edit this object s own timeline Alternatively transform an object into a movie clip e Select the object or use the lasso or another appropriate tool to select several objects e Right click gt Convert to Symbol Select Movie clip e Double click on this object to edit There are two ways to edit a movie clip 1 In stand alone view i e you only will see the components of the movie clip Double click on the movie symbol s icon not it s name in the library You now can edit e g a add a motion animation or change its drawings Most of time this editing mode is preferable 2 Edit with the scene as background If you put an instance of the movie clip on the stage and then double click on this instance you can edit the same movie clip symbol but you will see the objects of the stage while you edit By editing a movie symbol you basically can do the all the stuff you have learnt so far e g in the Flash frame by frame animation tutorial In other words movie clips have their own timeline A pulsating moving sun Let s now create a very simple
227. d hit F9 Then type hello_button addEventListener MouseEvent CLICK click_handler Programmers only You should be aware that a a component s events inherit from the parent classes You also can remove a listener with the removeEventListener Also the correct explanation is Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event The event object Let s recall that when an event happens Flash will create an object that will be sent to the registered function This object contains at least the following information type a string indicating the type of event target the instance that sent the event i e a reference to it Since target refers to an object you then can also extract information about the target e g its label if it has one The Event handler function The event handler function also called a callback function will be called by Flash as soon as the event happens Think a function as a kind of recipe that will do something with a given event This function that you have to define yourself will receive the following information e A single event object just described before that will contain information about the event type and the instance e g the hello_button in our case Jn other words the function will know what happened and where Now you must write some code that deals with it e g moves to playhead in the timeline t
228. d swe and Flint3d swc to the components directory of your flash installation e g in CS4 VISTA FINT particle system 390 C Programs Adobe Adobe Flash CS4 Common Configuration Components The directory now should look like this c Program Files Adobe Adobe Flash CS4 Common Configuration Components 0 Nov 26 2008 Data 0 Oer ID Sess wiliime 2 il 2 Swe O Nov 26 008 Media O Nov 26 008 User Interface 1778688 Sep 09 2008 User Interface fla O Oct OL 15322 Video 306176 Sep 09 2008 Video fla Open CS4 again your components panel now should include the Flint classes This is probably a dumb thing to do but the advantage is that you can remember that you have these libraries and where Anyhow putting these files there will not change a thing with respect to the next step Step 3 Fix the source path e Read Flash using ActionScript libraries tutorial for a detailed explanation else we will show how to do this below Alternative Install the source Skip this step if you took the swe files Step 1 download the FIiNT particle system Get a zip file of FINT source from http flintparticles org took E g on May 2010 Flint_2_1_4_swe zip You also may download extra stuff i e documentation and examples both can be found in the same place UH Dezip these three archives in a new directory Now since we are interested in snowflakes were are actually really lucky There is both example code i
229. d technical mini projects teaching The result is not absolutely convincing since you can t read the contents of column three It shows the minimum AS code you need to know in order to fill in DataGrid tables Flash datagrid component tutorial 305 You can tune some properties of this grid within the Component Inspector Shift F7 or the properties panel E g we made the cells editable But most tailoring has to be done through ActionScript coding There are dozens of properties and methods In addition since the DataGrid is an assembly of Column and Cell objects you also may change things at these levels You can find the link to the fla source after the slightly improved version which we shall discuss now Alternative data grid creation through AS3 Instead of opening the component library then dragging the component to the stage and giving it an instance name you could just enter the code below in frame 1 of the main timeline However you still need a DataGrid component in your library E g drag the component to the stage then kill the instance Firstly we have to import some standard packages that we will need Import the necessary packages import 1 7controls DataGrid import iL Ceimeicolls Semollieeil ey Now create a a new instance of DataGrid and name it datagrid_AS var datagrid_AS DataGrid new DataGrid We also tailor the size of column three and make the whole widget horizontally
230. dEventl The function itself looked like this function clickHandler event Mousel Event Cini llsveldalenavellkeue 2 yeme s CHLOR Cllselksieuachleie 2 EventListener MouseEvent CLICK clickHandler istener MouseEvent CLICK clickHandler Event void switch event currentTarget label case case case Case case Rainbow gotoAndStop 2 break TECFA r gotoAndStop 3 break r Bosses gotoA break Mk CO gotoA break Credi gotoA break ndStop 4 mputers ndStop 5 es ndStop 6 r The function will receive an object that contains information about the event Let s now look at the first line What does it mean function clickHandler event Mousel Event void e The function is called clickHandler we can give it any name we like e The event object it will receive for processing when something happens is associated with event In more technical terms event is a parameter that you can use as a variable in subsequent code e MouseEvent is the type of the event variable and we should declare this e void means that the function will not return any information Non programmers Just insert these last two elements the same way and don t worry Note Flash also allows Flash designers who typically just insert little bits of code to ignore typing e g you just could write function clickHan
231. data_grid addColumn coll The rest of the DataGrid definition code is more or less the same as above Now let s look at the buttons and if this really new to you you should read the Flash button tutorial We put all the button s instance names into an array Then we register the same colorPick event handling function for the mouse click event This is the list of instance names we create in CS3 var button_list Array blue cyan green pink red yellow For all we register the same Event Handler function for var i Number 0 i lt button_list length i button_list i addEventListener MouseEvent CLICK colorPick The colorPick function does the following line 2 The object button on which the user clicked line 4 After a user clicked on button it will be invisible line 5 we add the picked color to the end of a list line 7 If the user has picked three colors then we will act line 9 Add the three picked colors to the DataGrid Flash datagrid component tutorial 310 line 11 13 Make all buttons visible again line 13 Reset the list of picked colors function colorPick evt MouseEvent void var obj evt target A picked object goes hidden obj visible false selected_colors push obj name Once the user got three we display and reset all buttons to visible if selected_colors length 3 Hy seailil shia clover lagers CONG Warni aos ale st tele Weil ice
232. dd new layers frames symbols etc into the timeline Add a new scene Modify Modify elements on the workspace e g convert a graphic to a symbol make it a reusable object or change the shape of a drawing Modify timeline elements Text Change text properties Spell checking Commands Run macros XML export import Control Test animation in various ways including just sub elements Debug Tools to find errors in your scripts Window Configure the workspace add remove panels Help Built in help and links to useful on line resources Now you should be ready to start learning how to create drawings with Flash Move on to the Flash drawing tutorial References 1 http tv adobe com product flash Video 2 http helpx adobe com flash topics html 3 http www adobe com devnet flash html 4 http www adobe com devnet flash training htm 5 http www adobe com devnet flash learning_guide animation html 6 http www adobe com support documentation en flash 18 Basic drawing Flash drawing tutorial Draft Introduction Learning goals Learn about some features of the Flash CS3 drawing environment Learn painting and drawing simple objects Prerequisites Flash CS3 desktop tutorial or Flash CS4 desktop tutorial Flash layers tutorial first part Related pages texture and clipart import media elements Materials fla files you can play with http tecfa unige ch guides flash ex drawing int
233. ddle This registration point can later be seen with a little cross sign You can define the registration point when you create the new movie symbol Click on a different square next to Registration if you don t to use the default either upper left or your previous choice See the screen capture below Library Convert to Symbol es Names Comic Dragon pesa Type Mome dip R Registration aaa Cancel S gt pama v Movie Clip Folder Button oe Advanced Graphic gian C Enable guides for 9 slice scaling f ActionScript Linkage C Beport for ActionScript gs Scene 1 E Export in frame 1 Identifier Class 7 a Shape ca Base Class l2 y POSITION AND SIZE Runtime Shared Library X 199 35 Y 103 20 O Export for runtime sharing s W 152 15 C Import for runtime sharing 7 FILL AND STROKE URL 7 Za a Authortime Sharing v Source File File Scale O Hinting SSS Symbol Symbol name Cap 7 P E Update automatically Join v Miter 0 00 O PA Create a movie clip symbol set the registration point to center Anyhow you later can change this reference point by moving the drawing to another place in symbol edit mode By default a registration point is in the upper left corner I personally like to have in the middle for objects that I will use in anim
234. ded movie clips tutorial 272 Get the fla code and play kite movie html Source kite movie fla 7 Directory http tecfa unige ch guides flash ex6 embedded movie clips BI Exercise Add another movie clip animation E g a flying pulsating alien A Flash application with several movie clip animations You can look at this example 41 Tes a solution of a final exam of a beginner s Flash course This application has 5 frames The frames hold an entry title page and 4 other pages with animations Each what s going on here button in the other 4 pages will launch a movie clip Exercise If you feel that you need a more substantial exercise e Start with the final exam coap2110 2007 fla 4 file and make it look like the solution example presented above e This fla file already includes all the artwork the navigation buttons that need repairing and a script for each frame that needs completion Multi use of a movie clip for animations Let s image that you want a sky full of more or less the same animations One solution is copy paste modify movie clips or movie clip instances In some situations it is easier to do this with a little bit of ActionScript coding Flying kites example This examples shows how to use an embedded action script movie multiple times We want some kites flying over the same picture from right to left To make it bit more interesting we randomly change for each kite e the position i
235. der component lets a user select a value by sliding a graphical thumb between the end points of a track that corresponds to a range of values You can use a slider to allow a user to choose a value such as a number or a percentage for example You can also use ActionScript to cause the slider s value to influence the behavior of a second object For example you could associate the slider with a picture and shrink it or enlarge it based on the relative position or value of the slider s thumb Adobe documentation Ha e Slider class ActionScript 3 0 Language and Components Reference Other ColorPicker The ColorPicker component allows a user to select a color from a swatch list The default mode of the ColorPicker shows a single color in a square button When a user clicks the button the list of available colors appears in a swatch panel along with a text field that displays the hexadecimal value of the current color selection Adobe documentation 19 e Using the ColorPicker 20 Using ActionScript 3 0 Components e ColorPicker class PH ActionScript 3 0 Language and Components Reference ComboBox A ComboBox component allows a user to make a single selection from a drop down list Adobe documentation 22 Label The Label component displays a single line of text typically to identify some other element or activity on a web page You can specify that a label be formatted with HTML to take advantage of its text forma
236. des a script element The use of actionscript within a lt mx Script gt tag is 5 6 explained in the Flex Language Reference or this blog post on Using ActionScript in Flex applications Flash ActionScript 3 overview 363 Using ActionScript like a Flash Designer e Create a new layer e Click on a frame typically frame 1 e Hit F9 the copy paste or write your code This is the way most of the Flash examples made in our tutorials were made Scripting in the timeline does not require from you to use classes However sometimes you need to import packages i e when Flash whines that it can t find a method Examples are import Fl managers FocusManager to work with keypress events import fl video MetadataEvent to work with cue points in flv videos Using ActionScript classes in CS3 Most examples in the official Using ActionScript 3 0 Components 35 5 and ActionScript 3 0 Language and Components Reference are made with a class structure and require that you learn this read also Using examples in the ActionScript 3 0 Language Reference U 1 Write code in a AS file and give the file the same name as the primary class for example ContextMenuExample as 2 Create and save a new empty FLA file in the same directory as the AS file 3 In the Properties tab of the Property inspector enter the class name of the primary class for the example in the Document class text box for example ContextMenuEx
237. des flash ex shape tweening intro flash cs3 shape tweening in motion2 fla Flash embedded movie clip tutorial Draft Overview Learning goals Learn how to create embedded movie clips e Learn how to copy paste animations from the main timeline into a a movie clip symbol Prerequisites Flash drawing tutorial Flash motion tweening tutorial Flash component button tutorial Some ActionScript e g ActionScript 3 interactive objects tutorial to understand the examples towards the end Moving on Flash using embedded movie clips tutorial adding interactivity Flash drag and drop tutorial The Flash tutorials index has a list of other tutorials Level and target population e It aims at beginning Flash designers Embedded movie clips are used in various other tutorials but here we explain it a bit more systematically Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Alternative versions e Flash CS3 embedded movie clip tutorial Movie clips are Flash animations applications In other words your whole Flash file is a movie clip Now in a fla file you can have embedded movie clips having their own timeline In other words you can have flash clips within flash clips There are several types of movie clips e Movie symbols and instances That s the main topic of of this tuto
238. dimensional look Parameters angle blurX blurY distance highlightAlpha highlightColor shadowAlpha shadowColor gth quality Simple TweenMax example The goal is to take a picture and make it look old or otherwise bad as in the following tweenmax photo filter html 21 example Instead you might have used the TweenFilterLite library too Procedure Drag a jpg picture into the library Drag it to the stage and make it a movie clip symbol Right click gt Convert to symbol Call it picture _mc Kill the picture on the stage Drag two copies of the new movie clip symbol to the stage Name the first one picture and the second one picture2 This way the AS3 code can use them as objects AS3 code import com greensock TweenMax import com greensock easing TweenMax to picture Sy o lo eMetc isis iliheers Colorir xi CESS EWE 310 4 COMmewasce sO 6 JIoeaclacmessgil i sacusaciems0 4 ease Back easeOut TweenMax to picture2 AS3 tweening platform 383 Diy colorMatrixFilter amount 0 4 contrast 0 3 brightness 2 0 saturation 0 8 ease Back easeOut Source e http tecfa unige ch guides flash ex greensock directory e File tweenmax photo filter fla 22 Another example with TweenMax The code below is coming from a game dedicated to children The goal is to count cheeses and send them into a box by clicking on any cheese The feedback depends on the amount of
239. dler event but this is considered bad practice it makes your program less secure ActionScript 3 event handling tutorial 358 switch is a programming statement that is use to organize program flow In other words we need to take different action for different user input Its syntax is the following switch value Case valus il g do something break case value_2 do something break So event currentTarget label means that we ask the event object event its current target i e the button on which the user clicked and from this its label i e what the user sees This will allow us to figure out which button was clicked Events obverview All display objects with which you can interact can produce events mouse keyboard and focus e InteractiveObject I Adope ActionScript 3 0 Language and Components Reference List of events Here is a short list of all most events that can be generated by interactive objects with which a user can interact through mouse keyboard and the more general concept of focus It also includes loading modification events like animation entering a frame or an object being inserted to the stage For very technical information consult in Adope ActionScript 3 0 Language and Components Reference InteractiveObject 9 see also its subclasses and Event 4 and subpages like MouseEvent 2 Here is a list of events and mouse keyboard focus event
240. dobe com flash 9 0 main wwhelp wwhimpl common html wwhelp htm context LiveDocs_Parts amp file 00000397 html wp124974 2 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash events MouseEvent html 3 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash events MouseEvent html CLICK 4 http www adobe com devnet actionscript articles event_handling_as3 html 5 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 class summary html 362 Working with ActionScript libraries Flash ActionScript 3 overview Draft ActionScript 3 overview information This is part of the Flash and ActionScript series of articles But it is not a tutorial The purpose of this entry is to provide some general information about ActionScript and some useful links See also e The entry page for AS3 tutorials in this wiki is Actionscript 3 e Flash and AS3 links general e Flash and AS3 links tutorials e Flash and AS3 links documentation Flash and AS3 Books Reference Manuals and Cheatsheets e Flash and AS3 links toolkits AS 3 Toolkits Libraries Flash reusable components AS 3 reusable code etc Introduction Writing and using AS Code ActionScript 3 0 is a dialect of ECMAScript which formalizes the features of ActionScript 2 0 adds the capabilities of ECMAScript for XML E4X and unifies the language into a coherent whole Grossman 2006 ActionScript 3 was built on a proposal for ECMAScript 4 0
241. e Closing a panel e On top right of each panel is a pulldown menu Click on close or close group You also can undock a panel and the click top right on the x icon Minimizing Iconizing panel groups Panel areas left and right can be minimized by double clicking on its top bar or by using the tiny arrow Fl Designer 0 o x File Edit View Insert Modify Text Commands Control Debug Window Help Iconized panels e This option is only useful if you got a small screen e If you just need more space for drawing hit F4 and F4 again to get the full workspace back Adjusting panel size You can adjust panel width to a certain extent Just drag the right or bottom borders Each panel has a minimal size width and height and you can t reduce below it E g if you want a classic vertical main tools panel you can but you need to put it into its own column else the other panels will impose a minimal size Flash CS6 desktop tutorial 13 Saving an environment To make sure that you can find a configuration again you may save it under a given name If you do different kind of work with Flash you may save several kinds of working environments e Window gt Workspace gt Save Current If you are happy with what you did save your configuration now An example configuration Here is an example configuration Daniel K Schneider was using for Flash CS4 I like to have most tools at my
242. e X 232 2 380 8 9 Z 0 0 4 90 00 O Skew W 79 9 H 20 0 wo Symbols that a ready for assembling into an IK armature Step 3 create the armature Again make sure that all the symbols you need are on the stage and in the same layer The armature must have a hierarchical structure The parent will be attached to the stage its children to the parent and the great children to the children etc In our case this means that we start with the rectangle that should be attached to the floor i e the right most rectangle Select the bone tool and click on the first symbol The first one you select will be the parent shape i e it will attach the whole armature to the scene Again in our case we start with the rectangle to the right Flash inverse kinematics tutorial 253 Now let s connect this first symbol to the next symbol e From from the inside of this first symbol start dragging with the bone tool stop somewhere inside the next symbol i e release the mouse where you want your bone to end If you release the mouse outside of a symbol nothing will happen If you are succesful you can see a bone as shown in the next picture Marana plaything q Stop H o a5 E q background B q Credits ikNode_0 0000006 Mim OA Connecting the first two elements right to left e You may have to zoom in 200 400 Hit F4 if you need more drawing space and hi
243. e i mii E Preview in Context Short v Tinted Frames Time line options pulldown menu When you start drawing with Flash everything is drawn by default into a first frame in layer 1 newgradient fla frames fla Uge 0X 10 15 20 25 30 25 40 d Editing keyframe 1 EIn tTa 1120s 00s mili gt The default keyframe is frame 1 E g if you insert a letter for example you will see something like in the screen capture just above The first frame in the timeline will have a dot inside Therefore if you see a frame with a it means that there is a drawing inside the frame for this layer A frame with contents is called a keyframe A frame with a small white circle is called an empty keyframe It will display nothing A frame without a dot doesn t have any drawing inside and it will either display the drawing from the prior keyframe black dotted frame to the left or nothing if there is no keyframe to the left The playhead showing the current frame the red rectangle sits on top of frame one by default and you can move it around to inspect your animation Flash frame by frame animation tutorial 47 Executive summary creating a frame by frame animation Before pressing a button or using the menu make sure that your are positioned in the right frame in the right layer It also is a very smart idea to lock all other layers see the Flash layers tutorial Let s recall the principle e F
244. e An_tween_editor_overview_popup png License unknown Contributors File motion editor2 png Source http edutechwiki unige ch mediawiki index php title File Motion editor2 png License unknown Contributors image flash cs6 underneath the pen tool png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 underneath the pen tool png License unknown Contributors File an_corner_and_curve_points_popup2 png Source http edutechwiki unige ch mediawiki index php title File An_corner_and_curve_points_popup2 png License unknown Contributors File flash polystar png Source http edutechwiki unige ch mediawiki index php title File Flash polystar png License unknown Contributors File Flash polystar interpolation path png Source http edutechwiki unige ch mediawiki index php title File Flash polystar interpolation path png License unknown Contributors image flash cs 6 motion tweening a clip overview png Source http edutechwiki unige ch mediawiki index php title File Flash cs 6 motion tweening a clip overview png License unknown Contributors image flash cs 6 motion tweening a clip editl png Source http edutechwiki unige ch mediawiki index php title File Flash cs 6 motion tweening a clip edit png License unknown Contributors image flash cs 6 motion tweening a clip rotate png Source http edutechwiki unige ch mediawiki index php title File Flash cs 6 motion tweening a clip rotate png License unknown Co
245. e http edutechwiki unige ch mediawiki index php title File Flash cs3 motion shape tweening png License unknown Contributors image flash cs3 onion skins png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 onion skins png License unknown Contributors image flash cs3 rotating clock hour hand png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 rotating clock hour hand png License unknown Contributors image flash cs3 rotating clock png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 rotating clock png License unknown Contributors image flash cs3 motion tweening sung jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs3 motion tweening sung jpg License unknown Contributors image flash cs3 rocket moving library png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 rocket moving library png License unknown Contributors image flash cs3 motion layer png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 motion layer png License unknown Contributors image flash cs3 rocket motion guide png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 rocket motion guide png License unknown Contributors image flash cs3 motion guide snapping png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 motion guide snapping png License unknow
246. e Flash motion tweening tutorial for example In your library Graphic symbols Graphic symbols are named graphic objects You can transform a drawing or shape into a graphic symbol with the right click menu Actually as soon as you are happy with a creation you should do this Movie symbols Movie symbols are Flash animations that you can edit by double clicking You can use them as components for more sophisticated animations Button symbols Button symbols are special movies that implement the graphics or button touching pressing releasing etc Bitmaps Bitmaps Are imported bitmaps of various formats e g jpg gif png Tweens Represent motion tweens I never use these If you have these in your library it means either e You are an advanced Flash designer e Something went wrong when you made a motion animation e g you animated more than a single object or an editable object Movie clips Movie clips are simply imported Flash files swf You can drag them on the stage and for example use them in a motion animation Compiled clips Compiled clips are ActionScript objects exported imported trough the swe format If you drag an instance to the scene you then can edit its particular parameters through the properties or the component inspector panels Flash videos These are Flash video containers in flv format When you drag these to the stage they will integrate to the timeline E g a short movie
247. e Greensock tweening libraries e External library path specifies the location of SWC files that contain code used for compiler error definitions This path can be used to load external code resources in SWC format so that the classes within them can be used at runtime When you compile a SWF the SWC files in the External Library path are not added to the SWF file but the compiler verifies that they are in the locations you specified The External Library path is most often used for runtime shared libraries For more information about runtime shared libraries see working with runtime shared assets 1 e Document class also can be set in Document Property inspector Used to associate a specific class with a document i e typically used to compile an ActionScript program you write yourself Local source path alternative option Alternatively not recommended e Instead of defining the source path You also could copy the com directories that include source to the directory where your fla file sits e Instead of defining a library path Copy the swc file to the same directory of your fla file and add to the library path Global source path Through Edit gt Preferences gt ActionScript 3 0 Settings you can set source pathes for all your projects e Source path e Library path e External library path Setting source pathes Below we reproduce the detailed explanations from Adobe s Set the location of ActionScript files 5 ret
248. e Move your mouse over a stroke line but not over a distortion box e You will see some vertical or horizontal double arrow skew icon e Then drag Skew with the transform tool Rotations e By default an object will rotate around the white circle in the middle But you can move this rotation point Grab it with the mouse and move it where ever you want Flash also gives some help E g if the drawing is a line it will display the center of the line and you then can move the point to one of its ends for example In the following screendump we have a picture of a stick man and we d like turn his right arm To do so e Click on the Free Transform tool standard options as above Then move the little dot in the right arm towards the inner end of the stick man The cursor should have a little circle next to it in this mode See the screen shot below Flash object transform tutorial 162 Change rotation point with the Free Transform Tool After that you can rotate the arm around its new rotation point as described in the previous section e Again use the Free Transform tool standard options Rotate around the new rotation point with the Free Transform Tool The standard options of the transform tool allows to rotate resize and distort an object You have to work with options for more complex transforms Flash object transform tutorial 163 Envelope transforms Envelope transf
249. e Word and Powerpoint and the Open Office equivalent Indexes It is extremly difficult to find good free clipart sites Best bet is really the Open Clip Art Library 4 but then may have to transform SVG into another vector format e g if you work with Flash Clip Art DMOZ most links are junk e The Big List of Clip Art Topics 5 about com Also fairly useless for finding vector images e Cliparts index on the widged wiki L61 handpicked and categorized by license 100 free free for education Extra link for Images with an Education Theme e photobucket Move png animations to edit online download and share free cheap pro membership In SVG Format SVG became the most standard format in the open source community SVG also is part of HTMLS Many commercial programs can import SVG but some like Flash or Stitch Era embroidery software can not In this case use you can for instance e Import to Illustrator or Corel Draw then either copy paste to the other application or import the proprietary format e g ai e Open with the free Inkscape B tool and export as emf Enhanced Windows Metafile worked for me ai Illustrator or dxf Autocad and then import to Flash import of the two latter didn t work for me when I last tested a few years ago Open Clip Art Library SVG and PNG e The Noun project 8 sign up required e Files from the Openclipart library I e Nuvola SVG icons 10 Clipart
250. e You can copy paste poses Right click directly in the timeline on a keyframe i e an existing pose and copy pose Then right click in a different frame and paste pose Make sure to directly right click no click first else it won t work What if you got it all wrong e Select the armature layer by clicking on it This selects the whole IK structure e Kill the parent bone in our example it its on the bottom e The select all symbols and copy them back to the initial layer plaything in our case You could use ctrl shift v to copy in place e Then delete the armature layer and start again Flash inverse kinematics tutorial 255 Adjustment of the time line e Just drag the latest frame out or in Make sure that you see a horizontal double arrow i e don t click in the last frame In the latter case you would just move the whole animation chain to the right Result and source e symbols ik armature intro html 9 e Source symbols ik armature intro fla 11 Notice Magnify to 400 if you want to play with it the bevel filters do seem to have a strange effect on selection e Directory http tecfa unige ch guides flash ex6 inverse kinematics Adding armatures to shapes You also can add an armature to a shape as we have seen in the initial demo 7 shown at the start I recommend the following steps Step 1 Create a new layer with a single shape e Draw a shape or a simple drawing in object mode Make sure to fin
251. e a duplicate of those shapes at the spot where you release the mouse button CTRL Clicking a keyframe to move frame CTRL clicking a frame in the timeline switches the cursor to a slider and allows you to click and drag that frame to a new place in the timeline within that same layer Useful if you want to stretch out tweens for example With the magnifier tool Control Click Toggles to the opposite magnifier If the magnifier zoom in is active and you hit Control while clicking you will switch to the magnifier and actually zoom OUT With the dropper tool Shift Click Select a color for both fill and outline tools Clicking a red fill will do the same giving you the Bucket tool and switching fill colors to red But the outline tool colors are not changed Clicking on text switches the text tool to that color and gives you the text tool Shift clicking with the dropper makes the color you click on active for ALL tools and doesn t automatically switch you to any tool It leaves the dropper active This is one of the least well known short cuts in Flash and is the ONLY way to use the dropper on an outline for example and then be able to switch to the fill tool and have that color automatically active already References 1 2 3 4 5 http www solotype com en us Products 154 flash shortcuts aspx am http widged com http www adobe com go tn_12105 http helpx adobe com flash kb flash keyboard shor
252. e ch guides flash ex6 buttons intro flash cs6 mouse over button fla 10 http tecfa unige ch guides flash ex6 buttons intro flash cs6 mouse over button2 html 11 http tecfa unige ch guides flash ex6 buttons intro flash cs6 mouse over button2 fla 12 http help adobe com en_US as3 dev WS5b3ccc5 16d4fbf35 1e63e3d118a9b90204 7eld html 13 http help adobe com en_US as3 dev WS5b3ccc5 16d4fbf35 1e63e3d118a9b90204 7d9d html WSS5b3ccc5 16d4fbf35 1e63e3d1 18a9b8ea63 7ffd 14 http help adobe com en_US as3 dev WS5b3ccc5 16d4fbf35 1e63e3d118a9b90204 7fca html Flash augmented video tutorial 276 Flash augmented video tutorial Draft Introduction Video components are prebuilt interface elements widgets that will speed up video integration As explained in the Flash video component tutorial the FLVPlayBack Video Component allows to render videos in an easy way since it includes a nice choice of skins for user controls Videos also can be enhanced with captioning read the Flash video captions tutorial or they may interact with the rest of the animation Some of these techniques require some some ActionScript as we shall explain here As an alternative you also can add a video to the main timeline but this will create very large swf files and its therefore a technique that should be used with care Finally you also could program your own video interface using ActionScript a topic that will not be covered here Learning goals L
253. e clip in the library e Do shape tweens Make sure that you really are in symbol edit mode E g in the screen capture below you can see in the Edit bar that we are editing Planet a movie and not Scene 1 assag lt ao 2 10 120fps 0 8s 4 d o Edit a Movie Symbol the planet Click on scene 1 or whatever your scene is called to get back to the normal stage alternatively use the pull down menus to the right e The planet was made with a simple gradient transform In the first keyframe there is some green on the upper left and in the second keyframe it is on the lower right e The star simply changes color from yellow to orange and then from orange back to yellow Step 4 Create a motion animation for each of the shape tween movie clips e Tip if you want to move an object around an ellipse draw a real ellipse then cut of tiny bit with the eraser It then becomes a motion guide line The picture below shows the kind of time line in you should get in the main scene Flash cs3 shape tweening in mation fla l CAK Vne fh 3 T Guide Motion XX e o W Planet 7 Guide Star W Star Background anag anm 10 120fs 08s 4 Sscene1 Edit a Movie Symbol the planet Final Tips Flash shape tweening tutorial 105 e Make sure at which level you are editing scene or embedded movie clip e Use a different layer for each motion animation In each layer just put one sy
254. e found here http tecfa unige ch guides flash ex frame by frame intro I imported this rocket from Uncyclomedia Commons 13 http commons uncyclomedia org wiki Image Rocket svg e It s an SVG file that I first opened with Illustrator e I then copy pasted it to Flash See the Clipart article i e the section on Importing to Flash Now we would like to animate the flames of this little rocket Step Break the rocket into components Flash frame by frame animation tutorial 56 e Break the rocket apart right click gt Break Apart You now should see various rectangles drawn around its various shapes e Flames are made with 2 shapes the two rectangles in the lower right flash cs3 shaking hello fla flash cs3 rocket fla A broken apart imported SVG rocket Step 2 Put the flames into another layer The easiest way is to use distribute these to other layers e Select the 2 flames hold down the SHIFT key and click on the orange and yellow parts Then Right click gt Distribute to layers e Rename the two layers you created Now you should have something like in the screen dump below I am positioned in the yellow flame layer and show the other two as outlines Flash frame by frame animation tutorial 57 u rocket T yellow flame wu red flame O 328 iun BE 1 120fps O 0s 4 Rocket with flames in layers Step 3 Duplicate frame 1 to frames 2 and 3
255. e g size colors e g with the lasso tool and the magic wand e Trace images i e turn them into vector graphics See the Flash bitmap tracing tutorial for some ugly examples or portrait morphing Morphing an egg into dragon clip In this animation I used an embedded movie clip with the following procedure Step 1 Main timeline layers and creation of a Movie clip symbol e Created a background using grading colours Read the flash colors tutorial e Created a new layer called Dragon Animation e Created a grey egg with the oval tool no borders e Created a movie clip symbol from this drawing Named it Dragon clip FI File Edit View Insert Modify Text Commands Control Debug Window Help Designer O o x Tools ka BOP amp iTN LP LAIA A G DE mpag flash cs6 shape tween dragon egg fla x flash cs6 shape tweening intro fla x Dragon dip i Instance Name gt X Dragon original Movie Clip Instance of Dragon Clip Swap v POSITION AND SIZE X 275 45 Y 345 90 W 214 00 H 89 00 D 3D POSITION AND VIEW Beet Pt bb vy COLOR EFFECT Distribute style None zea hh Match size Space Bie 2 i D Align to stage lt DISPLAY M visible Blending Normal Render Original No Change Main time line setup Layer for the background layer for the dragons no animation Step 2 Movie c
256. e g name class for a file called noise mp3 something like Noise_sound e Then create a new sound from this class just this single line var cool_noise_sound Sound new Noise_sound Flash sound tutorial 144 To play your sounds your_sound play cool_noise_sound play To play 5 loops your_sound play 0 5 To stop all sounds this is a static method just insert the line as is SoundMixer stopAll Stopping a single sound takes some more code your_sound stop will not work since you will have to stop a Sound channel as opposed to just the sound file Use the following code fragment See the on off button example just below for a complete example var channel SoundChannel Clicioimeil sjolehy P channel stop For a on off button Select the symbol which is aimed to be the button in the frame where the on off has to happen Select the code snippet click to play stop sound in the audio and video category Give an occurrence name to your symbol and target your soundfile name instead of the flash example Click to Play Stop Sound Clicking on the symbol instance stops the sound Clicking on the symbol instance plays the specified sound again sf stop_start addEventListener MouseEvent CLICK start_stop_sound var f1_SC SoundChannel var s Sound new Sound new URLRequest music mp3 This variable keeps track of whether you want to play or stop the sound
257. e of filters Both Tweenlite and TweenMax add the ability to tween filters like blurs glows drop shadows bevels etc as well as advanced effects like contrast colorization brightness saturation hue and threshold To understand what filters are you may read documentation at Adobe e Flash graphic effects learning guide 17 An Adobe tutorial made for CS3 designers and that also explains concepts e About filters 8 Chapter of the Adobe Using Flash CS3 manual To understand what the tweening platform filters do you also could consult the AS3 or Flex documentation The parameters of the greensock classes are much easier to use than the properties and the methods of the official AS3 libraries However this documentation may help to understand the meaning of these parameters and what kind of values you should use e flash filters package 5 ActionScript 3 0 Language and Components Reference or e Package flash filters 19 Adobe Flex 2 0 1 Language Reference TweenMax features TweenMax builds on top of TweenLite and TweenFilterLite It uses again the same syntax and just adds some functionalities that are less essential The only tradeoff is some slight increase in size i e 11K of AS code which is still very small In addition to FilterLite and TweenLite you can do the following and more that we may document some other time bezier Array Allows to tween with a bezier array TweenMax to my_mc 3 _x 500 _y 0
258. e or a corner and pull as soon as the cursor changes Always make sure that you see a big cross hair cursor before you start moving around anything Subselection tool The subselection tool allows you to select paths of an object so that you can make more sophisticated modifications Click on the outlines of objects You then can drag around the little squares and dots that will appear i e modify portions of shapes See the Flash object transform tutorial for details If you want to modify a symbol in the properties panel you can see something like Instance of you have to break it apart Right click gt Break Apart Free Transform and Gradient Transform tools The Free Transform tool 4 will allow you to make several kinds of transformations When you select an object with this tool and then move the mouse over different spots you will that the mouse cursor changes shapes Each one will allow you do different transformations e Scale an object double ended arrow e Rotate an object circle arrow e Skew distort an object double ended double arrow To do a proportional scale hold down the SHIFT key and then drag a corner There are more options to the free transform tool e g so called envelope transform see the Flash object transform tutorial if your are curious about this The Gradient Transform tool is hidden below the free transform tool by default and allows you to change the ways in which color gradie
259. e stage you produce an instance of the symbol In order to find this instance Flash needs to know it by name It s like in magic you name it you control it e Let s call this button instance launch_button e Open the properties panel and fill in the field see below Instance of Button launch 37 POSITION AND SIZE X 3330 Y 784 20 ew 58 00 H 58 00 7 COLOR EFFECT Name the button symbol instance Make sure that the name is doesn t have any blanks or special symbols inside actually Flash will complain if you define an illegal name Adding ActionScript code In order to make Flash buttons interactive we will have to write some code This code must be defined for the same frame s as the button but we usually use a different layer e The scripting layer is usually called Script or Action or AS3 e To enter the ActionScript editor just select the right frame in the script layer and the hit F9 So let s code now Flash button tutorial 200 Add AS3 stopping code to the timeline e Add another layer and call it Action or Script e Click on Frame 1 in this new layer then hit F9 and in the Actions Frame panel insert SiO On OE This will just stop the execution of the main timeline movie I e Flash will only display the contents of the first frame all layers and then wait Add AS3 code for navigation e Now we will add some more code below the stop line So click aga
260. e structure in various ways Use solid for simple stuff and wire to be able to work on finer details Flash inverse kinematics tutorial 260 LY EL 2 P T m 3 plaything_armature LIP LOAFPAQDA plaything BL 5 r Stop DB 7 LA a Oo ah background S Credits kl aw im DA ER A AN Type Stop and Start Medium v x7 OPTIONS Type Authortime v Style Wire v Flash CS4 armature properties Flash automatically moves all the object from the drawing layer to the armature layer as soon as you create an IK Therefore if you want to break the armature make sure to copy first all your stuff from the armature layer to another layer or much better before you start adding an armature simply save your drawings as a symbol in the library break apart the instance on stage again after you saved Dealing with the whole IK structure e To select the whole IK structure or shape click on it e You then can change its position e g use the arrows e You can scale it using the Transform panel Editing Bones After creating bones i e the connectors there are many ways of editing them You can reposition the bones and their associated objects move a bone within an object change the length of a bone delete bones and edit the objects containing the bones Remember that you should edit the bones before you start adding poses To select a bone use the select
261. e user will see Type anything there but don t make it too long it s a button after all e If your text is bigger than the label either change the button width in the same panel modify the W and H fields or use the free transform tool Probably you noticed now that it is easier to work with a component button vs using Flash buttons as explained in the Flash button tutorial Flash component button tutorial 229 labelPlacement selected toggle Parameters of the ActionScript3 button Repeat this step for all buttons Step 6 Copy paste and adapt code e Click in Frame 1 of the Action Layer you already should have defined see step 1 e Hit F9 to open the Actions Frame panel In case it is docked with the parameters you may undock it to have some more space Then paste all the code below and adapt it Alternatively open the flash cs6 simple slide show menu fla DI File and copy the code from there In case you don t want to copy paste just read the following explanations and sample code and then do it on your Own STOPOR btn_rainbow addEventListener MouseEvent CLICK clickHandler btn_tecfa addEventListener MouseEvent CLICK clickHandler btn_bosses addEventListener MouseEvent CLICK clickHandler btn_my_computers addEventListener MouseEvent CLICK clickHandler btn_credits addEventListener MouseEvent CLICK clickHandler function clickHandler even
262. eInstruct html 8 http www adobe com products flex downloads 9 http www jedit org 10 http www computerhope com unix upico htm 11 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash net NetStream html 12 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash media SoundChannel html 13 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash utils Timer html 14 http livedocs adobe com flash 9 0 main 00000143 html 15 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash display Loader html 16 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash display MovieClip html 17 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl video FLVPlayback html 18 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl video FLV PlaybackCaptioning htm 19 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl controls BaseButton html 20 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl containers BaseScrollPane htm l 21 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl controls ComboBox html 22 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl controls progressBarClasses IndeterminateBar html 23 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl controls Label html 24 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl controls ProgressBar html 25 http livedocs adobe com flash 9 0 Actio
263. ead red rectangle that sits on the top of the timeline e Then you can test the movie through the menu Control gt Test Movie or hit CTRL Return This will open a up a new window where you can see more or less what an end user would see Step 7 Now we want to tune a few things 1 You may not be happy that the movie starts with letter H already displayed Right Click on Frame 1 and Insert Frame not a keyframe or hit F5 Repeat this 4 5 times Then hold down the mouse and drag the black dot in the new frame 1 to frame 5 2 Your Movie may be too slow or too fast Flash animation made with the CS3 drawing tools is not time based as in SVG for instance so you have to fix a frame rate You can change the frame rate number of pictures shown second in two ways e Click on an empty spot on the stage and change the rate in the properties panel that you should see below e Menu Modify gt Document CTRL J For this animation about 15 frames are about right I think 3 You also may align the letters But you have to do this in each keyframe else they will jump around which actually may be an effect you like Flash frame by frame animation tutorial 53 To align all letters in all frames Click on the Edit multiple frames button Color Swatches Align x Info Transform Flash cs3 frame by Frame hello Fla me 39 35 40 45 50 55 60 65 70 75 80 85 _ 0 ME ao EN 2 24 150fs 15s 4 Edit Mult
264. earn how to create augmented videos e g animations that are triggered by so called cue points or buttons that allow the user to access specific frames in the video Prerequisites Flash CS6 desktop tutorial Flash video component tutorial important Flash drawing tutorial Flash component button tutorial Flash button tutorial Flash motion tweening tutorial Flash shape tweening tutorial Flash special effects tutorial Flash embedded movie clip tutorial Moving on Flash video captions tutorial Adding subtitles to a video The Flash tutorials article has a list of other tutorials Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Level It both aims at beginners FLV encoding using the video playback component and embedding a video in the timeline and intermediate Flash designers inserting captions and using cue points to trigger animations By augmented video we refer to several ways of adding some extra value to a video 1 Add navigation buttons that will move the user to particularly interesting scenes of a video 2 Trigger animations that will illustrate or otherwise relate to a given video scene 3 Add a set of subtitles or side text to the video This is covered in the flash video captions tutorial In this article we shall present two types of technologies e You could import
265. easons or to expose the code to versioning applications They sometimes use the extension actionscript swd swd files are temporary debugging files used during Flash development Once finished developing a Flash project these files are not needed and can be removed asc asc files contain Server Side ActionScript which is used to develop efficient and flexible client server Macromedia Flash Communication Server MX applications flv flv files are Flash video files as created by Adobe Flash ffmpeg 6 Sorenson Squeeze I or On2 Flix 8 It s container format that uses 5 mostly h 263 9 for video and MP3 0 for audio swe swc files are used for distributing components they contain a compiled clip the component s ActionScript class file and other files that describe the component jsfl jsfl files are used to add functionality in the Flash Authoring environment they contain Javascript code and access the Flash Javascript API swt swt files are templatized forms of swf files used by Macromedia Generator flp flp files are XML files used to reference all the document files contained in a Flash Project Flash Projects allow the user to group multiple related files together to assist in Flash project organization compilation and build 11 spl spl files are FutureSplash documents aso aso files are cache files used during Flash development containing compiled A
266. ed when a display object is about to be removed from DisplayObject the display list either directly or through the removal of a sub tree in which the display object is contained render Dispatched when the display list is about to be updated and Display Object rendered rollOut Dispatched when the user moves a pointing device away from InteractiveObject MouseEvent ROLL_OUT an InteractiveObject instance rollOver Dispatched when the user moves a pointing device over an InteractiveObject MouseEvent ROLL_OVER InteractiveObject instance tabChildrenChange Dispatched when the value of the object s tabChildren flag InteractiveObject Event TAB_CHILDREN_CHANGE changes tabEnabledChange Dispatched when the object s tabEnabled flag changes InteractiveObject Event TAB_ENABLED_CHANGE tabIndexChange Dispatched when the value of the object s tabIndex property InteractiveObject Event TAB_INDEX_CHANGE changes ActionScript 3 event handling tutorial 360 Events decomposed Each generated event contains different information but some is inherited by all kinds of events All events Technical note The basic event class includes total included inherited 8 properties 26 constants and 13 public methods The most interesting property of an event is e currentTarget the object that is actively processing the Event object with an event listener E g the button on which a user clicked You probably will use this
267. ediawiki index php title File Flash cs3 rocket symbol png License unknown Contributors image flash cs3 rocket hello library png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 rocket hello library png License unknown Contributors image flash cs3 rocket hello use png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 rocket hello use png License unknown Contributors image flash cs3 library example png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 library example png License unknown Contributors image flash cs3 motion tweening0 png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 motion tweening0 png License unknown Contributors image flash cs3 motion tweening png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 motion tweening1 png License unknown Contributors image flash cs3 motion tweening2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 motion tweening2 png License unknown Contributors image flash cs3 motion tweening3 png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 motion tweening3 png License unknown Contributors image flash cs3 motion tweening png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 motion tweening png License unknown Contributors image flash cs3 motion shape tweening png Sourc
268. een parameterl_num Number parameter2_mc MovieClip void trace The tween has finished parameters parameterl_num and r SeUcelNIeSESie2_ ime p AS3 tweening platform 380 The tween has finished object MovieClip parameters 5 Mrmr LTZ LP PAZ ADA AOR he m s movie_clip kk Simple Tweenlite example Example code e tween lite ex1 fla H5 CS4 or better e tween lite ex1 htm1 If you have a MovieClip on the stage that is already in its end position and you just want to animate it into place over 5 seconds drop it into place by changing its y property to 100 pixels higher on the screen and dropping it from there you could import com greensock TweenLite import fl motion easing Elastic TweenLite from movie_clip 5 y 100 ease Elastic easeOut Sequence of tweens so that they occur one after the other Just use the delay property and make sure you set the overwrite property to false otherwise tweens of the same object will always overwrite each other to avoid conflicts Here s an example where we colorize a MovieClip red over the course of 2 seconds and then move it to a _y coordinate of 300 over the course of 1 second import com greensock TweenLite TweenLite to movie_clip 2 tint OxFF0O000 TweenLite to movie_clip 1 y 300 delay 2 overwrite false AS3 tweening platform 381 Usag
269. el Change the text You also could change font properties of course Then you may have to adjust the position of the label Click on the selection tool and move the text box with the cursors until it looks right look at your library panel Creating another button A symbol is basically something that you can use several times over but its graphics will remain the same including its label Therefore if you need buttons with other labels you must create copies of these symbols In your library panel right click on the icon of the symbol and select duplicate from the popup menu Choose an appropriate name e g do not press Finding your workspace again If not already done so I suggest adding the Edit bar Window gt Toolbars gt Edit bar It will show you exactly at what level you are editing e g at the scene or at the button symbol There are several solutions for going back to the scene Either double click on Scene 1 or equivalent or select Edit gt Edit Document or hit Ctrl e Flash button tutorial 198 The four frames and the button layers Built in button symbols contain four frames and several layers For each frame different drawings may be defined but some e g the label text may be reused in several layers Look at the various frames The four mandatory frames for button symbols including the ones you may create are Up The button i e the drawing that appears as is when the button is displayed i
270. el shown in transparent color is being dragged to the very right You should see a faint blue vertical line on your flash desktop if you move the panel close to the right border Panel groups docking together with an other panel example Panels can be organized in groups We usually lump together panels with similar functionality but professional Flash designers also probably keep visible the tools they use most In addition they might know how to open a panel with a shortcut and keep some on a second monitor Anyhow in the next example the transparent Color panel is in the process of being docked together with the swatches panel The borders of the swatches panel area is blue i e ready for docking Flash CS6 desktop tutorial 11 UKE eG Docking the color panel as a tab Now the color panel is firmly docked as a tab grouped together with the swatches panel You could add another panel below this panel group e g the libary panel Docking the library panel below the color swatches panels Flash CS6 desktop tutorial 12 Other panel operations Frankly we never use these features but they may come handy if you want to maximize the drawing area and or if you have a small monitor Also you may accidently do one of these things so don t be surprised if panel minimizes as an icon or as a simple bar To undock a panel Drag it to some place that doesn t light blu
271. emitter addInitializer new ImageClass FireBlob emitter addAction new Age TwoWay quadratic emitter addAction new Move emitter addAction new Accelerate 0 20 emitter addAction new ColorChange OxFFFF9900 OxOOFFDD66 SMAEN EEA On Wy MIEN PE Oo 25 di FINT particle system 396 emitter addAction new ScaleImage 1 4 2 0 emitter addAction new RotateToDirection var renderer BitmapRenderer new BitmapRenderer new Rectangle 0 0 500 200 renderer addEmitter emitter addChild renderer The fire must be in the same position as the bimap emitter x 35 emitter y 35 emitter start Step 4 Admire the result and play with the source code e the result 18 e The source code flint firelogo fla 19 e Other files are also in the same http tecfa unige ch guides flash ex flint directory Step 5 Change colors Maybe you may rather want to demonstrate how burning cool your institutions is All you need to do is make a Logo in blue and then change a line in the AS3 code To change the color of the fire emitter you have to understand that the ColorChange class wants 2 arguments The color of Logo and the color of the bright parts of the flames That being said you can use any colors you want of course So we change this orange fire emitter addAction new ColorChange OxFFFF9900 OxOOFFDD66 into a blue cool fire emitter addAct
272. en 255 0 0 0 0 255 e 0 0 255 is blue e 255 255 0 is yellow 9 e 0 255 255 is cyan e 255 0 255 is magenta H1 red magenta 255 0 0 255 0 255 For more information about colors see links in the color article Have a look at Wikipedia s great list of colors 12 i you need to find a number for your favorite color name If you speak french get this one 3 You also may read the Wikipedia Web colors 141 article It also includes a list of colors and explains what a hex triplet is Using the Flash color panel with solid RGB colors e It s probably a good idea to starting picking out a standard color from the swatches panel that will display so called web safe colors You also could create your own palette e Once you start from a standard color you then can either adjust RGB values or color brightness saturation with the slider see the HSB model below or select another color from clicking into the Color Picker The color range you will see depend on selections made to the right Below is a standard blue the brightness saturation slider remains in the middle Color pswatenesg aa The Flash Standard RBG Blue Flash colors tutorial 179 The HSB HSV model The HSB Hue Saturation Brightness also known as HSV Hue Saturation Value defines a color in terms of three components 1 Hue the color Represented as a position in the 360 degrees of a color circle 2 Saturat
273. en wikipedia org wiki List_of_vector_graphics_editors 32 http www fileformat info convert image svg2raster htm 33 http en wikipedia org wiki Inkscape 34 http en wikipedia org wiki OpenOffice org_Draw Texture 151 Texture Draft Definition Texture mapping is a method for adding detail surface texture or colour to a computer generated graphic or 3D model A texture map is applied mapped to the surface of a shape or polygon This process is akin to applying patterned paper to a plain white box Wikipedia ON In particular to thanks computer game technology texture mapping has become very sophisticated Start reading from Wikipedia s texture mapping article and follow up the specialized articles 71 This article is also part of the Flash tutorials Types of textures This needs to be written For 2D artwork you should distinguish between textures you apply as a whole to an object e g door and textures that you use to paint tiles The latter should be tileable i e not show artificial borders Importing textures into Flash You can use textures as paint Here is a short how to e Open the color panel Window gt Color Then select type Bitmap from the pull down menu Import the bitmap to the libray and select it Then paint the outline of your textured area with the brush tool You probably should use the Paint behind mode Then fill the rest with the paint bucket No
274. en download the source files I made and play with them e g add an extra picture and fix the code if needed Overview of the built in Flash button symbols Flash contains a good variety of pre built buttons and they can be found in the buttons library Menu Window gt Common Libraries gt Buttons You may consider docking the Library Buttons fla panel next to your libraries panel See the Flash CS6 desktop tutorial on how to dock a panel In this section we will first just discuss the architecture of a Flash button That type of button is just a kind of built in movie clip symbol that implements button animation with four built in frames In built in buttons library buttons are arranged in folders Double click to open these Then you may may inspect various button symbols by clicking on a button In the upper part of the library panel you will get a preview Click on the arrow to see how the button behaves Flash button tutorial 196 50 55 Ean A ee EIA i v X buttons bubble 2 amp bubble 2blue 4 bubble 2 blue glow bubble 2green bubble 2grey bubble 2 grey glow W bubble 2 orange fa bubble 2 orange glow amp bubble 2 purple Ta eee ae es dit 4 Py rth moi eE on The Flash buttons library For use in your own animation I suggest to copy a button first to your own library else Flash will do it for you too 1 Right click on the Symbol and Copy 2 Paste it to your
275. en start and end e In the properties panel bottom of the desktop check the box Orient to path If you want you can Look lat the flying rocket e Or get the file flash cs3 motion guide tweening fla from here and play with it http tecfa unige ch guides flash ex motion tweening intro Publishing and stopping an animation Publish settings When you publish a Flash animation you should first choose the correct settings Step Get the settings e Either click on an empty spot on the workarea then hit the Publish button in the properties panel e Or menu File gt Publish Settings Step 2 Choose the Flash version If you want to make sure that your animation plays on most every computer select Flash Player 8 the previous version Otherwise Flash Player 9 is now widely deployed You must select 9 if you use Action Script 3 Step 3 HTML Then select the HTML tab also in the Publish settings e You can untick the loop button but see below for a more solid solution Step 4 Hit the publish button This will copy three files to the same directory where you fla file sits Flash classic motion tweening tutorial 77 e A swf e A html e A js Copy all three to your website Then you can edit the html file and add some more HTML if you like Make sure to save copy of this HTML file since when you publish again the html file will be overwritten Stopping an animation We will improve a bit the flying ro
276. ene and the main timeline or whether you are editing a movie clip i e in symbol edit mode If you mix up the two or more levels of editing you are likely to mess up things This is the same problem as customizing button symbols If you are interested in working with embedded movie clips there is more detailed explanation in the Flash embedded movie clip tutorial If you are totally lost go back to the Flash frame by frame animation tutorial Flash motion tweening tutorial and the Flash shape tweening tutorial there is some useful information in each of them Finally you may have a glance at the ActionScript 3 interactive objects tutorial if you need some more ActionScript tricks Testing and Publishing e Hit Ctrl ENTER to test e Menu File gt Export gt Movie just to export the swf Flash e Menu File gt Publish Settings Verify settings then hit the PublishButton Important principles and tips e As soon as you are happy with a drawing save it to the library as graphic symbol or movie clip e Name your layers e Lock all other layers when you work on one layer Do motion animation with symbols only Avoid having any tween objects in your library most likely something went wrong e Only use one symbol per motion animation layer e Shape animation works with either shapes and or simple editable graphics e To convert a non editable object to a shape or simple graphic Break it apart right click on the object and B
277. ens sorry e flash cs6 video cue events html 9 e Source flash cs6 video cue events fla 10 e Video office dks3 flv 8 e Directory http tecfa unige ch guides flash ex6 component video intro Cue points work through example Adapt the following example e Substitute the video by your own e Change add cue points e Change remove add your own embedded movie clips Look at this first flash cs6 video cue events exercise html H Download flash cs6 video cue events fla 7 e Optional else you can run the example as is office dks3 flv 8 Make this your own cue points enhanced component video Prerequisites e Flash component button tutorial e Flash embedded movie clip tutorial Flash augmented video tutorial 291 e Optional ActionScript 3 interactive objects tutorial Below is a copy of the AS3 code you should modify It sits in the Actions layer import fl video MetadataEvent Seu ETONE 1 Add a flv video to the video component edit with the properties panel for CS6 2 Add more cue points using the properties panel Move the playhead in the playback component in position the click on the in the properties panel 3 Fix the code below Add cue points below or in the properties or component inspector stop all your animations make them invisible if you like Add if clauses in the cuepoint_listener function eo GC toe w Edit the jumpl function for navigation a 3 a Add
278. entTarget var cheese_name String event currentTarget name Get the x y origin coordinates for the animation xl cheese_list cheese_name 1 xl 2nd element yl cheese_list cheese_name 2 After each user action grey mouse on red mouse off red_mouse visible false mc_jumping_emilie visible true if cheese parent stage Score score scoretl trace cheese moved cheese cheese name cheese_name score score AS3 tweening platform 385 Compute new cheese coords from left to right and up if score 2 1 x2 404 Math random 6 we put them randomly y2 220 score 14 else x2 483 Math random 6 v2 220 escore i14e Parameters for the cheese animation var vide_avant_caisse_x x2 30 var vide_avant_caisse_y y2 100 var vide_avant_caisse2_x x2 var vide_avant_caisse2_y y2 50 Create tween max animation with parameters defined above TweenMax to cheese 3 bezierThrough x vide_avant_caisse_x y vide_avant_caisse_y x vide_avant_caisse2_x y vide_avant_caisse2_y REZ WEWAH ly ease Bounce easeOut Now move the whole box_cheese container down a bit add the cheese as child of the container In case you want to remove the cheese also put back to stage or somewhere else box_cheese addChild cheese box_cheese y 2 else Now allow the child to put the cheese back if he s mistaken score 1 trace
279. enu View gt Magnification Then you can drag around the distortion points squares and kill some of these and or move the curve control handles dots attached to a line e You can read further explanation about envelope transforms Finally select all letters with the selection tool and center them You may also make the whole drawing bigger or smaller just change the W property in the properties panel while everything is selected i e see the screen capture below So now you should have very roughly something like this LE e SF o a o e AF N ke A jitterFinal fla flash cs3 frame by Frame hello fla flash cs3 shaking hello fla saoj 5 5 SA R EE bad Q T L Ea D Pd a W q 7 E Ts Properties x Filters Parameters Actions Behaviors Strings D P Drawing Object YE 16 sii ma n a IZ 7 Stroke hinting Scale Normal g a TH i 250 3 178 0 a z w x S yfo vifa Hello with the pencil Step 4 Draw an oval e Draw an oval or something around the Hello word if you want Use another layer for this and lock the Hello layer while you do this See the Flash layers tutorial if you don t know how to use layers e Again use the subselection tool to fine tune if needed If you need more explanation about object transformation have a peek at the Flash object transform tutorial Step 5 Make a new keyframe for both l
280. ephants Dream 13 Free Seamless Background Textures 141 fom absolutecross com 15 Textures index gt on the widged wiki handpicked no information on copyright Squifingers patterns 161 Over 150 free patterns in gif format By Travis Beckham Links Texture mapping 1 Wikipedia Textures with Photoshop BI from DadyyCool References 16 http en wikipedia org wiki Texture_mapping http en wikipedia org wiki Texture_mapping See_also http www aztextures com http www oneodddude net FreeTextures php http www fatstrawberry com http www textureworks com freestuff html http ktn3d com http www 2dvalley com http www 2textured com main php http free3dstextures com http www pixeldecor com http www m3corp com a download 3d_textures pages index htm http www akebulan com Free_Textures html http www absolutecross com graphics textures http www widged com wiki doku php id en assets game content texture texture http www squidfingers com patterns 153 Advanced drawing Flash object transform tutorial Draft Overview Learning goals Learn about basic Flash 9 11 CS3 CS6 object transformations with various tools Prerequisites Flash CS3 desktop tutorial or Flash CS4 desktop tutorial or Flash CS6 desktop tutorial Flash drawing tutorial Moving on Select one from the Flash tutorials Probably you d like to animate shapes Flash shape tweening tutorial Quali
281. er e Draw a non editable object graphic object symbol Step 2 Do a motion tween e Like in a normal motion tween as explained in the Flash motion tweening tutorial The user will only see things that will lie underneath the tweened object E g if you move a circle only the stuff that sits under the moving circle will be shown Example flash cs3 mask html 2 Source flash cs3 mask fla 3 Directory http tecfa unige ch guides flash ex special effects Shape tweens with mask layers Step 1 Draw a shape in the mask layer e Step 2 Do a shape tween The tweened shape will determine what parts of the drawing in the masked layer s you can see Guided motion tweens with mask layers CS3 The principle is not the same as for the simple motion tween You will have to created an embedded movie clip in the mask layer If you don t understand embedded movie clips read the Flash embedded movie clip tutorial Step 1 Create a movie symbol e Select the mask layer e Create an embedded movie clip e g in frame 1 E g Create first a drawing then Right click gt Convert to Symbol select Movie Clip e E g Menu Insert New Symbol CTRL F8 then draw the object in symbol edit mode Timeline might look like this ames Swap Movie clip in a mask Step 2 Edit the movie symbol e Double click on the symbol Flash mask layers tutorial 248 e Create a guided motion tween t
282. er or all layers Sk 8 Oe msc Ot g Double click for more options ve Active layer current selected objects The Flash CS3 Layers tool Drawing in a layer To draw paint or otherwise modify a layer simple click on the the layer name in the Timeline to make it active A pencil icon next to it indicates that the layer is active Creating new layers and deleting layers When you create a Flash document it only contains a single layer i e less than you need To create a new layer either e Insert gt Timeline gt Layer e Click on layer icon left most item in the Edit bar just below the timeline e Right click on an existing layer then Insert Layer lash cs3 racket moving fla Flash cs3 shaping select tool fla Flash cs3 shaping oval fla Fle aar Oo bE 1 120fps 0 0s A Minsert Layer Fone 1 Inserting a new layer As soon as you create a new layer you should give it meaningful name Right click on its name something like Layer 2 select Properties and change the name Alternatively to display this properties panel just double click on the layer name To delete a layer and its contents Right click gt Delete Layer You also can lock hide other layers with this menu Before you delete a layer make sure that you save its objects if you plan to keep them You can insert them in the library as symbols or copy them to another layer Flash layers tutorial 35 Show only outlines of a layer e
283. er simpleFormatting oO T source timed text xml Align bgd Pk by a Distribute The FLVPlayback Captioning component and its parameters The example flash cs3 video simple server caption html PI flash cs3 video simple server caption fla BI XML file timed text xml 4 Directory http tecfa unige ch guides flash ex component video intro Tuning You can style text and background of the Caption Box see below e Put down the volume Set it to 0 5 in the parameters of the FLVPlayer or even lower I am fed up listening to my own voice really CaptionsBox and Style You can use a different text box to display the captions i e nothing prevents you from displaying the text somewhere in the middle of the video or outside of the playback component s area Step 1 Draw a textbox for the captions to appear e Create a captions layer if you don t already have one Draw a textbox e Give it the instance name caption_box e Select font size color etc e Select Multiline e Make it Dynamic Text if it is not Flash video captions tutorial 298 Step 2 Configure the component Tell the captioning component to use the textbox you just made to display captions e Select FLVPlayback Captioning component In the Properties panel Set captionTargetName caption_box e Untick autoLayout e Add the source i e the XML file name or do it later SWF Instance Name gt Instance of
284. er away e It should change color because it s an effort to run up a hill Step 1 Insert a new keyframe e Tinserted a new keyframe in frame 25 i e between the first two existing key frames e Inthe new 2nd keyframe the cat was moved next to the other little one on top of the hill Step 2 Change size of cat in keyframe 2 e Go to the frame click on frame 25 or wherever yours is e Select the object i e the little cat e Select the Free Transform Tool in the tools panel see flash drawing tutorial hold down the SHIFT key and drag a comer Step 3 Change the color of the cat in keyframe 2 Goto the frame e Select the cat Flash classic motion tweening tutorial 70 e In the properties panel you can change the tint a kind of color of the cat Here is a screen capture The animated cat is pink and sits next to the other cat It s pink because moving up the hill takes effort 2008 519820 0 340 88S 085 House an U objets o Animationcat By g i a sky 2 sag aoe 3 os 20s Moving a cat and changing its size and color You can look at the published result here flash cs3 motion shape tweening html tl The directory including the fla file which you can load into your Flash and play with is here http tecfa unige ch guides flash ex motion tweening intro Doing more informed work Edit bar If you have to do some frequent zooming you can display the Edit Toolbar see the sc
285. er component in an application that displays photos Use the load method to load content the percentLoaded property to determine how much content has loaded and the complete event to determine when loading is finished Adobe documentation 26 UIScollBar The UIScrollBar component allows you to add a scroll bar to a text field You can add a scroll bar to a text field while authoring or at run time with ActionScript To use the UIScrollBar component create a text field on the Stage and drag the UIScrollBar component from the Components panel to any quadrant of the text field s bounding box 27 Adobe documentation List based components Lists These components are based on lists e A list is a row e Rows can have columns e Acell is either an element of a simple row or the intersection of a row with a column Items e Contents of cells are items e Items are objects with various properties depending on the component The dataProvider parameter e For ComboBox List and TileList click on the dataProvider parameter to enter data DataGrid The DataGrid component lets you display data in a grid of rows and columns drawing the data from an array or an external XML file that you can parse into an array for the DataProvider The DataGrid component includes vertical and horizontal scrolling event support including support for editable cells and sorting capabilities Adobe documentation 28 See the Flash d
286. erse kinematics This technique moves the child object to where the animator wants it causing the parent object and all other attached objects to follow How stuff works 5I retrieved 27 November 2008 Since Adobe CS4 Flash fully integrates inverse kinematics modelling Inverse kinematics IK is a method for animating an object or set of objects in relation to each other using an articulated structure of bones Bones allow symbol instances and shape objects to move in complex and naturalistic ways with a minimum of design effort For example inverse kinematics lets you create character animation such as arms legs and facial expressions much more easily You can add bones to separate symbol instances or to the interior of a single shape When one bone moves the other connected bones move in relation to the bone that initiated the movement When animating using inverse kinematics you need only specify the start and end positions of objects Inverse kinematics lets you create natural motion much more easily Using inverse kinematics 61 retrieved 27 November 2008 The following application shows the difference between an IK structure armature made with red symbols and an another made with a blue shape Flash inverse kinematics tutorial 251 Symbol vs shape IK structures 1 application and drag the tips or other parts of the shapes around Make Load the symbol vs shape armature htm sure that you have
287. erties png License unknown Contributors image flash cs4 as3 motion tween jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs4 as3 motion tween jpg License unknown Contributors image flash cs4 copy motion as as3 jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs4 copy motion as as3 jpg License unknown Contributors image flash cs6 embedded movie clip png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 embedded movie clip png License unknown Contributors image flash cs6 embedded movie clip edit png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 embedded movie clip edit png License unknown Contributors image flash cs6 video deployement dialog png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 video deployement dialog png License unknown Contributors image flash cs6 embedded video plus animation png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 embedded video plus animation png License unknown Contributors File Flash cs6 cue points properties panel2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 cue points properties panel2 png License unknown Contributors File flash cs6 cue point navigation png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 cue point navigation png License unknown Contributors
288. ervision3d papervision3d papervision3d objects primitives menceieseuls 5 materials special Mate ered alesse renderar view events Corea Hels 5 Make sure we can see everything stage scaleMode showAl1 This will launch the loop function once a frame is loaded ye ie wei wil jephe ehe etlae 2 Josie Flash Papervision3D tutorial 402 addEventListener Event ENTER_FRAME loop Create viewport var viewport new Viewport3D 0 0 true true addChild viewport var renderer new BasicRenderEngine This will create the list of colors for each face of the cube var materials MaterialsList new MaterialsList front new ColorMaterial OxFF0000 back new ColorMaterial 0x0000FF right new ColorMaterial Ox00OFFO0 left new ColorMaterial 0x000000 top new ColorMaterial OxFF0000 bottom new ColorMaterial OxFFO000 Create my_cube and add it to the scene We also define width depth and height var my_cube new Cube materials 500 500 1000 Let s create a floor underneath the cube var wire_materials MaterialsList new MaterialsList all new WireframeMaterial OxFF0000 var my_floor new Cube wire_materials 800 800 50 my_floor y 6007 Create a 3D scene and add the cube to it var scene new Scene3D scene addChild my_cube scene addChild my_floor Create camera By default the camera looks forwar
289. es Other kinds of assets e Texture e Clipart e Sound Assets Adobe links e Flash Professional Color 20 e Flash Professional Help Strokes fills and gradients 21 References 1 http tecfa unige ch guides flash ex6 colors intro flash cs6 colors intro swf 2 http en wikipedia org wiki Primary_color 3 http en wikipedia org wiki RGB_color_model 4 http en wikipedia org wiki black 5 http en wikipedia org wiki white 6 http en wikipedia org wiki red 7 http en wikipedia org wiki green 8 http en wikipedia org wiki blue 9 http en wikipedia org wiki yellow 10 http en wikipedia org wiki cyan 11 http en wikipedia org wiki magenta 12 http en wikipedia org wiki List_of_colors 13 http fr wikipedia org wiki Liste_de_couleurs 14 http en wikipedia org wiki Web_colors 15 http en wikipedia org wiki Image HueScale svg 16 http en wikipedia org wiki Image Triangulo_HSV png 17 http en wikipedia org wiki HS V_color_space 18 http en wikipedia org wiki Tints_and_shades Flash colors tutorial 186 19 http en wikipedia org wiki Alpha_channel 20 http help adobe com en_US flash cs using WS18B74DFC C9B7 47c 1 8B25 B4F 196059B7C html 21 http helpx adobe com content help en flash using strokes fills gradients htm Flash bitmap tracing tutorial Draft This entry is part of the Flash tutorials Overview Bitmap tracing means transforming a
290. ese graphics into to symbols e Save both buttons as button symbols right click on each graphic you made e Use decent names for these e g button_forward Convert to Symbol xi Name button_forward Type C Movie clip Registration Bag Cancel Button Advanced Turn a graphic into a button symbol e Remove the graphics from the stage yes kill them Step 6 place the buttons and name them e Select the buttons layer the one with the single frame e Drag a forward and backward button from the library to the stage e Move both buttons into an a appropriate position e Then give a name to each of these 2 instances in the properties panel forward_btn and back_btn So now you should have something like 2 button symbols in the library and an named instance of each on the stage Flash button tutorial 207 Library x Component Inspector_ Com i Sj slide J flash cs3 simple slide show as3 Fla flash cs3 simple slide show as3 fle ead 10 items u Actions T Buttons u Pictures a3 g a O Cf 1 120fps 00s i Type the amp Scene 1 workspace 6 4 i Button my Once my UDUTILU FU anu a my AP Laptop button_forward Button picture_O1 laclus Bitmap The pictures were made with my N73 cell phone picture_02 gene Pitmap DKS Sept 1 2007 L4 picture_03 lake jpg Bitmap picture_04 lake jpg Bitmap picture_05 tecfa Bitmap p
291. et flash learning_guide animation part09 html http helpx adobe com pdf flash_reference pdf http help adobe com en_US flash cs using W Sd60f23 110762d6b883b18f10cb1felaf6 7e8aa html Flash shape tweening tutorial 96 Flash shape tweening tutorial Draft Overview Shape tweening means transforming an object from one state into an other This is usually called morphing Learning goals Learn how to create basic Flash 9 11 CS3 CS6 morphing i e shape tweening Learn how to use shape hints Learn how to use shape tweens within embedded movie clips Prerequisites Flash CS4 desktop tutorial or Flash CS6 desktop tutorial Flash layers tutorial Flash drawing tutorial Flash object transform tutorial Flash frame by frame animation tutorial or Flash motion tweening tutorial Moving on The Flash article has a list of other tutorials Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Some examples should be updated to CS6 However they do work Level It aims at beginners More advanced features and tricks are not explained here Materials fla file you can play with http tecfa unige ch guides flash ex6 shape tweening intro Alternative version Flash CS3 shape tweening tutorial Introductory example The principle You can transform any form shape into any other form Shape tween
292. eters in the section Drawing no need to do this now Basically you can modify how Flash helps you drawing objects e g connected lines vertical horizontal and how it identifies objects when you click on them Painting simple objects In this chapter we will show how to make a complete but simple drawing Disclaimer Daniel K Schneider doesn t even remotely feel to be graphics designer If you are not familiar with layers you now really should have a look at the Flash layers tutorial Firstly you can find lots of free clipart drawings on the Internet As a principle it is a better idea to search for vector graphics as opposed to bitmaps and for three reasons e Vector graphics are smaller e They can be re edited e They adjust nicely to size A smaller or bigger version still looks as good as the original To find vector objects you can for instance type in Google free clipart download or see the links in the clipart article finding good and free clipart on the web is not easy Most often clipart is distributed in wmf format Windows Meta File format Flash can handle this format It also can handle Illustrator ai format Enhanced Windows Metafile emf Freehand Flash swf and Autocad dxf It can not handle SVG but you can open SVG files with Illustrater and then copy paste You also can import a series of bitmap formats like the standard png jpg gif but also Photoshop psd and a variety of Quicktime f
293. eters the properties panel that sits to left in the designer workspace configuration Flash CS6 desktop tutorial 16 Fl Designer w C o x File Edit View Inset Modify Text Commands Control Debug Window Help M r HELPATE Layer1 LP LALI D ECCLE Target Flash Player 11 2 v Script ActionScript 3 0 ae 9 swe 550 x ol ox stage _ vv SWF HISTORY Clear Resized stage with different background color The Menu Bar Flash lets you use tools and manipulate objects in three different ways Interact through menus Use shortcuts Use a context menu on object right click Interact through panels On top of the desktop is the menubar on the Mac it will be on top of the screen Available operations in menus and panels are context dependent i e they differ in function of what you are working on in the workspace They also adapt to the Flash Publish Setting e g ActionScript 2 vs ActionScript 3 Here is a short and incomplete summary of the menu groups functionalities File Opening and creating new files Import assets e g a picture Definition of Publish Settings you may change settings you initially defined Edit Editing the scene Editing elements that are active View Define zoom level grids snapping i e how the workspace displays Flash CS6 desktop tutorial Note Other important view items are in the Windows menu Insert A
294. ew before digging into a real documentation like Adobe s Flash 9 reference manual 5 Learning materials Grab the various fla files from here http tecfa unige ch guides flash ex action script 3 intro ActionScript 3 event handling tutorial 355 Introduction According to the Flash CS3 documentation Oy retrieved 12 43 7 September 2007 MEST Every component broadcasts events when a user interacts with it When a user clicks a Button for example it dispatches a MouseEvent CLICK event and when a user selects an item in a List the List dispatches an Event CHANGE event An event can also occur when something significant happens to a component such as when content finishes loading for a UILoader instance generating an Event COMPLETE event To handle an event you write ActionScript code that executes when the event occurs Below a few basic principles Principles of event driven programming Events are detected by some object Usually events are broadcasted by an instance of an interactive object typically a graphic on the screen that is a symbol instance User interactions are technically speaking events generated by Flash objects You then have to write code that can deal with these events Firstly you must give a name to each symbol instance users interact with Otherwise your AS code can t find them e So before you code anything in ActionScript that deals with events generated by some use
295. ex shape tweening intro flash cs3 shape picture morphing html pez http tecfa unige ch guides flash ex shape tweening intro flash cs3 shape picture morphing2 htm http livedocs adobe com flash 9 0 UsingFlash WSd60f23 1 10762d6b883b 1 8f10cb 1 fe laf6 7e8c html Flash pen tutorial Draft This entry is part of the Flash tutorials Introduction Learning goals Learn about basic Flash 9 CS3 Illustrator and Inkscape bitmap tracing Prerequisites Flash CS3 desktop tutorial Flash drawing tutorial Flash layers tutorial Moving on The Flash article has a list of other tutorials Quality Not complete This tool is fairly complex Level It aims at beginners More advanced features and tricks are not explained here Materials fla file you can play with http tecfa unige ch guides flash ex tracing intro http tecfa unige ch guides flash ex shape tweening intro Flash pen tutorial 193 The pen tool allows to create complex shapes with lots of straight lines and perfect arcs Basic use To insert a series of connect points with straight lines just click on several points in a row e You may want to display a grid Menu View gt Grid gt Edit Grid or View gt Grid gt Show Grid e Once you are done double click on the last point to create a closed shape or hit ESC or select another tool e To insert curves select a new point where the curve should start but hold down the mouse for a while then drag the mouse
296. ex sound intro Alternative versions Flash CS3 sound tutorial old version Basics Sound types Flash can handle several sound formats e AAC Advanced Audio Coding AIFF Audio Interchange File Format Mac only e MP3 Moving Pictures Expert Group Level Layer 3 Audio e AVI Audio Video Interleave e WAV Waveform Audio Format e AU Sun Some formats may depend on whether QuickTime is installed on your computer Best bet is to use MP3 format since it is very popular E g it is easy to find music or sound textures on the Internet Flash CS3 and CS4 provide some sounds in a library Menu Window gt Common Libraries gt TNT sounds CS4 has a much better choice Sound imports to frames of the timeline We shall explain the whole procedure using a simple animation example 1 The animation with sound example gt shows a motion animation with a global music sound track and 4 layers with sound textures that are limited in time Source code e flash cs6 cloud animation sound fla 2 e The sound clips are already in the library Consult Sound Assets if you are looking for some free sounds Also consider using the built in sound library Menu Window gt Common libraries gt Sounds Background sounds Smaller sound files not full CD tracks should be imported to the library To import sound file e File gt Import gt Import To library or drag and drop Attaching sound to a frame Step
297. ext to your own library Step 2 create two or more empty frames with some contents Timeline Output Compiler Errors Layer with empty keyframes e Add some contents e g draw something or drag a picture from your system to the stage Step 3 add a button e Select frame 1 move the red play head all to the left e Drag a button to the scene ScrollPane Slider TextArea obi TextInput BG Tiletist E utLoader utscroligar v video B FLvPlayback Button of the Flash CS6 ActionScript3 component library Step 4 name and label the button instance e Click on the button e Select the Parameters panel menu Window gt Properties gt Parameters e Give the button instance a unique name e g button is fine ActionScript will need that e Change its label i e the text that the user will see You can adjust the size of the label in the properties panel display section or using the Free Transform tool Flash component button tutorial 225 enabled label ressme A labelPlacement selected Layer with empty keyframes Step 5 stop the animation in frame 1 By default Flash will play all the frames This makes sense for a frame by frame animation in the main timeline but it does not for an application where the user is supposed to navigate We must stop Flash now e Open the Code Snippets panel It can be found
298. f the animated_object e g a frame by frame animation etc See the example at the end and also Flash embedded movie clip tutorial Introductory example moving a cat In this example we will use the drawings made for the flash drawing tutorial and move one of the cats around If you want to reproduce what we do here you can start from file flash cs3 drawing trees3 fla 1 Objects you will need are already in the library I am aware that these drawings are ugly but it makes these tutorials so much more human Executive summary The principle of motion tweening is quite simple 1 Firstly position an object in different locations at different times e We call these positions keyframes in the timeline since objects are frozen in different states Btw you also can change other features than just the position of an object more later 2 Then you have to apply some interpolation method tweening between the two keyframes i e you tell the computer to generate some in between picture for each frame between the 2 keyframes in the timeline e Simple motion tweening is a linear path i e the object will move on a line from x1 y1 to x2 y2 e You can also apply a motion tween along a random path but this is bit more complicated and we will introduce this technique below Moving a cat from x to y You should lock all other layers This way you are sure not to edit by mistake a frame of another layer Step 1 Create a a new la
299. f the rest It has its own timeline Also if this sound is triggered again e g a user enters the same frame a new sound will play even if the old one is not over e Start Similar as event Will play the sound when the frame loads but will not play it if the old sound is still playing Note This doesn t always work as expected Probably best to use together with the Stop see below Stop Will stop the sound of a layer at this frame therefore include it after a sound frame Insert a new keyframe F7 where you want it to stop and just edit the properties Flash sound tutorial 141 e Stream Will try to match the length of sound with the other layers e g 20 frames of sound should play during animation of 20 frames After that it should stop Sound as stream should not be looped Use this for example for comic strips talking characters Repeat e You can repeat the sound as many times as you like or even have it loop forever Effect e You can choose from various fade in out and left right options but you probably want to do your own custom fades see next Editing sounds Editing sound with the Edit Envelope editor e Click in the sound layer in some frame where you have sound e In the Properties Panel Click the Edit button next to the Effect field e This opens the Edit Envelope sound volume editor Manipulation of the sound envelope e You can drag left right Time In and Time Out controls in middle pa
300. f times the animation means it will loop Tip There are two ways of doing this 1 If you already got a Flash file with drawings e create a new layer called junk e create an instance of the Movie clip symbol you would like to animate e Then make sure that you will have another instance of the same symbol somewhere on the stage Flash CS4 motion tweening with AS3 tutorial 267 e Create a Script layer and copy paste the code e After completion kill the layer called junk Alternatively do it with a new fla file same as above but simply don t save this file Links e Creating animation in ActionScript 3 0 Ul Adobe Flash Developer Center e Working with motion tweens 2 Programming ActionScript 3 0 for Flash Adobe Flash CS4 Professional ActionScript 3 0 Language Reference Motion 3 e AnimatorFactory 4 e MotionBase 5 References 1 http www adobe com devnet flash articles creating_animation_as3_07 html 2 http help adobe com en_US ActionScript 3 0_ProgrammingAS3 WS5b3ccc516d4fbf351e63e3d11ae9c168f3 8000 html 3 http help adobe com en_US AS3LCR Flash_10 0 fl motion Motion html 4 http help adobe com en_US AS3LCR Flash_10 0 fl motion AnimatorFactory html 5 http help adobe com en_US AS3LCR Flash_10 0 fl motion MotionBase html 268 More interactivity Flash using embedded movie clips tutorial Draft Overview Learning goals e Learn how to launch embedded an
301. fect Filters q axx Bw my 7 E FG The motion controls of the editor Source Editing property curves with the Motion Editor Adobe accessed 30 09 2009 A Property values for editing finely B Reset Values button back takes everything as a group C Playhead to move in the timeline D Property area curve E Previous Keyframe button keyframe preceding navigated F Add or Remove Keyframe button add or remove a keyframe Otherwise right click G Next Keyframe button keyframe navigated suvi Each property that we can animate has his own graphic in this tool You can open close a group of properties to save space and enlarge reduce the graph Also if you click in the properties panel on the left the display space for the curve will grow Flash CS6 motion tweening tutorial 88 4 Motion Tween MOTION EDITOR Property Value Ease Keyframe Graph l 1 Basic motion M No Ease Ly K5 Ti 06 90 px x 415 2 px Z Wo Ease w dod Ri D Y 2px Wo Ease Iv 4 od ITIL Rotation Z ge M no Ease ly 4 te eI BLK LE aal SI Ee A SA RG GA baa BI JE IRE BI SIS Transformation M No Ease iy KS Skew X ge M io Ease iy 4 pep ee ee ey Skew Y ae io Ease Iv 4 a 0 a EA 2A PR ae AE EA O S ERA G A BA A A E A DA O ESA PON LE LE A E a R E EE EA A A Scale X 92 6 M NoEse v4 T Gee A e T Scale Y 30 amp gt Color Effect Filters 3B v E
302. fingertips and I have a big enough monitor to allow for this My real workspace is bigger than the one shown in the screen capture which I made smaller in order to fit into this text a File Edit View Insert Modify Text Commands Control Debug Window Help DKS WORK O ox Toots oe of MreQvee T az oe an LOLOL ADA am 2m gt m e eE A i ag am a0 a ao Je k 5 faoto 120s CE EE gt Instance of Manga girl Swap scene 1 amp ox oe gt POSITION AND SIZE J X 443 6 zj a Ww H 30 POSITION AND VIEW x v z wW H a A x Y 7 COLOR EFFECT 16 tems D Style e X Name Linkage Use Co Date Modified Type KE Pumpkin 2 16 11 2008 15 47 58 Movie Clip E Penguin2 1 2 Movie Clip E Penguin 2 26 11 Movie Clip E Moon 2 16 11 Movie Clip E Manga girl 1 16 11 2008 15 54 06 Movie Clip E Cloud 1 16 11 2008 1 Graphic RERE Fi Castle 1 16 11 2008 17 19 46 Graphic Blending Normal X gt Backup f Folder O Cache as bitmap FILTERS Property Vale trl m aao an To Example configuration of a CS4 Flash desktop Roughly the tools are arranged in the following three column layout Drawing tools Time line Color Alignment Transformation Properties Drawing area Library Components Info Flash CS6 desktop tutorial 14 Built in and online Help There
303. fire logo swf s i e Click on Frame 1 and hit F9 then EPA paste the code you will find below dz Scene 1 kage Properties You then have to make adjustments Cess WA Basedass flash display BitmapData where I inserted comments Linkage 7 Export for ActionScript Export for runtime sharing 7 Exportin first frame e Set the size of the Logo just look it up in the properties of the graphic in the library Type Use Count Linkage 1 FireBlob Movie Clip Export FireBlob r i j Properties x Filters Parameters fint png Bitmap x F MALTT_logo png Bitmap Export Logo q Eae x A ss vf F B B Ae o e a Normals Use de Setting up a linkage property for the Logo to set on fire var bitmapData BitmapData new Logo 332 99 e Position the Logo wherever you want it to be 357 SSA bitmap x bitmap y e Position the Fires should be the same as above emitter x 35 emitter y 35 Code to copy paste FLINT PARTICLE SYSTEM Author Richard Lord Copyright c Big Room Ventures Ltd 2008 hnttp i flintparticles org FINT particle system 395 Licence Agreement Permission is hereby granted free of charge to any person obtaining a copy of this software and associated documentation files the Software to deal in the Software without restriction including without limitation the rights to use modi
304. flashmagazine com tutorials detail flash_3d_basics http docs pv3d org http www flashsandy org http www flashsandy org tutorials 3 0 http osflash org we3d http alternativaplatform com en http docs alternativaplatform com display TDEN Home http www flare3d com http seraf mediabox fr wow engine http www cove org ape index htm http labs adobe com technologies flashplayer10 http labs adobe com downloads flashplayer10 html http animasinteractive com propaganda 2007 10 08 paradox the flash based first person 3d engine faq http en wikipedia org wiki 3D_Flash http www airtightinteractive com news p 114 http www video animation com flash3d_001 shtml http www tutorialized com tutorials Flash 3D 1 http www thetechlabs com 3d alternativa 3d getting started http flash3d org http www bestflashanimationsite com archive flash 3d http www floorplanner com 3ddemo http drawlogic com http www infiniteturtles co uk blog http www flash3d net index_en html http www masputih com http www adobe com devnet flash 3d_animation html Article Sources and Contributors 422 Article Sources and Contributors Flash Source http edutechwiki unige ch mediawiki index php oldid 53866 Contributors Bydf3 Daniel K Schneider JustinClift Widged Flash CS6 desktop tutorial Source http edutechwiki unige ch mediawiki index php oldid 41568 Contributors Daniel K Schneider Flash drawing tutoria
305. fore this enjoy the flying rocket http tecfa unige ch guides flash ex motion tweening intro flash cs3 rocket moving html Creation and reuse of embedded movie clips Let us recall an important design principle In the simple Rocket science example and in the others too we created the animation in the main time line Alternatively as explained in the beginning you should first start by creating a new symbol e Either create an initial drawing and then convert it to a movie clip symbol Double click on an instance for editing and creating the animation e Or use menu nsert gt New Symbol to create a new one Tick the Movie clip option and give it a good name e g Rocket Then you land directly in symbol editing mode and you can create an animation for just this object e Once you are done with symbol editing double click on scene in the edit bar on top of the stage or click on the little back arrow Always make sure that know whether you edit just a symbol or whether you are in the main timeline the whole scene Read more in the Flash embedded movie clip tutorial about creating and using embedded movie clips This tutorial will also introduce some ActionScript code that is needed to stop start embedded animations Also remember that you can copy paste anything from one fla file to another and this includes movie clips So it s a good idea to create somewhere a private library a fla file that includes all your major a
306. from controls in the main tools panel If want to make more sophisticated changes e g apply a gradient do this through the color panel e The click on objects you want to change You also can change the color of a fill or stroke through the properties panel or the color panels but make sure to select the object s you want to change first Paint bucket tool The paint bucket tool works like the ink bottle tool It has two purposes e Change colors of simple shapes primitive drawings Tip you can change the color of strokes by editing double click e Change color of fills inside of a graphics object e Fill in empty areas insides of drawings made with the pencil for example Procedure e First deselect everything e Next click on the paint bucket tool e Select fill color and style e Click on shape or fill inside shape of a graphic object Timeline RREQEIOT AZ S97 7 AZADA 2 Paint Bucket Tool lt 7 FILL AND STROKE 2 A o mm Stroke LJ 4 90 Style Solid zG Z Scale v OH E s Join v Miter 3 00 Filling a closed graphic with paint Of course you also could change paint of shapes and object by first selecting the thing in the stage and then by making changes in the properties or the colors panels Flash drawing tutorial 27 Tips e If you can t select a fill color then try to click on the black and white icon and then set the colors again I don t know if that
307. function launchRocket e Second associate this function with the user clicks on the button event The addEventListener method let s you define what function will be called when a user does something with the button in this case clicking on it In Flash button tutorial 201 other words you add an Event Listener to the button e g one that will observe button clicks and you tell this Event Listener what function to call when this happens Code reuse Of course you can reuse this code for a similar problem i e moving the animation to another spot of the timeline when the user presses a button All you need to do is this e Puta button on your stage e g one from the Flash library Then give this button instance a name e Then change the number in gotoAndPlay 2 E g change it to 5 if you want it to jump to frame 5 Tip If your code is getting bigger un dock the Actions Frame panel and pin it down Hit F9 to to hide it again Results e You can look at my published result flash cs6 rocket launcher as3 html PI e You can grab the flash cs6 rocket launcher as3 fla BI file to play e Directory http tecfa unige ch guides flash ex6 buttons intro Exercise Enter button for an animation e Get one of your motion animations e Drag all animation keyframes from frame 1 to frame 2 Click and drag when you see the white rectangle attached to the mouse cursor e Add a new layer and call it Action e Insert some graph
308. fy publish distribute sublicense and or sell copy merge copies of the Software and to permit persons to whom the Software is furnished to do so subject to the following conditions The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software s f import org flintparticles common debug import org flintparticles common actions import org flintparticles common counters import org flintparticles common displayObjects RadialDot import org flintparticles common initializers import org flintparticles twoD actions import org flintparticles twoD emitters Emitter2D import org flintparticles twoD initializers import org flintparticles twoD renderers import org flintparticles twoD zones import org flintparticles common energyEasing TwoWay Look up the dimensions of your logo Right click in the library gt Properties var bitmapData BitmapData new Logo 332 99 var bitmap Bitmap new Bitmap bitmap bitmapData bitmapData addChild bitmap Position the bitmap graphic on the scene bitmap x 35 bitmap y SSP var emitter Emitter2D new Emitter2D emitter counter new Steady 600 emitter addInitializer new Lifetime 0 8 emitter addInitializer new Velocity new DiscSectorZone new Point 0 0 10 emitter addInitializer new Position new BitmapDataZone bitmapData
309. g This event is then given to the function for further treatment Formally speaking when we defined the clickHandler function we did defined a event parameter for the information it will receive from Flash event MouseEvent means that we define a parameter called event i e we name the information that is handed over and we tell Flash that this parameter is of type MouseEvent We then can use use this event information In order to understand which button was clicked we can retrieve this from the event information The following expression event currentTarget label will tell us the label of the button that was the current target We use this expression in a so called switch or case statement It starts on line 2 and ends on line 19 Its syntax is the following switch value case value_l do something break case value_2 do something break Now for each label we then define what Flash should do We only need one single instruction Go to frame x and stop again The instruction is gotoAndStop x E g gotoAndStop 2 means move the animation to frame 2 and stop there Flash component button tutorial 232 If things go wrong Make sure that your syntax is correct E g one single missing may break your program In the ActionScript window click on the Check syntax icon to test for correct syntax Also indent your code properly Simply click on the Auto Format icon
310. g Wea lnakiegiaril 6 textField text Yes You got one Ne make the object transparent obj alpha 0 5 Flash drag and drop tutorial 323 mouseDownHandler kill its event listeners object can t be moved anymore obj removeEvent Listener MouseEvent MOUSE_DOWN EJ obj removeEventListener MouseEvent MOUSE_UP mouseUpHandler else Results Test if we are done if hits max here we should play an animation textField text Made it CSM Leelee Wiilssiecl g We Look at the result 4 e Get the source from http tecfa unige ch guides flash ex drag and drop intro files flash cs3 drag and drop matching 2 Improvements to be made e Make it more flashy when there is a hit miss and when it s over e Add sound A child can not read instructions but a parent could tell e Move the object back to its origin when there is a miss Drag and match learning application still better Our last version for now includes some more features e It has sound though the initial talk is missing e Objects go back where they came from Daniel K Schneider TECFA sept 2007 Copyright See http edutechwiki unige ch en var dict new Dictionary 1 START USER Config Insert as many dict text_box movie statements you like Replace bie around ciie dbo ie cerbo el Gilet oox ie
311. g objects tutorial 170 x Edit Snapping x V Snap Align o J Snap to Grid J Snap to Guides Cancel Save Default J Snap to Pixels Jv Snap to Objects Basic rit Snap align settings Stage border 18 px Object spacing N Horizontal jo px Vertical jo px Center alignment V Horizontal center alignment V Vertical center alignment Edit Snapping Snap to Objects e Will snap an object you move against parts of an object Move slowly Snap Align when snap objects is also on Will snap to dotted lines that will appear Snap to Grid e Works when you turn on the Grid with menu View gt Grid e Useful when you do technical drawings for instance Snap to Guides e Same principle as snap to grid View gt Guides Snap to Pixels e For high precision work Magnify the stage to at least 400 Object spacing does what its name says e Horizontal or vertical object spacing defines the snapping distance in relation to the edges of other objects e Note By default an object snaps to center of a line E g if distance is Opx and your lines are Spx wide your objects will overlap Disclaimer I am not sure what certain combinations do Here is for example what happens if you drag the red rectangle close to the yellow one in snap align snap objects mode with zero object spacing Flash arranging objects tutorial 171 Align object snapping Aligning objects To align obje
312. grid 1 png Source http edutechwiki unige ch mediawiki index php title File Flash data grid 1 png License unknown Contributors image flash cs3 drag and drop simple png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 drag and drop simple png License unknown Contributors image flash cs3 dynamic text properties png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 dynamic text properties png License unknown Contributors Image Sources Licenses and Contributors 427 image flash cs6 named symbol instance png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 named symbol instance png License unknown Contributors image flash cs3 mouse events property changes png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 mouse events property changes png License unknown Contributors image flash cs3 mouse events property changes2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 mouse events property changes2 png License unknown Contributors image flash cs3 keypress moving png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 keypress moving png License unknown Contributors image browse_to_path png Source http edutechwiki unige ch mediawiki index php title File Browse_to_path png License unknown Contributors image add_path png Source http edutechwiki unige
313. gs should differ only a bit in general e Creating a simple animation chain as above works like this e a Create a drawing e b Make sure that it or its frame is selected then hit F6 to copy the drawing to a new keyframe e c Click into the new frame and modify the drawing e d repeat F6 drawing Flash frame by frame animation tutorial 42 Further below we will provide more details through examples and more extended how to s Play time e Either load this flash cs6 simple fbf fla 3 file and make some modifications e Or implement a quick and dirty animation yourself Testing the result e Press CTRL Enter or menu Control gt Test Movie The big decision film or modular thinking When you plan a simple flash project you can think of it in two very different ways e Plan to work like a computer designer and think of your flash as combination of modular elements We prefer that design philosophy e Plan to work like a Flash graphic designer and use hundreds of frames and dozens of layers i e use a film metaphor Most Flash textbooks for non programmers would teach you this Animations are called movie clips This is confusing but can be explained by the Flash history A flash file as whole can be a movie clip But you also can have clips within clips within clips e g a Flash file can contain several movie clips that in turn may contain other clips Let s have a look at two variants of an example that w
314. h e flash cs6 rocket html 4 result Rocket frame by frame animation in the main timeline e flash cs6 rocket fla fla source code Flying rocket symbols no main timeline animation A much smarter way is to define a single rocket as a so called embedded movie clip also called movie clip symbol Think of an embedded movie clip as flash within flash e We use one layer for the background sky moon and starts e We use another layer to position several instances of the same rocket movie clip that sits in the library As you can see we also changed their respective size Flash frame by frame animation tutorial Movie Clip Instance of Rocket Swap x7 POSITION AND SIZE X 168 15 Y 194 20 bd W 203 00 H 202 15 gt 3D POSITION AND VIEW x7 COLOR EFFECT Style None KA wv DISPLAY Blending Normal Ly Render Original No Change ly Transparent Y Td lt 7 FILTERS Property Value 44 Fl File Edit View Insert Modify Text Commands Control Debug Window Help Designer o n es a Timeline Tools z sag 5 10 15 20 25 30 We r wi 2 P G Rockets a Neate yLayer withthe rockets flash cs3 rocket symbol fla_ v LFL amp FAVA Background B 2Aam BS N m s gt lt sions CENAA oO eee flash cs3 rocket symbolL fla x PEE amp Scene
315. h ex exams2008 final coap2 1 10 2008 handout pdf 19 http tecfa unige ch guides flash ex exams2008 final coap2 110 2008 fla 20 http tecfa unige ch guides flash ex exams2008 final coap2 1 10 2008 SOLUTION fla 21 http help adobe com en_US FlashPlatform reference actionscript 3 index html filter_flashplayer 11 6 22 http help adobe com en_US FlashPlatform reference actionscript 3 flash display InteractiveObject html 23 http help adobe com en_US FlashPlatform reference actionscript 3 flash display MovieClip html 24 http help adobe com en_US FlashPlatform reference actionscript 3 flash display DisplayObject html ActionScript 3 event handling tutorial Draft Overview Learning goals Learn some essentials of the event handling model of Flash 9 CS3 ActionScript 3 Learn some Action Script 3 to be used within the Flash IDE Prerequisites Flash CS3 desktop tutorial Flash drawing tutorial Flash button tutorial Flash components tutorial Moving on ActionScript 3 interactive objects tutorial you also may directly read this piece The Flash article has a list of other tutorials Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Level It aims at Flash design beginners not beginning ActionScript 3 programmers although programmers can read this to get a quick overvi
316. h guides flash ex components intro flash cs3 components overview fla 3 http livedocs adobe com flash 9 0 main wwhelp wwhimpl js html wwhelp htm 4 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash events Event html 5 http livedocs adobe com flash 9 0 main 00000420 html 6 http livedocs adobe com flash 9 0 main 00000424 html wp125595 7 http livedocs adobe com flash 9 0 main 00000424 html 8 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl controls CheckBox html 9 http livedocs adobe com flash 9 0 main 00000456 html wp143494 10 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl controls RadioButton html 11 http livedocs adobe com flash 9 0 main 00000468 html 12 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl controls TextArea html 13 http livedocs adobe com flash 9 0 main 00000472 html 14 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash text TextField html 15 http livedocs adobe com flash 9 0 main 00000448 html 16 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl controls NumericStepper html 17 http livedocs adobe com flash 9 0 main 00000464 html 18 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl controls Slider html 19 http livedocs adobe com flash 9 0 main 00000428 html wp236747 20 http livedocs adobe com flash 9 0 main 00000428 html 21 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl cont
317. h mediawiki index php oldid 28999 Contributors Daniel K Schneider Image Sources Licenses and Contributors 423 Image Sources Licenses and Contributors image atp_ria_guide_ria_picture jpg Source http edutechwiki unige ch mediawiki index php title File Atp_ria_guide_ria_picture jpg License unknown Contributors image flash cs6 welcome screen png Source http edutechwiki unige ch mediawiki index php title image flash cs6 workspaces menu png Source http edutechwiki unige ch mediawiki index php title File F File Flash cs6 welcome screen png License unknown Contributors ash cs6 workspaces menu png License unknown Contributors image flash cs4 docking swatches panel png Source http edutechwiki unige ch mediawiki index php title File Flash cs4 docking swatches panel png License unknown Contributors image flash cs4 docking color panel png Source http edutechwiki unige c image flash cs4 docking library panel png Source http edutechwiki unige ch mediawil image flash cs6 workspace iconized panels png Source http edutechwiki unige ch me Contributors image flash cs4 dks workspace png Source http edutechwiki unige ch mediawiki index image flash cs6 stage resized png Source http edutechwiki unige ch mediawiki index p image flash cs6 drawing tutorial workspace png png Source http edutechwiki unige c Contributors image Pencil tool png Source http edutechwiki unige ch mediawiki index ph
318. hat built in buttons include some animation that tells the user that he she is clicking on a button Button components are easier to use than button symbols since their labels can be defined through the parameters panel Otherwise you use both in the same way i e you will have to write some ActionScript code Before we start let s quote an explanation from the Adobe user manual Components are the building blocks for the rich Internet applications that provide these experiences A component is a movie clip with parameters that allow you to customize the component either during authoring in Flash or at run time with ActionScript methods properties and events Components are designed to allow developers to reuse and share code and to encapsulate complex functionality that designers can use and customize without using ActionScript Using ActionScript 3 0 Flash component button tutorial 224 1 Components retrieved nov 2008 Simple timeline navigation with a button This example introduces an easy way of using buttons for so called timeline navigation You can skip it and dive into the next section Example code e flash cs6 timeline navigation html 2 e flash cs6 timeline navigation fla 3 Step 1 Display the components panel All built in Flash components are available through a specific library To use this library e Menu Window gt Components or hit CTRL F7 e Then dock the panel somewhere best is n
319. he graphic itself but rather just apply a filter to it Traditional Flash desginers create all animations in the main timeline scenario The scenario will then be divided into sequences called scenes A modern Flash developer rather would tend to place individual animations within and embedded movie clip and then place those clips in space and time As explained in the Flash frame by frame animation tutorial a movie clip symbol has its own timeline It also may include other movie clips For example you could create a movie clip called bird animation In this movie clip you could create a moving object bird which in turn would flap its wings These wings are are again symbols embedded at a third level and we will have a the following hierarchy Bird animation gt Bird gt Wings Create a simple motion tween Let s now look at an example You can download the following file that already contains the objects flash cs 4 motion tweening empty fla Solution e flash cs 4 motion tweening html 2 already admire the result e flash cs 4 motion tweening fla 3 the solution do not cheat if you want to learn using this example Step 1 Prepare the object to animate Important Each object must be interpolated in a different layer and that object must be a symbol If you do not have symbols in your library this is a procedure 1 Create a new layer 2 In this layer draw a picture using any drawing tools images etc y
320. he File Menu or select an item within the welcome panel The welcome panel includes three columns To the left are predefined templates defining somewhat standard workspace sizes i e x y dimensions of the flash clip that the users will see e Inthe middle you can select various types of Flash variants that we will not introduce here e In the right column you have links to Adobe s introductory texts from the Flash Dev center Contents will open in your default web browser If you tick Don t show again on bottom left you won t see this panel anymore but the same options are available through the File Menu If you want it back Edit gt Preferences General Category On launch select Welcome screen To start learning the Flash desktop we now suggest to click on ActionScript 3 0 This will open a 550x400 px workspace and configure Flash for using ActionScript 3 aka AS3 AS3 is the most recent Flash scripting standard and works fine since Flash 9 i e since summer 2006 Avoid ActionScript 2 0 Now click on ActionScript 3 0 and enter the tool for real Flash CS6 desktop tutorial Layout and configuration of the Flash Desktop Definition By Flash Desktop Desktop in short we mean the whole CS3 authoring environment that you can see when you work on some Flash animation The default desktop s When you first open a the Flash Desktop you will not see all the tools you later will use nor will it be necessarly adapted
321. he beginning to the end By default 24 frames last one second at the default frame rate of 24 FPS Step 3 Create the motion path The control slider in the timeline scenario was placed in the last frame Now move the object to a new position A motion path trajectory appears on the scene The motion path shows the trajectory of interpolated images during the tween span For now we see just a straight line that connects the first frame to last You can change this interpolation path to create a more interesting one Once done you ll see this sao 5 w i 2 fp 3 3 4 Hills a a Sky am Jag abhi Hom 10s M T flash cs 4 motion tweening fla x Scene 1 6 4 m In the last frame the sun shot into a new position To see the object moving along the route e Move the control rectangle in the red timeline to the left and right e Or already view the results Press CTRL Enter or menu Control gt Test Movie Flash CS6 motion tweening tutorial 84 Notes If the object is not tweenable object or if multiple objects are selected on the same layer a dialog box appears The dialog box allows you to convert the selection to a movie clip symbol If the object to be interpolated is the only item in the layer Flash will add the motion tween span to the same layer If there are other objects on the layer Flash creates multiple layers each containing an object an its tween e If the original object sits in
322. he class music Was defined by exporting the music file in the library var music Music new Music var volume new SoundTransform 0 2 0 Add a cuepoint for the end and which is not in the flv movie video_component addASCuePoint 40 End video_component addEventListener MetadataEvent CUE_POINT cuepoint_listener function cuepoint_listener obj MetadataEvent void switch obj info name case palm_tree movie_trees play break case books movie_trees stop movie_books visible true movie_books play break case issing_manual ovie_books stop ovie_manual visible true mM m movie_books visible false m m ovie_manual play break case XPS movie_manual stop movie_manual visible false var song music play 0 3 volume break Flash augmented video tutorial 290 case ubuntu movie_penguin play break case End A MSONGASEORI movie_penguin stop movie_penguin visible false movie_books visible false This shows how to open an URL in a WebBrowser btn_edutech_wiki addEventListener MouseEvent CLICK GoToUrl function GoToUrl event MouseEvent void var url String http edutechwiki unige ch en Flash_video_component_tutorial var request URLRequest new URLRequest url try navigateToURL request _blank catch e Error Praca unnetor occurred i Example using classic motion twe
323. his implies that you should again make the graphic into symbol then proceed in the same way as normal guided motion tweening Your embedded movie clip might look like this A guide motion animation of a movie clip as mask Example flash cs3 mask 2 html 4 flash cs3 mask 2 fla P Directory http tecfa unige ch guides flash ex special effects Links e Work with mask layers 6 Manual e For CS4 See also Graphic Effects Learning Guide for Flash CS4 Professional 8 Things did change since CS3 1 a section of creating animation animation basics of the Adobe Using Flash 1 References 1 http livedocs adobe com flash 9 0 UsingFlash WSd60f23110762d6b883b18f10cb1felaf6 7d98 html 2 http tecfa unige ch guides flash ex special effects flash cs3 mask html 3 http tecfa unige ch guides flash ex special effects flash cs3 mask fla 4 http tecfa unige ch guides flash ex special effects flash cs3 mask 2 html 5 http tecfa unige ch guides flash ex special effects flash cs3 mask 2 fla 6 http livedocs adobe com flash 9 0 UsingFlash WSd60f23110762d6b883b18f10cb1felaf6 7d97 html 7 http livedocs adobe com flash 9 0 UsingFlash 8 http www adobe com devnet flash learning_guide graphic_effects Flash inverse kinematics tutorial 249 Flash inverse kinematics tutorial Draft Introduction Learning goals e Insert bones in shapes e Connect symbols with bones e Create a motion animation with bones
324. hit F9 and copy paste the following code You also must include the copyright notice I believe that we really are lucky to be able to use such libraries So please be respectful FLINT PARTICLE SYSTEM Author Richard Lord FINT particle system 392 Copyright c Big Room Ventures Ltd 2008 http Elintparticles org Licence Agreement Permission is hereby granted free of charge to any person obtaining a copy of this software and associated documentation files the Software to deal in the Software without restriction including without limitation the rights to use copy modify merge publish distribute sublicense and or sell copies of the Software and to permit persons to whom the Software is furnished to do so subject to the following conditions The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software x import org flintparticles common counters import org flintparticles common displayObjects RadialDot import org flintparticles common initializers import org flintparticles twoD actions import org flintparticles twoD emitters Emitter2D import org flintparticles twoD initializers import org flintparticles twoD renderers import org flintparticles twoD zones We keep the same here unlike the original addChild new SnowBackground var emitter Emitter2D
325. i Number 0 i lt button_list length i button_list i addEventListener MouseEvent CLICK colorPick A an array of max 3 elements i e what the user picked var selected_colors new Array function colorPick evt MouseEvent void var obj evt target A picked object goes hidden obj visible false selected_colors push obj name Once the user got three we display and reset all buttons to visible if selected_colors length 3 fill in the three cols Warning it s the cl etc property defined above data_grid addItem cl selected_colors 0 E242 seleaccrac_colloies il Esisseilecvecl colors 2 s for var i Number 0 i lt button_list length i button_list i visible true selected_colors new Array e Directory http tecfa unige ch guides flash ex data grid e File data grid 1 fla Flash datagrid component tutorial 312 Data Grid using external data sources Typically data that should go for display and editing in a data grid may sit in data structures produced by a server side application The best way to deal with these data sources is probably exporting importing as XML The well formed kind of XML structure you can use is list of elements with attributes or a list of elements with subelements Translated in XML this means that you need structure like this element and attribute names don t matter of course as you shall see lt list gt lt line at
326. i unige ch mediawiki index php tit image flash cs6 color panell png Source http edutechwiki unige ch mediawiki index p image flash cs6 color panel3 png Source http edutechwiki unige ch mediawiki index p p title File Flash cs6 modify punch png License unknown Contributors iawiki index php title File Flash cs3 subselection curve control png License unknown Contributors php title File Flash cs3 eraser options png License unknown Contributors hp title File Flash cs3 edit snapping png License unknown Contributors i index php title File Flash cs3 align object snapping png License unknown Contributors title File Flash cs3 align tools png License unknown Contributors le File Flash align panel png License unknown Contributors p title File Flash cs6 color panell png License unknown Contributors p title File Flash cs6 color panel3 png License unknown Contributors image flash cs6 color panel2 png Source http edutechwiki unige ch mediawiki index p p title File Flash cs6 color panel2 png License unknown Contributors Image AdditiveColor 192px png Source http edutechwiki unige ch mediawiki index php title File AdditiveColor 192px png License unknown Contributors Image RGBR png Source http edutechwiki unige ch mediawiki index php title Fil image flash cs6 color full blue png Source http edutechwiki unige ch mediawiki index le RGBR png License unknown Contributors ph
327. ia org wiki Encapsulated_PostScript 2 http en wikipedia org wiki Windows_Metafile 3 http inkscape org 4 http www dmoz org Computers Graphics Clip_Art 5 http webclipart about com od webclipartatoz I bInettop htm 6 http www widged com wiki doku php id en assets medias cliparts cliparts 7 http photobucket com 8 http thenounproject com 9 http commons uncyclomedia org wiki Category Openclipart 10 http commons wikimedia org wiki Category Nuvola_SVG_icons 11 http www free clip art com 12 http www graphicsfactory com 13 http www prodraw net cartoon 14 http www garcya us blog free vector graphics 15 http www vecteezy com 16 http rj graffix com clipart html 17 http commons wikimedia org wiki Nuvola 18 http commons wikimedia org wiki Commons Project_Nuvola_2 0 19 http www school clip art com 20 http www inki com clipart textlist php 21 http www clipproject info 22 http www wpclipart com index html 23 http www best of clipart com 24 http www fileformat info 25 http en wikipedia org wiki File_format 26 http en wikipedia org wiki List_of_file_formats 27 http en wikipedia org wiki Alphabetical_list_of_file_extensions 28 http en wikipedia org wiki Clipart 29 http en wikipedia org wiki Open_Clip_Art_Library 30 http en wikipedia org wiki Comparison_of_vector_graphics_editors 31 http
328. ical documentation means is that we can extract extra information from the generated event object e g e if the user pressed the CTRL or SHIFT key e where the target object sits either relative to the stage or relative to a parent object e Ofcourse we also can extract the target itself since a Mouse Click Event is a kind of general Event described above ActionScript 3 event handling tutorial 361 Event propagation and bubbling to do see http www adobe com devnet actionscript articles event_handling_as3_03 html for now Links Tutorials e Introduction to event handling in ActionScript 3 0 tl by Trevor McCauley Adobe Developer Connection good tutorial Important manual pages These are almost impossible to understand for non programmers but otherwise the documentation at Adobe is excellent e InteractiveObject 91 This InteractiveObject class is the abstract base class for all display objects with which the user can interact using the mouse and keyboard Most Events are documented here Make sure to list also the inherited events Event The Event class is used as the base class for the creation of Event objects which are passed as parameters to event listeners when an event occurs e EventDispatcher U1 This is the page you should consult when you want to look up details for methods like addEventListener e Summary of All Flash Player Classes 5I References 1 http livedocs a
329. ics text on frame 1 else your flash animation will look really empty e Then add a button that will allow a user to jump to frame 2 when he hits the button e Add the ActionScript don t forget to also add a stopQ If this sounds too complicated you can start with less 1 Create a new layer and select frame 1 2 Drag a button from the button library to the stage and name this button instance start in the properties panel 3 Hit F9 and copy paste this code Sroa s start addEventListener MouseEvent CLICK launch function launch ev gotoAndPlay 2 We now have an Enter button in the first frame of the animation As soon as the user will click on it the animation will move to frame 2 and play the rest Of course this means that you have to put something in frame 2 and beyond that users can look at Flash button tutorial 202 Exercise Use code snippets to enter ActionScript ocde Instead of typing or copy pasting code you also could use the code snippets panel e Get it with menu Windows gt Code Snippets e Select the button on the stage e Open Timeline Navigation and select Click to Got to Frame and Play Code Snippets 78 l gt O Actions Timeline Navigation L Stop at this Frame O Click to Go to Frame and Stop 0 Click to fo to Frame and Play O Click to Go to Next Frame and Stop O Click to Go to Previous Frame and St 0 Click to Go to Next Scene and Play
330. ics 18 by Chris Georgenes Includes a video examples files and text This is a really useful tutorial that explains all the basics Examples e Dress up dolls 19 Flash Avatars theory technology and design e See the avatar article References 1 http help adobe com en_US Flash 10 0_UsingFlash 2 http creativecommons org licenses by nc sa 3 0 3 http en wikipedia org wiki Inverse_kinematics 4 http en wikipedia org wiki Inverse_kinematic_animation 5 http electronics howstuffworks com question538 htm 6 http help adobe com en_US Flash 10 0_UsingFlash WS58BD3 A02 DA 25 488f B534 AE5463A24833 html 7 http tecfa unige ch guides flash ex6 inverse kinematics symbol vs shape armature html 8 http tecfa unige ch guides flash ex6 inverse kinematics symbol vs shape armature fla 9 http tecfa unige ch guides flash ex6 inverse kinematics symbols ik armature intro html 10 http tecfa unige ch guides flash ex6 inverse kinematics symbols ik armature intro0 fla 11 http tecfa unige ch guides flash ex6 inverse kinematics symbols ik armature intro fla 12 http tecfa unige ch guides flash ex6 inverse kinematics bones in shape intro html 13 http tecfa unige ch guides flash ex6 inverse kinematics bones in shape intro fla 14 http tecfa unige ch guides flash ex6 inverse kinematics shape ik rubberman animation html 15 http tecfa unige ch guides flash ex6 inverse kinematics shape ik rubberman
331. icture result with sharp lines e Color threshold 200 and minimum area 2 Source of the demo application it uses a component for navigation Directory http tecfa unige ch guides flash ex tracing intro Fla flash cs3 tracing parameters fla Tuning Of course once you have your trace you then can remove unwanted elements e g backgrounds in a portrait change colors or apply all other drawing techniques you know Bitmap shape tweening in Flash We will trace of portrait picture jpg bitmap and then add a shape tween to it Step 1 Import a bitmap Import the picture to Flash e g by dragging it to the Flash desktop e You may resize the picture first with an external tool Step 2 Trace it e Menu Modify gt Bitmap gt Trace Bitmap e You can play around with a few settings Here is an example that shows the original and the traced result side by side Flash bitmap tracing tutorial 189 Trace Bitmap x Color threshold m Minimum area je pixels Cancel Curve fit smecth l Corner threshold Few Corners x Preview Live tracing with Flash CS3 Step 3 Make a shape tween e Hit F6 in some distant frame e Make changes to the vector image in the new frame E g distort or change colors use the Select or the Lasso tool to select areas of the picture e Add the shape tween You can admire the result 7 files flash cs3 shape picture morphing3 Tuning e Adjust the size of the picture to the scene wi
332. icture_06 tecfa Bitmap picture_O7 office Bitmap picture_O8 office Bitmap Properties x Mi Filters Behaviors Strings Parameters nZ B Bumn v Instance of button_back Color Nore Eg back bin Swap Track as button z l Lea Two button symbol instances on the stage Step 7 optional Add some highlighting e Double click on the backward button in the library This will get you in symbol editing mode e Hit F6 in frame 2 Over e Change the color of the button As you will see the button will change color when you move the mouse over it Do the same with the other button flash cs3 simple side show as3 fla san anag Ii antn 2 120fs Olis 4 ee cne OOOO The pictures were made wit DKS Sept 1 Painting the over state of a button Step 8 Add action script code to the timeline e Insert a new layer call it Action e Go to frame one of this layer and hit F9 Firstly insert a stop to the animation STORE This is ActionScript code that will stop the animation right after frame one is loaded Only by clicking the buttons can the user then go forward or backward Then insert this slide show code Flash button tutorial 208 forward_btn addEventListener MouseEvent CLICK forward back_btn addEvent Listener MouseEvent CLICK backward function forward event MouseEvent if this currentFrame this totalFrames
333. id 1 html http tecfa unige ch guides flash ex data grid data grid 1 fla http tecfa unige ch guides flash ex data grid data grid xml html http tecfa unige ch guides flash ex data grid Ims list xml http tecfa unige ch guides flash ex data grid data grid xml fla http tecfa unige ch guides flash ex data grid data grid xml attrs html http tecfa unige ch guides flash ex data grid data grid xml attrs fla http www adobe com devnet flash quickstart datagrid_pt1 http www adobe com devnet flash quickstart datagrid_pt2 http www adobe com devnet flash quickstart datagrid_pt3 http www adobe com devnet flex quickstart accessing_xml_data http livedocs adobe com flex 3 html help html content Filesystem_16 htm l http livedocs adobe com flex 3 html help htm content 13_Working_with_XML_01 html http www kirupa com developer flash8 datagrid htm http help adobe com en_US AS3LCR Flash_10 0 fl controls dataGridClasses package detail html http livedocs adobe com flash 9 0 ActionScriptLangRefV 3 fl controls dataGridClasses package detail html http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl data package detail html Flash drag and drop tutorial 316 Flash drag and drop tutorial Draft Overview Dragging and dropping objects is a popular brick in edutainment programs This is part of Flash CS3 tutorials It is probably not suitable for Flash designers without any programming experience Learning goal
334. ided skins To create your own look for the play controls create a custom skin SWF select Custom in the Skin drop down box and enter the relative path of the skin SWF in the URL field To remove all play controls and only import your video select None fromthe Skin drop down box Ceea Cees eens The Adobe Media encoder can be found in the Program menu of your system Windows Mac or in the File Import process in Flash CS6 as explained in the previous section Important You cannot transcode or edit flv files Use another source format like mp4 I can t explain why but it s Adobe s choice Simple transcoding Click on to add a video for encoding Select the video format By default the Flash F4V format is selected 1 2 3 Select the quality 4 Press the green arrow button to launch the encoding The resulting file will be put in the same directory as the source video Flash video component tutorial 131 rce Attributes Medium Quality 4 16x9 Project Framerate 300kbpee Mobile 768x432 16x9 Projet gt MXFOPia PC amp TV HD High 169 v a Camera PC amp TV HD Low 169 gt AVC Intra PC amp TV SD High 169 gt Dv PC amp TV SD Med 169 gt DVCPRO Phone amp Tablet 3G 169 Phone amp Tablet Low 169 Phone amp Tablet WiFi 169 Web 1024x576 16 9 Project Framerate 1800kbps Web 1024x576 16 9 Project Framerate 2500kbps o Web 1280x720 16 9
335. iding S can t see the dog for starters brown_dog visible false brown_dog addEventListener MouseEvent CLICK hideShow white_cat addEventListener MouseEvent CLICK hideShow function hideShow event MouseEvent void instead of white_cat visible false we just switch it to the opposite white_cat visible white_cat visible brown_dog visible brown_dog visible Pi ieron Iaia as e loslia ivoire Creede ooo BF empty_cat addEventListener MouseEvent CLICK transformCatColor R G B A multipliers and R G B A offsets We start with a light grey cat var resultColorTransform new ColorTransform Os1 Oci 0 1 1 120 120 120 255 2 empty_cat transform colorTransform resultColorTransform function transformCatColor event MouseEvent void var resultColorTransform empty_cat transform colorTransform Create a new color transform object and change it red color will peak at 255 blue color offset will cycle from TASS te LOC CESUICCOLO Tess t orm eeclOicsec Math min resultColorTransform redOffset 10 255 resultColorTransform redMultiplier Math min resultColorTransform redMultipliert 0O 1 1 resultColorTransform blueOffset 10 if resultColorTransform blueOffset gt 255 resultColorTransform blueOffset 100 resultColorTransform blueMultiplier 0 1 ActionScript 3 interactive objects tutorial 337 ii Coa chae CO Cia CE
336. iel s Office lt p gt lt p begin 5 dur 5 gt My Palm Tree from NYC lt p gt lt p begin 11 dur 7 gt My Bookshelf lt p gt lt p begin 18 dur 5 gt My favorite Flash Drawing Book lt p gt lt p begin 25 dur 5 gt My DELL XPS Laptop Flash machine lt p gt lt p begin 30 dur 5 gt My Ubuntu Linux workstation lt p gt lt p begin 33 dur 5 gt Working hard on Flash Tutorials using the Xemacs Editor lt p gt lt p begin 42 dur 5 gt The outside not my bike lt p gt lt div gt lt body gt S S Note Captions may overlap i e Flash will display a new caption on a new line if the previous one is still on You can see this in the example we present in the next section For now just grab the template below and add p tags make sure to close them as in the example above Replace Let s start by your own caption of course lt xml version 1 0 encoding UTF 8 gt lt tt xml lang en xmlns http www w3 org 2006 04 ttafl xmlns tts http www w3 org 2006 04 ttafl styling gt lt head gt lt styling gt lt styling gt lt head gt lt body gt lt div xml lang en gt lt p begin 1 dur 4 gt het s start lt p gt lt div gt lt body gt lt J EES Using the FLVPlayback Captioning component e Create a new layer and call it Caption or something like that Go there Then drag the FLVPlayback Captioning component somewhere to the workspace or even to the stage e Unlike
337. if event_name something anim2 visible true anim2 play remove this end comment line 3 a Navigation Adapt to your cuepoint buttonl addEventListener MouseEvent CLICK jump1 function jumpl event var cuePointInstance Object video_component findCuePoint wonder video_component seek cuePointInstance time animl visible true animl play Manipulating the video component with ActionScript e Read Controlling web video with ActionScript 3 FLVPlayback programming 1131 However this article was written for CS5 and at least looping won t work in Flash 11 CS6 See a fixed example 14 15 e flash cs6 video component looping fla e flash cs6 video component looping html Flash augmented video tutorial 293 Links Manual entries For Designers e Using the FLVPlayback Component l CS5 Below some more technical links which so far are not really used much in this tutorial ActionScript overview documentation for programmers AS3 FLVPLayback documentation 17 Tutorials e To do Artwork and finding videos All Artwork clipart is from e http www openclipart org sorry I didn t write down names of individual creators These are SVG files in the public domain I imported via Illustrator I really can t understand why Flash doesn t support SVG in some ways Sound except voice track on videos is from e http simplythebest net sounds MP3 MP3_sounds html Find
338. iles we just created can be used as components in new Flash animation although we would rather recommend using embedded movie clips for that purpose The fla swf and html files flash cs3 rocking hello can be found here http tecfa unige ch guides flash ex frame by frame intro Step 1 Import swf files into the library of a new Flash file e Create a new flash file File gt New Then import stuff you made File gt Import gt Import to library e Select the flash cs3 rocket swf file e Do the same with the flash cs3 shaking hello swf file You now have a nice rocket and a flashing hello in your library Library x Components Component Inspector E fash cs3 rocket hello fla h H g 2 items Type Use Count Lin E ANO ONES BEA A AA airte el Hello and rocket movies in your library Step 2 Drag the symbols movies to the stage e Drag the item in the library onto the stage e Now your rocket is too big e No problem Use the Free Transform tool to make it smaller and to rotate e Hold down the SHIFT key when you resize it from a corner Here is the result Flash frame by frame animation tutorial 61 flash cs3 rocket hello swf 5 x Eile View Control Debug Hello and rocket movies used Step 3 Learn about motion animation Of course now you should do a moving animation with these flashing objects See the Flash motion tweening tutorial and be
339. ill demonstrate these principles Flying rocket in the main timeline The following screenshot shows a rocket frame by frame animation 4 made in the main timeline The animation only uses three frames i e we only implement some minimalistic flaming animation e We use three layers for drawings one for the rocket and two for the flames e Yellow flaming is made with three different drawings in frames 1 2 3 layer 2 e Red flaming is made with three different drawings in frames 1 2 3 layer 3 If you want to add a second a third rocket and other flying objects you will have to duplicate the three layers In the six new layers you will have to move the drawings to positions This is awfully complicated and we will not show an example Therefore in most cases do not create animations in the main timeline Flash frame by frame animation tutorial 43 Fl File Edit View Insert Modify Text Commands Control Debug Window Help Designer 0 BMrmoerlettT az L2E F AF AQAA iva S gt lt rocket a yellow flame red flame amp Drawing object x7 POSITION AND SIZE es W 110 60 H 106 15 lt 7 FILL AND STROKE a aC Stroke Join Miter 10 0 Bgd Ph ly Distribute a tb Hw Match size Space 2m 2a D Align to stage Example to look at and to play wit
340. illing the dataProvider field in the Parameters panel etc you just write the whole code that creates positions and fills this ComboBox Code below more or less has been used to make the CS3 components overview 1 import fl controls ComboBox import fl data DataProvider import flash net navigateToURL var items_CB Array new Array label HOME data home_frame lelosile Wsieie inputi loyshecoms Cleicers EON SEE name u label Color Picker data color_picker_frame label Data Grid data data_grid_frame laloeisVinisies Carces WiliSies_iricenne mage User Input more data user_input_frame aloes WSereelibsing cleicas Weeie llil iciesinve var menu_CB ComboBox new ComboBox Width of items menu_CB dropdownWidth 200 With of the menu button nu_CB width 150 3 S VA e SEO stint OTN Arom co aleine esni enim Move GOTEO Vi e m 3 SS Number of rows to display without scrollbar 3 nu_CB rowCount 7 Label of the menu button Flash components overview 220 menu_CB prompt Flash CS3 UI Components Insert the items defined above menu_CB dataProvider new DataProvider items_CB Register th vent handler menu_CB addEventListener Event CHANGE changeHandler addChild menu_CB function changeHandler event Event void var destination ComboBox event target selectedI
341. imated movie clips with some ActionScript code e Learn how to create instances of movie clips with ActionScript Prerequisites Flash drawing tutorial Flash motion tweening tutorial Flash component button tutorial flash embedded movie clip tutorial important Some more ActionScript e g ActionScript 3 interactive objects tutorial to understand the examples towards the end Moving on Flash drag and drop tutorial ActionScript 3 interactive objects tutorial will teach other tricks properties and methods that you could use with movie clips The Flash tutorials index has a list of other tutorials Level and target population e It aims at beginning Flash designers Embedded movie clips are used in various other tutorials but here we explain it a bit more systematically Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Alternative version Flash CS3 embedded movie clip tutorial CS3 guided motion tweens second part Flash using embedded movie clips tutorial 269 Using a movie clip principle If you don t know how to create so called component buttons you should also read the Flash component button tutorial first You also need to understand how to created embedded movie clips and you if you don t you should read the Flash embedded movie clip tutorial You also could
342. imeline of the menu based slideshow Create these layers now If you don t remember how see the Flash layers tutorial As you can see the timeline is rather short since this is an a application and not an animation that uses the main timeline Step 2 Add pictures or other contents e Decide how many pictures you want we took four e Lock all layers except the pictures layer e Select the Pictures layer e Frame is reserved for a Title page e Create a few new empty keyframes hit F7 and fill them with pictures or any other content or drawings you d like To import a picture either drag it from the desktop to the stage or the library or use Menu File gt Import Your timeline and layers will later look like this For the moment just look at the pictures layer Flash component button tutorial 228 q Actions Buttons Credits Timeline of the menu based slideshow Step 3 Get buttons from the components library e Select the buttons layer and lock all the other layers e Open the component library You can find it in menu Window gt Components We suggest docking this panel next to the library e In this library open the User Interface folder and drag as many buttons to the stage as you have pictures Add an extra one for the credits page e Move the buttons into a good position You may use the Align panel to align and to distribute them properly see the Flash arranging objects tutorial if neede
343. in AS3 and 2k in AS2 version of TweenLite 3 e TweenLite a light weight and fast tween class to create animation and shape tweens in one go e TweenMax does both of Tweenlite and TweenFilterLite and more It s still bigger and bit slower e TimelineLite is a timeline class for building and managing sequences of TweenLite TweenMax TimelineLite and or TimelineMax instances i e a kind of a virtual MovieClip timeline or a container where you place tweens over the course of time e TimelineMax 6 _ e TransformManager 71 _ add interactive scaling rotating moving of DisplayObjects in your Flash animation Please refer to the GreenSock website for official information and also consider donating something to Jack You will get some additional benefits Since I only teach Flash once in a while I only gave 30 in 2008 and 50 in 2010 Daniel K Schneider Deprecated modules e TweenFilterLite Deprecated eplaced by features in either TweenLite or Tweenmax did extend TweenLite to add more filters like blurs glows contrast brightness etc e TweenGroup 10 deprecated and replaced by TimelineLite did allow to manage groups of TweenLite FilterLite Max tweens In order to understand what some of the parameters and properties do you may have to consult the AS3 manuals at 5 Adobe in particular the ActionScript3 language reference See also Flash CS4 motion tweening with AS3 tutorial i e a short i
344. in Area i0 px r a 4a Expand Live Paint Transform Custom Default Simple Trace Color 6 Color 16 Photo Low Fidelity Photo High Fidelity Grayscale Hand Drawn Sketch Detailed Illustration Comic Art Technical Drawing Black and White Logo One Color Logo Inked Drawing Lettering Live tracing controls with IllustratorCS3 Step2 Import to Flash e Copy paste if from Illustrator with the options Paste using AI File Importer preferences and untick maintain layers e You may adjust the size of the stage to the size of the picture somewhat I chose to add some big margins for a reason you will see later e Convert it to a symbol so that you have a copy in the library Step 3 Break it Apart Then right click gt Break Apart e You have to do this several times since illustrator produced object groups within object groups use ctrl Z if you think you went too far Flash bitmap tracing tutorial 191 Step 4 Create a new keyframe e Right click on frame 20 and hit F6 to create a new keyframe with the same picture Step 5 Distort the picture in keyframe 1 Try everything you can e Select parts and change the color with the paint bucket That s actually the only thing I did e You also can move parts but probably you then should start with a much simple ray trace e Distort parts with the Selection Tool the Subselection tool and the Free Transform tool Step 6 Add a shape tween between
345. in in frame 1 of the Action Layer and hit F9 Add this below the stopQ launch_button addEventListener MouseEvent CLICK launchRocket function launchRocket event MouseEvent gotoAndPlay 2 You should see something like this Insert Modify Text Commands Control Debug Window Help Designer e Timeline 4 T a Action Uaa ActionScript 3 0 J eov GBESAN i Code Snippets A Top Level 1 stop Stopanimation in this frame 1 A Language Elements 2 adobe utils Zi a air desktop 4 air net 5 6 7 8 9 M gt launch_button addEventListener MouseEvent CLICK launchRocket A air update A air update events fl accessibility fi containers A fi controls fi controls dataGridClasses function launchRocket event MouseEvent gotoANdPlay 2 Definition of the Action function Symbol Definition s 1a Action 1 Line 6 of 9 Col 1 Some ActionScript 3 code to associate a user event click on button with some action We cannot really explain event driven programming here see the ActionScript 3 event handling tutorial but the principle is the following For each object that can react to user actions you have to define what will happen when the user does something e g click with the mouse e Firstly define a function that does something e g move the playhead in the timeline to another frame In our case we called the
346. in the Windows menu on top e Open the TimeLine Navigation section and double click on Stop at this Frame Press me Code Snippets a h gt gt Gj Actions Timeline Navigation L Stop at this Frame OQ jia Click to Go to Frame and Stop O Click to Go to Frame and Play jts Click to Go to Next Frame and Stop Q Click to Go to Previous Frame and St O Click to Go to Next Scene and Play O Click to Go to Previous Scene and Plz O Click to Go to Scene and Play gt Gj Animation gt Gj Load and Unload 5 Audio and Video vi Layer with empty keyframes Flash will now create a new Actions layer and the ActionScript programming panel will pop up Do not dock it It will have the following code inside Stop at This Frame The Flash timeline will stop pause at the frame where you insert this code Can also be used to stop pause the timeline of movieclips 3 SCoPE e Close the ActionScript panel by hitting F9 Test your clip if you want Hit CTRL Enter Step 6 Implement navigation from frame 1 to frame 2 e Select the button on the stage e Open the code snippets panel again e This time select Click to Frame and Stop In the ActionScript panel you will see this Flash component button tutorial 226 7 Click to Go to Frame and Stop Clicking on the specified symbol instance moves the playhead to the specified frame in the timeline and stop
347. ine a d Now test your animation sequence e Press CTRL Enter or use the menu Control gt Test Movie e You can also move the red control that sit on top of the timeline to the left or to the right We now will introduce three frame by frame animation examples We sometimes will do this in the main time line of the fla file Alternatively and better you first should create a new so called movie clip symbol and then edit that object Flash frame by frame animation tutorial 48 A simple stickman We will shortly show how to create a stickman animation using an embedded movie clip Look at 8 p stickman cs6 html first Step 1 New Flash file and background e Create a new Flash file e Draw a simple background in the first layer and call it background or something E g we just drew 2 rectangles Lock this layer e Create a new layer and call it Stickman animation Step 2 Create a drawing and make it a symbol e In the new layer created in step 1 create your drawing e Select all the elements e Right click gt Convert to symbol Select Movie Clip and name it Stickman e Kill the drawing on the stage Don t worry it now sits in the library e Now drag the Stickman from the library to the stage You could make several clones and adjust their respective size in the properties panel You might see something like this Fl File Edit View Insert Modify Text Commands Control
348. ing a movie clip There are two ways to edit a movie clip 1 In stand alone view i e you only will see the components of the movie clip Double click on the movie symbol s icon not it s name in the library You now can edit e g a add a motion animation or change its drawings 2 Edit with the scene as background If you put an instance of the movie clip on the stage and then double click on this instance you can edit the same movie clip symbol but you will see the objects of the stage while you edit This is quite handy if you plan to create some motion animation Below is a screen dump of a situation where we edit a movie clip symbol after double clicking on an instance of it that sits on the stage The scene itself is somewhat visible picture and buttons Editing a movie clip symbol By editing a movie symbol you basically can do the all the stuff you have learnt about creating flash movies in previous tutorials e g in the Flash motion tweening tutorial In other words movie clips have their own timeline as you can see in the above picture There is a motion tween for the Kite drawing and a Motion guide layer The whole thing is called the Kite_movie movie clip Do not forget to go back to the scene once you are done e g by double clicking on the scene in the edit bar on top of the stage or by clicking on the little back arrow When you edit a movie clip you are in symbol edit mode and you shou
349. ing and downloading videos e You may download videos from the Internet make sure that copyright allows you to do so Getting videos from sites like YouTube is not easy without download helpers see below Therefore try sites like http vimeo com first e Firefox video download helper extension https addons mozilla org en US firefox addon 3006 e Google video search http video google com Use advanced search lAl in order to restrict search to duration Video sites e http vimeo com Includes open source creative commons videos After a search you can tick a box for only showing downloadable videos e http vids myspace com Needs special tools to download e http youtube com Needs special tools to download External Flash Video Component Sources e Flowplayer 18 e JW Video Player H e Flash Video Player 20 Acknowledgements and copyright modification The general section on cue point was copied from Let s recall what cue points are with some text that was copied and slightly adapted from Adobe s D use cue points You also must cite this source if you reuse this material Flash augmented video tutorial 294 References 15 16 17 18 19 20 http tecfa unige ch guides flash ex6 component video intro flash cs6 video simple embedd html http tecfa unige ch guides flash ex6 component video intro flash cs6 video simple embedd fla http tecfa unige ch guides flash ex6 component video intro
350. ing png License unknown Contributors image flash trees and cats drawing2 png Source http edutechwiki unige ch mediawiki index php title File Flash trees and cats drawing2 png License unknown Contributors image cs3_layers_annotated png Source http edutechwiki unige ch mediawiki index php title File Cs3_layers_annotated png License unknown Contributors image flash cs3 insert layer png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 insert layer png License unknown Contributors image cs3_layers2 png Source http edutechwiki unige ch mediawiki index php title File Cs3_layers2 png License unknown Contributors image an_motion_tween_span png Source http edutechwiki unige ch mediawiki index php title File An_motion_tween_span png License unknown Contributors image an_motion_tween_span_no_target png Source http edutechwiki unige ch mediawiki index php title File An_motion_tween_span_no_target png License unknown Contributors image an_pose_layer_span png Source http edutechwiki unige ch mediawiki index php title File An_pose_layer_span png License unknown Contributors image motion_tween classic png Source http edutechwiki unige ch mediawiki index php title File Motion_tween classic png License unknown Contributors image classic motion_timeline_broken png Source http edutechwiki unige ch mediawiki index php title File Classic motion_timeline_broken png License unknown Contribu
351. ion Flash Papervision3D tutorial Draft Introduction Learning goals e Create a simple 3D scene with Papervison3D PV3D e The objective is to show the logic of such a library Once you are done with this you will have to spend of few weeks going through real tutorials and the documentation Flash and Papervision3D level e Flash 9 CS3 e Papervision 2 0 Prerequisites e Some ActionScript knowledge e Flash using ActionScript libraries tutorial Moving on e See the Flash tutorials Level and target population e Absolute beginners Quality e Not very good I need to go over this and add better easy examples Download and install Use the swe library Papervision3D is distributed in several formats The most practical method is to install a swe library Download Download from Code google papervision3D i take the latest or a featured swe version e E g on May 2010 we took Papervision3D_2 1 932 swc 2 Install e Read Flash using ActionScript libraries tutorial Basically CS must be able to find this library e Open File gt Publish Settings e Click on Flash tab e Click on Settings e Select libary path click on the and select the place where your swc library sits Flash Papervision3D tutorial 399 Alternatively you also could just put the swe file in the same directory as your flash file But then you will many multiple copies Using source code SVN repository For some reasons i e if y
352. ion new ColorChange OxFFOOOOFF OxOODDFFFF e the result 20 e The source code flint blue fire logo fla 21 Step 6 reuse these logos as movie clips In principle you should be able to import swf movies to the library and then use them like internal movie clips but I wasn t able to import these into the library for a reason I don t understand yet Flash doesn t give any feedback it just doesn t import Instead I ll show you how to have multiple Logos on fire within a same Flash file All you need is to create embedded movie clips for each Logo and then attach an AS3 script to each of these See the Flash embedded movie clip tutorial if don t know how to create embedded movie clips Some hints for the rest please dig into the fla file below e Registration point of the embedded movie clips should be in the upper left e x and y coordinates for the fire animation should be 0 see the AS3 code in the Fla file e Also in one AS code the Class representing the Bitmap was renamed to Logo2 This also requires a change in one of the scripts Results e the result 22 The source code flint fire ad fla 23 FINT particle system 397 Of course this needs some tuning e g it s too fast and the frame rate is too low and it s otherwise ugly Anyhow I wouldn t join a degree program that banks on the effect of a Flash Logo Playing around with the other FIiNT examples The Flint examples all come in two vers
353. ion the intensity or purity of the color Ranges from 0 100 0 means no color white 100 means intense color 3 Value or Brightness of the color Ranges from 0 100 0 is always black Depending on the saturation 100 may be white or a more or less saturated color The Hue scale from 0 to 360 degrees is the following 0 60 120 180 240 300 360 The hue scale Wikipedia USI In many graphics tools not in Flash you get a HSV color wheel that looks like this The hue scale Wikipedia 161 On the outside you can select a color H then on the inside you can select V and S D7 article For more information about HSV read Wikipedia s HSV color space In Flash with the slider to the right you can either e change color e adjust both Saturation e adjust Brightness Flash colors tutorial 180 Clicking into the color picker will change all three Below is a washed out blue with less saturation We selected the saturation button selected and move the slider to 40 9898FF The Flash Washed out Blue Tint and Shade 18 According to Wikipedia In color theory a tint is the mixture of a color with white and a shade is the mixture of a color with black Mixing with white increases value or lightness while mixing with black reduces chroma Mixing with any neutral color including black and white reduces chroma or colorfulness The intensity does not
354. ion Editor Right click to change to define the nature of the point corner or smooth point For smooth points you then can drag the Bezier controls Here is a screenshot of the Adobe CS4 manual that illustrates this principle Flash CS6 motion tweening tutorial 90 MOTION EDITOR Keyframe Graph gt Basic motion Transformation Controls Bezier the motion editor to the transformations Source Editing property curves with the Motion Editor Adobe accessed 09 30 2009 The graphics of CS6 is a bit different but the principle is the same Replace the path animation There are two possibilities 1 Using Flash Motion presets e Open the panel Window gt Motion Presets e Play with different versions e Click on Apply Flash will ask if you want to replace the ancient route 2 Copy paste a line e In another layer draw a path with a beginning and an end and no fills fills E g use the pencil tool e Copy and paste this path into the motion tween layer then kill your drawing or put in the library Tip If you want a perfect circle star etc To the drawing with the Oval tool polystar etc but without fill Then use the eraser to a very small incision to obtain a beginning and an end i e a path Drawing tool designed polystar Here is the result of cutting and pasting a polystar drawing into the motion tween layer Flash CS6 motion tweening tutorial 91
355. ion2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 timeline navigation2 png License unknown Contributors File Flash cs6 timeline navigation3 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 timeline navigation3 png License unknown Contributors File Flash cs6 timeline navigation4 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 timeline navigation4 png License unknown Contributors image flash cs6 simple slideshow timeline2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 simple slideshow timeline2 png License unknown Contributors image flash cs6 simple slideshow timeline png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 simple slideshow timeline png License unknown Contributors image flash cs6 button component parameters png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 button component parameters png License unknown Contributors image flash cs3 mask png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 mask png License unknown Contributors image flash cs3 mask movie clip png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 mask movie clip png License unknown Contributors image flash cs3 mask guided movie animation png Source http edutechwiki unige ch mediawiki index php
356. ions either Flash or PureAS3 Go for the Flash version unless you want to learn how to play with Flex in which case you will have to start reading the Adobe Flex and AS3 Compiling a program tutorials in this wiki The Flash version examples usually have just a single line in the script code that you insert in frame 1 include Framel as This instruction simply includes the contents of the file Framel as that you will find in the same directory In our examples above we just copy pasted the contents of these as files into the AS script The result is the same but the strategy of including an as file is smarter if you plan to reuse your code and if your prefer to use a different editor We included the code in the fla for the simple reason that this way you only need to grab a single file To play with the examples in the Flash CS3 environment the only thing you will have to do is to open the respective fla and then fix the classpath i e tell Flash where the Flint_xxxx sre directory is located E g if you need a firework open in CS3 the Flint_2_0_0_b_examples examples2D Firework Flash Firework fla Then fix the classpath as described in the Let s snow example Finally hit CTRL Enter or publish Notice The resulting swf always will include all the necessary ActionScript code i e you won t have to copy the Flint files to the server Links e FLINT particle system Ul 24 e Documentation e download direct
357. iple Frames Align BSS a oo Distribute stage Sa bb d Oo Match size Space OS Bs a gb tt a Library x Components Component Inspector flash cs3 frame by frame hella fla Empty library gt Workspacey 6 amp 10 z Name Type Use Ci Select all frames e Then you can select the frames you want to edit together by moving the sliders on top of the timeline e Then select letter by letter groups then use the align pane Window gt Align but untick To stage This tool is quite dangerous since it s hard to control what happens in each frame Make sure to save your file before you engage in this Anyhow next time make sure to place your objects where they should be Step 8 Now you can publish this as a web page e Make sure to save the animation in some place you can remember because Flash will put the exported Flash HTML and JavaScript there e Then click on an empty spot in the stage and click the Publish Settings button or menu File gt Publish Settings e Click the publish button when you are happy with the settings It will put all the necessary files in the same directory where your fla file sits e Then click on either the Flash swf file or the html file and see if it works As an exercise you now can add extra keyframes after frame 1 5 10 etc and move up or down letters Alternatively read on Frame by frame shaky animation Sometimes e g in trai
358. irst select the rectangle icon to the left then either change the values of left top right bottom or use the clipping rectangle Look at frames Move the yellow play head e Remove frames from the start and or the end Use the small white triangles Flash video component tutorial 132 v Summary Output 00 00 49 23 Adobe Media Encoder editing export settings Once you are done e Click on OK The click on the green arrow button to encode as above Links Finding videos on the Internet Finding and downloading videos e You may download videos from the Internet make sure that copyright allows you to do so Getting videos from sites like YouTube is not easy without download helpers see below Therefore try sites like http vimeo com first e Firefox video download helper extension https addons mozilla org en US firefox addon 3006 e Google video search http video google com Use advanced search 4 in order to restrict search to duration Video sites e http vimeo com Includes open source creative commons videos After a search you can tick a box for only showing downloadable videos e http vids myspace com Needs special tools to download e http youtube com Needs special tools to download Flash video component tutorial 133 Adobe documentation e Flash Professional Create video files for use in Flash 5 at Adobe retrieved Feb 18 2013 e The FLVPlayback component 6
359. is below The syntax for associating a handler function for a button instance is the following button_name addEventListener Event type function_name For example if the user clicks on the btn_rainbow with the mouse then the function clickHandler defined below will execute and so forth btn_rainbow addEventListener MouseEvent CLICK clickHandler btn_tecfa addEventListener MouseEvent CLICK clickHandler btn_bosses addEventListener MouseEvent CLICK clickHandler btn_my_computers addEventListener MouseEvent CLICK clickHandler btn_credits addEventListener MouseEvent CLICK clickHandler When a user clicks a button a so called MouseEvent is happening This event is then given to the function that we called clickHandler for further treatment Writing a clickHandler function Note you could have chosen an other name but as a general rule function names should be meaningful to you and to other people who read your program Let s now look at the complete function code function clickHandler event MouseEvent void switch event currentTarget label case Rainbow gotoAndStop 2 break case TECFA Flash component button tutorial 231 gotoAndStop 3 break case Bosses gotoAndStop 4 break case My computers gotoAndStop 5 break case Credits gotoAndStop 6 break When a user clicks a button a so called MouseEvent is happenin
360. is layer to script behaviors You can extend the scope of a script by hitting F5 in the timeline same principle as for backgrounds To attach some behavior to a mouse click use code like this button_instance_name addEventListener MouseEvent CLICK function_name function function_name event MouseEvent void gotoAndPlay 2 Replace button_instance_name and function_name by whatever naming is appropriate e button_instance_name refers to the name of the button instance in the properties panel e function_name can be anything you like but do not use spaces or special characters in function names except wow the underscore Here is a good example go_button addEventListener MouseEvent CLICK goFrameA function goFrameA event MouseEvent gotoAndPlay 2 Here is a bad example go button has a dash and go Frame is two words go button addEventListener MouseEvent CLICK goFrameA function go FrameA event MouseEvent gotoAndPlay 2 Some useful ActionScript instructions stop will stop the animation You can insert stops wherever you like in your timeline gotoAndStop 4 will jump to frame 4 and stop Use this for still pictures Flash button tutorial 211 gotoAndPlay my_frame will jump to frame called my_name and play that frame and the following ones Use this for animations that extend over several frames But then consider inserting a
361. is rather dark and it should stay dark at start e However the sky should become clearer during the animation e At the end of the animation the background should be lighter and the upper sky should become some sort of yellow Tip This is a shape tween morphing of a gradient color rectangle frame 1 to frame 100 2 Pumpkin to Girl animation shape tween e Transform the pumpkin into the Manga girl e The Manga girl should appear at the same position as the pumpkin roughly e Animation should start around frame 50 and end at frame 100 Tip Remember that you only can morph shapes paint and graphics but not symbols The manga girl and the pumpkin are symbols and this is a first problem 3 Penguin size motion animation The Penguin should be really small when it starts walking Tip This is a motion tween of a movie clip symbol frame 1 to frame 49 Shape of an instance the Penguin in a given frame can be changed in the properties panel 4 Penguin feet animation frame by frame animation e The Penguin should move its feet while it walks frame 1 to 49 This is not necessary for Penguin2 frame 50 100 Flash animation summary 124 Tip This is a frame by frame animation of an embedded movie clip double click on the Penguin in the library Four frames will do 5 Moon animation guided motion e The Moon must rise from the left then move to the top around frame 50 and finally set down to the right
362. ish the drawing later you only can adjust its shape e Make that you only have a single shape else CS4 will sort of freak out e g freeze a bit or create more than one armature layers I suggest the following procedure for drawing e Draw all the parts of the shape in object mode e Once you are happy you should save a copy of your artwork in case you want to come back to it later CTRL A and Right click Create Symbol Then break a part the symbol instance on the stage and make a union of all graphics CTRL A then menu Modify gt Combine Objects gt Union This is necessary because you do need a single shape or drawing object Step 2 Add the inverse kinematic structure bones e Select the bone tool from the tool panel e Click inside the shape where you the the armature to be attached to the scene The parent point will not move Then hold down the mouse at the same spot and drag out a bone e Click at the end point of this new bone and drag again e etc You now will see an armature layer and you can t edit your objects anymore since they all have been moved to the armature layer Step 3 Add another shape If you want to create an other IK structure shape or symbol based just create a new layer and start again Step 4 Create the animation and adjust various poses in keyframes e Rotate bones as explained abouve If you turn on the circle close to the joint you will just move the joint without turning the pare
363. ist in two forms 1 Drawing tools in the main tools panel that appears by default on top left of the desktop if you selected the designer configuration 2 Tools available through various panels Below is a screenshot I made from a simple drawing using the oval tool and the pencil tool e You can see that the properties panel left will display properties of the object that is selected or being drawn E g when you use the pencil it will display color of the stroke size of the stroke type of the line fill color etc The same is true for the color panel that we display in the lower right Flash drawing tutorial 20 Fl File Edit View Inset Modify Text Commands Control Debug Window Help Designer 0 a x lt ea er amas a ie ee j Library drawing_tutorial_workspac Align Bad Pr bb tro 5 Distribute style Solid FA e e Bp o gt dd Scale Normal LJ Hinting Cap v Joi Miter 3 00 O H 60 Os 100 OB 100 OR 255 The Flash CS6 drawing environment designer workspace Since these panels give you shortcut access to features of objects you are drawing it s a good idea to keep them open while you draw Some definitions Strokes vs fills e When you draw something with a pencil tool 7 or another drawing tool like
364. ithout making noise e You can emphasize important passages or paraphrase or comment voice tracks In order for captions to work you must do three things e Use askin for the playback component that includes a Caption button e g SkinUnderAllNoFullscreen swf e Make use of the FLVPlayback Captioning component in addition to the playback component Encode captions in an XML file there are at least two options This XML file then must be registered with the captioning component To import the video use the same procedure as in the Flash video component tutorial Drag the video component to the stage e Configure the file name and skin in the properties panel The caption component with timed text The Timed Text standard and XML If you are not familiar with XML you may have a glance at the XML article and maybe the DTD tutorial Then we also suggest to work with an XML editor in order to insure that your file is well formed We suggest the free Exchanger XML Lite OI yf you don t feel learning XML just make very sure that you exactly use a template as described below One missing tag or or some syntax mistake like a missing gt will make your animation fail Flash doesn t support the full Timed Text specification and the documentation at Adobe is rather shaky For those who are familiar with XML I wrote a little DTD that helps editing Just grab it from the Timed Text article and also copy paste the XML template Notes Time
365. k please read the Flash CS6 desktop tutorial Flash object transform tutorial 160 Library ojec De e a Empty ibrary e _ Name aj ne 30637 86 1 871 ED a gt Rotate Scale Cl Hinting SASI X 009 Y 00 Z 09 Joi Miter 3 00 Free Transform tool used here and Transform panel Simple transformations using the default settings By default the free transform tool let s you scale rotate skew To select an object for transforms Select the Free Transform tool Click on an object or the other way round The transformation controls You object will be in a rectangular box with a distortion control in each corner and one in the middle of each line To scale in both directions x and y Grab a corner and drag as in the screen dump below i i i i i i i ee a X and Y size transform e If you want to scale a graphic and keep the proportions hold down the SHIFT key To scale into one direction x or y Flash object transform tutorial 161 e Drag one of the points in the center of a line of the surrounding box To rotate an object e Move your mouse outside near a corner You will see a rotation icon e You then can turn around the object Rotate with the transform tool You also will see the changes in the transformation panel Btw you can move the rotation point see next section To skew an object
366. ke a component permanently available 1 Quit Flash 2 Copy the component to the components directory Under Windows XP C Program Files Adobe Flash CS3 Vlanguage Configuration Components e g C Program Files Adobe Adobe Flash CS3 en Configuration Components Flash components overview 221 Under Windows Vista C Programs Adobe Adobe Flash CS3 Vlanguage Configuration Components e g C Programs Adobe Adobe Flash CS3 en Configuration Components Under MacIntosh Macintosh HD Applications Adobe Flash CS3 Configuration Components Alternatively you also can install these in a user directory e Win XP C Documents and Settings username Local Settings Application Data Adobe Adobe Flash CS4 en Configuration Components e Windows Vista C Users username Local Settings Application Data Adobe Adobe Flash CS4 en Configuration Components e Mac OS X Macintosh HD Users lt username gt Library Application Support Adobe Flash CS4 Configuration Components If you can t see these folders In the Windows Explorer select Tools gt Folder Options View tab Then select the Show hidden files and folders radio button FLA components A FLA based component is a movie clip that is editable by a Flash developer When you drag a FLA based component from the Components panel to the Stage or to the Library behind the scenes it is just as though you opened a FLA file as an External Library and dragged in a symbol from that Library Creating A
367. kely got your classpath definition wrong See above If it isn t snowing all over your picture then you will have to adjust 2 lines in the AS3 code Figure it out yourself by looking at our inserted comments in the AS code above Also you should get the DeathZone right This is a hidden area underneath the picture where the falling down flakes are killed Result and source code The result e flint snowflakes html Get the flint snowflakes fla file from the following places But please recall that you will have to set the classpath aka source path for the FLiNT library It will not work as is e flint snowflakes fla 14 CS3 e flint snowflakes2 fla 5 CS4 There is no difference between CS3 and CS4 versions except that one can t open CS4 files in CS3 Want to understand a bit more Read the Introducing Flint with a snow effect 8 tutorial made by Richard Lord Our only contribution was to add some explanations on how to define a classpath i e the very basics about how to reuse such an example and which R L doesn t explain since he made this library for programmers and not designers in the first place Burning Logos Something else you can with this particle system is to create burning Logos e g something that symbolizes how hot the master program you should join 16 ig The example below is just a adaptation of the example distributed in the Downloads U You also can look at the maybe different online version of the
368. keyframes and can have a new target object applied to it o a e A span of frames with a green background indicates an inverse kinematics IK pose layer Pose layers contain IK armatures and poses Each pose appears in the Timeline as a black diamond Flash interpolates the positions of the armature in the frames in between poses e A black dot at the beginning keyframe with a black arrow and blue background indicates a classic tween SUK SSES SSSESSSSEES A e A dashed line indicates that the classic tween is broken or incomplete such as when the final keyframe is missing e A black dot at the beginning keyframe with a black arrow and a light green background indicates a shape tween e e A black dot indicates a single keyframe Light gray frames after a single keyframe contain the same content with no changes These frames have a vertical black line and a hollow rectangle at the last frame of the span e d e A small a indicates that the frame includes an associated script created with the Actions panel a o e A red flag indicates that the frame contains a label This allows for instance to write AS code like GotoAndPlay label P animation e A green double slash indicates that the frame contains a comment animation e A gold anchor indicates that the frame is a named anchor Flash animation overview 40 References 1 http en wikipedia org wiki Tweening 2 http www
369. ki unige ch mediawiki index php oldid 43277 Contributors Daniel K Schneider ActionScript 3 event handling tutorial Source http edutechwiki unige ch mediawiki index php oldid 24016 Contributors Daniel K Schneider WikiSysop Flash ActionScript 3 overview Source http edutechwiki unige ch mediawiki index php oldid 29752 Contributors Daniel K Schneider Widged WikiSysop Flash using ActionScript libraries tutorial Source http edutechwiki unige ch mediawiki index php oldid 43539 Contributors Claire Peltier Daniel K Schneider WikiSysop AS3 tweening platform Source http edutechwiki unige ch mediawiki index php oldid 36746 Contributors Claire Peltier Daniel K Schneider Joyservice Ortaer WikiSysop FIiNT particle system Source http edutechwiki unige ch mediawiki index php oldid 27635 Contributors Daniel K Schneider Flash Papervision3D tutorial Source http edutechwiki unige ch mediawiki index php oldid 28071 Contributors Daniel K Schneider WikiSysop Flash CS3 keyboard shortcuts Source http edutechwiki unige ch mediawiki index php oldid 39760 Contributors Anzorik BugCleaner Daniel K Schneider WikiSysop Flash formats and objects overview Source http edutechwiki unige ch mediawiki index php oldid 23614 Contributors Daniel K Schneider WikiSysop Flash being organized Source http edutechwiki unige ch mediawiki index php oldid 42141 Contributors Daniel K Schneider WikiSysop Flash 3D Source http edutechwiki unige c
370. l ASi Distrito aa i E28 Mh tdd x Useless dragg 7 j Match size Space 2 E Bs ub Library x Component Inspector Components fflash cs3 drag and drop intro fla EA a 2 items anag It S amp 1 120 oos ij Scene 1 Workspace 41 Name k blue_square Type Use CoL Movie Clip SA 7 flash cs3 drag and drop intro swf Fie View Control Debug Z E Properties oo Filters Behaviors Strings Parameters E Movie movieclip gt v Instance of red_circle Color No red bin ap Most simple drag and drop Step 1 Draw an object e Anything you like Step 2 Transform it into a Movie Clip Select the object or if you created several objects for a drawing select them all e Right click on the object and create a movie symbol e Give the instance a name in the properties panel Step 3 Adapt code below Dragging code is really simple and follows the same principles we encountered for example in the Flash button tutorial e Associate an event listener with an event handler function This time we listen to mouse down and mouse up events and for each we need to write a function that will do the dragging Register mouse event functions blue_btn addEventListener MouseEvent MOUSE_DOWN mouseDownHandler blue_btn addEventListener MouseEvent MOUSE_UP mouseUpHandler red_btn addEventLis
371. l Source http edutechwiki unige ch mediawiki index php oldid 41920 Contributors Daniel K Schneider Flash layers tutorial Source http edutechwiki unige ch mediawiki index php oldid 41826 Contributors Daniel K Schneider WikiSysop Flash animation overview Source http edutechwiki unige ch mediawiki index php oldid 41695 Contributors Daniel K Schneider WikiSysop Flash frame by frame animation tutorial Source http edutechwiki unige ch mediawiki index php oldid 49273 Contributors Daniel K Schneider Eirini Karani Flash classic motion tweening tutorial Source http edutechwiki unige ch mediawiki index php oldid 27451 Contributors Daniel K Schneider Flash CS6 motion tweening tutorial Source http edutechwiki unige ch mediawiki index php oldid 42146 Contributors Daniel K Schneider WikiSysop Flash shape tweening tutorial Source http edutechwiki unige ch mediawiki index php oldid 41886 Contributors Daniel K Schneider Flash embedded movie clip tutorial Source http edutechwiki unige ch mediawiki index php oldid 42155 Contributors Daniel K Schneider Flash animation summary Source http edutechwiki unige ch mediawiki index php oldid 42158 Contributors Daniel K Schneider WikiSysop Flash video component tutorial Source http edutechwiki unige ch mediawiki index php oldid 42279 Contributors Daniel K Schneider Timed Text Source http edutechwiki unige ch mediawiki index php oldid 43096 Contributors Daniel K Schneider WikiSy
372. l0 J new Array cheesel10 101 9 200 3 475 9 113 3 cheese_list cheesel1l new Array Cheesel1 191 9 201 3 401 6 86 3 cheese_list cheesel2 new Array Cheesel2 279 9 201 3 475 9 86 3 box_cheese is an invisible movie clip for the box and later cheese var box_chees MovieClip new MovieClip Add it to the stage AS3 tweening platform 384 addChild box_cheese Add the grey box as child of box_cheese box_cheese addChild cube Insert the cheese on the stage Attention You must export mc_cheese to Export for Action Script in the library Library objects cannot be used if they are not exported e get x y from the cheese_list e give each instance a nme e put it on the stage one also could imagine creating a container for this e make it more button like e add an event listener to each cheese e g fromage N for each var cheese_def in cheese_list var cheese mc_cheese new mc_cheese Var cheese cheese 0 cheese x cheese_def 1 cheese y cheese_def 2 cheese name cheese_def 0 Put the cheese on the stage stage addChild cheese Add the hand curser cheese buttonMode true trace fromage cheese name added cheese addEventListener MouseEvent CLICK moveCheese function moveCheese event MouseEvent Cheese the user clicked on we need its name to look up values wee xi 2 wil wee var cheese event curr
373. lPolicy are set to off Adobe documentation 11 e TextArea l ActionScript 3 0 Language and Components Reference TextInput The TextInput component is a single line text component that is a wrapper for the native ActionScript TextField object If you need a multiline text field use the TextArea component For example you could use a TextInput component as a password field in a form You could also set up a listener that checks whether the field has enough characters when a user tabs out of the field That listener could display an error message indicating that the proper number of characters must be entered Adobe documentation 13 TextField 4 ActionScript 3 0 Language and Components Reference Flash components overview 217 Numeric Stepper The NumericStepper component allows a user to step through an ordered set of numbers The component consists of a number in a text box displayed beside small up and down arrow buttons When a user presses the buttons the number is raised or lowered incrementally according to the unit specified in the stepSize parameter until the user releases the buttons or until the maximum or minimum value is reached The text in the NumericStepper component s text box is also editable Adobe documentation 15 e Using the NumericStepper 15 Using ActionScript 3 0 Components e NumericStepper class 16 ActionScript 3 0 Language and Components Reference Slider The Sli
374. lash datagrid component tutorial Flash drag and drop tutorial ActionScript 3 interactive objects tutorial ActionScript 3 event handling tutorial Working with ActionScript libraries Flash ActionScript 3 overview Flash using ActionScript libraries tutorial AS3 tweening platform FINT particle system Flash Papervision3D tutorial Other Flash articles of interest Flash CS3 keyboard shortcuts Flash formats and objects overview Flash being organized Flash 3D References Article Sources and Contributors Image Sources Licenses and Contributors Article Licenses License 223 237 245 245 249 263 268 268 276 294 300 303 316 328 354 362 362 368 373 389 398 409 409 413 416 418 422 423 428 Flash and the CS6 authoring tool Flash Draft This page needs to be updated for Flash CS6 but principles remain the same Definition Adobe Flash previously called Macromedia Flash is a multimedia platform originally acquired by Macromedia and currently developed and distributed by Adobe Systems Since its introduction in 1996 Flash has become a popular method for adding animation and interactivity to web pages Flash is commonly used to create animation advertisements and various web page components to integrate video into web pages and more recently to develop rich Internet applications Flash can manipulate vector and raster graphics and supports bidirectional streaming of
375. ld not for example add navigation buttons that concern the whole scene Make sure that you are aware at which level you edit and where to place objects Using a swf file as movie clip Your whole fla also is a movie clip that you could in principle import to other Flash animations As a result you will get frame by frame animations This solution is not really recommended since you can t easily edit this type of animation and if you make changed in the original you will have to reimport This is a copy paste of the Reuse frame by frame animations as movies section in the frame by frame animation tutorial Firstly have a look at the result Oy i e a flashing hello and little rocket with a pulsating engine Both were made originally in separate fla files and then compiled saved to e flash cs3 shaking hello swf PI e flash cs3 rocket swf The fla swf and html files flash cs3 rocket hello as well as the imported movie clips can be found here http tecfa unige ch guides flash ex frame by frame intro Step 1 Import swf files into the library of a new Flash file e Create a new flash file File gt New Then import flash movies you made File gt Import gt Import to library In our example get Flash embedded movie clip tutorial e flash cs3 rocket swf file e flash cs3 shaking hello swf file You now have a nice rocket and a flashing hello in your library Library x Components Component
376. ld see something like this Color Swatches Align x Info Transform F oe flash cs3 simple slide show fla flash cs3 rocket launcher fla flash cs3 rocket 4 gt 2X i Align A510 15 20 8 0 BSS a y u rocket Distribute stage u yellow flame Ss bb oo ad ol eee r Match size Space I red flame I IT gs S gk Library x Library Buttons fla_ Components Component Inspector flash cs3 rocket symbol fla fla v 4 One item in library KO Type Use Count Linkage NWONOS RN EO eldri Rocket animation made into a symbol Next you can copy this symbol to another flash file which you may call my_library fla We just killed everything in the file except the symbol and saved it under a different name flash cs3 rocket symbol fla Result Now we have two versions of rocket swf move clipt that we can reuse in another Flash animations e flash cs3 rocket swf e flash cs3 rocket uncompressed swf 15 This version also has the improved flames In addition we have file fla file with just a rocket symbol inside You can copy paste symbols from one flash file to another one e flash cs3 rocket symbol fla 16 Below is a short how to re use swf files but you also can directly go and read the Flash motion tweening tutorial Flash frame by frame animation tutorial 60 Reuse frame by frame animations as movie clips Reuse of swf files The swf flash f
377. le Cs3_tool_pencil_straight png License unknown Contributors image flash cs3 drawing tools pencil png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 drawing tools pencil png License unknown Contributors File Flash cs6 paint bucket annotated png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 paint bucket annotated png License unknown Contributors image Black_and_white_tool png Source http edutechwiki unige ch mediawiki index php title File Black_and_white_tool png License unknown Contributors image apple tree png Source http edutechwiki unige ch mediawiki index php title File Apple tree png License unknown Contributors image cat png Source http edutechwiki unige ch mediawiki index php title File Cat png License unknown Contributors image flash cs3 convert to graphic symbol png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 convert to graphic symbol png License unknown Contributors image cat free clip art com png Source http edutechwiki unige ch mediawiki index php title File Cat free clip art com png License unknown Contributors image flash cs3 drawing outline mode png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 drawing outline mode png License unknown Contributors image flash trees and cats drawing png Source http edutechwiki unige ch mediawiki index php title File Flash trees and cats draw
378. le Publish Settings and click the Flash tab 2 Make sure ActionScript 3 0 is specified in the Script menu and click Settings 3 In the Advanced ActionScript 3 0 dialog box click the External Library path tab 4 Add the library path to the External Library path list You can add folders or individual SWC files to the path list To set the Application level External Library path 1 Choose Edit gt Preferences Windows or Flash gt Preferences Macintosh and click the ActionScript category 2 Click the ActionScript 3 0 Settings button and add the path s to the External Library path list A note on classes and packages All ActionScript code that you will import is defined with classes see the Actionscript 3 tutorials if you really want to learn how programming works Theses classes can then be bundled together in so called packages which allows to organize code into discrete groups that can be imported by other scripts In other words if you want to use a class that is inside a package you must import either the package or the specific class In general import statements should be as specific as possible If you plan to use only the SampleCode class from the samplespackage you should import only the SampleCode class rather than the entire package to which it belongs Importing entire packages may lead to unexpected name conflicts You must also place the source code that defines the package or class within your classpath The classp
379. led embedded movie clips Each of these has their own timeline In other words you can include animated objects within animations Oy The Timeline controls the timing According to Adobe s Creating your first Flash Professional CS6 document that specifies when elements in the movie appear on the Stage The playhead begins at Frame and moves from left to right as the movie proceeds through the frames Drag the layers in the Timeline to arrange the layering order of graphics on the Stage Graphics in the higher layers appear to be placed on top of the graphics in the lower layers The following example is a very simple animation that lasts for 15 frames Since we set the frame rate to 12 frames second it will last about 1 25 seconds Files e flash cs6 simple fbf html 2 e flash cs6 simple fbf fla 3 source code Below a screenshot of this example Tools MPAT L LD2 IGA Paraki 2 gt m s i4 lt i D gt I gt gt i y 5 0 15 Bie YY ie ietalcl ell ft Pi es Scene 1 Fu Document flash cs6 simple ff fla 7 PUBLISH Profile Default Basic frame by frame animation Executive summary of the procedure e Insert drawings in various keyframes as seen in the picture above Any graphic will do You also could use as many layers as you like Technically speaking frame by frame animation is simple e Over time from frame to frame these drawin
380. lers or in little advertisement boxes you can see some sort of shaky or jittery icons like in the 11 example we are going to discuss now The fla swf and html files flash cs3 shaking hello can be found here http tecfa unige ch guides flash ex frame by frame intro Step 1 change stage size e Define size and background color of your stage I use 400x200 px this time To do so click with the selection tool on an empty spot of the stage and change the properties of the stage in the properties panel usually shown below the stage e This time we will use two layers so create 2 layers call one of these hello Step 2 draw a hello word e In the hello layer draw the word Hello with the pencil for a change e Select the pencil e Put the Pencil tool into Smooth mode e Put Flash into object mode circle in the options area of the tools panel Flash frame by frame animation tutorial 54 e Select a wide stroke 15px or more Go back to the drawing tutorial if you don t how to use object mode and how to set the smooth control for the pencil Step 3 fix the hello word You may have to fix the Word Hello since despite smooth mode your drawing may not be so hot Firstly use the Free Transform tool to adjust size rotation etc of each letter Then use the Subselection tool to fix certain letters probably your o will be ugly e To do good work you need to set magnification to something like 400 M
381. lications with Flash HTML JavaScript etc Toufee 23 an online tool to make Flash presentations movies Free in a basic version Drag and drop pictures or special elements to a stage add special effects buttons etc Also saves in other formats OpenOffice Impress the power point clone can produce swf Some capturing tools see screen capture photo gallery makers and video editing software can export to Flash Server technology Silex 741 is free open source CMS with a Flash Interface and AS API Source Forge project of the month June 2009 red 5 lis an open source Flash Server I supports Streaming Audio Video FLV and MP3 Recording Client Streams FLV only Shared Objects Live Stream Publishing and Remoting AMF nov 2008 Adobe has a global Flash framework 26 that includes e g a Flash Media Server Family Generating Flash Ming 27 Ming is a C library for generating SWF Flash format movies plus a set of wrappers for using the library from C and popular scripting languages like PHP Perl Python and Ruby SWFMill 28 xml2swf and swf2xml processor that can be used to create non interactive multiframe SWF animations HaXe 79 Programming language very similar to actionscript that can compile a SWF file for Flash Players 6 to 9 Free to use In addition you also should know that you can import several vector graphics formats e g Windows Metafile formats into Flash CS3 speeds up drawing P
382. lified the way functions are written i e I ripped off argument type declarations and the return type This is not necessarily a good thing but it should demonstrate to designers that a little bit of ActionScript is not necessarily very complex The example can be viewed here e actionscript3 simple object manipulation buttons html 6 ActionScript 3 interactive objects tutorial 343 e Source actionscript3 simple object manipulation buttons fla U7 e Directory http tecfa unige ch guides flash ex6 action script 3 intro Here is the complete code On the stage are several buttons named like bigger smaller etc a cat movie clip instance called cat and a dog called brown_dog pe mMowaag gt move addEventListener MouseEvent CLICK moveCat cat can be in original position or not true false var cat_ori_pos true function moveCat ev if cat_ori_pos true Cae x 200 cat y 200 cat_ori_pos false else cat xs 200 carr 7 e00 cat_ori_pos true Pe e Ae a YP z5 bigger addEventListener MouseEvent MOUSE_DOWN growCat function growCat ev Gai Wwalelitia Celt iwiiclela 25 Care height Gai lasie ine ZF T smaller addEventListener MouseEvent MOUSE_DOWN shrinkCat function shrinkCat ev cat widen cac wich Zp cat height Cart height 2 fi gregin f cat buttonMode true cat addE
383. lip art is in the SVG format and that cannot be directly imported to Flash Shame on adobe To import e File gt Import gt Import to Stage or alternatively Import to Library e If you import it to the stage and like it then save it to the library with Right click gt Convert to Symbol Graphic as explained above A cat from www free clip art com Copyright Personal and educational use E g here is a cat I imported from Free Clip Art 1 This site has free clipart images for personal use You can use them for school fun non profit Web sites and other personal needs Using SVG Clipart e Get one from http www openclipart org e Display the SVG image in your browser then just File gt Save As the SVG page e Open the SVG in Adobe Illustrator e Select All e Copy e Paste to Flash using default settings e Use directly ALT CTL S to resize Read more in Clipart Flash drawing tutorial 31 Adding background and Sky I suggest to draw background stuff with a new layer You can do this beforehand or after In order to see either background or objects you can put all other layers in outline mode Click on rectangles near each layer or on the rectangle on top jects layer is itline empty rectangle 1 ope ow aji Making use of the Layer Outline Mode e First of all you can change the background of the stage Modify gt Document then change the background color e Ifthe layer with your backgroun
384. lip that includes the shape tween Flash shape tweening tutorial 101 Double click on the Dragon clip symbol the scene to edit this embedded movie clip The Dragon was found on openclipart org B 4 and made by Ivo Grimaldi Created a new empty keyframe in frame 72 Open the Dragon SVG in Illustrator Select All Copy and Paste to Flash CS6 Break apart several times until only the shape remains Remove the eyes Create the shape tween as above rk MWe ea T O2 LP L O F AIA A O CE MS 7 g Match size E i O Align to stage Editing the Dragon Movie Clip symbol Step 3 Adjustments Go back to the scene click on Scene 1 Drag more dragon clips to the Scene Adjust their size press ALT CTRL S and position Add an ActionScript 3 command to stop the animation Select frame 72 hit F9 then type stop hit F9 again Use another layer if you prefer clean code Files flash cs6 shape tween dragon egg html 5 flash cs6 shape tweening intro fla PI Directory http tecfa unige ch guides flash ex6 shape tweening intro Flash shape tweening tutorial 102 Shape hints where should shapes go In order to create some slightly better shape animations you can give Flash hints where a shape should go Shape hints identify points that should correspond in starting and ending shape For example if you are tweening a drawing of a face as it
385. lity may slow down certain computers Blur X and Blur Y define the size of the affected area Strength the force of the filter more or less Shadow and Highlight the dark light colors of the filter effect Angle and Distance direction of the filter effect Knockout and Type whether it applies to the inside and whether the orginal drawing is knocked away This is a nice feature that beginners often overlook So if you need cool looking 3D effects on graphics explore these filters You also can apply several filters to the same object In the screen capture below we show an attempt to create a floating 3D button from a simple red circle Flash colors tutorial 185 Tropa Instance of Red Circle Swan Instance Name Movie Clip Ly D 30 POSITION AND VIEW D COLOR EFFECT D DIspLay 7 FILTERS Property Value Y Drop Shadow Blur X Blur y 28 px Strength 100 Quality Low EA Angle Distance Knockout Inner shadow Hide object Color Flash CS6 filters you can apply to movie clip and button instances Tip Since filters are applied to instances of movie clips you may use them in motion tweens Examples e Create a sun with increased glow big in start and end frame small on top e Create a flying plane with a drop shadow that is far down Links General color e See the color article It includes links to good Wikipedia articl
386. ll 1 2007 Fall 2008 Spring 2010 Sprint 2013 Webster University STIC III Fall 2007 fall 2008 Geneva university and STIC IV spring 2010 in french Geneva university courses Some tutorials better than others and none is top quality so far but most can serve as lecture notes and for some self study Most tutorials have been upgraded to CS6 in winter 2013 CS4 and CS5 users can read CS6 tutorials but should take files from tutorials developed for CS3 and CS4 The interface changes between CS3 and CS4 CS5 CS6 are substantial but not major The differences between CS4 CS5 and CS6 are rather minor We produced three families of tutorials with some overlaps e Flash tutorials Flash CS6 plus ActionScript 3 for non programmers and links to deprecated CS3 4 5 versions e Actionscript 3 Beginner s tutorials for pure AS3 i e tool independent coding these should be further expanded but are not so far e Flex tutorials very few Flash All materials fla swf etc are available at http tecfa unige ch guides flash under a CC BY NC SA licence Flash CS3 keyboard shortcuts Flash ActionScript 3 overview a conceptual little overview of AS3 Flash formats and objects overview not ActionScript objects Flash being organized some advice for beginning Flash CS3 designers Actionscript 3 a complete programming language An entry page for AS3 tutorials Flash 3D overview page of of Flash 3D tools and
387. llScreenButton MuteButton Instance of FLVPlayback 2 5 OD PauseButton PlayButton v POSITION AND SIZE PlayPauseButton X 33 40 Y 40 35 Swe P W 480 00 H 270 00 Keep defaults Align x7 COMPONENT PARAMETERS C Property Value i al ria align center Ly Distribute autoPlay M zg et a om Match size Space dvrFixedDuration 2 Hl ia x dyrincrement 1800 E Bs si dvrincrementVariance Ea M Align to stage dvrSnapToLive M isDVR LJ isLive I preview None Color e scaleMode maintainAspe _ skin SkinUnderAll s 2 z L2 Solid color skinAutoHide o EJ skinBackgroundAlpha 0 85 HA skinBackgroundColor o source BFB BBC mp4 2 volume 1 vy CUE POINTS O mA Name Time Type RapMan video from BBC Step 3 Publishing a flash file that uses video If you plan to publish the flash file on a web site or if you mail your application do not forget to include all the files for example e flash cs6 mp4 video html the HTML file optional e flash cs6 mp4 video swf the Flash file e BFB BBC mp4 the video e SkinUnderAIINoFullscreen swf the skin library Example files e flash cs6 video component html 1 e flash cs6 video component fla 2 Flash source BFB BBC mp4 P original video The video shows the first 3D printer I owned a RapMan bought someti
388. ller as you could see in the screenshot above We shall focus on Flash 9 and Action Script 3 here However the principle of using AS2 parameters is the same In this article we are going to look at User Interface components only see the Flash video component tutorial for the Video elements To open the component library e Window gt Components or CTRL F7 I suggest to dock it against your library Warning AS2 components are different from AS3 components e It really is important to plan ahead i e you must decide whether you work with AS2 or AS3 before you start using any component e As long as you don t use components as long as you don t insert any ActionScript code you can easily switch between various Flash and ActionScript versions Once you start using AS or AS based components you can t AS 3 built in component overview Iam slowly making a demo 1 not yet fully completed but somewhat instructive e Get the source from http tecfa unige ch guides flash ex components intro flash cs3 components overview fla Use of components with the Flash Desktop e Using the UI Components 3 Using components e Open the component library Window gt Components or CTRL F7 e Drag a component to the stage This will also add this component to the library e Once a component is in your library just drag it from there Flash components overview 214 Component assets e Adding a component to the stage or to the library al
389. lying kite Mio get an idea See also the picture above in the previous section application Step 1 Create the movie clip e Create a movie clip object as explained above e Menu Insert gt New Symbol e Select Movie Clip and call it kite_movie Step 2 Drag it to the scene and name it e From the library drag it to the scene e In the properties panel select parameters and call it kite Flash using embedded movie clips tutorial 270 You should see something like in the following screen capture Fl File Edit View Insert Modify Text Commands Control Debug Window Help N t HWP oT LIP CAF AY 20209 m a 7 g k Instance of Kite_movie Movie Clip x EA lt gt 100 0 100 0 Rotate a nna A scene with a movie clip instance Step 3 Create a motion tween for the movie clip Double click on the instance Then proceed as explained in the Flash motion tweening tutorial ILe drag a graphic onto the stage here we use the Kite graphic Create a motion tween here we use 60 frames Adjust the flight motion path Click in the tween span and tick Orient to path in the properties panel Flash using embedded movie clips tutorial 271 Tools Library RiMwew T as EE AE A AER AA EREE Kemoviefla LP P AF AQAA JEOoLj2 gt Mag E picture_04 lakejpg Properties E Motion Tween JOJ a y EASE gt
390. may extend over several hundred frames Most often you d rather use the FLV playback component to play such videos See the Flash video component tutorial Flash formats and objects overview 416 References 1 http en wikipedia org wiki Macromedia_Flash 2 http en wikipedia org wiki GNU_Free_Documentation_License 3 http en wikipedia org wiki S WF 4 http en wikipedia org wiki ActionScript 5 http en wikipedia org wiki FLV 6 http en wikipedia org wiki ffmpeg 7 http en wikipedia org wiki Sorenson_Squeeze 8 http en wikipedia org wiki On2_Flix 9 http en wikipedia org wiki H 263 10 http en wikipedia org wiki MP3 11 http en wikipedia org wiki FutureSplash 12 http en wikipedia org wiki AVI 13 http en wikipedia org wiki GIF 14 http en wikipedia org wiki PNG Flash being organized Draft This is a reminder of a few simple how to work with the Flash environment tips The workspace e Learn how to dock panels and how to save the workspace menu Windows e Learn about F4 hiding showing panels e Learn how to pin down the AS panel use pin at the bottom of the panel Drawings Unless you are gifted keep your drawings simple e Draw in object mode as opposed to merge mode e Use external clipart Always make sure e to lock layers you don t work with e to know at which level you edit scene level or symbol edit mode Layers Use a sepa
391. mbol Then add if you want a motion guide layer to each of these layers otherwise you met get really unexpected results E g if you see a tween in your library something went wrong Results e You can admire the result 13 e Get files flash cs3 shape tweening in motion from Source flash cs3 shape tweening in motion fla 14 Directory http tecfa unige ch guides flash ex shape tweening intro A simple doubly embedded motion animation with 2 shape changing objects Of course a planet should turn around the star Therefore we should embed the planet motion animation with the star motion animation e g something like this motion in motion animation 15 Source e Get files flash cs3 shape tweening in motion2 from Source flash cs3 shape tweening in motion2 fla 16 Directory http tecfa unige ch guides flash ex shape tweening intro Links Example materials Example files used including fla source can be found here http tecfa unige ch guides flash ex6 shape tweening intro CS6 examples http tecfa unige ch guides flash ex shape tweening intro CS3 examples e Click on either an html or swf file to see e Get the fla file if you want to make modifications The standard copyright of this wiki applies unless spelled otherwise Adobe documentation e Control shape changes with shape hints 6 Adobe Flash C3 Help There is a nice example morphing 1 into ae cal References 1 http tecf
392. me F6 Add new Keyframe F7 Add blank Keyframe CTRL ENTER Test a Movie F9 Action Panel F4 Show Hide All Panels F10 Keystroke Menu command mode Modifying and editing CTRL G Group CTRL SHIFT G Ungroup CTRL B Break Apart CTRL 4A Select All CTRL SHIFT A Deselect All CTRL C Copy CTRL V Paste CTRL SHIFT V Paste in Place CTRL D Duplicate CTRL SHIFT 0 Optimize Curves CTRL T Modify Font CTRL SHIFT T Modify Paragraph CTRL left Arrow Narrower Letter Spacing kerning CTRL right Arrow wider Letter Spacing kerning CTRL SHIFT 9 Rotate 90 Clockwise CTRL SHIFT 7 Rotate 90 Counter clockwise CTRL SHIFT Z Remove Transform CTRL ALT S Scale and Rotate CTRL SHIFT Z Remove Transform Flash CS3 keyboard shortcuts 410 Tools Panel While drawing on the stage you quickly can change tools that way V Selection Tool A Sub Selection Tool Q Free Transform tool F Gradient Transform Tool L Lasso Tool P Pen Tool N Line Tool T Text Tool R Rectangle Tool O Oval Tool Y Pencil Tool B Paint Brush S Ink Bottle K Paint Bucket I EyeDropper D Dropper E Eraser H Hand Tool M Z Magnifier Zoom Arranging CTRL Up Arrow Move Ahead CTRL Down Arrow Move Behind CTRL SHIFT Up Arrow Bring to Front CTRL SHIFT Down Arrow Send to Back CTRL ALT 1 Left Align CTRL ALT 2
393. mes If you are lost go back to the Flash motion tweening tutorial Motion tweening of an animated object You can create animations within animations e Hit CTRL F8 to create a new symbol or convert an existing graphic to a movie clip symbol with F8 e Make sure to select Movie Clip e Give this movie clip an appropriate name Then you can drag the symbol from the library to the stage or directly edit it in the library Double click on the movie clip symbol or the instance to edit and create any animation you like Make sure that know whether you are editing a symbol or your main timeline You also can copy paste a series of frames e g a frame by frame animation or a motion tween to this new embedded movie symbol from another fla file This is a bit tricky e Select all the frames within all layers you want SHIFT click then right click gt Copy Frames somewhere in the timeline not over the layers e Go to frame one of layer 1 of your new movie symbol and right click gt Paste Frames So it is copy paste frames not normal copy paste You also can copy paste full layers e SHIFT Click on each layer name you want to copy Flash animation summary 121 e Still with the mouse over the selected layers right click and copy layers e Within a new symbol double click on an existing one right click on a layer name and paste layers Important Make sure where you are when you edit check whether are you editing a sc
394. mes in 2009 Flash video component tutorial 129 Using File import As an alternative you could use the File import menu However you might make wrong choice and therefore we do not recommend this procedure This procedure will use the standard FLVPlayback component not the more versatile version 2 5 1 Import the video file e Menu File gt Import gt Import video Import Video X Select Video Where is your video file On your computer ony Browse for video file File path Browse C dks flash ex6 component video intro BFB BBC mp4 Load external video with playback component Selectthis Embed FLV in SWF and play in timeline port as mobile device video bundle NF Already deployed to a web server Flash Video Streaming Service or Flash Media Server URL Examples http mydomain com directory video flv rtmp mydomain com directory video xm Launch Adobe Media Encoder lt Back Importing a video file 2 Select the skin Flash video component tutorial 130 Skinning Minimum width 330 No minimum height URL Select the skin 3 Click next and adjust the parameters Using the Adobe Media Encoder CS6 Skin SkinUnderAll sw v Color i The video s skin determines the appearance and position of the play controls The easiest way to get video for Adobe Flash Professional up and running is to select one of the prov
395. method Parameters e function Any All delayed calls to this function will be killed TweenLite examples As you can see in the code below in order to use this class you will have to do the following e If you work with CS3 you need an instance of MovieClip that is named e g movie_clip e Then in some keyframe hit F9 and you can write AS code The code must include at least import com greensock TweenLite e When Flash requires that you import official flash classes you will have to import these too E g import fl motion easing Back As a simple example you could tween the alpha to 50 0 5 and move the x position of a MovieClip named movie_clip to 120 and fade the volume to 0 over the course of 1 5 seconds like so import com greensock TweenLite TweenLite to movie_clip 1 5 alpha 0 5 x 120 volume 0 The following example shows how to tween the movie_clip MovieClip over 3 seconds changing the alpha to 50 0 5 the x coordinate to 460 using the Back easeOut easing function and adding a starting delay of 1 seconds In addition we call a function named onFinishTween when it has completed and pass it a few parameters a value of 5 and areference to the movie_clip AS3 code import com greensock TweenLite import fl motion easing Back TweenLite to movie_clip 3 alpha 0 5 x 460 ease Back easeOut delay 1 onComplete onFinishTween onCompleteParams 5 movie_clip function onFinishTw
396. n either on the clip in the library or else on the instance on the scene e Add the frame by frame animation If you don t know how read the flash frame by frame animation tutorial Fl File Edit View Insert Modify Text Commands Control Debug Window Help MreQeea TtTv os SP POF ADQA Layer i 20m0 M S W 90 05 x7 FILL AND STROKE d Creating a frame by frame animation for the Sun Adding a motion tween for the rocket Get the rocket clip Open file flash cs6 rocket symbol fla 7 Copy the rocket clip Select in the library and CTRL C Paste into the library of the sun animation Create a motion tween for the rocket Now do the animation as before Create a new layer called Rocket motion or similar Select this frame Drag the rocket on the scene Hit CTRL ALT S and make it about 20 Move the rocket either to the left easier or to the right Create the motion tween Create the motion tween click right on rocket Go to the last frame and drag the rocket over there You know should see a linear flight path Adjust the flight path using the selection or the subselection tools see explanations above For creating a new the path you also could use the following easier procedure Flash CS6 motion tweening tutorial 94 e Create a new layer called temp e Lock all layers except temp e Draw the flight path with the pencil tool e Copy the path e
397. n Contributors image flash cs3 color alpha channel jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs3 color alpha channel jpg License unknown Contributors image flash cs6 bitmap colors png Source http edutechwiki unige ch mediawiki index image flash cs6 filters annotated png Source http edutechwiki unige ch mediawiki ind image vienna lion jpg Source http edutechwiki unige ch mediawiki index php title image vienna lion lions capture jpg Source http edutechwiki unige ch mediawiki index p ex php title File Flash cs6 filters annotated png License unknown Contributors p title File Flash cs6 bitmap colors png License unknown Contributors File Vienna lion jpg License unknown Contributors hp title File Vienna lion lions capture jpg License unknown Contributors image flash cs3 bitmap trace jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs3 bitmap trace jpg License unknown Contributors image illustrator cs3 live trace jpg Source http edutechwiki unige ch mediawiki index php title File Illustrator cs3 live trace jpg License unknown Contributors image illustrator cs3 live trace2 jpg Source http edutechwiki unige ch mediawiki index php title File Illustrator cs3 live trace2 jpg License unknown Contributors image flash cs6 library buttons png Source http edutechwiki unige ch mediawiki index hp title File Flash cs6 libra
398. n Contributors image flash cs3 motion guide tweening2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 motion guide tweening2 png License unknown Contributors image flash cs4 motion tween classic jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs4 motion tween classic jpg License unknown Contributors image flash cs4 motion tween classic guide jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs4 motion tween classic guide jpg License unknown Contributors File flash cs4 motion tween sun png Source http edutechwiki unige ch mediawiki index php title File Flash cs4 motion tween sun png License unknown Contributors File flash cs4 motion tween sun2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs4 motion tween sun2 png License unknown Contributors File flash cs4 motion tween sun3 png Source http edutechwiki unige ch mediawiki index php title File Flash cs4 motion tween sun3 png License unknown Contributors File flash cs4 motion tween sun4 png Source http edutechwiki unige ch mediawiki index php title File Flash cs4 motion tween sun4 png License unknown Contributors File motion editor png Source http edutechwiki unige ch mediawiki index php title File Motion editor png License unknown Contributors File an_tween_editor_overview_popup png Source http edutechwiki unige ch mediawiki index php title Fil
399. n Number variables Object Description Exactly the same as TweenLite to but instead of tweening the properties from where they re at currently to whatever you define this tweens them the opposite way from where you define TO where ever they are now when the method is called This is handy for when things are set up on the stage where the should end up and you just want to animate them into place Parameters Same as TweenLite to see above TweenLite delayedCall TweenLite delayedCall delay Number onComplete Function onCompleteParams Array Description Provides an easy way to call any function after a specified number of seconds Any number of parameters can be passed to that function when it s called too Parameters 1 delay Number of seconds before the function should be called 2 onComplete The function to call 3 onCompleteParams optional An array of parameters to pass the onComplete function when it s called AS3 tweening platform 379 TweenLite killT weensOf TweenLite killTweensOf target Object Description Provides an easy way to kill all tweens of a particular Object MovieClip Parameters e target Any All tweens of this Object MovieClip will be killed TweenLite killDelayedCallsTo TweenLite killDelayedCallsTo function Function Description Provides an easy way to kill all delayed calls to a particular function ones that were instantiated using the TweenLite delayedCall
400. n a frame of your animation Over The button graphics as it appears when the user moves the mouse over it E g it defines highlighting Down The button as it appears when the user presses the mouse just during the time the mouse button is held It shows the pressing down effect Hit This frame allows to define the sensible area usually the complete button with a graphic Its contents will not be shown Various kinds of buttons have various layers usually between three and five depending on the complexity of the drawings These layers contains just drawing for these four button frames The Flash engine will then select the appropriate frame for display according to user action mouse over mouse down etc Beginners just should use built in buttons There is no need to change anything in the keyframes or the layers except the label However you later can change any drawings in any way you like A button can be made of any sort of graphics you like even pictures as you shall learn below and you even may add animation with embedded movie clips Using the built in buttons You can attach behaviors in various ways to buttons but there is no difference between built in buttons and the ones you can create yourself The most obvious one is to jump to a different frame in the main timeline after the user clicks on a button In the next section we will use a button to launch a rocket A button in frame 1 to start animation in frame 2
401. n anchor point it turns round which is annoying e You can drag these anywhere to change the shape of the object e You also can drag them along the stroke before you drag them out e You can delete these Move the cursor over one of these and when the cursor changes shape click first then hit delete This will simplify a stroke As we explained in the section on paths the little dots are curve control handles with which you can adjust the curves in two ways e You can turn them to change the curve smooth or sharpen e You also can drag these around to change the direction angle and size of a curve To get curve control handles click on a distortion point If the anchor point is a corner point try dragging it out holding down the ALT key Flash object transform tutorial 167 Dragging out a shape with a curve control If you can t see well what your are doing I can t in 100 mode zoom in like 200 or 400 However the little squares and dots will remain small The Eraser tool The eraser tool allows you to carve objects In the options controls in the tool panel you can change the way the eraser works Erasing shapes drawn in merge mode and graphics objects drawn in object mode doesn t lead exactly to the same results When you carve an object it remains an object When you carve a single shape it will divide into other shapes We shall not explain much here better try it out Draw three ni
402. n dragging and dropping see the Flash drag and drop tutorial that demonstrates how to implement a simple children s educational game You will learn for instance how to test if a dropped object will sit on top of another one Transformations So called transforms of a non editable display object are more tricky We just will demonstrate how to change the tint with a color transform You also could skew an object with a similar strategy However this kind of code is really a bit too difficult to understand without some prior introduction to object oriented programming Color The ColorTransform class lets you adjust the color values in a display object The color adjustment or color transformation can be applied to all four channels red green blue and alpha transparency Here are the formula according to the manual 31 retrieved 20 58 8 October 2007 MEST e New red value old red value redMultiplier redOffset e New green value old green value greenMultiplier greenOffset e New blue value old blue value blueMultiplier blueOffset e New alpha value old alpha value alphaMultiplier alphaOffset The tricky thing is that you have to program transformations with a temporary ColorTransform object and then copy this object to the display object s colorTransform property if I understood the manual right See the code toward the end of the full example code below ActionScript 3 interactive objects tutorial 334
403. n s Adding a short action script stop instruction to the action layer If you want you can Look at the flying rocket plus the flashing hello e Or get the file flash cs3 motion guide tweening2 fla 12 file from http tecfa unige ch guides flash ex motion tweening intro and play with it Differences in CS4 In CS4 there is a new way of creating motion animations which is easier We will document this some other day In the meantime you should know that you still can do classic motion tweening in CS4 It works exactly in the same way The only slight differences ca be found in the user interface for creating tweens and motion guides To add a tween between two frames in a layer select Create Classic Tween e To add a motion guide in CS4 right click on the layer name to the left of the newly created classic tween and select Add Classic Motion Guide The same rules apply e Only symbols can be animated Only one symbol can be on the stage per animated layer Attached two pictures Classic Motion tween in CS4 Now right click on the layer name not in the timeline itself Flash classic motion tweening tutorial 79 Classic Guided Motion tween in CS4 Resources and discussion Resources e clipart e Follow up the links in Flash and AS3 links general and Flash and AS3 links tutorials for other tutorials Daniel K Schneider s opini
404. n sound html 2 http tecfa unige ch guides flash ex6 sound intro flash cs6 cloud animation sound fla 3 http tecfa unige ch guides flash ex sound intro flash cs3 cloud animation sound html 4 http tecfa unige ch guides flash ex sound intro flash cs3 cloud animation sound fla http tecfa unige ch guides flash ex sound intro flash cs3 button sound html 6 http tecfa unige ch guides flash ex sound intro flash cs3 button sound fla 7 http tecfa unige ch guides flash ex6 sound intro flash cs6 stop start sound fla 8 http tecfa unige ch guides flash ex6 sound intro flash cs6 stop start sound html http tecfa unige ch guides flash ex drag and drop intro flash cs3 drag and drop matching 3 html 10 http tecfa unige ch guides flash ex drag and drop intro flash cs3 drag and drop matching 3 fla 11 http livedocs adobe com flash 9 0 UsingFlash help html content W Sd60f23 1 10762d6b883b18f10cb1 fe laf6 7ce9 html 12 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash media S ound html 13 http livedocs adobe com flash 9 0 ActionS criptLangRefV3 flash media SoundMixer html 14 http www actionscript org resources articles 90 1 Maths Functions including Random Page1 html Clipart 147 Clipart Definition Clip art in the graphic arts refers to pre made images used to illustrate any medium Clip art is divided into two different data types represented by many different graphics file formats bitmap and
405. n the 8 example zip file and a nice Introducing Flint with a snow effect tutorial made by Richard Lord the author of the Flint system Step 2 create a new Flash ActionScript 3 0 file e Create a new directory for this project e Make sure that you really use ActionScript 3 0 else change that in the File gt PublishSettings Flash tab too e If you want you can move the src sub directory of the Flint system to the root of this new directory and rename it to something like flint Let s snow You might want snowflakes Creating a nice snowing animation with lots of snowflakes by drawings would be very tedious and programming them yourself is a bit difficult unless you are a real programmer You now have two options 1 Finding some special purpose snowflakes code on the web e There is for example the Creating Falling Snowflakes in Flash Using ActionScript 2 PI video tutorial We also have a flying kites example in the Flash embedded movie clip tutorial that you could repurpose 2 Using a more general purpose library that will create the whole animation including the snowflakes something that you will learn now Basically we just copy paste the code from Introducing Flint with a snow effect 8 Or FINT particle system 391 and made 2 3 tiny modifications Step 0 Fix the Classpath in Flash e Open the File gt Publish Settings Flash tab e Then click on the Settings button next to the ActionScript ver
406. n the same layer Then right click and select Create Motion Tween Alternatively you also could have used the Tween pull down menu in the properties panel at the bottom and select motion b ESA ale Create Shape Tween aoog ijt wnan w Insert Frame Remove Frames Insert Keyframe Insert Blank Keyframe Cler Kevirame Creation a motion tween with the right click menu The timeline for the layer including this object should now include a solid line with an arrow if it is dashed something went wrong The result should look like in the screen capture below Flash classic motion tweening tutorial 67 e Between the two keyframes you see a solid line with an arrow look at the Animation cat layer e You should see your object moved to a different position somewhere in the middle of the two keyframes Rashes moton tweening fa vad fl House oom I objets uj W sky a anag t uoh 10 120fs 08s 4 y Creating a motion tween for the cat Step 4 Replicate contents of the other layers e As you could see in the screen captures above the stage is empty except for the cat This is because all other drawings for the other layers exist only for frame 1 e For each other layer right click on frame 20 i e in the position of your second keyframe and hit F5 Insert Frame not insert keyframe e This will stretch your drawings from frame 1 to frame 20 The dr
407. nScriptLangRefV3 fl controls ScrollBar html 26 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl controls TextInput html 27 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl containers UILoader html 28 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash display Stage html 29 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash display SimpleButton htm 30 http help adobe com en_US FlashPlatform reference actionscript 3 index html 31 http help adobe com en_US FlashPlatform reference actionscript 3 flash display DisplayObjectContainer html 32 http help adobe com en_US FlashPlatform reference actionscript 3 flash display Loader html 33 http help adobe com en_US FlashPlatform reference actionscript 3 flash display Sprite html 34 http help adobe com en_US FlashPlatform reference actionscript 3 fl video FL VPlaybackCaptioning html Flash ActionScript 3 overview 368 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 http help adobe com en_U http help adobe com en_U http help adobe com en_U http help adobe com en_U http help adobe com en_U http help adobe com en_U http help adobe com en_U http help adobe com en_U http help adobe com en_U http help adobe com en_U http help adobe com en_U http help adobe com en_U http help adobe com en_U ht
408. ncode a non flv format with the Media Encoder first or Flash will refuse to import Step 2 Import the video as embed e Create a new layer and call it video e Insert a new empty keyframe in frame 2 since we don t want the video play on load in this case e Select this new empty keyframe in the video layer e Menu File gt Import gt Import Video e In the video deployment dialog choose Embed video in SWF and play in timeline Import Video Ea Select Video Where is your video file On your computer C dks flash ex6 component video intro office dks5 flv O Load external video with playback component Embed FLV in SWF and play in timeline Already deployed to a web server Flash Video Streaming Service or Flash Media Server URL Examples http mydomain com directory video flv rtmp mydomain com directory video xm WARNING Embedded video is likely to cause audio synchronization issues This method of importing video is ONLY recommended for short video clips with no audio track Learn about Embedded Video Launch Adobe Media Encoder Select video dialog Flash augmented video tutorial 278 The click next e Use the defaults Step 3 Add some simple controls e You need at least a play button but adding some extra buttons that will allow a user to jump to given frames also may be handy e We just used the button component described in the Flash components tutorial In our exam
409. nd Event handlers A black cat will move next to his red friend black_cat addEventListener MouseEvent CLICK movelIt black_cat friend red_cat blue cat will change size on mouse down blue_cat addEventListener MouseEvent MOUSE_DOWN resizeIt We have to test both mouse up and mouse out since user can press mouse and move out Cat in this case would stay big Also we have to test if cat is already big when user moves in blue_cat addEventListener MouseEvent MOUSE_UP downsizelIt E 23 blue_cat addEventListener MouseEvent MOUSE_OUT downsizeIt red cat and mouse can be dragged red_cat addEventListener MouseEvent MOUSE_DOWN startDragging red_cat addEventListener MouseEvent MOUSE_UP stopDragging ActionScript 3 interactive objects tutorial 338 grey_mouse addEventListener MouseEvent MOUSE_DOWN startDragging grey_mouse addEvent Listener MouseEvent MOUSE_UP stopDragging dog and cat switch can t see the dog for starters brown_dog buttonMode true change cursor form here for a change white_cat buttonMode true brown_dog visible false brown_dog addEventListener MouseEvent CLICK hideShow white_cat addEventListener MouseEvent CLICK hideShow white_cat friend brown_dog brown_dog friend white_cat mouse and red cat size change with wheel
410. nd publish e Test and enjoy e Publish Step 5 Export as a video clip only File gt Export Movie will just save a swf Flash animation file no HTML and JS There are two ways of exporting an swf movie Flash frame by frame animation tutorial 59 e Normal i e compressed This means that when import this flash file into another flash file you can t edit the object anymore e Uncompressed This means that after you import the rocket you can edit it somewhat To get this option untick Compress Movie in the settings dialog that will pop up Step 6 Turn it into a movie clip symbol optional You also can turn this whole animation into a movie clip symbol This is best strategy if you want to build a library of fully editable flash movie clips you can import into other animations Also as we shall point out later you actually could start by creating a movie clip symbol and then create an animation e Select all layers and frames click on the first layer then SHIFT click on the last Make sure that every frame and layer in the timeline is black e Copy all the frames everything Menu Edit gt Timeline gt Copy Frames e Menu Insert gt New Symbol Tick the Movie clip option and give it a good name e g Rocket Then you should be in Rocket editing mode and just see Layer 1 on top e Put the cursor in the first frame e The paste the whole rocket code Menu Edit gt Timelines gt Paste Frames You now shou
411. nd transformation tools Next Drawing tools annotations in red Next color manipulation eraser etc Next color selection nA A U N e Finally options these change according to the tool that you select Sere To NA i AA A Flash CS6 drawing tools panel Options change according to tool that is selected E g in the screen capture to the left you can see how the tools panels shows with the selection tool left and the brush tool right Some tools are piled on top of each other i e there are variants of a similar kind In this case you can see a little down arrow in the icon To see variants you must press the left mouse for a while or Shift click E g instead of the Oval tool you could for example display access the Rectangle tool Flash drawing tutorial 22 Merge shape vs object drawing Flash has two drawing models e The merge model will erase shapes below something you draw but not graphic objects as defined next The object drawing model draws shapes as separate objects that you later can manipulate like in a typical vector graphics program Usually you rather should work with the object model since the shape of each object can be easily modified later on However the merge model can be used to draw complex shapes e g you can draw a circle and then carve off things by drawing over it The merge mode is also useful when you paint things as opposed to drawing You later can convert
412. ndow gt Align or Ctrl k There are also shortcuts e To assemble shapes into a graphic object use the Modify gt Combine Objects gt Union or turn the selected shapes into a symbol e To break apart an object use right click gt Break Apart If you want to produce shapes you may have to repeat this step Tips Set snapping preferences right View gt Snapping or right click on the workspace Then Edit snapping If you need this see the Flash arranging objects tutorial Colors and filters e You can achieve a lot just by changing colors color gradients or by adding filters to movie clip symbols you use in animations See the Flash colors tutorial if needed Frame by frame animation Is useful for several things e g e To do precision work e g drawing 15 frames for just an arm movement To make pulsating objects that you can move around To insert remove objects into the animation Flash animation summary 118 Procedure Frame by frame animations work with anything Just draw any kind of shapes or graphic objects or whatever else in various frames A frame with content is called a keyframe Animation is based on the principle that keyframe contents shown to the user in rapid succession by default 24 frames second in Flash CS5 CS6 and 16 frames second in Flash CS3 To add new keyframes and copy over contents from the last keyframe In the timeline in the right layer click into the new frame e Hit F
413. ne I e you can cut off sound from the either the beginning or the end of the sound track e You can drag down volume controls black lines on top for the left and the right stereo channel e Click to insert a new distortion point for these volume controls e Up means louder maximum sound e Down means more silent no sound e Use the arrow down left to test At bottom right there are zoom buttons and a switch that either shows seconds or frames Flash sound tutorial 142 eee asn Te Type Name yi x7 SOUND Name guitar_beat_2 mp3 v Effect Sync Event ly Flash CS6 Sound envelope editor Example used Animation with sound You can look at my published animation with sound example 31 Tt shows a motion animation with a global music sound track and 4 layers with sound textures that are limited in time Source flash cs3 cloud animation sound fla 4 You can grab all the files flash cs6 cloud animation sound from this directory http tecfa unige ch guides flash ex6 sound intro Attaching sound to buttons You can attach sounds to buttons in the same manner as above Double click on the button in the library panel Edit the button s timeline e g the mouse over down and hit frames For each sound you want to attach create a layer Then insert a new keyframe F7 and attach the sound You may try to stop a sound insert a new keyframe Flash sound tu
414. nel Gradients Color points The little arrow squares you now can move from left to right are called color pointers and they delimit color bands Here is a list of common operations a Adjust color bands To make a color band smaller or larger move various color pointers left or right b Add new color bands e Click into the area of the color pointers This will add a new color pointer c Change the color of a color pointer e Click on a color pointer The selector pointer should have a black arrow instead of a white Now select a color in the panel above d Remove a color pointer e Drag it down and off below the gradient preview window e Copy a color from a pointer e Hold down the mouse for a while will work like the Eyedropper tool Transforming gradients With the gradient transform tool hidden underneath the Free Transform tool you can do five things rotate gradients both linear and radial stretch out the gradient 1 2 3 stretch the radial gradient in only one direction make an oval 4 Make the rings of a radial gradient asymmetric 5 Move the center of the gradient color Procedure e Select the tool hold down the mouse over the Free Transform tool in the tools panel and select the Gradient Transform Tool e After selecting an object you will see five handles with which you can stretch in one direction resize turn make the rings ellipsoid and finally move the whole gradient
415. ner MetadataEvent CUE_POINT cuepoint_listener function cuepoint_listener obj MetadataEvent void do something here e g play a clip The cuepoint_listener function shown below includes a switch statement that deals with each event it receives For most of these events we play some movie clip If the movie clip was hidden we make it visible too e g movie_books visible true movie_books play e Also we have to stop previous movie clips or even make them invisible again as you like Note about bout imported classes Sometimes we have to tell Flash to import certain functionality If you plan to work with cue points in ActionScript then the following line is necessary import fl video MetadataEvent Flash augmented video tutorial 289 If you want music textures you can for example import a sound file into the library and then export it for action script Right click on it Make sure you remember its class name Else you can dynamically import sound from external files as shown in the Flash drag and drop tutorial So here is the complete code you can find in the fla file of this example import fl video MetadataEvent Stop all the animations of the various movie clips Make the bookshelf invisible ovie_trees stop ovie_books stop ovie_books visible false ovie_penguin stop m m m m movie_manual stop m ovie_manual visible false This is a sound of t
416. nes I mean these sharp edges that can appear Such behavior can be fixed e Use the Subselection tool to move shape control to a different place Firstly magnify the scene at least 400 Then you can Shape based IK structure of a rubberman move or kill the blue control points or adjust them with the red curve control handlers Take it slowly and wait to see the result of a manipulation since Flash recomputes the whole interpolations Even my DELL M1740 high end laptop needs to think about it before it let s me see a deletion a move or a curve change happen Also bones may be shown displaced Click in another keyframe and come back e Use the bind tool to associate shape controls with bones Fixing a curve of the shape in a IK pose with the subselect tool Unless you are looking for a snake like behavior it is probably better to use a symbol based armature as in the next chapter Flash inverse kinematics tutorial 257 A stickman avatar not done yet try it yourself Let s now create a stickman avatar that roughly has human proportions In order to create a human stick man we need a few objects to represent body parts Here are a few rules of thumbs regarding size of body parts Total body height should be about 6 8 times the size of the head Head to crotch and crotch to feet is about the same size shoulders and hips are about the same shoulder is smaller for females and bigger for males
417. ng mode Tips e Use movie clips unless you have a reason to do otherwise A movie clip is really not the same kind of object as button for example e Always give your symbols a meaningful name Conclusion more e If you draw a lot you may want to print the list of Flash CS3 keyboard shortcuts e At some point you also should learn about the various kinds of objects you can have in a fla file They all have different purposes e g various kinds of tweens only work on certain kinds of objects See the Flash formats and objects overview There is more stuff in the Modify Menu but that s its enough for now Flash colors tutorial Draft Introduction This is part of the Flash tutorials Learning goals Learn about the color types normal gradient and bitmaps Learn about color models RGB and HSB Prerequisites Flash CS6 desktop tutorial Flash layers tutorial Flash drawing tutorial at least some of it Quality and level This text should technical people get going It s probably not good enough for beginners but may be used as handout in hands on class That is what Daniel K Schneider made it for It aims at beginners More advanced features and tricks are not explained here Materials fla files you can play with e http tecfa unige ch guides flash ex6 colors intro The Colors SWE includes a short demo of bitmap colors the alpha channel gradients and filters Color types overview Flash col
418. ng to instructions e Source solution final coap2110 2008 SOLUTION fla 20 if you are stuck Links Important manual pages The Actionscript manual 21 at Adobe is almost impossible to understand for non programmers but other than that the ActionScript documentation at Adobe is excellent Beginners can at least figure out property names and some easy to use methods e InteractiveObject 22 This InteractiveObject class is the abstract base class for all display objects with which the user can interact using the mouse and keyboard Most Events are documented here Make sure to list also the inherited events e Movie clip 23 this subclass adds properties and methods for timeline scripting e DisplayObject 741 Describes the display object e g properties you can change Note that there are additional properties for each specific kind of object i e see the class hierarchy described in the Flash ActionScript 3 Overview Clip Art e Free Clip Art 21 Original cat and dog e Open Clip Art Library 4 The grey mouse and the original rocket References 1 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 simple object manipulation html 2 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 simple object manipulation fla 3 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash geom ColorTransform html 4 http tecfa unige ch guides flash ex6 action script 3 i
419. ngRefV3 flash events TimerE vent html http livedocs adobe com flash 9 0 ActionScriptLangRefV 3 fl video VideoEvent html http livedocs adobe com flash 9 0 ActionScriptLangRefV 3 fl video IV PEvent html http developer yahoo com flash articles display list html http www flashandmath com intermediate names index html http www williambrownstreet net wordpress p 78 http wordpress com tag actionscript3 http drawk wordpress com tag development flash as3 http code google com p tweener http www websector de blog Flash using ActionScript libraries tutorial Draft Introduction Learning goals e Learn how to reuse example code that illustrate features of ActionScript libraries e Learn how to be able to import 3rd party packages by defining an ActionScript classpath Prerequisites Environment Flash CS3 Moving on See the Flash tutorials Basic interactivity i e some very limited ActionScript 3 coding experience See for example the Flash button tutorial or the Flash component button tutorial and theFlash embedded movie clip tutorial In addition you also could start from pure Actionscript 3 coding but we will provide no explanations here for flex style development Level and target population Quality Beginners but see the prerequisites Flash using ActionScript libraries tutorial 369 e useable but under progress To Do e Other examples There exist several free high
420. nimate this hole with a motion tween for example Masked layers are the layers underneath In the following picture a mask lets you see part of bookshelf through an oval s flash c73 me Ioj x File View Control Debug A mask with an oval Step 1 Create some contents e Put these contents in one or several layers We will turn these layers masked in step 3 Step 2 Add a mask layer e On top of these layers create a new layer e Right click on the layer name and select Mask This layer will mask the others and it should contain a single graphic element shape graphic symbol or group Step 3 Define the masked layers e The layer just beneath the Mask layer already should be masked If it is not right click on the layer name and select Masked e You can turn other layers underneath to be masked with the same procedure Move normal layers to a position after the mask layer or an already masked layer or create new ones To undo a masked layer just right click and revert back it to normal We show a picture of mask and masked layers further down Such static masks are of course not very interesting so let s move on Flash mask layers tutorial 247 Masks animated by a simple motion tween Non linear motion tweens are simple to create in CS4 to CS6 In CS3 you must learn how to create guided tweens using an embedded movie clips see below Step 1 Add a simple motion tween e Select the mask lay
421. not be happy with the result but you can fix that By default the control points of a shape are connected to the bone that is nearest to them but you can change that with the bind tool that sits underneath the bone tool in the tools panel If you click on a bone it will show all associated control points i e parts of the shape that go with a bone The bone will be red and the associated control points yellow Points that are associate with just one bone are yellow squares The ones that connect to more than one bone are yellow triangles e To remove a control point association with a bone CTRL click on the yellow e To associate a control point with a bone SHIFT click on a red not associated control point To add a control point use the Subselection tool The other way round If you click on a control point blue if no bone is selected it will become red and show the associated bones in yellow Flash inverse kinematics tutorial 262 Links Introductions to inverse kinematics e Inverse kinematics 3 Wikipedia e Inverse kinematic animation A Wikipedia e Inverse Kinematics Improved Methods 16 by Hugo Elias 2004 Very technical e How do the characters in video games move so fluidly 5 Howstuffworks com Adobe documentation e Using inverse kinematics 6 Using Flash CS4 Professional Introductions e Flash Downunder The Bone Tool and the Deco Tool video by Paul Burnet e Using inverse kinemat
422. nt MouseEvent void var cuePointInstance Object video findCuePoint XPS video seek cuePointInstance time As a bonus I added some invisible trees that will become visible when the user jumps to the XPS cue point These were imported from an SVG drawing and made it into a symbol The instance on the stage was called trees A MPATE Actions I D 6 027 ADA q Buttons JEOMED g flv video mga g pene E Tree_coconuts k T Laba Movie Clip v a ae gt 2 Component Assets Instance of Tree_coconuts Swap ae 7 a5 gt FLV Playback Skins X 2 70 Y 5 85 GP W 261 25 H 230 90 gt 3D POSITION AND VIEW 57 COLOR EFFECT Bgd Pa Distribute Style por hb l Match size Space aig 21 M Align to stage x7 DISPLAY Navigating a video using Cure points Below is the complete code that you also can find in the source file To adapt this code to your needs Change XPS to the name of your cue point Replace the trees with any other graphics symbol or even an embedded movie clip hide the trees trees vigslole seule btn_laptop addEventListener MouseEvent CLICK jumpLapTop function jumpLapTop event MouseEvent void var cuePointInstance Object video findCuePoint XPS video seek cuePointInstance time vemove the followin line if you do not have trees on the g y Flash augmented video tutorial 285 stage trees visible
423. nt bitmap fill See below for more explanations None Solid color Linear gradient Radial gradient Bitmap fill Tr The Flash CS6 Color panel select color type Flash colors tutorial 177 The swatches panel includes a series of standard colors These are same ones you get with the Fill controls in the Tools and Parameters panel The Flash CS6 Color swatches panel Let s now introduce various color types in more detail Solid colors Solid colors can be defined in various ways and there is a whole science behind it Let s just recall a few principles For more information please see the Wikipedia links in the color article Let s define a few terms first Hue e means color Saturation e means amount of a color you apply i e the intensity Brightness e How much light you apply A lot of light makes a the color washed out and very little light makes it very dark Transparency e How much you can see trough e See alpha channel below RGB colors RGB colors are the most popular ones used in computing applications A color is defined by the amount of Red Green Blue By default the CS6 color panel is in RGB mode RGB is the way computer monitors work E g to get a nice yellow you need 100 Red 100 Green 0 Blue RGB is a so called additive color mixing model Projection of primary color 2 lights on a screen shows secondary colors where two overlap the combination of all three of
424. ntributors image flash cs6 shape tweening intro png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 shape tweening intro png License unknown Contributors image flash cs6 polystar png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 polystar png License unknown Contributors image flash cs6 shape tweening intro2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 shape tweening intro2 png License unknown Contributors image flash cs6 create shape tween png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 create shape tween png License unknown Contributors image flash cs6 extend tween span png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 extend tween span png License unknown Contributors image flash cs6 shape tween dragon egg png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 shape tween dragon egg png License unknown Contributors image flash cs6 shape tween dragon egg2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 shape tween dragon egg2 png License unknown Contributors image flash cs3 shape hints3 jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs3 shape hints3 jpg License unknown Contributors image flash cs3 shape hints4 jpg Source http edutechwiki unige ch mediawiki index php title File Flas
425. ntro actionscript3 simple object manipulation2 htm l 5 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 simple object manipulation 2 fla 6 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 simple object manipulation buttons html 7 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 simple object manipulation buttons fla 8 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 keypress move 0 html 9 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 keypress move 0 swf 10 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 keypress move 0 fla 11 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 keypress move 1 html 12 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 keypress move fla ActionScript 3 interactive objects tutorial 354 13 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 keypress move fla 14 http tecfa unige ch guides flash ex6 action script 3 intro actionscript3 keypress move html 15 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash ui Keyboard html 16 http tecfa unige ch guides flash ex exams2007 final exam coap2 10 solution 2007 fla 17 http tecfa unige ch guides flash ex exams2008 final coap2 1 10 2008 SOLUTION html 18 http tecfa unige ch guides flas
426. ntroduction to Adobe s not as nice solution AS3 tweening platform 374 Installation Executive download installation and use summary Download the tweening platform from Greensock 1 Unzip the file and if you want copy the swf file to some actionscript libraries directory you may have Open create a new fla file Open the File gt Publish Settings Flash tab Make sure that ActionScript 3 is selected then click on the Settings Nn fF WN Select Library path not source external library etc and tell CSx the directory where it can find the swf file Again read the Flash using ActionScript libraries tutorial if you don t understand this Summary documentation Syntax used Syntax used for datatypes If you see something like this xxx YYY it means that you have to use value of type YYY Typically you must specify Objects If you work with CS3 CS4 etc instance names of movie clips target Object e g my_rocket or movie_clip Objects also can refer to ECMAScript objects that you create on the fly with variables Object E g an object with properties x 120 and y 1 10 is created like this Tes LZ20 ps LLO Numbers x Number ein 5 Color_uint E g for red you could use the following Hex value OxFF0000 Boolean xxx Boolean e g knockout true Functions You will have to give a function name This can be a Class method xxx Function insGfo GASES St Oi Sae ia
427. nts To adjust the shape in poses see just below Also consult the tools and objects overview Two flowers example This example is really ugly I would have to do it again It seems that using the pencil tool strokes for the blue flower was not such a good idea If you need fat lines rather use the rectangle tool or the paint tool Then you could adjust the envelope later on e bones in shape intro html 12 e Source bones in shape intro fla 13 Flash inverse kinematics tutorial 256 e Directory http tecfa unige ch guides flash ex6 inverse kinematics Shape rubberman example This shape has been drawn with the Paint tool in object mode y Once the drawing was done we made a union of all its parts i stickman oo Modify gt Combine Objects gt Union and then optimized Q betes sE Modify gt Shape Optimize at 100 Jog laekuri The rubberman has many joints as you can see in the picture _bones in shape int e The parent bone starts in the hip area Scene 1 e We not only animated the poses but also move the rubberman in different positions in various keyframes e shape ik rubberman animation html 14 e Source shape ik rubberman animation fla 15 e Directory http tecfa unige ch guides flash ex6 inverse kinematics The result isn t great but given the time we spent on it little it s ok Fixing the shape in poses You sometimes can see that the shape doesn t really follow the bo
428. nts flow Hold down the mouse for a while and then change the tool See the Flash colors tutorial Flash drawing tutorial 24 Lasso tool With the lasso tool you can select several objects or parts of a shape This tool also includes a magic wand mode see the optional controls and a polygone lasso that allows selection by clicking on several spots If you want to edit parts of a shape either double click on the object until it becomes a shape or break it apart right click menu Pen tool The pen tool allows you to make the most complex drawings i e defining paths using so called Bezier curves Do not confuse this with the more simple pencil tool See the Flash pen tutorial currently unfinished Text tool Add text In the properties panel you may define various text properties such as fonts color and positioning alignment etc If you click on the paragraph symbol you can define indent line spacing and margins Line tool The line tool N allows drawing simple lines no surprise here Rectangle and other tools On the same spot of the tools panel you got several tools By default you will see the rectangle tool To select another tool hold the left mouse button down for while and then select the one you want e Rectangle tool by default Draw simple rectangles In the parameter s panel you can define strokes and filling properties e Rectangle primitive tool Lets you define
429. ny keyUP event but this requires more coding Using the missile Getting some revenge on your teacher e actionscript3 keypress move fla 13 e actionscript3 keypress move html L4 Properties of the keyDown event The keyDown event is dispatched when the user presses a key The most important properties you may use are e keyCode a special code for the key used above e charCode the character code value e ctriKey shiftKey know if either one of these has been pressed too e target the target in focus over which a key has been pressed used above e currentTarget object that is processing the key event KeyCodes are represented as numbers or constants I prefer to use constants e See the Keyboard 15 class documentation at Adobe So instead of using something like if key 37 use if key Keyboard LEFT ActionScript 3 interactive objects tutorial 351 Summary of essential events and action script tricks Let s summarize a few events and actionscript tricks that might be useful for starters and that should not be very difficult to use Events Here is a short summary of mouse events that can be intercepted by a registered event handler for a given object So these events are only useful if you define both an event handler function and register it with an object In the following example cat is an interactive object e g a movie clip symbol with which we shall register a function for a mou
430. o add your name e Frame 2 Sailing a Play the tween animation of boat with the what s going on here button b BONUS Point Create and play a motion animation of a plane e Frame 3 Driving a Create an animation that will start moving the car from right to left and slightly forward too i e keep it on the road To animate the car edit the old car symbol and make it a motion tween Then link it ActionScript 3 interactive objects tutorial 353 to the what s going on here button b BONUS Point Do something with the yellow car e Frame 4 Island a Make the trees visible when the user clicks on the what s going on button b BONUS point Improve the frame by frame animation of the big tree e Frame 5 Rocket a Write code that will launch the rocket b BONUS Do something with the snakes Tip For starters you can navigate with the little button on top right Do not edit layer one e final exam coap2110 solution 2007 html 14 look at the solution first e Source exam file final exam coap2110 2007 fla 4l download this and try reproduce the solution e Source solution final exam coap2110 solution 2007 fla 16 if you are stuck e Directory http tecfa unige ch guides flash ex exams2007 2008 Exam e final coap2110 2008 SOLUTION html Look at the solution first e Read the exam tasks l PDF file e Source exam file final coap2110 2008 fla 19 download this and try to do the exam accordi
431. o another frame Note about multiple events and multiple listeners e You can register multiple listeners to one instance e You can register the same listener to multiple instances After you registered an event handling function like hello_button addEventListener MouseEvent CLICK click_handler you then have to define this function E g if we called our function click_handler we get the following template function click_handler event_object MouseEvent Do something with this event event_object is a parameter name we came up with and that will contain a representation of the event and that includes a reference to the instance on which the user clicked e g the hello_button in our case A simple example From the Flash button tutorial When a user clicks on the launch_button then the JaunchRocket function is called It will move the animation to Frame 2 and let it play launch_button addEventListener MouseEvent CLICK launchRocket function launchRocket event MouseEvent gotoAndPlay 2 ActionScript 3 event handling tutorial 357 An example This is the copy pasted example from the Flash components tutorial We first register an event handling function with five different buttons btn_rainbow addEventListener MouseEvent CLICK clickHandler btn_tecfa addEventListener Mouse btn_bosses addEventListener Mousel btn_my_computers add btn_credits ad
432. o use external ActionScript libraries that you downloaded and installed Flash must locate the external ActionScript files that contain the class definition Usually the list of folders in which Flash searches for class definitions is called the classpath for ActionScript 2 0 and the source path for ActionScript 3 0 You may set the source path either globally for all your projects or per fla file You usually should adopt the later even if it means some extra work Local source path Through File gt Publish Settings Flash Tab Settings Tab you can set the following ActionScript locations in Flash for a specific fla file e Source path Defines the location of source ActionScript source files Typically you would use this for libraries that you download as AS source code e Library path specifies the location of pre compiled ActionScript code which resides in SWC files you have created The FLA file that specifies this path loads every SWC file at the top level of this path and any other code resources that are specified within the SWC files themselves If you use the Library path be sure none of the compiled code in the SWC files is duplicated in uncompiled AS files in the Source path The redundant code will Flash using ActionScript libraries tutorial 370 slow down compilation of your SWF file Typically you would use the library path when you use swe code from major ActionScript libraries like PaperVision3D or th
433. oB A Bh av Fe Man anim B amp FLV component Background D N Properties E ang S Scripts B Trees dip E movie_trees Trees Jag laai il eS o i 12 00fps _0 0s red book Movie Clip ly flash cs6 video cue events fla x Pinguin clip BA a t erer amp Scene 1 Penguin M Instance of Trees dip Penguin F x7 POSITION AND SIZE Music FLVPlayback flash book dip flash book Component Assets Button Bookshelf dip X 399 95 Y 279 00 gt W 261 25 H 23080 gt 3D POSITION AND VIEW s7 COLOR EFFECT HA OCR MARR ERE Style None Spaa jool 6 gaa Align Info Transform _ Align aaa F Distribute lt 7 DISPLAY A ih M visible Blendi Ni l Match size Space lending jorma z i a Ei 2 Render Original No Change 00 00 lt 00 00 00 00 v FILTERS oO 0 Pronerty lValue l M Align to stage Color Swatche T Radial arad Embedded movie clip that will be played after a cue point occurs Using cue points to trigger animations At the heart of cue point events management is an event handler that is registered i e we use exactly the same principle as for user interaction with buttons Flash button tutorial Only this time events are not generated by the user but by cue points that will emerge when the video is played Flash will have to watch out for these video_component addEventListe
434. oardEvent KEY_DOWN keyFocusChange Dispatched when the user attempts to change focus by using InteractiveObject FocusEvent KEY_FOCUS_CHANGE keyboard navigation keyUp Dispatched when the user releases a key InteractiveObject KeyboardEvent KEY_UP mouseDown Dispatched when a user presses the pointing device button InteractiveObject MouseEvent MOUSE_DOWN over an InteractiveObject instance in the Flash Player window mouseFocusChange Dispatched when the user attempts to change focus by using a InteractiveObject FocusEvent MOUSE_FOCUS_CHANGE pointer device mouseMove Dispatched when a user moves the pointing device while itis InteractiveObject MouseEvent MOUSE_MOVE over an InteractiveObject mouseOut Dispatched when the user moves a pointing device away from InteractiveObject MouseEvent MOUSE_OUT an InteractiveObject instance mouseOver Dispatched when the user moves a pointing device over an InteractiveObject MouseEvent MOUSE_OVER InteractiveObject instance in the Flash Player window mouseUp Dispatched when a user releases the pointing device button InteractiveObject MouseEvent MOUSE_UP over an InteractiveObject instance in the Flash Player window mouse Wheel Dispatched when a mouse wheel is spun over an InteractiveObject MouseEvent MOUSE_WHEEL InteractiveObject instance in the Flash Player window removed Dispatched when a display object is about to be removed from DisplayObject the display list removedFromStage Dispatch
435. objects CS5 includes e Better looping support in motion tweens E g ctrl select first keyframe then ALT drag to right after the tween span then inverse keyframes with the right click menu e Physic engine additions to inverse kinematics e g spring functions e Support for IPhone applications not sure that it works since Apple doesn t like other s developing environments e Much better text support e Code snippets helps beginners to write AS3 code e XML based source code Either compressed fla files or xfl folders e Easier management of cue points in videos directly in CS5 Better deco brushes e g you now can easily draw a tree CS6 includes e Better support for mobile technology e and more to document Since CS5 Flash includes code snippets Therefore these newer versions are better suited for teaching Flash to beginners However for learning modern Flash it doesn t make a big difference whether you use CS3 CS4 or CS5 or CS6 Some schools simply can t afford upgrading at an 18 month rate Alternative technologies General formats e DHTML i e the combination of HTML CSS DOM and JavaScript and AJAX the same combo plus server client communication trough JavaScript There exist various software packages e g hippo Uh and libraries e g GSAP P e SVG an XML based vector graphics format sponsored by WC3 SVG is a powerful format but lacks support from authoring tool and web browser makers
436. ocket symbol html 6 Result e flash cs6 rocket symbol fla 7 Source code Rocket science i e how to work with frames in order to create some sort of pulsing flame is explained further below in this article Let s now introduce the frame by frame animation engineering Read more about embedded movie clips in e Flash embedded movie clip tutorial The timeline and keyframes The principle of frame by frame animations made with drawings is that you draw various versions of the same objects in different frames These are then displayed one after each other in rapid order most often between 12 24 frames second Frames and key frames A frame is a drawing that is displayed at a given time Usually any drawing uses several layers In the timeline each stop is called a frame Frames are numbered from 1 to whatever length your animation has Let us start by introducing the meaning of a few symbols in the timeline We later will come back to these Flash frame by frame animation tutorial 46 If you feel that display of timeline frames is too tiny you can fix this with the time line options little pull down menu in the upper right This menu also allows displaying a preview of the animation but that takes up space of course Color x Swatches Align 7 E Type newgradient fla frames fla Untitled 1 2 aoi Tiny Small Normal v Medium Large Preview ao amp ei 3 12 0 fps O 2s 4 gt
437. ode modules required to support the motion tween import fl motion Motion import f1l motion MotionBase import fl motion AnimatorFactory import flash geom Point go_button addEvent Listener MouseEvent CLICK go_sun_go function go_sun_go ev Event void animFactory_sun addTarget sun2 1 true 1 false var sun_motion MotionBase if sun_motion null sun_motion new Motion sun_motion duration 50 Motion array SUi_ MCE Cin ACloIPicojoeweyAewey x O 30 SO 80 120 LS 200 250 S00 350 ACO HUlIA_iMiCnre LOM acloleicoewicwAcway My 0 30 S50 80 10 120 140 60 ISO 130 LSNA J Not needed here sun_motion addPropertyArray scalex 1 0 sun_motion addPropertyArray scaleYy 1 0 sun_motion addPropertyArray skewX 0 sun_motion addPropertyArray skewYy 0 a Create an AnimatorFactory instance which will manage targets for its corresponding Motion var animFactory_sun AnimatorFactory new AnimatorFactory sun_motion Call the addTarget function on the AnimatorFactory instance to target a DisplayObject with this Motion The second parameter is the number of times the animation will play the default value of 0 means it will loop animFactory_sun addTarget sunl 1 true 1 false Flash CS4 motion tweening with AS3 tutorial 265 Using Copy Motion as AS3 e Create a symbol on the stage e Give it a useful instance name e g
438. odify gt Document e Fill in a description associated with the fla source in CS3 also available through the menu Modify gt Document in CS4 and later in menu File gt File info Configuration of the desktop The way you want your desktop configured depends on your screen size and the type of animation you build If your screen is big enough put as many tools at your finger tips as you can In particular e All toolbars e Properties panel at the bottom e Colors Swatches Align Info and Transform on top right e Libraries middle right E g something like this for CS3 Flash animation summary 114 lt top 2 fla t Modify Text Commands Control Debug Window Help Bgl BGR vraipnls lt oak Color lt Swatches Align Info Transform Type Solid x Layer 1 P T N a 2 LA a 2 a G s mo ms 3s R Change Selection a w 155 8 x 1262 R Move afas y 2354 T Use runtime b Example configuration of a CS3 Flash desktop or this for CS5 and later Flash animation summary 115 Fl File Edit View Inset Modify Text Commands Control DKS Meee T a beeen ee LI LALA ma ug 2mm vV Designer gt 1a lt i gt gt I Developer Essentials Small Screen Reset Designer New Workspace Document Manage Workspaces Fi 7 PUBLISH Profile Default Publish Settings
439. oduction Step 1 Drag the component to the stage and save the file 1 Open the components panel Menu Window gt Components or CTRL F7 2 Drag FLPLayback 2 5 on the stage 3 Now save your Flash file else it will not work since Flash will not find the video file 4 Copy the video file into the same directory as your flash file unless you know how to deal with relative file paths something that you may have learned creating HTML pages using pictures Step 2 Configure the properties of the component 1 Select the component 2 Set the name of the video file with source in the Properties panel e g BFB BBC mp4 Make sure to shorten the file path e Bad C flash ex6 screenshots my_video mp4 e Good my_video mp4 3 Select an appropriate skin A skin will define what kinds of controls the user will have You also can make adjustements to the color 4 Keep the defaults for starters e g maintainAspectRation for starters That s it Flash video component tutorial 239 Compar tmon Library Project Componer MLT ps LODA AY or San 2m A E B FLVPlayback Ta E FLVPlayback 2 5 A FLvPlaybackCapti BackButton Propesties BufferingBar CaptionButton E D ForwardButton dnstance Name gt E FullScreenButton MuteButton Instance of FLVPlayback 2 5 OD PauseButton PlayButton v POSITION AND SIZE
440. of the skin SWF in the URL field To remove all play controls and only import your video select None fromthe Skin drop down box Ceea Cees eens The Adobe Media encoder can be found in the Program menu of your system Windows Mac or in the File Import process in Flash CS6 as explained in the previous section Important You cannot transcode or edit flv files Use another source format like mp4 I can t explain why but it s Adobe s choice Simple transcoding Click on to add a video for encoding Select the video format By default the Flash F4V format is selected 1 2 3 Select the quality 4 Press the green arrow button to launch the encoding The resulting file will be put in the same directory as the source video Flash video component tutorial 242 rce Attributes Medium Quality 4 16x9 Project Framerate 300kbpee Mobile 768x432 16x9 Projet gt MXFOPia PC amp TV HD High 169 v a Camera PC amp TV HD Low 169 gt AVC Intra PC amp TV SD High 169 gt Dv PC amp TV SD Med 169 gt DVCPRO Phone amp Tablet 3G 169 Phone amp Tablet Low 169 Phone amp Tablet WiFi 169 Web 1024x576 16 9 Project Framerate 1800kbps Web 1024x576 16 9 Project Framerate 2500kbps o Web 1280x720 16 9 Project Framerate 3500kbps gt Mobile Web 1280x720 16 9 Project Framerate 4500kbps gt Tablets Web 1920x1080 16x9 Project Framerate 5500kbps gt
441. ompo WE eS eee ee ee ices oe Ly g wi 2 P 4 T a Actions site flash cs6 video timeline LOC AZFAQA FlashBook H Flying book red D 7ROom gt Books D A 5 Video B Palmtree 5D Credits B Properties Pinguins 5D eB E Tree_coconuts Document ar al E red book Fl E Penguin m flash cs6 video timeline embed fs 3 g 200s uss M7 Do CO Penguin 7 PUBLISH Se a Bh office dks3fh Profile Default FlashCS3 book Publish Settings 2 flash book B Component Assets Target Flash Player 10 3 ly Script ActionScript 3 0 RRS E Bookshet2 E Bookshaf Class Zz E blue book vy PROPERTIES FPS 12 00 lt Sze 640 x 480 px 4 L stage __ Align Distribute Log Clear 23M8 18 02 2013 17 49 z222 bb 23M8 17 02 2013 21 30 Match size Spa 23M8 17 02 2013 20 14 ebm M Align to stage Color 2 Radial gr am BA O Linea Embedded video with some animations In this example we add various animations e g two motion tweens and a shape tween to the project Below you can see that books are tumbling out of a bookshelf while the video shows a real bookshelf Below is the action script code to implement a simple play button plus two other ones that are not really necessary i e a credits and a goto button All the rest are just simple Flash animations that are embedded in the main timeline This will stop Flash from playing all the frames pP User must stay in Frame 1
442. on I do have to say that I find the SMIL SVG time based animation model including its interpolation mechanisms more elegant and simpler to understand In SVG you simply decide which property of the object position size shape whatever you want to animate and how interpolation should be done CS4 moved in the right direction i e the standard motion tween now creates an object by itself In CS3 that kind of animation can be done in Flash through ActionScript programming E g by using a tweening library like TweenLite and its sister classes Software Besides Flash from Adobe certain animation software can export in Flash I didn t find any software that can export to fla just swf Therefore using such tools is ok if you just want to produce animations in an easier way E Frontier products commercial e E Frontier home page 13 E g Anime Studio Anime Studio Wikipedia H Motion Artist Toufee free online software needs registration e Toufee Home Page 23 Toufee Wikipedia e Toufee Wiki 16 KToon not tested e Frame by frame animation drawing tool for Unix systems including Linux e Ktoon can export animations in Flash or a series of PNG images e KToon Home Page 17 e KToon Wikipedia article 18 Flash classic motion tweening tutorial Links to Video Tutorials You also can look at some of the videos you can find on the Adobe web site e Video tutorials 19 e Cli
443. on point png License unknown Contributors image flash cs3 change rotation point2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 change rotation point2 png License unknown Contributors image flash cs3 enevelope transform png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 enevelope transform png License unknown Contributors image flash cs3 designer chair png Source http edutechwiki unige ch mediawiki index image flash cs6 modify menu png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 designer chair png License unknown Contributors hp title File Flash cs6 modify menu png License unknown Contributors image flash cs3 shape tools cat png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 shape tools cat png License unknown Contributors File Flash cs6 modify punch png Source http edutechwiki unige ch mediawiki index p image flash cs3 subselection curve control png Source http edutechwiki unige ch me image flash cs3 eraser options png Source http edutechwiki unige ch mediawiki index image flash cs3 edit snapping png Source http edutechwiki unige ch mediawiki index image flash cs3 align object snapping png Source http edutechwiki unige ch mediawil image flash cs3 align tools png Source http edutechwiki unige ch mediawiki index php image flash align panel png Source http edutechwik
444. ons of an object over time Of course during the motion path one also can change other properties e g orientation size and tint e With all built in tools an animation is usually done in a single layer with a single instance of something that sits in the library e With ActionScript it depends but usually you also would use heavy objects like movie clips Flash animation overview 39 Flash CS4 5 6 timeline representations of interpolations Adobe show different types of animations using the timeline in the following way According to Animation basics BI retrieved 11 17 25 April 2010 UTC e A span of frames with a blue background indicates a motion tween A black dot in the first frame of the span indicates that the tween span has a target object assigned to it Black diamonds indicate the last frame and any other property keyframes Property keyframes are frames that contain property changes explicitly defined by you You can choose which types of property keyframes to display by right clicking Windows or Command clicking Macintosh the motion tween span and choosing View Keyframes gt type from the context menu Flash displays all types of property keyframes by default All other frames in the span contain interpolated values for the tweened properties of the target object e A hollow dot in the first frame indicates that the target object of the motion tween has been removed The tween span still contains its property
445. ontributors png License unknown Contributors image flash cs3 hooked cross icon png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 hooked cross icon png License unknown Contributors image flash cs3 curve icon png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 curve icon png License unknown Contributors image flash cs3 banana png Source http edutechwiki unige ch mediawiki index phptitl image flash cs3 angle icon png Source http edutechwiki unige ch mediawiki index php image flash cs3 two bananas png Source http edutechwiki unige ch mediawiki index p image flash cs3 angle icon2 png Source http edutechwiki unige ch mediawiki index phy image flash_path_components png Source http edutechwiki unige ch mediawiki index le File Flash cs3 banana png License unknown Contributors title File Flash cs3 angle icon png License unknown Contributors hp title File Flash cs3 two bananas png License unknown Contributors p title File Flash cs3 angle icon2 png License unknown Contributors php title File Flash_path_components png License unknown Contributors image flash_points_on_path png Source http edutechwiki unige ch mediawiki index php title File Flash_points_on_path png License unknown Contributors image flash_corner_points png Source http edutechwiki unige ch mediawiki index php title File Flash_corner_points png License unknown
446. ood enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for http tecfa unige ch guides flash ex6 buttons intro flash cs6 rocket launcher as3 htm 8 http tecfa unige ch guides flash ex buttons intro flash cs3 simple slide show as3 fla 4 http tecfa unige ch guides flash ex6 buttons intro flash cs6 rocket launcher as3 code snippets html 7 http tecfa unige ch guides flash ex buttons intro flash cs3 simple slide show as3 html 5 Data m DataHolder Dataset G3 RDBMSResolver WebServiceconnector Q XMLConnector LA XUpdateResolver 5 Media S5 MediaControler E MediaDisplay MediaPlayback User Interface Accordion Alert Button CheckBox ComboBox DataGrid DateChooser zm DateField A Label lai List Loader E Menu MenuBar EE NumericStepper ProgressBar RadioButton ScrollPane Textarea Textinput Tree UlScrollBar window E video FLvPlayback BackButton BufferingBar ForwardButton MuteButton PauseButton PlayButton PlayPauseButton SeekBar StopButton VolumeBar EG Ls 596 OMM E ie BHEEEN Components x ActionScript 2 AS2 ActionScript 3 AS3 Components x R E User Interface Button CheckBox ColorPicker ComboBox DataGrid Label List NumericStepper ProgressBar RadioButton ScrolPane Slider Textarea Tex
447. ool Ar Delete Anchor Point Tool N Convert Anchor Point Tool C Underneath the pen tool Changing the type of anchor point e To change a corner point into an smooth point Hold down the ALT key and drag tested with CS6 e To change a smooth point into a corner point Use the the Convert Anchor Point tool or hit C It is hidden underneath the Pen tool Adding deleting anchor points e Use the add anchor point tool e Use the Delete anchor point tool The Free transform tool Make sure that you understand drawing basics i e have an idea what kinds of tools you got in the tools panel If you don t please go read the Flash drawing tutorial Features of the free transform tool The Free transform tool can be found in the tools panel and allows to do do several transformation e By default Scale rotate skew and distort e Envelope transforms e Distorts but see the selection tool So again you face a multipurpose tool You can define its different variants by selecting different mode in the options part of the tools panel lower end Read on The Transform panel Instead of dragging around handles with the Free Transform tool as explained below you also may change transformation values in the Transform panel That s useful for technical drawings Get this panel with the Window gt Transform menu I usually have this docked somewhere to the right as in the following screen capture If you don t know how to doc
448. opriate to a calendar component When the SWF is loaded Flash Player creates an instance of this Calendar class 1 Deselect all objects on the Stage and in the Timeline by clicking a blank area of the Stage This displays the Document properties in the Property inspector 2 Enter the filename of the ActionScript file for the class in the Document Class text box in the Property inspector Do not include the as filename extension Note You can also enter the Document Class information in the Publish Settings dialog box Links e ActionScript publish settings Adobe Flash CS4 e Sharing library assets Adobe Flash CS4 e Packages and namespaces 12 Adobe Flash CS4 References 1 http flintparticles org 2 http blog greensock com tweenliteas3 3 http box2dflash sourceforge net 4 http help adobe com en_US Flash 10 0_UsingFlash WSd60f23 1 10762d6b883b18f10cb1felaf6 7dc7a html 5 http help adobe com en_US Flash 10 0_UsingFlash WS3e7c64e37a1d85e1e229110db38dec34 7fa4a html WS08FEE6E4 2209 45d8 9 101 8C60140B3533 6 http help adobe com en_US ActionScript 3 0_ProgrammingAS3 WS5b3ccc5 1 6d4fbf35 1e63e3d118a9b90204 7f9e html WSS5b3ccc5 16d4fbf351e63e3d1 18a9b90204 7 92 7 http livedocs adobe com flash 9 0 main wwhelp wwhimp common html wwhelp htm context LiveDocs_Parts amp file 00000040 html 8 http livedocs adobe com flash 9 0 main wwhelp wwhimpl js html wwhelp htm href Part _Programming AS3
449. org AudioVideo TT http www aristote asso fr Presentations SMIL 2003 P Michel Michel_all htm http livedocs adobe com flash 9 0 main 00000604 htm http tecfa unige ch guides flash ex component video intro flash cs3 video simple server caption2 html http www w3 org TR ttaf1 dfxp http www w3 org TR 2006 WD ttaf 1 dfxp 20060427 http audio video images indelv com timed text the basics html http livedocs adobe com flash 9 0 main 00000611 htm l Flash sound tutorial Draft Overview Learning goals Use sound attach sound to frames and button frames Edit the sound envelope with the Flash tool Load sound files with ActionScript Play sound with ActionScript both sound textures from the library and loaded sound files Prerequisites Flash CS6 desktop tutorial Flash drawing tutorial flash layers tutorial flash button tutorial Flash CS6 motion tweening tutorial or some other technique that uses the timeline Moving on The Flash article has a list of other tutorials Flash Video component tutorial Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Level Flash sound tutorial 139 It aims at beginners More advanced features and tricks are not explained here Learning materials Grab the various fla files from here http tecfa unige ch guides flash
450. orial is meant for Flash designers working with CS3 CS4 CS5 etc and are willing to learn some ActionScript in order to reuse Flint example code to create special effects Quality e useable but under progress To Do e Other examples The FIiNT particle system Flint is an open source project to create a versatile particle system in ActionScript 3 The aim is to create a system that handles the common functionality for all particle systems has methods for common particle behaviour and lets developers extend it easily with their own custom behaviours without needing to touch the core code 1 That may sound very technical and it actually is Such libraries are meant primarily for real ActionScript programmers However Flash designers with a little bit of ActionScript programming know how can also use such code In particular they simply may slightly adapt the excellent examples that are for download Flint is developed by Richard Lord 2 and is released under the free open source MIT licence BI pA Firstly have a loo at what this particle system can do Cool isn t it Download and install the Flint system Step 1 download e Get the swe Flash compiled movie clip from flintparticles org Uy As of oct 2009 Flint_2_1_2_swe zip P e Dezip the file Step 2 You may install it into the Flash Components directory e g for CS4 Vista e Close Flash Professional e g CS4 e Copy the directory that includes the files Flint2
451. ormats if it is installed on your computer Drawing fuzzy objects The basic principles for paint challenged people like me is the LA following a e Create a new layer It is usually a good policy to create a new gt layer for each drawing Do not worry about size and position at Cd this stage since you can later move the drawing around and resize it M e Zoom in like 200 e g with View gt Magnification a e Select merge mode from the Object Drawing tool and set the a5 brush tool to overpaint a PPR e Keep the painting as simple as possible 2 e Use large Pencils or brushes for starters then small ones to An apple tree drawn in merge mode work on borders if needed e Use the eraser to trim off strokes that went too far e Draw stuff that will go to the background first and then overpaint E g To the right is a simple apple tree with a green snake I later erased Flash drawing tutorial 29 Drawing animals and such m pm a 2E gt S A really ugly cat drawn mostly in object mode e Find a recipe to draw these e g on Google type how to draw a cat Then reproduce if you can e Rather use object mode and disable stroke since these models often ask you to overlay ovals Without stroke you may overlay various geometric shapes of the same color 1 E g here is a cat made as explained in Creature Features Alternatively you also can first draw the object with
452. orms allow to change the shape of an object in a more controlled way It works on both shapes and objects While this tool is an option of the free transform tool it actually behaves in a very different way Therefore consider it to be a different tool Let s now make a designer chair starting with a simple rectangle Step 1 Draw a rectangle e Do it with the rectangle tool Step 2 Go into envelope transform e Select the object first i e the rectangle e Click on the Free Transform Tool e Select the Envelope option see the screen capture below flash cs3 shaping free transform tool fla Transform a 3G BR d amp Scere 1 Envelope Transform with the Free transform tool Step 3 Transform e Drag any little square These are called distortion points e Once you start transforming you also get curve control handles the little circles You can turn these in order to smoothen out curves See the screendump just below Or you can drag them to add new distortion or combine both movements of course Flash object transform tutorial 164 Envelope transforming to make a designer chair More transforms with the Modify menu The modify menu includes a large palette of tools Most can be found in other places but some are unique Transform Tools in the Modify menu The Menu Modify gt Transform gives you the choice of several kinds of transformations e Sele
453. ors tutorial 175 In Flash there are three kinds of colors Normal colors solid e Gradients linear and radial Bitmaps Both RGB and HSB model is supported for colors See also the computer colors tutorial Tools overview Color related tools Flash CS6 has several color tools and controls In the tools panel e Paint bucket and ink buckets e Stroke color and fill color for most tools Select colors before you choose a tool to draw In the properties panel Stroke color and fill color Color panel e Color selection Swatches e Preset colors How to use the color selection popups When you select or change fill or stroke color a color popup swatches pane will pop up You then can select a color with the eye dropper tool or alternatively from any color in the Flash workspace You also can change alpha channel or type a 6 digit hexadecimal RGB Code see color panel explanation below How to use the color and the swatches panels We recommend to have the color panel docked on top right else get it with menu Window Color or SHIFT F9 In order to work with the color or the swatches panel select an object on the stage Flash colors tutorial 176 The Flash CS6 Color panel In the color panel you then can Select either stroke or fill for adjustments Select various colors depending on color type Change the alpha channel i e transparency Select the color type Solid linear or radial gradie
454. ory U7 References 1 http flintparticles org about 2 http bigroom co uk 3 http www opensource org licenses mit license php 4 http flintparticles org examples 5 http flint particle system googlecode com files Flint_2_1_2_swe zip 6 http flint particle system googlecode com files Flint_2_1_4_swe zip 7 http code google com p flint particle system downloads list 8 http flintparticles org tutorials snowfall 9 http www oman3d com tutorials flash video snowflakes php 11 http flintparticles org examples snowfall 12 http tecfa unige ch guides flash ex flint Snowfall html 13 http tecfa unige ch guides flash ex flint flint snowflakes html 14 http tecfa unige ch guides flash ex flint flint snowflakes fla 15 http tecfa unige ch guides flash ex4 flint flint snowflakes2 fla 16 http tecfa unige ch guides flash ex flint flint fire logo swf 17 http flintparticles org examples logofire 18 http tecfa unige ch guides flash ex flint flint fire logo htm 19 http tecfa unige ch guides flash ex flint flint firelogo fla FINT particle system 398 20 http tecfa unige ch guides flash ex flint flint blue fire logo html 21 http tecfa unige ch guides flash ex flint flint blue fire logo fla 22 http tecfa unige ch guides flash ex flint flint fire ad html 23 http tecfa unige ch guides flash ex flint flint fire ad fla 24 http flintparticles org documentat
455. ou want 3 transform the drawing into a symbol If you do not Flash will do it for you and not necessarily the way you like So even if Flash provides all sorts of help to unite the selected objects and to create layers for each symbol do not let Flash do that work for you To create a symbol which will be placed in the library and create a instance on the stage e In the layer with your drawings select all objects on the stage Then right click and Create Symbol Select Movie Clip because this type of symbol is the most powerful Flash CS6 motion tweening tutorial 83 e Make sure it is no unwanted object in the scene for this layer If you want to create a symbol from drawings that extend over many layers the procedure is the same just make sure that you only select wanted elements Step 2 Create the interpolation animation motion tween First select the object symbol instance on the stage Then do one of the following e Menu Insert gt Motion Tween e Right click Windows or Ctrl click Macintosh on the object or the current frame and choose Create Motion Tween In the following screenshot we show how to add a motion tween to an Raising Sun symbol of the Sun which is in the library E sn Right click on the sun then Create Motion Tween Flash now creates a motion tween span with an interpolation of 24 frames default Span refers to the range of the interpolation from t
456. ou you want to work with the source you can downloaded from the SVN repository Read the Revision control system tutorial if you don t know how to use these repositories http papervision3d googlecode com svn trunk as3 trunk Create a new directory somewhere go there then download On windows you can use a GUI client like under Linux go to the new directory and type subversion checkout http papervision3d googlecode com svn trunk as3 trunk You then should have a directory trunk with a sub directory structure like this bin build docs examples Sre svn CS3 CS4 setup e CS Flash professional must be able to find this library in a classpath Read Flash using ActionScript libraries tutorial if you want to learn more about this Otherwise just follow precisely these instructions e Open the File gt Publish Settings Flash tab e Then click on the Settings button next to the ActionScript version e Click on the target Browse to Path icon and select the src directory of the Papervison library in your computer E g I keep the subversion tree on my Linux machine but I copied the trunk directory to my laptop and renamed it I added this classpath SALONO YI CNST On your PC you may have something like that s flash pv3d trunk sre The only thing that really matters is that Flash can find the contents of the src directory Flash Papervision3D tutorial 400 Some basic concepts The coordinate sys
457. output pane that will pop up this addEvent Listener MouseEvent CLICK onMouseClickEvent Then make the callback function onMouseClickEvent e Event try Vi MaGace eyy trace gt gt 4 ype A event From Ys target name called on this name catch e Error Va Erce UlHiais Os OCCuUr recok Remove it once you are done or better just put comments around the code like this Uh above code here df I have to complete this function with some more useful infos at some point e See also Event 4 Adobe Below we summarize functionalities of the other button components More details will be added sometimes in the meanwhile please consult the official documentation Flash components overview 216 Various button components You can see a simple use of these in thedemo ey Button The Button component is a resizable rectangular button that a user can press with the mouse or the spacebar to initiate an action in the application You can add a custom icon to a Button You can also change the behavior of a Button from push to toggle A toggle Button stays pressed when clicked and returns to its up state when clicked again Adobe documentation 5 see above CheckBox A CheckBox is a square box that can be selected or deselected When it is selected a check mark appears in the box You can add a text label to a CheckBox and place it to the left right above o
458. own the animation we insert a keyframe about every 5 frames Step 1 We insert the letter H in frame 1 alternatively you may start in frame 5 i e the user won t see the H when the frame loads Anyhow later you always can add extra empty frames Steps 2 to 5 Now we repeat this procedure by adding new letters in new frames So first we will transform frame 5 into a new keyframe It is important to understand that there are two kinds of new keyframes 1 Blank ones that will clear the stage i e the objects will be gone That s not what we want here 2 Keyframes that carry forward contents of the keyframe before We will use this one The procedure is the following see the picture below Flash frame by frame animation tutorial 52 e Right click in a frame then select Insert Keyframe not insert blank keyframe Alternatively hit F6 i e use the Flash CS3 keyboard shortcutsshortcut newgradient fla Frames fla Untitled 1 R Create Motion Tween Create Shape Tween Insert Frame Remove Frames Insert Keyframe Insert Blank Kets Glear keyirame Convert to keyframes Convert to Blank Keyframes Cut Franies Copy Frames Paste Frames Glear Frames Select All Frames Copy Motion Copy Motion as ActionScript 3 0 Editing keyframe 5 Repeat this until you incrementally spelled out HELLO Step 6 Test if it works e Firstly you can simply move back and forth the playh
459. p edutechwiki unige ch mediawiki index php title File Sul image free_transform_tool png Source http edutechwiki unige ch mediawiki index php title File e Cs3_tool_object_draw png License unknown Contributors ion_tool png License unknown Contributors selection_tool png License unknown Contributors Free_transform_tool png License unknown Contributors image Gradient transform tool png Source http edutechwiki unige ch mediawiki index php title File Gradient_transform_tool png License unknown Contributors image Lasso tool png Source http edutechwiki unige ch mediawiki index php title File Lasso_tool png License unknown Contributors image LassoPolygon png Source http edutechwiki unige ch mediawiki index php title File LassoPolygon png License unknown Contributors image Pen tool png Source http edutechwiki unige ch mediawiki index php title File Pen_tool png License unknown Contributors image Line tool png Source http edutechwiki unige ch mediawiki index php title File Line_tool png License unknown Contributors image c3_tool_polystar png Source http edutechwiki unige ch mediawiki index php title File C3_tool_polystar png License unknown Contributors image cs3_tool_pencil png Source http edutechwiki unige ch mediawiki index php title File Cs3_tool_pencil png License unknown Contributors image cs3_tool_pencil_straight png Source http edutechwiki unige ch mediawiki index php title Fi
460. p gotoAndPlay j tojump toa frame and let it play until it runs into a stop The script then should look something like this I think I made it as simple as possible for non programmers Code inserted between is just comment i e information that Flash will not interpret but that is useful to you as a developer This will stop Flash from playing all the frames User must stay in Frame 1 SOON Ome Associate a different handler function for each button instance Syntax button_name addEventListener Event type function_name Lines below mean Tf the user clicks on the palmtree_btn with the mouse then the function clickHandler3 defined below will execute a home_btn addEventListener MouseEvent CLICK clickHandler1 lake_btn addEventListener MouseEvent CLICK clickHandler2 palmtree_btn addEventListener MouseEvent CLICK clickHandler3 sunrise _btn addEventListener MouseEvent CLICK clickHandler4 Each function defines where to move the playhead in the animation E g clickHandler2 will go to frame 3 and then stop we function clickHandlerl event MouseEvent gotoAndStop home function clickHandler2 event MouseEvent gotoAndStop lake function clickHandler3 event MouseEvent gotoAndStop palmtree This one does not stop it will play the animation function clickHandler4 event MouseEvent gotoAndPlay sunrise If it doesn t work
461. p title File image Rectangle tool png Source http edutechwiki unige ch mediawiki index php title File Rectal image No color tool png Source http edutechwiki unige ch mediawiki index php title File No_co image Brush tool png Source http edutechwiki unige ch mediawiki index p mediawiki index php title File i index php title Fi iawiki index php tit h mediawiki index p Flash cs4 docking color panel png License unknown Contributors e Flash cs4 docking library panel png License unknown Contributors e File Flash cs6 workspace iconized panels png License unknown php title File Flash cs4 dks workspace png License unknown Contributors p title File Flash cs6 stage resized png License unknown Contributors p title File Flash cs6 drawing tutorial workspace png png License unknown Pencil_tool png License unknown Contributors ngle_tool png License unknown Contributors jor_tool png License unknown Contributors ip title File Brush_tool png License unknown Contributors image flash cs6 drawing tutorial tools png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 drawing tutorial tools png License unknown Contributors image cs3_tool_object_draw png Source http edutechwiki unige ch mediawiki index php title Fi image Selection tool png Source http edutechwiki unige ch mediawiki index php title File Selecti image Subselection tool png Source htt
462. p title File Flash cs6 color full blue png License unknown Contributors image hue scale png Source http edutechwiki unige ch mediawiki index php title File Hue scale png License unknown Contributors image HSV color wheel png Source http edutechwiki unige ch mediawiki index php title File HS V color wheel png License unknown Contributors image flash cs6 color washedout blue png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 color washedout blue png License unknown Contributors image flash cs3 radial gradient transform jpg Source http edutechwiki unige ch medi image flash cs6 color panel gradients annotated png Source http edutechwiki unige c Contributors image Gradient_transform_tool png Source http edutechwiki unige ch mediawiki inde image flash cs6 radial gradient transform1 annotated png Source http edutechwi unknown Contributors image flash cs3 linear gradient transform jpg Source http edutechwiki unige ch medi awiki index php title File Flash cs3 radial gradient transform jpg License unknown Contributors h mediawiki index php title File Flash cs6 color panel gradients annotated png License unknown x php title File Gradient_transform_tool png License unknown Contributors i unige ch mediawiki index php title File Flash cs6 radial gradient transform1 annotated png License awiki index php title File Flash cs3 linear gradient transform jpg License unknow
463. path copy paste Use the Motion Editor Reverse start and end right click Adjusting the rough shape of the motion path with the selection tool Click on the selection tool Click on the object that is being animation e g the rocket Drag segments without selecting them Watch out for the moon cursor Fine tuning with the subselection tool Click on the Subselection tool To move a control point drag it with the Subselection tool To adjust the curve of the path around a control point drag the Bezier handles of the control point with the Subselection tool If the handles are not extended you can extend them by Alt dragging Windows or Option dragging Macintosh the control point To delete an Anchor point click on it with Delete Anchor Point tool that sits underneath the pen tool Most anchor points generated with Selection tool are so called smooth points To convert an anchor point click on it with Convert Anchor Point tool that sits underneath the pen tool in the tools panel The anchor changes to an angle point Pen Tool P LZ O Add Anchor Point Tool 20m0 QF Delete Anchor Point Tool E N Convert Anchor Point Tool C bs om wey m Locating the Delete Anchor point and convert anchor point tools A short definition of anchor points A smooth point smoothes two connected curves A corner point only lets you change one end Btw you also can use the subselection tool in the Mot
464. pictures it s a good idea to make them all the same size e g I made my pictures 640x480 If you work under windows simply use the MS Office Picture manager It s better to start with right small size since this will reduce the size of the Flash file you later will deliver e Then import these pictures to the library Menu File gt Import gt Import to Library Select all the pictures you would like to import then click OK Alternatively just drag the pictures into the library panel from Windows e Importing to the library will turn them into symbols That way we can later reuse them if we want to Step 2 Adjust the stage size e Create a new layer called Pictures In the first keyframe you may insert some text with the TextTool e g Picture show you can fix this later e Create a new keyframe in frame 2 hit F7 Drag a picture on the stage of frame 2 then make the stage as big at least as the picture You also can make the stage a big bigger and then select for instance a black background e To adjust the pictures position use the properties panel below i e set W and H to 0 else use the align panel Step 3 Put your pictures into different keyframes e Ifyou have 8 pictures you need to add 7 new keyframes e One way to do this is to put your cursor in frame 2 of the picture layer then hit F7 Insert new blank keyframe 7 times Then drag a picture into each of these keyframes and align them too as above e
465. play embedded movie clips Learn about how to use mouse and key press events Learn about some object properties you can easily change with a little ActionScript code Learn some ActionScript control statements if then else clause and assignments Learn how to play embedded Flash movie clips Learn how to use embedded Flash movie clips for multiple animations Prerequisites Flash CS6 desktop tutorial Flash drawing tutorial Flash button tutorial Flash component button tutorial Flash embedded movie clip tutorial Other recommended prior tutorials not necessary but can help Flash video component tutorial Flash sound tutorial ActionScript 3 event handling tutorial Moving on Flash drag and drop tutorial Flash games tutorial Flash ActionScript 3 overview The Flash tutorials index has a list of other tutorials Alternative versions ActionScript 3 interactive objects tutorial CS3 old version Level and target population It aims at Flash designers not beginning ActionScript 3 programmers although programmers can read this to get a feeling for object properties before digging into a real documentation like Adobe s Flash 9 reference manual BI Also some of the code should be rewritten a bit I skipped type declarations on purpose and should even rip off more These don t make sense for a few lines of code written by for non programmers The goal is to keep code as simple as possible I should at some point decide whethe
466. ple we added three buttons for video control e The PLAY button will move the playhead to frame 2 where the video starts e The Go to Book Scene button will move it to frame 230 e The Credits button will go to the very end The ActionScript code This will stop Flash from playing all the frames User must stay in Frame 1 Siro 9 Associate a handler function for each button instance btn_credits addEventListener MouseEvent CLICK clickHandler btn_play addEventListener MouseEvent CLICK clickHandler btn_book addEvent Listener MouseEvent CLICK clickHandler Instead of writing a function for each button we just create one In order to understand which button was clicked we ask from the SMON the label of the button event currentTarget label Then we gotoAndStop x to Frame 374 for Credits Or we can play the movie that sits in frame 2 Ai function clickHandler event MouseEvent void switch event currentTarget label case Credits gotoAndStop 609 break case PLAY gotoAndPlay 2 break CaserlGo Eo eBook scence gotoAndPlay 230 break This shows how to open an URL in a WebBrowser btn_edutech_wiki addEventListener MouseEvent CLICK GoToUrl Flash augmented video tutorial 279 function GoToUrl event MouseEvent void var url String http edutechwiki unige ch en Flash_video_component_tutorial var request URLRequest new URLRe
467. portrait was morphed into another Some objects were given shape hints Fla file flash cs3 shape picture morphing2 fla 12 Directory http tecfa unige ch guides flash ex shape tweening intro Shape tweens of motion tween elements A simple motion animation with 2 shape changing objects To use a shape tweened object in a motion tween animation you simply could save a shape tween as swf Flash and then import as movie But you also can draw everything in the same fla file using embedded movie clips as we have seen above using the simple Egg dragon animation The following example was made in Flash CS3 and used what is now called classic tweening and guided motion tweens Since CS4 the same result could be achieved by simpler normal motion tweens but the old method still works fine Step 1 Draw the object Flash shape tweening tutorial 104 e anything but preferably without strokes since shape tweens don t render these very well Step 2 Turn into movie symbol e Select the object e Right click gt Convert to Symbol e Select Movie clip Repeat this for the other objects you want to animate e g create a blue circle that represents a planet Convert to Symbol Name Blinking star Type Movie clip Registration 888 Cancel Graphic Advanced Convert an object to movie symbol bx Step 3 Edit the movie clip symbols e Double click on the instance of the symbol in the stage or the movi
468. properties Event Description Happens in Event property target activate Dispatched when Flash Player gains operating system focus EventDispatcher and becomes active added Dispatched when a display object is added to the display list DisplayObject addedToStage Dispatched when a display object is added to the on stage DisplayObject display list either directly or through the addition of a sub tree in which the display object is contained click Dispatched when a user presses and releases the main button InteractiveObject MouseEvent CLICK of the user s pointing device over the same InteractiveObject deactivate Dispatched when Flash Player loses operating system focus EventDispatcher and is becoming inactive doubleClick Dispatched when a user presses and releases the main button InteractiveObject MouseEvent DOUBLE_CLICK of a pointing device twice in rapid succession over the same InteractiveObject when that object s doubleClickEnabled flag is set to true enterFrame Dispatched when the playhead is entering a new frame Display Object focusIn Dispatched after a display object gains focus InteractiveObject FocusEvent FOCUS_IN ActionScript 3 event handling tutorial 359 focusOut Dispatched after a display object loses focus InteractiveObject FocusEvent FOCUS_OUT keyDown Dispatched when the user presses a key InteractiveObject Keyb
469. quest url try navigateToURL request _blank catch e Error trace Error occurred The embed in timeline option is probably only useful if you plan to play around with fine grained frame by frame jumping around or if you plan to add animations that synchronize with the video as described in the next example Otherwise it is better to use a external video with the video playback component as described in the Flash video component tutorial Results e flash cs6 video simple embedd html 1 e Source flash cs6 video simple embedd fla 2 e Directory http tecfa unige ch guides flash ex6 component video intro Note I noticed that when you import more than once a video file size will grow a lot Probably a side effect of the undo mechanism So do not do this If you notice this problem save the file with save as The new version will be ok Maybe there is another solution to trim down file size Flash augmented video tutorial 280 Enhanced video embedding into timeline Embedding video into the timeline makes sense IMHO if you are looking for an easy way to synchronize other animations with the video This technique requires no more additional ActionScript knowledge than you need for simple animation and navigation However embedded videos will make the fla and the resulting swf really huge Tools Library Project C
470. quires some XML Editing Read the Flash video captions tutorial e For more sophisticated interactions with a video you need to code with ActionScript as explained in the Flash augmented video tutorial The executive how to summary for simple video playbacks e If your video uses a format that is not flv f4v or mp4 of if you plan to reduce its size or trim it then prepare it first with the Adobe Media Encoder This tool is included in the Flash distribution It may differ a bit from the full CS6 version e Drag the FLVPlayBack Video Component to the stage Flash video component tutorial 238 e Open the component inspector panel Choose a skin user interface configuration and provide the file name or URL of the flv video Note In CS3 and CS4 only the Adobe flv format was supported Since Flash 10 CS5 Adobe provides the more efficient f4v format and also directly supports other formats for playback Using the Flash video component Using Flash CS6 and CS5 component is really easy e You can use mp4 videos without prior encoding to a Flash video format e All operations are centralized in the properties panel The only difficulties relate to file path operations correct paths and copying files In most cases you would have to adapt your video file i e at least make it smaller and cut of unwanted beginning and end Just below we explain the procedure for an mp4 flv or f4v video that already is ready for pr
471. r import org papervision3d view import org papervision3d events import org papervision3d core utils public class Simplepv3d extends MovieClip private var renderer BasicRenderEngine private var scene Scene3D private var my_cube Cube private var my_floor Cube private var camera Camera3D private var viewport Viewport3D Vie NILE called when This method with the same name as the class will be the class is instantiated when the thing loads public function Simplepv3d Flash Papervision3D tutorial 404 loaded bd Make sure we can see everything stage scaleMode noScale Build the scene aLialic SID 2 This will launch the loop function once a frame is fi te ad etaa icine Coe a fodic addEventListener Event ENTER_FRAM EI 7 toG 7 build the 3D scene public function init3D by pv3d of the cube Create viewport viewport new Viewport3D 0 0 true true addChild viewport Create a rendering engin renderer new BasicRenderEngine Create a 3D scene the scene property is defined scene new Scene3D Jf Toia Wail raace cine asic we Colors sor Gaeh aca var materials MaterialsList new MaterialsList front new ColorMaterial OxFF0000 back new ColorMaterial 0x0000FF right new ColorMaterial Ox00FFO0 left new ColorMaterial 0x000000 top new ColorMaterial OxFF0000 bottom new ColorMateri
472. r true object startDrag Flash drag and drop tutorial 325 function mouseUpHandler evt MouseEvent void stop all sounds SoundMixer stopAll var obj evt target obj dropTarget will give us the reference to the shape of the object over which we dropped the circle var target obj dropTarget If the target object exists the we ask the test_match function to compare moved obj and target where it was dropped if target null test_match target obj obj stopDrag function test_match target obj Py ieee aie Ghe penre mecah if dict target obj Li me Goe a Inalic WLES laaliegiaril 6 textField text Yes You got one applause play make the object transparent obj alpha 0 5 kill its event listeners object can t be moved anymore obj removeEvent Listener MouseEvent MOUSE_DOWN mouseDownHandler obj removeEventListener MouseEvent MOUSE_UP mouseUpHandler Test if we are done if hits max textField text Made it MOISIS jolLewy 0 5 fg else obj x Ori x Goje OLL We textField text Missed laugh play Flash drag and drop tutorial 326 Results e Look at the result P e Get the source from http tecfa unige ch guides flash ex drag and drop intro files flash cs3 drag and drop matching 3 Improvements to be made e Add a restart button e Rewrite this as an ActionScript
473. r I should remove all type declarations from the examples or consistently leave the ones that might be useful in order to receive compiler warnings Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for ActionScript 3 interactive objects tutorial 329 Learning materials Grab the various fla files from here http tecfa unige ch guides flash ex6 action script 3 intro Manipulating objects The principle of simple object manipulation is fairly simple change properties of a display object The tricky thing is to know what you can change on a given kind of object Some changes are easy to make others are really hard Typically most objects are non editable its component objects maybe are It s easy to change size and position of a display object i e operations you could do on grouped objects and symbol instances with the transform tool or the parameters panel Below we show a few little examples that demonstrate how to manipulate objects with mouse events see the ActionScript 3 event handling tutorial for more details All the objects on the stage e g black_cat are instances of movie clip symbols These are a kind of interactive object and react to mouse and keyboard events The kind of tricks will we show act on named instances movie clips MPTA SPLAFAYA U E
474. r below the CheckBox Adobe documentation 6 e Using the CheckBox 1 Adobe Using ActionScript 3 0 Components e Checkbox class ActionScript 3 0 Language and Components Reference RadioButton The RadioButton component lets you force a user to make a single choice within a set of choices This component must be used in a group of at least two RadioButton instances Only one member of the group can be selected at any given time Selecting one radio button in a group deselects the currently selected radio button in the group You set the groupName parameter to indicate which group a radio button belongs to Adobe documentation 9 e RadioButton H Adobe Using ActionScript 3 0 Components Number and text input TextArea The TextArea component is a wrapper for the native ActionScript TextField object You can use the TextArea component to display text and also to edit and receive text input if the editable property is true The component can display or receive multiple lines of text and wraps long lines of text if the wordWrap property is set to true The restrict property allows you to restrict the characters that a user can enter and maxChars allows you to specify the maximum number of characters that a user can enter If the text exceeds the horizontal or vertical boundaries of the text area horizontal and vertical scroll bars automatically appear unless their associated properties horizontalScrollPolicy and verticalScrol
475. r interaction with an object click on this instance open the parameters window and fill in label parameter This name must be legal e Start the label name with a letter e Do not use whitespaces or punctuation characters or dashes ActionScript for Flash designers All ActionScript goes to the timeline e Always put AS code into a separate layer e g call it Action e Note AS2 also would allow you to attach code to instances You can t do this Action script code extends to frames in the same way as drawings E g if you want the user to interact with buttons after the animation loads e Click on frame 1 of the Action layer e Hit F9 then code Code will only work within the frames the layer extends to So if your code is supposed to be valid throughout the animation e Go to the last frame in your timeline e Hit F5 Event registration For each event user action or something else you would like to intercept you must register a so called event listener function The syntax is the following addEvent Listener Type_of_event Name_of_event Name_of_function_YOU_define Example e Let s say you have a button instance In the parameters panel you named it hello_button ActionScript 3 event handling tutorial 356 e If you want to tell the button to watch out for user clicks then you have to write something like to register the event with a function see below So goto the ActionScript layer an
476. rame by frame animation works by displaying drawings after drawings at a rapid pace By default Flash CS6 will show 24 frames drawings by second You don t need to have a drawing in every frame i e a keyframe every five frames is good enough A keyframe is a frame that contains a picture or other object In the timeline a keyframe is indicated by a black dot Here are some useful shortcuts F6 Copy the graphics of the previous keyframe Insert Keyframe e F7 Inserts a blank keyframe e F5 Extends the drawing of the previous keyframe in the timeline up to this point Insert Frame Right click on a frame gives you more options e g destroy or empty a frame The procedure Create a new layer or reuse a layer Draw something for starters try a stick man Insert 3 5 empty frames Press F5 4 times Click on the last frame the white rectangle Press F6 Create a second keyframe with content identical to the first AU WN Slightly change the design of this new keyframe Repeat as desired ie 3 times F5 and F6 go to the end then change the drawing If your animation is complex using multiple layers In your timeline you should see something like e Ole oe oe oe oe dele o Now add a nice static background e Create at least one new layer and draw a picture such as a sky e Go up to the last frame of the animation and for each of these new layers press F5 You should see something like this the timel
477. rate layer e for each object you want to animate e for each script e for each sound e for each complex background drawing Use layer folders if you get too many layers Flash being organized 417 Names Always name things e Layers e Scenes e Keyframes into which users can navigation e Symbols in the library e Instances Use conventions for naming more later Scenes If you can divide an animation into scenes use different scenes e Name each scene Library Use folders e at least for complex projects Create your own external library e If you work on several projects copy your important artwork to a separate fla file e You can use your own fla file as library Menu File gt Import gt Open External library e Dock it next to the normal library Remove junk e Remove really useless stuff from the library of each project e Remove teen objects made by error but make sure that they are not used in an animation If they are break these apart insert the object as symbol in the library then rebuild your animation with these symbols Only then kill the tween Quality Even for small projects e Identify clear goals i e what the user should experience e Work with a simple but effective user centered design method e Make sure that he will be able to experience cognitive ergonomics e Make sure your application is usable e Make sure you understand what you did use explit names for instances li
478. re you will get a key Teachers pay more institutions can make deals that are more difficult to get Adobe Flash CS3 Professional was released in April 2007 CS4 Professional in October 2008 and CS5 in April 2010 CS4 adds inverse kinematics easier motion tweening i e object based animation finally and some basic support for 3D animations of 2D objects CS5 adds for example a physics engine e SWISH P An alternative set of commercial products to produce Flash Much cheaper and somewhat easier it seems but doesn t export to fla files so you can t import to the Adobe authoring tool See the Wikipedia 10 article e Salasaga 1 An free and OSS Integrated Development Environment for producing animated swf files similar to Adobe Captivate Goal is to create a free easy to use GUI authoring environment that helps you create visually impressive and actually useful learning material Example swf output here 121 Decompilers A decompiler can translate an swf to fla Useful if you want to learn not steal from examples on the web or if you lost by mistake your fla sources e Sothink decompiler Flash Decompiler 131 SWF Decompiler A SWF to FLA H e Flash Decompiler Trillix 16 e See also Flash Decompiler Trillix 17 strange website without any documentation Translators and common formats E g fla to html e Wallaby 18 Wallaby is the codename for an experimental technology that converts the artwork an
479. ready have an instance name Flashadds one when you apply the snippet Therefore do it yourself and before 2 Open the Code Snippets panel either by clicking on the icon on top of the actions panel or directly Window gt Code Snippets on the stage then double click the snippet you want to apply If you selected an object on the Stage Flash adds the snippet to the Actions panel in the frames containing the selected object and uses the object s instance name Flash actions frame tutorial 303 If you selected a Timeline frame Flash also inserts code as above to the actions layer of the selected frame 3 In the Actions panel view the newly added code and replace any necessary items according to the instructions at the top of the snippet Links e Working with ActionScript Adobe 2011 References 1 http help adobe com en_US flash cs using WS3e7c64e37a1d85e1e229 1 10db38dec34 7ffca html 2 http help adobe com en_US flash cs using WSd60f23 10762d6b883b 1 8f10cb 1 fel af6 7beba htm Flash datagrid component tutorial Draft This is part of the flash tutorials Introduction Learning goals e Learn how to fill the the DataGrid component with data Flash level e CS3 and ActionScript 3 Prerequisites e Flash components overview e To use the DataGrid component you should know some ActionScript e g from the ActionScript 3 interactive objects tutorial or the Flash drag and drop tutorial This includes
480. reak Apart e To convert an editable object or a shape or several of these into a non editable object select these and right click gt Create symbol e To convert a shape into a graphic object Modify gt Combine Objects gt Union Self revision example 1 weather animation Tasks Complete a weather animation by using the existing layers and the objects in the library You only need to add one extra motion guide layer to complete the tasks described below Download the fla file from here e flash cs3 cloud animation problem fla 1 Then look at the solution swf file e flash cs3 cloud animation solution html 2 Notes e All drawing objects you need are in the library and instances are on the stage too All layers are locked Unlock as needed e This animation has about 50 frames There is no need to go further but the animation layers are only defined for frame 1 I e it is up to you to add motion and shape tweens and insert a frame by frame animation Flash animation summary 122 e Clouds and the sun are not in the right start position when you open the fla file e This animation is not really professional We kept it as simple as possible 1 Cloud animation e At start clouds must be very small and then gradually move forward and become big Tip This is a motion tween animation with a shape transform of the cloud instance not a shape tween 2 Rain animation e Insert animated rain underneath a big
481. reen capture below e Get the edit toolbar Window gt Toolbars gt Edit bar This bar also will allow you to directly edit symbols you got in your library Onion skins You can display the path an object will take by clicking one of the onion skin buttons in the Controller toolbar This is handy if you have several objects that move Get the controller toolbar Window gt Toolbars gt Controller and then click on either the Onion Skin or the Onion Skin Outlines icon Flash classic motion tweening tutorial 71 W House q Objets D W Animation cat mig Ax w 3 1 12 0 fps amp Scene 1 oo workspace S amp 100 de Onion skins for the moving cat Grids and rules To achieve what we just did you don t need these But for more precise artwork you certainly will e Right click somewhere on the workarea and play with Rules Grids and Guides Rotating animations Instead of moving an object from point A to point B you also can rotate it around point A A good example would be hands in a clock Step 1 create the object to animate e Create a separate layer for the object you want to rotate e Draw the object and don t make any new keyframes yet e Transform it into a symbol right click and select graphic symbol Step2 move the center point e Then with the free transform tool move its center point somewhere else if you want E g to rotate an hour
482. reset and custom eases 15 CS6 Help PDF 17 MB 16 Ok reference but the above links are better for beginners retrieved Jan 2013 Flash Professional Drawing in Flash 71 retrieved Jan 2013 References 16 17 http tecfa unige ch guides flash ex4 motion tweening intro flash cs 4 motion tweening empty fla http tecfa unige ch guides flash ex4 motion tweening intro flash cs 4 motion tweening html http tecfa unige ch guides flash ex4 motion tweening intro flash cs 4 motion tweening fla http tecfa unige ch guides flash ex4 motion tweening intro flash cs 4 motion tweening adjusted html http tecfa unige ch guides flash ex4 motion tweening intro flash cs 4 motion tweening adjusted fla http tecfa unige ch guides flash ex6 motion tweening intro flash cs 6 motion tweening empty fla http tecfa unige ch guides flash ex6 motion tweening intro flash cs 6 motion tweening fla http tecfa unige ch guides flash ex6 motion tweening intro flash cs 6 motion tweening a clip html http tecfa unige ch guides flash ex6 motion tweening intro flash cs 6 motion tweening a clip fla http www adobe com devnet flasb articles animation_intro html http www adobe com devnet flash learning_guide animation part05 html http www adobe com devnet flash learning_guide animation part06 html http www adobe com devnet flash learning_guide animation part07 html http www adobe com devnet flash learning_guide animation part08 html http www adobe com devn
483. rial e Movie clips and instances that were imported as swf files Not really recommended e Compiled movie clips imported through the swc format The goal of having such embedded animations is to create animations of moving changing objects that are independent of the flow of the main timeline You may have seen such embedded animations in other tutorials e g in the Flash motion tweening tutorial The new thing is that you should learn how to play stop and make visible invisible these clips Flash embedded movie clip tutorial 107 Creation and manipulation of embedded movie clips Creation of an embedded movie clip Let s now look a how to create flash movie clips within flash files To create a new movie clip within a flash animation file do the following e Menu Insert gt New Symbol e Select Movie Clip and give a good name Alternatively you also can transform an existing graphic into a movie clip symbol e Draw an object on the stage e right click gt Create Movie Symbol Select Movie Clip Finally you also change the nature of symbols E g to transform a graphic symbol into a movie clip e Right click on the symbol in the library select symbol properties and change it This will make the the graphic symbol heaver e g it will add a timeline The reference and center points e Each movie clip has a Registration point i e it defines what the x and y coordinates mean for a given object e g upper left or mi
484. ributors image flash cs6 media encoder png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 media encoder png License unknown Contributors image flash cs6 media encoder export settings annotated png Source http edutechwi License unknown Contributors ki unige ch mediawiki index php title File Flash cs6 media encoder export settings annotated png image flash cs6 sound layers annotated png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 sound layers annotated png License unknown Contributors image flash cs3 sound layers png Source http edutechwiki unige ch mediawiki index p hp title File Flash cs3 sound layers png License unknown Contributors image flash cs6 sound edit annotated png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 sound edit annotated png License unknown Contributors image flash button sound png Source http edutechwiki unige ch mediawiki index php title File Flash button sound png License unknown Contributors image flash cs3 transformation tools png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 transformation tools png License unknown Contributors File Subselection_tool png Source http edutechwiki unige ch mediawiki index php title file erasor png Source http edutechwiki unige ch mediawiki index php title File Erasor File Subselection_tool png License unknown C
485. ributors image flash cs3 frames2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 frames2 png License unknown Contributors image flash cs3 select all frames png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 select all frames png License unknown Contributors Image Sources Licenses and Contributors 424 image flash cs3 shaking hellol png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 shaking hellol png License unknown Contributors image flash cs3 shaking hello2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 shaking hello2 png License unknown Contributors image flash cs3 rocket components png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 rocket components png License unknown Contributors image flash cs3 rocket components layers png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 rocket components layers png License unknown Contributors image flash cs3 rocket yellow flame png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 rocket yellow flame png License unknown Contributors image flash cs3 rocket frames png Source http edutechwiki unige ch mediawiki index php title File Flash cs3 rocket frames png License unknown Contributors image flash cs3 rocket symbol png Source http edutechwiki unige ch m
486. rieved 17 37 10 May 2010 UTC Set the source path for ActionScript 3 0 To set the document level source path 1 Select File gt Publish Settings and click Flash 2 Verify that ActionScript 3 0 is selected in the ActionScript Version pop up menu and click Settings Your Flash Player version must be set to Flash Player 9 or later to use ActionScript 3 0 3 Specify the frame where the class definition should reside in the Export Classes in Frame text field 4 Specify the Errors settings You can select Strict Mode and Warnings Mode Strict Mode reports compiler warnings as errors which means that compilation will not succeed if those types of errors exist Warnings Mode reports extra warnings that are useful for discovering incompatibilities when updating ActionScript 2 0 code to ActionScript 3 0 5 Optional Select Stage to automatically declare stage instances 6 Specify ActionScript 3 0 or ECMAScript as the dialect to use ActionScript 3 0 is recommended 7 To add paths to the source path list do any of the following e To add a folder to the source path click the Source path tab and then click the Browse To Path button ff browse to the folder to add and click OK e To add a new line to the Source path list click the Add New Path button Double click the new line type a relative or absolute path and click OK e To edit an existing Source path folder select the path in the Source path list click the Browse To Path b
487. ript term in the Actions panel in the Script pane To open the Help panel reference page for the selected item do one of the following e Press Fl e Right click the item and select View Help e Click Help above the Script pane Using code snippets The Code Snippets panel assists both non programmers and programmers to produce ActionScript code The former may learn some code or at least will make less mistakes and both can type less and work faster This feature only became available in CS5 Code snippets are ActionScript snippets for a variety of purposes e Write code that affects an object i e a symbol on the stage e Write code for time line navigation e Other The menu of available snippets is grouped in five categories e Actions various stuff most deal with manipulating movie clips e Timeline Navigation inserting stop gotoAndStop etc commands e Animation Same as actions i e change properties of a clip on the stage e Load and Unload e Audio and Video e Event handlers Adding major event handling code to a symbol both the event registration and a dummy function Flash actions frame tutorial 302 1 CODE SNIPPETS 3 a 4 v Actions 5 Click to Go to Web Page 3 t _ Custom Mouse Cursor a _ Drag and Drop 9 l A Play a Movie Clip 10 Stop a Movie Clip ii Click to Hide an Object fe _ Show an Object 14 _ Click to Position an Object 5 _ Click to Display a
488. rn how to use layers Flash CS level Flash CS3 CS6 Prerequisites Flash CS3 desktop tutorial or Flash CS4 desktop tutorial or Flash CS6 desktop tutorial It s probably a good idea to use a layout similar to the ones I suggest there You also may first look at the first part of the Flash drawing tutorial Next steps e One of the basic animation tutorials Quality and level Screen captures were made with CS3 but the overall logic is the same for CS4 to CS6 This text should technical people get going It s probably not good enough for beginners but may be used as handout in hands on class That is what Daniel K Schneider made it for It aims at beginners More advanced features and tricks are not explained here Introduction Layers help you deal with more complex Flash projects Working with layers has several advantages e You can draw and edit objects in one layer without affecting objects in another layer e You can lock layers to protect their embedded objects from unwanted editing e You can hide layers make them visible i e you can see their objects in the workspace or you can display just the outlines of their objects The layers tool is part of the Timeline panel Flash layers tutorial 34 Overview picture The layers tool is in the left part of the timeline Annotations in the following screen capture highlight a few functionality we will further explain below Hide unhide Click to lock unlock a lay
489. ro Quality and level This text should technical people get going It s probably not good enough for beginners but may be used as handout in hands on class That is what Daniel K Schneider made it for Screen captures were made with CS3 but the overall logic is the same for CS4 and CS5 Next steps e More about drawing Flash object transform tutorial and Flash arranging objects tutorial e Any other introductory tutorial indexed in the Flash article Alternative e Flash CS3 drawing tutorial Setting up the stage Besides choosing the right settings for publication Flash version with which we shall not deal here you should select the right size for your your stage i e the size of your future flash document You can do this either when you create a new file or later Defining document size Creating a new document Flash lets you create a new document from various templates File gt New Then choose from General or Templates These templates either just define the size of your stage or load half baked interactive applications that you will have to clip Ignore the latter for now e Size of the stage e Version of Flash e g Actionscript 2 or 3 or AIR for desktop mobile phone applications Flash drawing tutorial 19 e The Media Playback templates contain for example tools to make a slideshow Anyhow for learning about Flash s drawing feature don t worry about the template to choose from Just make sure that yo
490. rogram Name tutorial in order to learn how to compile AS code with CS3 component Assets EH DataGrid Here is the executive summary gt Properties x eisai aaa z Document Size _ 550 250pixels_ Background Framerate 12 fps 1 Add the DataGrid component to the Ft DataGridFil CS3 fla Publish Settings Player 9 ActionScript 3 0 Profile Default library Document dass DataGridFil g 2 Save this code as DataGridFill as in A Flash DataGrid with pure ActionScript in CS3 the same directory as your FLA file 3 Set the Document class in the FLA file to DataGridFill You can do this in the properties panel As you can in the screen capture to the right there is nothing on the stage nor in some frame The only object we need is the DataGrid component in the library You may have a look at the DataGridFill CS3 html 4 example now or open the thumbnail of the screen dump to the right Here is the ActionScript code It is quite similar to the AS code above except that we work with a class structure and that we also add a label on top of the data grid package Only works with CS3 i e the DataGridFill as file must be in the library hue 1 Add the DataGrid component to the library Pp 2 Save this code as DataGridFill as in the same directory as your FLA file Le 3 Set the Document class in the FLA file to DataGridFill import flash display Sprite import fl controls DataGrid siiieyera
491. rogramming Editors for ActionScript Flashdevelop 30 Free and open source tool that provides syntax support and an interface with the Flex compilers Some multi purpose editors like emacs also may support Actionscript 3 programming Adobe Flex Builder 77 a commercial Eclipse plugin from Adobe but that is free for education upon request Media for building your own scenes See clipart See texture Flash Extra Resources e Flash and AS3 links general e Flash and AS3 links tutorials e Flash and AS3 links documentation Flash and AS3 Books Reference Manuals and Cheatsheets e Flash and AS3 links toolkits AS 3 Toolkits Libraries Flash reusable components AS 3 reusable code etc References 1 https www hippostudios co 2 http greensock com gsap 3 http www microsoft con silverlight 4 http osflash org projects 5 http www adobe com products 6 http en wikipedia org wiki Gnash 7 http www adobe com products flash 8 http www adobe com education 9 http www swishzone com index php 10 http en wikipedia org wiki S WiSH_Max 11 http www salasaga org 12 http www salasaga org downloads alpha3 projects Installing_on_Ubuntu804 html 13 http www sothink com product flashdecompiler index htm 14 http www swf decompiler com 15 http www swf to fla com 16 http www eltima com products flashdecompiler 17 http www flash decompiler com 18
492. rojects Fix the size data_grid width 500 Set the height to the number of rows 1 for the header data_grid rowCount data_grid length 1 Position it at x 400 and y 50 data_grid move 10 70 Lf Isl ieizOIMnesl serodia abet Oya dara gric Mori wvomcalSeirolleolicy Serolleoliey ON 7 Flash datagrid component tutorial 309 Then add it to the stage addChild data_grid Notice see the Flex datagrid component tutorial for the Flex equivalent Data Grid level 1 Dynamic fill in We now shall see how to fill in a DataGrid with data from user interaction E g we built a simple application that let s the user select three colors from a list of buttons which then will show up in the Grid This is totally useless application but it allows to show the principle You may have a look at the data grid 1 5 example now or open the thumbnail of the screen dump to the right On the stage we have 6 buttons and they have instance names like red blue etc A dynamic data grid growing with user This time we call our data grid instance data_grid j i interaction data var data_grid DataGrid new DataGrid We firstly introduce a new way to define colums E g we want to distinguish between the short internal property name c1 and what the users will see 1st choice var coll DataGridColumn new DataGridColumn cl GOli maacemteard Wilsic Cliesiees ls
493. rols ColorPicker html 22 http livedocs adobe com flash 9 0 main 00000432 html 23 http livedocs adobe com flash 9 0 main 00000440 html wp125926 24 http livedocs adobe com flash 9 0 main 00000452 html 25 http livedocs adobe com flash 9 0 main 00000460 html 26 http livedocs adobe com flash 9 0 main 00000480 html 27 http livedocs adobe com flash 9 0 main 00000484 html 28 http livedocs adobe com flash 9 0 main 00000436 html 29 http livedocs adobe com flash 9 0 main 00000444 html 30 http livedocs adobe com flash 9 0 main 00000476 html 31 http www adobe com devnet flash quickstart tilelist_component_as3 32 http www adobe com cfusion exchange index cfm event productHome amp exc 2 amp loc en_us 33 http www adobe com devnet flash articles creating_as3_components html 34 http livedocs adobe com flash 9 0 main 35 http livedocs adobe com flash 9 0 main Part2_Using_AS3_Components_1 html 36 http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl core UIComponent html 37 http help adobe com en_US ActionScript 3 0_UsingComponentsAS3 WS5b3ccc516d4fbf351e63e3d118a9c65b32 7feb html WS5b3ccc516d4fbf351e63e3d118a9c65b32 7fc6 38 http www adobe com devnet flash quickstart getting_started_ui_components 39 http www adobe com devnet flash articles components_guide html 40 http www hotscripts com Flash Components index htmlFlash Components 41 http www adobe com cfusion e
494. rong choice and therefore we do not recommend this procedure This procedure will use the standard FLVPlayback component not the more versatile version 2 5 1 Import the video file e Menu File gt Import gt Import video Import Video X Select Video Where is your video file On your computer ony Browse for video file File path Browse C dks flash ex6 component video intro BFB BBC mp4 Load external video with playback component Selectthis Embed FLV in SWF and play in timeline port as mobile device video bundle NF Already deployed to a web server Flash Video Streaming Service or Flash Media Server URL Examples http mydomain com directory video flv rtmp mydomain com directory video xm Launch Adobe Media Encoder lt Back Importing a video file 2 Select the skin Flash video component tutorial 241 Skinning Minimum width 330 No minimum height URL Select the skin 3 Click next and adjust the parameters Using the Adobe Media Encoder CS6 Skin SkinUnderAll sw v Color i The video s skin determines the appearance and position of the play controls The easiest way to get video for Adobe Flash Professional up and running is to select one of the provided skins To create your own look for the play controls create a custom skin SWF select Custom in the Skin drop down box and enter the relative path
495. rough ActionScript coding Sizing components With the free transform tool or similar you can resize component instances e Just click on it on the stage and do it e Alternatively set the size through the parameters or properties panel In any case you do not need to fiddle with component internals Live preview If your component doesn t really show re enable live preview e Select Control gt Enable Live Preview tick the box The rest of this article briefly presents each UI component See also the Flash Video component tutorial which is in a separate article Working with the Actions Frame panel Flash components overview 215 Tip If your screen is large enough it s a good idea to drag out this panel to the Desktop do not let it touch Flash Then pin it down with the pin at the bottom This way you can move around in your frames and layers and still edit code More is needed here maybe I will write an ActionScript panel tutorial Understanding what is going on A beginner usually has trouble understanding why a script doesn t show any effect Errors are mostly likely in the data e g in the names you give to your component instances or fields One way to track a few things down is to print out messages Below is really ugly piece of code that attempts to print out information even if it doesn t exist Just insert it in the scripts layer after before your other code This will write messages to the
496. rtwork Flash frame by frame animation tutorial 62 Links Example materials Example files used including fla source can be found here e Get just the fla file if you want to make modifications The standard copyright of this wiki applies http tecfa unige ch guides flash ex6 frame by frame intro CS6 http tecfa unige ch guides flash ex frame by frame intro older CS3 Click on either an html or swf file to see References 16 http www adobe com devnet flash articles create first flash document html http tecfa unige ch guides flash ex6 frame by frame intro flash cs6 simple fbf htm http tecfa unige ch guides flash ex6 frame by frame intro flash cs6 simple fbf fla http tecfa unige ch guides flash ex6 frame by frame intro flash cs6 rocket html http tecfa unige ch guides flash ex6 frame by frame intro flash cs6 rocket fla http tecfa unige ch guides flash ex6 frame by frame intro flash cs6 rocket symbol html http tecfa unige ch guides flash ex6 frame by frame intro flash cs6 rocket symbol fla http tecfa unige ch guides flash ex6 frame by frame intro stickman cs6 html http tecfa unige ch guides flash ex6 frame by frame intro stickman cs6 fla http tecfa unige ch guides flash ex frame by frame intro flash cs3 frame by frame hello htm http tecfa unige ch guides flash ex frame by frame intro flash cs3 shaking hello html http tecfa unige ch guides flash ex frame by frame intro flash cs3
497. ry buttons png License unknown Contributors image flash cs6 button editing annotated png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 button editing annotated png License unknown Contributors image flash cs6 rocket launcher2 as3 png Source http edutechwiki unige ch mediawik i index php title File Flash cs6 rocket launcher2 as3 png License unknown Contributors Image Sources Licenses and Contributors 426 image flash cs6 rocket launcher as3 png Source http edutechwiki unige ch mediawiki index php title File Flash s6 rocket launcher as3 png License unknown Contributors image flash cs6 rocket launcher3 as3 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 rocket launcher3 as3 png License unknown Contributors Image flash cs6 rocket launcher3 as3 code snippets png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 rocket launcher3 as3 code snippets png License unknown Contributors Image flash cs6 simple menu site png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 simple menu site png License unknown Contributors image flash cs3 frames for pictures jpg Source http edutechwiki unige ch mediawiki index php title File Flash cs3 frames for pictures jpg License unknown Contributors image flash cs3 convert to button symbol png Source http edutechwiki unige ch mediawiki index php title File
498. s Copying layers e Open the fla file with the main timeline animation e SHIFT Click on each layer you want to copy e Right click and Copy layers e Go back to your clips fla file and right click on layer 1 and Paste Layers Copying frames more difficult e Open the fla file with the timeline based animation Let s assume the file is called anim fla e Select all frames in the layers you want Click on the first frame in the first layer then shift click on the last frame in the last layer you want e Right click somewhere in the timeline and select Copy frames e Now go back to your open clips fla file you still should be in symbol edit mode if you are not double click on the new symbol in the library e Click in frame 1 of layer 1 of the newly created movie clip symbol e Then Right click and Paste frames Voila you now have an embedded movie clip Go back to the scene Using a fla file as your own external assets library Once you have a set of embedded movie clips you could create a library for later reuse Step 1 Create a new fla file e Copy paste interesting movie clips and graphics whatever in the library of this fla file e Then save the file Step 2 import a fla file as external library Menu File gt Import gt Open external library Step 3 repeat e Each time you create something of interest that you often plan to use open the fla file file and copy paste again Flash embedded movie clip tutorial
499. s Learn how to create simple drag and drop programs with Flash 9 CS3 components Learn a little bit of Action Script 3 Prerequisites Flash CS3 desktop tutorial Flash drawing tutorial Flash layers tutorial flash button tutorial ActionScript 3 interactive objects tutorial Moving on The Flash article has a list of other tutorials Flash Video component tutorial Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Level It aims at beginners More advanced features and tricks are not explained here Learning materials Grab the various fla files from here http tecfa unige ch guides flash ex drag and drop intro Tip This page contains more code than screen dumps You should download the source code and play with it The executive summary Draw something on the canvas Transform it to a movie symbol buttons don t work Assign an instance name Instance_name startDrag Instance_name stopDrag Test if the object sits over another object target and then script some action Flash drag and drop tutorial 317 Introduction simple dragging code The screenshot shows a simple dragging application i e you can move around the circle and the rectangle Sol BY wo O T l Soteren f fla flash cs3 drag and drop intro fla
500. s x y z plus yaw around the y axis pitch around the x axis and roll around the z axis The rendering mechanism For objects to be seen they need to have a visible material be placed in the scene and rendered from a camera that looks at them An introductory example Some more explanation should be added sometimes For now all the help is in the code A simple CS3 timeline script If you look at pv3d examples on the web they all assume that you program with a class structure and external ActionScript files Here we first show how to use pv3d in a simple timeline script Of course it doesn t do anything of interest Look at this rotating cube BI To make this example work you need a correctly configured classpath as above The just copy paste this code into a frame of your time line e g frame 1 of layer 1 In the example we also added a layer with a background and a layer with a credits button You won t need these Probably some imports can be trimmed import flash display importe ic ILeisilay iaLibieeies 7 import flash display Stage import flash events Import Papervision3D import org papervision3d cameras Camera3D import org papervision3d scenes import org papervision3d objects import import import import import import import import org org org org ORG Once OCs org papervision3d papervision3d papervision3d papervision3d papervision3d pap
501. s above It will create a new object and respect the stacking i e as you see it on the stage e Intersect will only the take the common area e etc To break apart an object e Menu Modify gt Break Apart or Right click gt Break Apart or CTRL B The result will be shapes not the original objects Grouping Objects Use this feature if you plan to re edit hierarchies of grouped objects as you may have in complex drawings To group several objects e Select the objects you want to group e Hit CTRL g or menu Modify gt Group To ungroup an object e Select it e Hit CTRL SHIFT g or menu Modify gt UnGroup Note Flash will allow you to animate grouped objects in a motion tween but it will create tweening objects in the library like it does for simple editable objects You can t ungroup these anymore except by breaking them apart I suggest alwaysusing movie clip symbols for motion animation Tween objects are bad at this stage Flash arranging objects tutorial 174 Grouping Objects into a symbol e Select several objects e Right click gt Convert to Symbol or hit F8 Then you have to select the type e Graphic means a graphic i e an named group of objects e Button will create a button symbol you then can fine tune the button frames e Movie Clip will allow you to use the object for motion animation All these symbols can later be edited double click in the library or the stage to land in symbol editi
502. s iE Comecolls Semele import welsh oxy Teztkielid public class DataGridFill extends Sprite var data_grid DataGrid var textLabel TextField public function DataGridFill Greate itilen Flash datagrid component tutorial 308 createDataGrid Ey itibsSeagea J7 7 OQ Comoiliceese private function createTitle void esewes textLabel new TextField textLabel text DataGrid entirely made with AS3 through textLabel x 10 textLabel y 10 textLabel width 400 textLabel selectable false textLabel textColor OxFF0000 ado Chrslden text hbabal p private function createDataGrid void Create a a new instance of DataGrid and name it data_grid Descriptio Descriptio Descriptio Descriptio teaching data_grid new DataGrid data_grid addColumn Name data_grid addColumn License this is to make col 3 a bit bigger var colo data_grid addColumn Description colbLE minni Cltelae SO data_grid addItem Name Moodle License Free n Good for blended activity oriented teaching data_grid addItem Name ATutor License Free n Good for content oriented teaching data_grid addItem Name Blackboard License Commercial n Good for content and exercise oriented teaching data_grid addItem Name MediaWiki License GPL free n Good for writing to learn and technical mini p
503. s on class That is what Daniel K Schneider made it for It aims at beginners More advanced features and tricks are not explained here Materials fla file you can play with http tecfa unige ch guides flash ex6 motion tweening intro Alternative version Flash classic motion tweening tutorial CS3 style animation Flash CS4 motion tweening tutorial similar but less Introduction Wikipedia Oy retrieved May 28 2009 defines tweeing as Inbetweening or tweening is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image Inbetweens are the drawings between the keyframes which help to create the illusion of motion Inbetweening is a key process in all types of animation including computer animation In this tutorial we will introduce Flash CS4 CS5 CS6 motion interpolation See also Flash animation overview and the Flash classic motion tweening tutorial Built in motion tweens are applicable only to heavy Flash objects in particular instances of movie clip symbols and text fields Other types of objects e g drawings or shapes must first be wrapped into a symbol when interpolation is applied to them We suggest that you should not let Flash do this i e think ahead and and transform Flash CS6 motion tweening tutorial 82 drawings into symbols beforehand In Flash a symbol can be a graphic a button or movie clip created that
504. s the movie Can be used on the main timeline or on movie clip timelines Instructions 1 Replace the number 5 in the code below with the frame number you would like the playhead to move to when the symbol instance is clicked a button addEventListener MouseEvent CLICK f1_ClickToGoToAndStopAtFrame function f1l_ClickToGoToAndStopAtFrame event MouseEvent void gotoAndStop 5 e Replace the 5 by a 2 Step 6 Implement more navigation e You now could do the same in frames 2 3 etc e Select another keyframe e g 2 and repeat the above steps e You also could imagine implementing a back button Timeline Output Compiler Errors 6 Scene 1 Press again Button and ActionScript of keyframe 2 Warning Both the button and the ActionScript must be defined in same frame in order to work Moving on e If you want to play an animation sequence that is implemented in the main timeline i e not an embedded movie clip then select Click to Got to Frame and Play At the end of the the tweenspan insert a stop e Instead of using Go to frame X you also could instruct Flash to go to the next frame There are several timeline methods that you can explore Instead of completing the example with more details we will now show a more serious example that uses several layers and that also explains some more coding principles Flash component button tutorial 227 A menu based
505. s tutorial 332 Change size Changing size means to change width and height properties In the following example when you click on the interactive object a symbol instance that is called blue_cat it will double its size when you hold down the mouse button and go back to normal when you release it Note If you hold down the button and then move the mouse out still holding down and only then release the button the mouse will stay big since it never will catch the mouse up event 27 blue_cat addEvent Listener MouseEvent MOUSE_DOWN resizeCat function resizeCat event MouseEvent void blue_cat width blue_cat width 2 blue_cat height blue_cat height 2 blue_cat addEventListener MouseEvent MOUSE_UP resizeCat2 function resizeCat2 event MouseEvent void blue Cee wachein bluse Cer wichin 2p blue_cat height blue_cat height 2 This code may not exactly do what you want As we said if the user holds down the mouse button and moves it out the MOUSE_UP event will never happen i e the cat will grow permanently A better solution can be found in the example code that we included at the end of this section Visibility In the following example we will make a white cat invisible when you click on it Technical note It is still there but the user can t click on it white_cat addEventListener MouseEvent CLICK hideCat function hideCat event MouseEvent
506. s will lead to a jumpy animation It s a better idea to use frame 50 instead of frame 20 as end point e Drag the black dot in the animation layer from frame 20 to frame 50 Hold down the mouse on the black dot wait a bit and then drag For the other layers hit F5 in frame 50 same as above e You also can accelerate decelerate the cat s movement Play with the Ease option in the Properties panel Click on layer animation cat then select an empty between frame somewhere You now can make changes in the tweening properties e If your cat moves in front instead of behind objects then you can fix this by arranging the layers order Grab the objects layer in the timeline panel and move it before or after the animation layer i e pull it up or down Results e You can look at my published result flash cs3 motion tweening html 2 e You can grab all the files from this directory http tecfa unige ch guides flash ex motion tweening intro Adding more motion tweens We want the cat to move back where it came from Turning the cat In our case we have an animation from left to right and the cat will leave the stage Once it s off the stage we will turn it so that it can walk back e Next to frame 50 I made a third key frame Click on frame 51 and hit F6 e Then turn the cat Click on the cat and use menu Modify gt Transform gt Flip Horizontal Add a new motion tween You can add more motion tweens to an object simply
507. s work on so called editable objects e g it will not work with symbols or grouped objects You may shape tween e Drawing objects drawings made in object mode e Shapes drawings made in merge mode Also as in motion tweening the object s to be shaped must be in a separate layer Step Draw an object e We draw an oval with a thick border with the Oval tool and also set the background Then we center the oval in the stage To do so use the Align panel Window gt Align or hit Crtl K e Check to stage and click on the Align icons until you get it right Flash shape tweening tutorial 97 You should have something like this Tools Timeline Output Properties Rr eQWE AT LL ALa H e DE M S gt Q 7 PI i4 lt i gt i gt gt i flash cs6 shape tweening intro fla x 6 Scene 1 Drawing object 2 w v FILL AND STROKE 2 a im stoke TP 20 00 Style Solid A Scale Normal v O Hinting Cap S v Join A v Miter 3 00 A starting frame with an Oval to be morphed Step 2 Insert a new blank keyframe e Select about frame 20 and hit F7 or right click on frame 20 and select Insert Blank Keyframe Do not use Insert Frame Insert Keyframe F6 F7 will insert an empty new Keyframe Step 3 Add a new object to the new keyframe In this frame draw a new object i e we inserted a Polys
508. scrollable To do so we have to assign the column instance we want to change to a variable This way we can change its properties this is to make col 3 a bit bigger var col3 datagrid_AS addColumn Description col3 minWidth 350 Then we have to set the size for the whole Grid fy iiss the Siza datagrid_AS width 400 Set the height to the number of rows 1 for the header datagrid_AS rowCount datagrid_AS length 1 Finally we position this instance relative to the stage and put it on the stage for real l position it er x 300 anci y 70 datagrid_AS move 9000F Then add it to the stage addChild datagrid_AS Here is the complete code that also can be found in the fla source file below Import the necessary packages import fl controls DataGrid sitiyeres iil Comecolls Sewoilleoiliey Now create a a new instance of DataGrid and name it datagrid_AS var datagrid_AS DataGrid new DataGrid datagrid_AS addColumn Name datagrid_AS addColumn License this is to make col 3 a bit bigger Flash datagrid component tutorial 306 var col3 datagrid_AS addColumn Description cols minwiceha S505 datagrid_AS addItem Name Moodle License Free Description Good for blended activity oriented teaching datagrid_AS addItem Name ATutor License Free Description Good for content oriented teaching datagrid_AS addItem Name Blackboard
509. se down event cat addEventListener MouseEvent MOUSE_DOWN resizeCat function resizeCat event MouseEvent Gai wich blie car wieta 25 MouseEvent MOUSE_DOWN User holds mouse button down over the object MouseEvent MOUSE_UP User releases mouse button MouseEvent MOUSE_OUT User moves mouse away from the object MouseEvent MOUSE_WHEEL User turns mouse wheel MouseEvent MOUSE_OVER User moves mouse over the object MouseEvent CLICK User clicks on object Note Technically speaking these are actually event properties see the ActionScript 3 event handling tutorial if you want to know more ActionScript tricks Playing movie clips Movie clips symbols are embedded Flash animations e To edit Double click on the symbol on the stage to see the context or in the library to work with an empty background To create e CTRL F8 to create a new empty movie clip e Right click gt Create Movie Symbol Movie Clip on a graphic to transform it To play an stop a movie clip instance called movie_books movie_books stop movie_books play Making objects visible invisible works with any display object but you should work with an object that you can name i e a symbol instance e If you have an object called cat cat visible true cat visible false Moving position of an object works with any display object ActionScript 3 interactive objects t
510. sform panel Window gt Transform lets do you the default free transforms by entering property values for size rotate and skew e Hit CTRL ALT S to resize or rotate a selected object by entering a number The menu Modify gt Shape has a few tools to automatically adjust shape e Finally there are also transformation icons on the main toolbar which is not shown by default use Window gt Toolbars gt Main There is a rather confusing amount of tools Probably I forgot something Anyhow let s now look in detail at the major tools and strategies Path manipulation with the select tool The select tool amp strangely enough has two functions These are entirely different and may lead to confusion e Select objects e Distort objects i e make changes to paths that define lines and outlines The selection tool is the easiest way for distorting objects read on Default behaviour of the select tool If you click on an object like an oval or if you select it with a selection box you see this e A hooked cross icon e A white circle in the middle of the selected object or selected objects You then can reposition this drawing but that s not what we are interested in right now The only important thing you may remember is the following e when you see a cross it means that you successfully selected the object The white dot represents the center e g the point where an object will snap to a motion guide line Flash object
511. sion You should see something like this now In these ActionScript 3 0 settings you Publish Settings then have to add the name of the Current profile Default subdirectory where the flint system Formats Flash Hmm Verson Hash Plyer 9 sits Load order Bottom up Workspace amp ActionScript verson ActionScript 3 0 Important differences Options F Generate size report E Protect from import ActionScript 3 0 Settings Omit trace actions e If you are working with the source Permit debugging T Compress movie code version of Flint then open the Document class F Export hidden layers Export dasses in frame 1 E Export swe source path tab by default it s Errors V Strict Mode 7 warnings Mode Password open then click on the target Script time limit 15 seconds Stage 7 Automatically dedare stage instances Browse to Path icon and select the g Optimizer V Reduce file size and increase performance JPEG quality src directory of the FIiNT system 0 MP3 16 kbps Mono MP3 16 kbps Mono E Override sound settings Export device sounds Local playback security Access local files only 100 x Dialect ActionScript 3 0 Recommended Audio stream e If you work with the svc version Classpath S te coap2110 ex FLINT src Flint_2_0_0_b sr
512. size or color e Backtrack ctrl Z as soon as you see a tween object in your library None is needed Do not kill library objects except these bad tween objects after you saved the graphics inside e Ifyou completely messed up a layer lock all layers unlock the bad one and remove all unwanted stuff including bad tweens Then restart again with a library object or one from the backup folder e Use F4 to hide show panels if you need more drawing space You also can zoom in out Flash animation summary 125 Solution e flash cs3 tux manga solution fla 7 e Directory http tecfa unige ch guides flash ex animation summary Links e Open Clip Art Library 4 SVG clipart to play with but you will need to pass trough Illustrator to import to Flash e Example directory referenced in the various tutorials http tecfa unige ch guides flash ex References 1 http tecfa unige ch guides flash ex animation summary flash cs3 cloud animation problem fla 2 http tecfa unige ch guides flash ex animation summary flash cs3 cloud animation solution html 3 http tecfa unige ch guides flash ex animation summary flash cs3 cloud animation solution fla 4 http www openclipart org 5 http tecfa unige ch guides flash ex animation summary flash cs3 tux manga solution htm 6 http tecfa unige ch guides flash ex animation summary flash cs3 tux manga problem fla 7 http tecfa unige ch guides flash ex animation
513. so will copy necessary Component Assets in a folder Do not delete this folder e If you wish you can then change the components skins i e the graphical representation by editing these elements but make sure that you know what you do Parameters Each component has a series of parameters that you can modify in order to change the component s appearance and behavior The most important parameters can be simply changed through the Parameters panel menu Window gt Properties gt Parameters Framer Comeorent Jemehasized false S B oa fareal Din artaw selected fase Loo E _ fase 2 Flash CS3 Parameters panel button component shown Alternatively you also can use the Components Inspector Library Component Inspector x Components Z utton lt btn_rainbow gt 3 Button lt bin_rainb x Parameters Bindings Schema Name value emphasized false enabled true label Rainbow labelPlace right selected false toggle false visible true Flash CS3 Component inspector panel button component shown The components inspector gives extra information e g the name of the component used on top just below the tab Tip If the parameter or component inspect won t display the parameters click on an empty spot on the workspace and select the object again You likely selected more than one object Other parameters only can be changed th
514. sop Flash sound tutorial Source http edutechwiki unige ch mediawiki index php oldid 50703 Contributors Daniel K Schneider Eirini Karani Clipart Source http edutechwiki unige ch mediawiki index php oldid 42711 Contributors Daniel K Schneider Goor Widged Texture Source http edutechwiki unige ch mediawiki index php oldid 22259 Contributors Daniel K Schneider Juc Widged Flash object transform tutorial Source http edutechwiki unige ch mediawiki index php oldid 41926 Contributors Daniel K Schneider Flash arranging objects tutorial Source http edutechwiki unige ch mediawiki index php oldid 41927 Contributors Daniel K Schneider WikiSysop Flash colors tutorial Source http edutechwiki unige ch mediawiki index php oldid 41994 Contributors Daniel K Schneider Flash bitmap tracing tutorial Source http edutechwiki unige ch mediawiki index php oldid 34814 Contributors Daniel K Schneider WikiSysop Flash pen tutorial Source http edutechwiki unige ch mediawiki index php oldid 29467 Contributors Daniel K Schneider WikiSysop Flash button tutorial Source http edutechwiki unige ch mediawiki index php oldid 42045 Contributors Daniel K Schneider Flash components overview Source http edutechwiki unige ch mediawiki index php oldid 23608 Contributors Daniel K Schneider WikiSysop Flash component button tutorial Source http edutechwiki unige ch mediawiki index php oldid 49302 Contributors Daniel K Schneider Eirini K
515. space sansSerif serif monospaceSansSerif monospaceSerif proportionalSansSerif Duration Choose from of these formats OOROS 00 T hours minutes seconds milliseconds OSECAS minutes seconds milliseconds 10 seconds A Template and example Template using my mini DTD lt xml version 1 0 encoding UTF 8 gt SIDOCTIPE tt SYSTEM qi ee dtas lt tt xml lang en xmlns http www w3 org 2006 04 ttafl xmlns tts http www w3 org 2006 04 ttafl styling gt lt head gt lt styling gt lt styling gt lt head gt lt body gt lt div xml lang en gt Timed Text 137 lt p begin 1 dur 4 gt Let s start lt p gt lt d lt bod SeS iv gt y gt Example that works see Flash video component tutorial for more lt xml version 1 0 encoding UTF 8 gt lt DOCTYPE tt SYSTEM mini tt dtd gt lt tt xml lang en xmlns http www w3 org 2006 04 ttafl xmins tts http www w3 org 2006 04 ttafl styling gt lt head gt lt styl ing gt lt style id title tts backgroundColor transparent tts color red tts fontSize 24 gt lt sty lt head gt lt body gt ling gt lt div xml lang en gt lt p begin 0 dur 9 style title gt Daniel s Office lt p gt lt p begin 5 dur 4 gt My Palm Tree from NYC lt p gt lt p begin 10 dur 13 style title gt Books lt p gt lt p begin 11 dur 7 gt My Bookshelf lt p gt lt p begin 18 dur
516. stage and launch them But it only will do it 10 times We have a counter that will increase itt And then the test will check if i is still smaller than 10 before doing anything wie sii 4 The complete ActionScript code Flash using embedded movie clips tutorial 274 van al iO var kites Array new Array setInterval addKite 500 calls addKite every 0 5 seconds function addKite LE Cate d kites i new Kite_movie kites i scaleX Math random 0 5 0 5 min 50 max 100 kites i scaleY kites i scalex same size kites i x 400 movie clips start outside right hand kites i y Math random this height 240 100 kites i alpha Math random 0 8 0 2 random number between 60 and 100 alpha addChild kites i kites i play akra Get the fla code and play kites html P Source kites fla 6 Directory http tecfa unige ch guides flash ex6 embedded movie clips BI Exercise Make a snowflakes animation that goes from top to bottom Notice This program is not really elegant E g the addKite function will be called every 0 5 seconds Instead we could have used a timer that creates our N kites and then stops But this would have required more programming Trouble and controlling the main time line from an embedded clip Sometimes you need to control the main timeline from inside an embedded clip E g you may want move the user to ano
517. stage focus missile The event handler function has to decide what to do with which key Let s look at a clause of the switch statement like the following one case Keyboard LEFT missile x big_step break This means the following If the user presses the left arrow key then we will change the x horizontal position of the missile to x minus big_step set to 9 So if the missile was in position x 100 after a mouse press event it will be in position x 91 how many pixels to move left right var big_step 9 Put initial focus on missile Focus will change when user clicks on another object so don t stage focus missile missile addEventListener KeyboardEvent KEY_DOWN missile_control function missile control event KeyboardEvent void var key event keyCode switch key case Keyboard LEFT ActionScript 3 interactive objects tutorial 347 missile x big_step break case Keyboard RIGHT missile x big_step break case Keyboard UP ll missile y big_step break case Keyboard DOWN missile y big_step break Here is an alternative take of the same code The difference is that the code that will move the missile also will work for an other object e g a button The following fragment will ask from the event on which target e g the missile it was used and then move the target how many pixels to move left right var big_step 9
518. sult is really dreadful as you can see in the thumbnail to the right Source See the lion files in http tecfa unige ch guides flash ex tracing intro Vienna vectorized lions scene Flash bitmap tracing tutorial 188 Tracing parameters in Flash CS3 There exist four parameters in the tracing panel 1 Color threshold e When two pixels are compared if the difference in the RGB color values is less than the color threshold the two pixels are considered the same color As you increase the threshold value you decrease the number of colors If you want a minimum of colors try something like 255 or even more 2 Minimum area The number of surrounding pixels to consider when assigning a color to a pixel I e if you want few resulting vector shapes set this high 3 Curve fit e This will determine how smoothly outlines are drawn E g in a portrait you can make disappear things like standing our hair 4 Corner threshold Defines whether sharp edges are retained or smoothed out See this little gallery of my traced portrait 1 Typical settings you could use are a A trace that keeps most of the information many many graphic shapes in the result e Color threshold 10 minimum area 1 Curve Fit Pixels Corner threshold many corners b A sort of normal picture that gets most of the important outlines e Color threshold 30 and minimum area 30 corner threshold and curve fits normal c A few colors p
519. summary flash cs3 tux manga solution fla 126 Use of external media Flash video component tutorial Draft Introduction Video components are prebuilt interface elements widgets that will speed up video integration In particular the FLVPlayBack Video Component allows to render videos without any ActionScript programming It includes a nice choice of skins for user controls Videos also can be enhanced with captioning or they may interact with the rest of the animation This is discussed in the Flash augmented video tutorial Learning goals Learn how to encode flv and older f4v files Learn how to use the Flash 11 CS6 video component for simple video playback Prerequisites for the first part Flash CS6 desktop tutorial Flash drawing tutorial Flash component button tutorial Moving on Flash augmented video tutorial Flash video captions tutorial The Flash article has a list of other tutorials Quality This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Level It both aims at beginners FLV encoding using the video playback component and embedding a video in the timeline and intermediate Flash designers inserting captions and using cue points to trigger animations The executive summary about Flash Videos Flash has built in video management components e The FLVPlayBack Video
520. symbol draw a red ball and right click convert to A simple IK animation with symbol symbol Select Movie clip i i instances e Then adjust the instance on stage e g fix its color and size or add a bevel filter e Then create copies of this instance The fastest way is to hold down CTRL ALT and drag e Repeat this with a rounded rectangle In your library you now should have two Movie clip symbols e g Red ball and Red rectangle Step 2 move the symbols into an initial position e You could try to reproduce our example i e plan to create a simple chain animation e Make sure that all the symbols you need are on the stage in the same layer You won t be able to add additional symbols once you start defining the armature i e the bones structure that will connect these symbols e You could rotate objects either with the transform panel of the Free Transform tool Timeline Outpy Tools ROC OTN OS jr carvan LIP LOAF AYA Stop background d h al credits gt B you con Kig aver o meso a i lt 41 gt i gt gt i C G 41 items nica La ee E 6 Scene 1 2 NS i UIScrollBar E ikNode_0 A 1 we TextArea Movie Clip v Wa n et al Instance of Red rectangle Wap F Component Assets Button x7 POSITION AND SIZE X 232 05 Y 380 75 a op i a Align Info Transform s W 79 90 H 20 00 S Eoo E Bo wpe mam 3990000 ze ae lt 7 3D POSITION AND VIEW p Rotat
521. t 25 Papervision 3D Programming Tutorial Loading and Displaying a 3D Model 26 27 28 Papervision 3D Programming Tutorial Particle Systems with Flint Papervision 3D Programming Tutorial Modify Textures At Runtime Papervision 3D Programming Tutorial WOW Physics 29 Papervision 3D Programming Tutorial Shading 30 Papervision 3D Programming Tutorial Effects B1 Papervision 3D Programming Tutorial Animated Textures 82 Papervision 3D Programming Tutorial BitmapViewport 33 Papervision 3D Programing Tutorial Environment Mapping 34 35 36 Papervision 3D Programming Tutorial SkyBox Papervision 3D Programming Tutorial Animation Papervision 3D Programming Tutorial Texture Smoothing 37 Papervision 3D Programming Tutorial Mouse Selection 38 Papervision 3D Programming Tutorial Enhanced Fog 39 40 p Papervision 3D Programming Tutorial Terrain Papervision 3D Programming Tutorial Simple LO Flash Papervision3D tutorial 408 Papervision 3D Programming Tutorial Mesh Splitting 42 References 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 http code google com p papervision3d downloads list http papervision3d googlecode com files Papervision3D_2 1 932 swe http tecfa unige ch guides flash ex pv3d simple noclass pv3d html http tecfa unige ch guides flash ex
522. t 36 Includes several subclasses for example 1 BaseButton 37 2 TextArea 38 3 Stage 39 4 TextLine 40 41 n A U N e 2 SimpleButton 3 TextField 7 AVM1Movie 7 Bitmap 44 MorphShape 45 46 isa very light weight display object as opposed to a Sprite StaticText 47 Video 43 DAUN n a 3 Events The Event class is used as the base class for the creation of Event objects which are passed as parameters to event listeners when an event occurs Event is a direct child of the object There are 26 direct subclasses for Flash CS3 and Flex MXML has even more We only will show a few flash and fl events e Event 4 ComponentEvent 49 UIComponent class related KeyboardEvent 50 user presses key MetadataEve PH cue points and user metadata requests MotionEvent 52 related to fl motion Animator class MouseEvent 2 user does something with the mouse SliderEvent 53 related to the UI Slider component TimerEvent 54 related to Timer class a AURA WN Flash ActionScript 3 overview 366 8 VideoEvent P when the user plays a video Interfaces 1 IVPEvent 56 related to the FLV component When Flash executes The display list At at given time in your animation your Flash application contains a hierarchy of displayed objects the display list It contains all the visible elements and they fall in one of the following categories e
523. t F4 to display the panels again e Repeat this step until all of the symbols are linked Make sure to link these in the right order You will notice that Flash created an armature layer called Armature_1 or similar You can t edit objects that are part of the armature They have been copied to the armature layer and did become ikNodes You may change the name of that layer if you like and of course you can edit the graphics of a symbol double click LA Sa Tar Da TE TA GA Det Ta Des YB E TOY a Pat PACT Oe EETA TA EL Pa eT TB BY ex Ye Sk De Te ET A TTA A plaything Stop pl ZA koi kei background oe E Credits q ikNode_0 k Instance of Red rectangle wap aa A eal lt 7 POSITION AND SIZE X 233 45 Y 380 55 W 79 90 H 20 00 7 COLOR EFFECT Connected armature A note on terminology Each bone will get a name like ikBoneName1 that you can change and each connected symbol will get a name like ikNode1 that you also can change So in an IK armature we got bones and nodes The latter are made of your symbols Now you can play a bit e g drag the last child in the IK structure around and see if the joints are in the right place If not adjust see below Flash inverse kinematics tutorial 254 Adjustments Adjust center points e If the start of a bone is in the wrong place you can move the rotation point with the free transform tool
524. t MouseEvent void switch event currentTarget label case case case case case Rainbow gotoAndStop 2 break WE ECRAN gotoAndStop 3 break Bosses gotoAndStop 4 break My computers gotoAndStop 5 break Wigtac nktesum gotoAndStop 6 break Flash component button tutorial 230 Things you will have to change 1 The instance names of buttons e g btn_rainbow 2 The labels of the buttons e g Rainbow 3 The frame to jump to and play e g gotoAndStop 2 or gotoAndStop Paradise Let s explain the code a bit Code that is delimited by represents so called comments i e code that is not interpreted by Flash but that we inserted just to remember what our code is supposed to do It s always a good idea to document your code Stopping the animation from playing in frame one The stop instruction will stop Flash from playing all the frames i e we want the user to stay in Frame 1 after the file loads SIO ION Oey Associating buttons with an event handler function ActionScript programming will include two things 1 You must define which ActionScript function is executed when a user clicks on a button Think of a function as a named set of instructions that Flash will execute 2 You must define the ActionScript code for these functions Actually in this example we will use the same function for all our buttons a simpler but longer code example
525. t back and the other way round So black_cat_ori_pas true tests if the cat sits in its original position X and Y positions are defined with respect to the upper left corner E g if x is 100 and y is 100 the registered center point of the object is 100 pixels to the right and 100 pixels down The instruction x 100 x 100 means add 100 to x or subtract 100 from x So it s a shortcut for x x 100 i e new value of x becomes old value of x plus 100 Code above isn t of the kind that a real programmer would use Therefore if you are familiar with programming rather go for something like the following Beginners please ignore The following function would work with any object not just a given cat It will retrieve the symbol instance from the event object Original position of the object is remembered in the object itself using a new property we create ori_x and ori_y function movelt event MouseEvent void var obj event target initialize original values if necessary on first pass test if properties ori_ exist if not create them sled A Wioien sx sia GoT GoJo x GOI os GoJo y O17 WF obj buttonMode true for better UX this could be done before Is object in original position If so move close to friend if obj ori_x obj x obj x 200 Goje 2 00 else GOs ooj ori 25 obj y GOI Gri y ActionScript 3 interactive object
526. t div xml lang en gt lt p begin 0 dur 9 style title gt Daniel s Office lt p gt lt p begin 5 dur 4 gt My Palm Tree from NYC lt p gt lt p begin 10 dur 13 style title gt Books lt p gt lt p begin 11 dur 7 gt My Bookshelf lt p gt lt p begin 18 dur 5 gt My favorite Flash Drawing lt span tts color red gt Book lt span gt lt p gt lt p begin 24 dur 16 style title gt Computers lt p gt lt p begin 25 dur 5 gt My DELL XPS Laptop Flash machine lt p gt lt p begin 30 dur 5 gt My lt span tts backgroundColor yellow tts color black gt Ubuntu Linux workstation lt span gt lt p gt lt p begin 35 dur 5 gt lt span tts backgroundColor transparent gt lt span gt Working hard on Flash Tutorials using the Xemacs Editor lt p gt lt p begin 40 dur 4 gt The outside not my bike lt p gt lt div gt lt body gt SEES The result e flash cs3 video simple server caption2 html 4 e Source flash cs3 video simple server caption2 fla 5 XML file timed text2 xml e Directory http tecfa unige ch guides flash ex component video intro Adding captions with Cue Points There is an alternative method and the principle is obvious if you understood the principles explained in the flash augmented video tutorial 1 Add cue points to your video i e one for each moment where you plan to display some text 2 Use these cue points to display various
527. t import I suggest sending angry e mail to Adobes They do have the technology and it would be a matter of hours to implement this feature In the meantime use one of the many opensource convertors or the free Inkscape BI svG drawing program and then either save to wmf or emf You probably will loose some drawing elements If you only need to recover shapes as opposed to a full vector graphics structure Select an object in a drawing program such as Inksapce then copy it In Flash you then can use Edit gt Paste Special and select Picture Metafile This will paste the drawing as a group of shapes that you then can explode no lines Clipart 148 Using Fonts as ClipArt In many graphic tools you can select a font with pictures e g WebDings In Flash e Use text tool e In the properties panel set the character size to something big e g 200pt e Select a dings font e g Webdings Type a letter e Break it apart e Then menu Modify gt Unition Tip Under Windows select programs gt Accessories gt System Tools gt Character tables Explore a table If you like a letter art then select and copy paste to Flash google sketchup or any other tool that can handle text See webdings and wingdings for pictures of these fonts Clipart repositories We are mostly interested in vector formats Alternatively you may also search through other applications you installed on your computer e g Office products lik
528. t make it smaller and cut of unwanted beginning and end Just below we explain the procedure for an mp4 flv or f4v video that already is ready for production Step 1 Drag the component to the stage and save the file 1 Open the components panel Menu Window gt Components or CTRL F7 2 Drag FLPLayback 2 5 on the stage 3 Now save your Flash file else it will not work since Flash will not find the video file 4 Copy the video file into the same directory as your flash file unless you know how to deal with relative file paths something that you may have learned creating HTML pages using pictures Step 2 Configure the properties of the component 1 Select the component 2 Set the name of the video file with source in the Properties panel e g BFB BBC mp4 Make sure to shorten the file path e Bad C flash ex6 screenshots my_video mp4 e Good my_video mp4 3 Select an appropriate skin A skin will define what kinds of controls the user will have You also can make adjustements to the color 4 Keep the defaults for starters e g maintainAspectRation for starters That s it Flash video component tutorial 128 Compar tmon Library Project Componer MLT ps LODA AY or San 2m A E B FLVPlayback Ta E FLVPlayback 2 5 A FLvPlaybackCapti BackButton Propesties BufferingBar CaptionButton E D ForwardButton dnstance Name gt E Fu
529. t mode Alternatively you can click on the button in the stage This will show you the whole picture I prefer the first method for this job e Hit F6 three times to produce copies in the same positions e In Frame 2 and 3 make a copy of the shape then move it while the cursor is still on to an empty space e Modify gt Union this copy into a graphic e Make it a color with a low alpha e Move it over the picture shape but do not move the shape in any way This gets you a roll over region Results e You can look at my published resulthere 9 The source file flash cs3 image map fla 10 Flash button tutorial 210 e Directory http tecfa unige ch guides flash ex buttons intro Buttons with tweens inside If you like the idea of crazy buttons you really can use all your graphics and animation skills Buttons can include any kind of graphics including embedded movie clips In order to use animations within button symbol frames you simply create an embedded movie clip see Flash motion tweening tutorial or Flash embedded movie clip tutorial and then put it in one of the up over or down frames of the button symbol Results e You can look at my published result here 1 The source file flash cs3 button animation fla 12 e Directory http tecfa unige ch guides flash ex buttons intro ActionScript summary First create a layer in the timeline called Script or Action Use frames in th
530. t s best to turn all your animated objects into movie clips because you then can use Filters E g add a glow or a bevel to an object Procedure e Create a new layer e Draw something in a keyframe e g frame 1 of this new layer and make it a movie symbol right click gt Convert to Symbol e Create a new keyframe e g in frame 20 by hitting F6 this will copy the object from the previous frame F7 will create an empty keyframe and you will have to copy paste manually e Then move the object in the new frame to its new place e If you did things right you now have an object in a start keyframe and another in the end keyframe These objects should be instances of the same symbol in the library or better you can copy paste from frame too Flash animation summary 119 e Then click anywhere in the timeline between these 2 frames and right click gt Create Motion Tween Iron principles e Every animation object must be in its own layer and it must be a movie clip or another non editable object There must be nothing else in the same layer Unless you are an expert don t put more than one object into an animation layer and don t use simple graphics or shapes results are unpredictable i e you get a tween object in the library and you won t be able to work properly on your animation Tips e You can accelerate decelerate motion in the properties panel e Ifyou see a tween object in your library something went wrong
531. ta grid Flash datagrid component tutorial 314 FLA file data grid xml fla P A list of LMSs using attributes You first can have a look at the data grid xml attrs html 10 The AS code is exactly the same Only as you can see below the XML code uses attributes instead of elements We also changed the formatting of each entry a bit just to see if Adobe did a good job it did lt xml version 1 0 gt lt list gt lt entry Name Moodle Type LMSware License GPL Description Good for blended activity oriented learning gt lt entry Name PageFlakes Type Webtop service License Fr CO Use Description A minimal personal learning environment gt lt entry Name Drupaill Type Portalware License GPL Description Good for project oriented teaching gt lt entry Name Blackboard Type EMs License Commercial Description Good for grading exercises gt lt list gt We will not show the AS code here since it s the same except for the file name Source code Directory http tecfa unige ch guides flash ex data grid FLA file data grid xml attrs fla ee Moving on exercice Generate some XML data with PHP that comes from a database That s just a PHP coding exercise Interested in the Flex equivalent See the Flex datagrid component tutorial Editing DataGrids to do Links Directory http tecfa unige ch guides flash ex data grid FLA file data grid xml attrs
532. tar also in object mode e Select the Polystar tool It sits below the rectangle tool and you must hold down the mouse to get at it Then in the properties panel select from the Options pull down menu Star and Number of sides 9 e Then draw it by dragging out the mouse Flash shape tweening tutorial RR EQ OTN FP POF ADA JOM PolyStar Tool FILL AND STROKE Number of Sex Eien E a m Star point size 0 50 Stroke 20 00 style Solid rr 2 0k ances Scale Normal v O Hinting Cap S Join A v Miter 3 00 7 TOOL SETTINGS Configuring the polystar tool for a star with 9 points Step 4 Change its shape and align it with the oval and the stage Then make it a bit oval and adjust it more or less to the size of the oval e Change the width in the Properties panel or with the Free Transform tool e Align with the oval To see the oval at the same you can click on the Edit multiple frames icon in the Timeline control bar and drag the onion skin marker on top of the timeline all to the left e To achieve a perfect centering use the Align panel Read Flash arranging objects tutorial if needed You should achieve something like this Marrje oR Tash shape tweeningnto i A A polystar Step 5 Change colors of the polystar e Firstly untick the Edit multiple frames icon
533. tation point see the free transform tool below The nature of paths In order to better manipulate graphics you should understand how their shapes are defined by so called paths You can come back to this section later if you wish According to Adobe U7 you create a line called a path whenever you draw a line or shape When you draw a polygon it will be made up of one or more path A path is made up of one or more straight or curved segments The beginning and end of each segment is denoted by anchor points which work like pins holding a wire in place A path can be closed for example a circle or open with distinct endpoints for example a wavy line You change the shape of a path by dragging its anchor points Flash object transform tutorial 157 e by dragging the direction points at the end of direction lines that appear at anchor points e by dragging the path segment itself by adding or removing anchor points There are various occasions when you will have to work with path e g adjusting a drawing with the subselection tool envelope transforms inverse kinematics motion animation The graphical representation of an anchor point may differ from tool to tool and from Flash version to Flash version A Components of a path e A Selected solid endpoint e B Selected anchor point e C Unselected anchor point e D Curved path segment e E Direction point e F Direction line Paths can have
534. tcuts html http www myflashresource com index php s shortcut keys paar a meee hy Flash formats and objects overview 413 Flash formats and objects overview Draft Introduction This articles lists a few file formats and objects you can have on the stage or in the library and explains some of the terminology It is part of the Flash series It s purpose is to help you identify objects you are working with as a Flash designer We don t use the term object here in the sense of an ActionScript object Note This text is a rough draft Some things may be wrong or missing Flash related file formats and extensions Copyright notice The table below has been copied more or less as it from Wikipedia s Macromedia Flash U1 article on July 12 2007 Its contents are available under the GNU Free Documentation License 2I Ext Explanation _ swf swf files are completed compiled and published files that cannot be edited with Adobe Flash However many swf decompilers do exist 3 Attempting to import swf files using Flash allows it to retrieve some assets from the swf but not all fla fla files contain source material for the Flash application Flash authoring software can edit FLA files and compile them into swf files i p as files contain ActionScript source code i in simple source files FLA files can also contain Actionscript code directly but separate external as files often emerge for structural r
535. te e Since a texture file is just an image you also can use it as image of course then break it apart etc and apply a few transformations to it e g make it smaller or bigger e Bitmap fills can also be distorted with the Gradient Transform tool Texture repositories Most high quality textures are sold commercially but some commercial sites give out free samples You also may dig in your computer If you have games installed e g Neverwinter Nights there are directories with lots of textures but these are probably under copyright Unfortunately searching for free textures on the Internet is trouble Most of the time you stumble on sites that just contain links and adds But there are some excellent free and commercial resources Below a few that include free textures e A Z Textures P Free high resolution textures for commercial and non commercial use One Odd Dude Free textures 4 e The Fat Strawberry 5 LinkWare i e you must provide a link to this site if you use a texture Free stuff from textureworks com e KTN3D Large choice Free for none commercial use e 2dvalley com 8 Smaller collection of free textures e 2textured com P Large choice no copyright indication Free3DTextures com l Large choice of free textures Texture 152 Pixeldecor HH Tapestry like textures Free only for desktop use Freetextures from m3corp 12 but too much publicity to cope with Free Textures created for El
536. te several kinds of animations and associated special effects To create animations there are several options 1 Frame by frame animation Frame by frame animation is an ancient technique used for cartoons This leads to precise results but is time consuming since you will have to draw each picture See the Flash frame by frame animation tutorial 2 Motion tweening with the CS Flash authoring interfaces Wikipedia Oy retrieved 20 45 7 August 2007 MEST defines Tweening short for in betweening as the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image Inbetweens are the drawings between the keyframes which help to create the illusion of motion Tweening is a key process in all types of Flash animation overview 38 animation including computer animation Sophisticated animation software enables one to identify specific objects in an image and define how they should move and change during the tweening process Software may be used to manually render or adjust transitional frames by hand or use to automatically render transitional frames using interpolation of graphic parameters In other contexts one uses also morphing E g PCMag 2 retrieved 20 45 7 August 2007 MEST defines tweening as An animation technique that based on starting and ending shapes creates the necessary in between frames See morphing In CS4 CS5 C
537. tem An object s position in Papervision is defined by x y and z and pitch yaw roll In addition it can be scaled or otherwise transformed Coordinates in 3D systems are defined as follows Coordinates in 3D vector graphics Papervision positions in space are defined with these x y z coordinates e x axis Width i e left to right e y axis Height i e down to up e z axis Depth i e close forward to far backward z axis comes out of the screen In most other systems e g X3D the z axis is inverted e z axis Depth i e close forward to far backward z axis goes into the screen You can picture the normal 3D coordinate system with the right hand rule x is your thumb y the index finger and z the middle finger The right hand rule in X3D vector graphics you have to rotate your hand forward for Papervision or think of a left hand system Orientation of an object is defined by yaw pitch and roll Imagine what a ship can do Flash Papervision3D tutorial 401 e Yaw is left right orientation Imagine turning your head or your body around to look at something The ship can t hold its track e Pitch is backwards forwards up down orientation The ship goes straight into big waves e Roll is left right up down orientation The ship is hit on the side by big waves Therefore in 3 D graphics there are six degrees of freedom 3 position
538. tem data gotoAndStop destination menu_CB selectedIndex 1 Tip Positioning the box is not that hard Just turn on the Rulers Right click gt Rulers Working with external other components Firstly don t install anything from a website you don t trust MXP files An MXP file is a component file format that is used in Adobe Exchange To install these simply doubleclick on it and it will launch the extensions manager program which in turn will then install either swc component s or a fla libraray This also may happen if you download it Adobe Exchange Is a website that offers components under all sorts of licensing schemes Unfortunately you have to click on each title to figure out what version of Flash it supports if it s crippleware of really free etc Don t download without reading the description first e You can search browse by categories and list according to various criteria e At the same time you may filter by license type Link Adobe Flash Exchange 32 SWC components Components can be distributed as swe files A swc component is a compiled movie clip that you can t edit You still may edit its properties They publish faster than fla component Installing other components in your system You may find or mostly buy other ActionScript components on the Internet or through Adobe s website You just can open a component file but then it will not permanently be in your System To ma
539. tener MouseEvent MOUSE_DOWN mouseDownHandler red_btn addEventListener MouseEvent MOUSE_UP mouseUpHandler Define a mouse down handler user is dragging Flash drag and drop tutorial 318 function mouseDownHandler evt MouseEvent void var object evt target we should limit dragging to the area inside the canvas object startDrag function mouseUpHandler evt MouseEvent void var obj evt target obj stopDrag Results e Admire the result flash cs3 drag and drop intro html Uy e Get the source from http tecfa unige ch guides flash ex drag and drop intro files flash cs3 drag and drop intro Drag and drop over another object The goals is to write a little Flash application that will tell the user whether he correctly dragged and dropped an object over another one Step 1 Start from the file above e Te we want to have the user drag the red circle over the blue rectangle Step 2 Add a text box This textbox should initially display instruction then display feedback made it and missed e Use the Textool in the tools panel to enter the text e Then in the properties panel change the type to Dynamic Text a a ee ee ae f Try to drag and drop the red circle over the blue recatangle i fl roperties x Fiters_ Behaviors Stings Parameters 2 E B 7 Dynamic Text z A Verdana T textfield N O
540. th the e You may extend the first frame to remain stable for a while so that users can see the original Then you could add a stop Q in the Last Frame Hit F9 and type stop e This will stop the animation See the Flash button tutorial for more about ActionScript Of course this is really ugly Tracing a bitmap with Illustrator Step Trace the bitmap Illustrator CS3 has more sophisticated bitmaps tracing features Here is a very short example that includes a shape tween e Open the picture in Illustrator e Select it e Now you will have a Live Trace button on the control panel on top e Next to it is a little pulldown menu from which you can select various options for a portrait you may choose Color 16 Flash bitmap tracing tutorial 190 Type Select Filter Effect View Window Help alljpg RGB PPI 72 Embed Edit Original Live Trace Mask Opacity 100 istom Default Simple Trace Color 6 Color 16 Photo Low Fidelity Photo High Fidelity Grayscale Hand Drawn Sketch Detailed Illustration Comic Art Technical Drawing Black and White Logo One Color Logo Inked Drawing Lettering Tracing Options Live tracing with IlustratorCS3 Once you hit the trace button the controls on top will change and you can play with all sorts tracing methods and parameters le Edit Object Type Select Filter Effect View Window Help ing Preset custom z E Max Colors 16 M
541. that you would like to move Convert to Symbol convert a select object to a symbol around in your library E g the library of the cat example we will build now contains this H u ce xi Ubrary x components Component Inspector l v 6 EET fash cs3 motion tweening fla 7 E Sitems Type Use Count Linkage Apple tree Graphic 3 7 E cat Graphic cat2 Graphic E Fir tree Graphic E house Graphic Name maloj Hw njw Library items only graphic symbols Use of layers You must use a different layer for each separate animation If you plan to animate several of your objects there is a practical shortcut to distribute each object to a new layer 1 Select objects you want to distribute into layers e g with right click gt select all or shift click on each object 2 Then Modify gt Timeline gt Distribute to layers 3 Finally rename the layers in order to help you find things Motion tweens within movie clips Instead of using the main timeline we always recommend to consider creating animations within movie symbols This way you can easily reuse these animations in other Flash applications or play several animations at the same time E g you would have structure like this Main timeline no animation Animation_clip a movie clip with its own timeline Flash classic motion tweening tutorial 65 Animated_object e g a motion tween in a layer of Animation_clip Animation o
542. the curves Direction points and direction lines After selecting an anchor point left direction lines appear on any curved segments connected by the anchor point right A smooth point always has two direction lines which move together as a single straight unit When you move a direction line on a smooth point the curved segments on both sides of the point are adjusted simultaneously maintaining a continuous curve at that anchor point In comparison a corner point can have two one or no direction lines depending on whether it joins two one or no curved segments respectively Corner point direction lines maintain the corner by using different angles When you move a direction line on a corner point only the curve on the same side of the point as that direction line is adjusted Adjusting direction lines on a smooth point left and a corner point right Direction lines are always tangent to perpendicular to the radius of the curve at the anchor points The angle of each direction line determines the slope of the curve and the length of each direction line determines the height or depth of the curve Moving and resizing direction lines changes the slope of curves Flash object transform tutorial 159 Transforming anchor points There are shortcuts but unless you draw often we suggest to use the tools hidden underneath the Pen tool SS oy A Pen Tool P Vi Add Anchor Point T
543. the first frame of the scenario and the frame rate is 24 frames per second the span will contain 24 frames If the original object was present in more than one adjacent frames the span of the interpolation will spread from first to last frame Step 4 Adjust the length and extend the other layers To adjust the duration Drag either end of the tween span in order to shorten or to lengthen the span You also can move the span to the right or left Before doing so we advise you to adjust the other layers to the same length otherwise the screen does not display background A simple method Select a layer with a background click in the last frame eg 24 and press F5 F5 is a shortcut to insert a static frame ie a frame without drawing In other words a static frame simply extends the duration of the first found keyframe left If you see white in a layer this means that no image will appear See also the screenshot for step 6 which shows an animation with 2 layers for the background Hills and Sky and a layer to interpolation Sun Step 6 Adjust the path Now you can change the motion path using two methods e Firstly you can add keyframes that define intermediate positions Select a frame then drag the object E g you could start by adding one in the middle A little diamond in the tween layer indicates a keyframe The motion path will change accordingly Then you also can directly make changes to the motion path graph
544. the object transparent Flash drag and drop tutorial 321 obj alpha 0 5 kill its event listeners object can t be moved anymore T obj removeEventListener MouseEvent MOUSE_DOWN mouseDownHandler EJ obj removeEventListener MouseEvent MOUSE_UP mouseUpHandler V Teese ih wa are cone if hits 4 cEGxtE elle rekt Mace iw ls else CSM Leelee Wiilssiecl g We Results Look at the result B e Get the source from http tecfa unige ch guides flash ex drag and drop intro files flash cs3 drag and drop matching Drag and match learning application better Instead of writing an application just for four matching pairs we can write code that is more general This code only needs slight modifications to adapt to other named instances and text boxes and you can insert as little many pairs you like Just make sure that the target textboxes are in the background Btw this is the first AS3 code that includes a tiny bit of programming I ever made I probably also should type variables but then I am not a real programmer var dict new Dictionary Kd START USER Config Insert as many dict text_box movie statements you like Replace text_box by the name of a matching dynamic text_box Ui movie by the name of movie instances users can move around Cie x l ear dict box_d dog Cnet boxer gt rocket dict box_b
545. the pen or the line tool then the lines you draw are called strokes e Wen you crate graphics with the rectangle LJ oval etc tools you will by default both get strokes and fills The insides of these drawing objects are fills and the outlines are strokes i e both have various forms of color You may choose to remove either stroke or fill using the J no color icon in a color selection tool When you use the paint tool amp then you create fills not strokes Flash drawing tutorial 21 Colors There are several types of colors e None You may choose to draw without fill or stroke e Solid Standard colors e Linear Gradient color changes that go from one side to another e Radial Gradient color changes that goes from inside out e Bitmap You can paint with an imported bitmap This is particular useful with textures E g to draw floors walls or outdoors scenes with repetitive tiles To select a color type there is a pull down menu in the color panel e Read the Flash colors tutorial if you want to know more colors and gradients The main tools panel The main tools panel contains the major drawing tools We suggest to leave this panel docked in the upper left side since it s frequently used But depending on your screen size you can display it either grouped as shown or as a long column try the essentials workspace layout The main tools panel organizes tools by different categories First selection a
546. ther frame as a result of some interaction To do so you will have to tell the script inside a clip that you refer to an object or a method that is directly attached to the main timeline Use something like MovieClip root yourbutton visible true MovieClip root gotoAndPlay activity_1 MovieClip root in front of a property or a method basically tells Flash to go and look in the main time line instead of the current embedded clip In more technical terms you ll have to cast the root property into a movie clip root is of type DisplayObject and parent is of type DisplayObjectContainer Neither of those have multiple frames so that s why timeline control methods won t work on them All you need to do is cast root or parent to MovieClip a subclass of both of those classes AS3 Main Timeline Control From Inside a Movie Clip retrieved June 2007 7 This is vital know how for developing games and interactive educational applications where the main time line is usually just used to define various sub games activities or maybe different states When you combine main timeline navigation and embedded clips you often will get error messages like TypeError 1009 Cannot access a property or method of a null object referenc at try_fla MainTimeline fl_MouseOverHandler_2 Firstly allow debugging in the settings This will give you some additional information Flash using embedded movie clips tutorial 275
547. tinput H TileList UlLoader A UlScrollBar E Video E FLyPlayback FLyPlaybackCaptioning BackButton BufferingBar CaptionButton D ForwardButton FullScreenButton MuteButton PauseButton PlayButton PlayPauseButton SeekBar StopButton VolumeBar ol 39 TE 2 fl E a Flash CS3 component library Flash components overview 213 Level It aims at beginners More advanced features and tricks are not explained here Learning materials e There is component demo 1 you can look at source file is flash cs3 components overview fla I in progress e Grab the various fla files from here http tecfa unige ch guides flash ex components intro The executive summary Flash has a few built in components called widgets or gadgets in other contexts and that will allow to you to build an interactive environment more quickly than by coding all by yourself However making good use of most of these components still requires basic knowledge of ActionScript In this article we will try to show a few design patterns that you can copy and adapt The executive summary e Open the component library Window gt Components or CTRL F7 e Drag a component to the stage Fill in some parameters e Add some ActionScript code that will handle user action events ActionScript AS2 vs ActionScript AS3 e In CS3 a component library is available for both versions e The AS3 one is sma
548. tion double click on it to enter symbol edit mode and copy paste the graphics Then go back to the main timeline Then simply follow the same procedure as for the motion animation e Make a drawing in one frame e Hit F6 in a distant frame and modify the shape simple drawing in the new frame e Click in a empty frame in between and add the shape tween Tip To morph simple graphic objects you may want to take the stroke away change its color to none e Do not try to create a motion animation with shape tweening e Instead try a motion tween and modify the shape You can in the properties panel distort symbols and change their tint Or better create a shape tween within the movie clip symbol e Create several layers if you work with several shapes Then you also can use shape hints e To morph bitmaps e g jpg photographs you will have to trace them see the Flash bitmap tracing tutorial If you are lost go back to the Flash shape tweening tutorial Manipulation of frames e To extend a drawing layer e g a background so that it displays until the end of an animation defined in an other layer Click on the wanted end frame position and hit F5 or right click gt Insert Frame To move a keyframe click on it cursor must now include a white rectangle and drag it left or right e To kill frames select all the frames you want click on one end then SHIFT click on the other end Then use right click gt Remove Fra
549. tion menu to visible all the time For each button e Drag a button from the buttons library to the stage e Change the label Double click on the button then unlock the text layer then change it e Give it also an instance name in the parameters panel e g sunrise_btn e Once you are done use the align tool to distribute and align them correctly Step 4 name your frames You may not have heard of named frames so far but they are quite practical and using named frames is good development policy If you use names for frames you later can move them around Also it is easier to remember names To name a frame e Click in each frame that marks the start of a page in your flash site i e where buttons will lead to and insert a name in the properties inspector at the bottom Taine Output Compiler Gras 2 Frome No sound selected Naming Frames in CS6 Step 5 Verify Flash button tutorial 204 e Each button instance must have name e Each frame which you want the user to reach with a button click should have a name Step 6 Create the script e Create a new layer and call it scripts for example e Edit frame 1 of this layer scripts Hit F9 e Extend this layer if needed e g hit F5 in frame 8 else you won t see your buttons e Insert Action Script for each button as below We basically use two actions gotoAndStop your_frame_name to jump to a frame and sto
550. tions and point to a forth one e Creating a most simple DataGrid with Flash CS3 by dragging a component to the stage e Doing it with CS3 but using only ActionScript 3 r 7 Doing it with AS3 only through CS3 Tyoisimple Flash DaiaGrids e Doing it with Flex see the Flex datagrid component tutorial Adding code to a DataGrid instance Step 1 Make a DataGrid instance e Open the components library e g hit CTRL F7 e Drag a DataGrid to the stage e Give it an instance name e g datagrid You now will see an empty square on the stage without any visual appeal Step 2 Resize In the properties panel make it a big bigger e g w 300 and H 200 Step 3 Fill in some data with ActionScript If your instance name is datagrid then hit F9 in frame or wherever you want it to be and copy paste this code The result is a three column table with headers datagrid addColumn Name datagrid addColumn License datagrid addColumn Description datagrid addItem Name Moodle License GPL free Description Good for blended activity oriented teaching datagrid addItem Name ATutor License Free Description Good for content oriented teaching datagrid addItem Name Blackboard License Commercial Description Good for content and exercice oriented teaching datagrid addItem Name MediaWiki License GPL free Description Good for writing to learn an
551. title File Flash cs3 mask guided movie animation png License unknown Contributors image an_ik_symbols png Source http edutechwiki unige ch mediawiki index php title File An_ik_symbols png License unknown Contributors image an_ik_shape png Source http edutechwiki unige ch mediawiki index php title File An_ik_shape png License unknown Contributors image symbol vs shape armature png Source http edutechwiki unige ch mediawiki index php title File S ymbol vs shape armature png License unknown Contributors image symbols ik intro png Source http edutechwiki unige ch mediawiki index php title File Symbols ik intro png License unknown Contributors File Flash cs6 ik armature 0 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 ik armature O png License unknown Contributors image Bone tool png Source http edutechwiki unige ch mediawiki index php title File Bone_tool png License unknown Contributors image flash cs6 creating bones2 png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 creating bones2 png License unknown Contributors image flash cs6 creating bones1 png Source http edutechwiki unige ch mediawiki index php title File Flash c s6 creating bones1 png License unknown Contributors image flash cs4 adjusting joints png Source http edutechwiki unige ch mediawiki index php title File Flash cs4 adjusting joints png License unknown Contributors
552. torial 143 flash cs3 button sound Fla O Up Over u Sound hit J Sound down Z u Sound over u text W highlight Ww highlight 2 u highlight ring WW highlight ring W outer ring 1 W outer ring 2 3a O HE 3 120fps o2s H de G Scene 1 de circle bubble grey Workspace 6 8 Sig x Properties x Filters Behaviors Strings Parameters Dz Frame Tween None z Sound spring_1 mp3 x A efect fire E Label type Sync Start v Repeat v I 6 Flash CS3 Attaching sound to buttons lt Frame Label gt Button with sound files e See the button with sound 5I e Source flash cs3 button sound fla 6 Load and play sounds with ActionScript It is better to load sounds with ActionScript if your sound file is large e g a background music or if you want to to trigger a sound as a result of some complex user interaction Select the frame where the sound should start typically in a script layer then insert this kind of code with F9 To load a sound from an external file var request URLRequest new URLRequest track mp3 var your_sound Sound new Sound your_sound load request Alternatively to load a sound from the library e Export the sound for ActionScript 3 e Right click on the sound in the library select properties e Select the ActionScript tab Tick Export for ActionScript Define the classname
553. tors image shape_timeline png Source http edutechwiki unige ch mediawiki index php title File Shape_timeline png License unknown Contributors image keyframe_timeline png Source http edutechwiki unige ch mediawiki index php title File Keyframe_timeline png License unknown Contributors image frame_script png Source http edutechwiki unige ch mediawiki index php title File Frame_script png License unknown Contributors image frame_label png Source http edutechwiki unige ch mediawiki index php title File Frame_label png License unknown Contributors image frame commented png Source http edutechwiki unige ch mediawiki index php title File Frame commented png License unknown Contributors image anchor_tween png Source http edutechwiki unige ch mediawiki index php title File Anchor_tween png License unknown Contributors image flash cs6 simple fbf png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 simple fbf png License unknown Contributors image flash cs6 rocket png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 rocket png License unknown Contributors image flash cs6 rocket symbol png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 rocket symbol png License unknown Contributors image flash cs6 rocket symbol editing png Source http edutechwiki unige ch mediawiki index php title File Flash cs6 rocket symbol editing
554. tp help adobe com en_U S FlashPlatform reference actionscript 3 flash html HTMLLoader html S FlashPlatform reference actionscript 3 fl core UIComponent html S FlashPlatform reference actionscript 3 fl controls BaseButton html S FlashPlatform reference actionscript 3 fl controls TextArea html S FlashPlatform reference actionscript 3 flash display Stage html S FlashPlatform reference actionscript 3 flash text engine TextLine html S FlashPlatform reference actionscript 3 flash display SimpleButton html S FlashPlatform reference actionscript 3 flash text TextField html S FlashPlatform reference actionscript 3 flash display AVM1Movie html S FlashPlatform reference actionscript 3 flash display Bitmap html S FlashPlatform reference actionscript 3 flash display MorphShape html S FlashPlatform reference actionscript 3 flash display Shape htm S FlashPlatform reference actionscript 3 flash text StaticText html S FlashPlatform reference actionscript 3 flash media Video htm http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl events ComponentEvent html http livedocs adobe com flash 9 0 ActionScriptLangRefV3 flash events KeyboardEvent htm http livedocs adobe com flash 9 0 ActionScriptLangRefV3 fl video MetadataE vent html http livedocs adobe com flash 9 0 ActionScriptLangRefV 3 fl motion MotionEvent html http livedocs adobe com flash 9 0 ActionScriptLangRefV 3 fl events SliderEvent html http livedocs adobe com flash 9 0 ActionScriptLa
555. tri xxx attr2 yyy attr3 z2zz gt lt list gt lt list gt lt line gt lt element1 gt xxx lt element1 gt lt element2 gt yyy lt element2 gt lt element3 gt zzz lt element3 gt lt line gt lt list gt A list of LMSs using elements You first can have a look at the data grid xml html g example It s just a simple DataGrid table as introduced above The only difference is that data is imported from a Ims list xml 8 file The XML inside looks like this lt xml version 1 0 gt lt list gt lt entry gt lt Name gt Moodle lt Name gt lt Type gt LMSware lt Type gt lt License gt GPL lt License gt lt Description gt Good for blended activity oriented learning lt Description gt lt entry gt lt entry gt lt Name gt PageF lakes lt Name gt lt Type gt Webtop service lt Type gt lt License gt Free to use lt License gt lt Description gt A minimal persona learning environment lt Description gt lt entry gt lt entry gt lt Name gt Drupal lt Name gt lt Type gt Portalware lt Type gt lt License gt GPL lt License gt lt Description gt Good for project oriented teaching lt Description gt lt entry gt lt list gt Here is the ActionScript code As you can see need some lines of codes to get the XML into the table Unless you want to do some data filtering e g the XML file structure doesn t match the DataGrid structure you can copy paste the code as is Import the necessary packages
556. tting tags Adobe documentation 23 ProgessBar The ProgressBar component displays the progress of loading content which is reassuring to a user when the content is large and can delay the execution of the application The ProgressBar is useful for displaying the progress of loading images and pieces of an application The loading process can be determinate or indeterminate A determinate progress bar is a linear representation of a task s progress over time and is used when the amount of content to load is known An indeterminate progress bar is used when the amount of content to load is unknown You can also add a Label component to display the progress of loading as a percentage Adobe documentation 24 Flash components overview 218 ScrollPane You can use the ScrollPane component to display content that is too large for the area into which it is loaded For example if you have a large image and only a small space for it in an application you could load it into a ScrollPane The ScrollPane can accept movie clips JPEG PNG GIF and SWF files Adobe documentation 25 Uploader The UILoader component is a container that can display SWF JPEG progressive JPEG PNG and GIF files You can use a UILoader whenever you need to retrieve content from a remote location and pull it into a Flash application For example you could use a UILoader to add a company logo JPEG file to a form You could also use the UILoad
557. tuitive timeline class for building and managing sequences of TweenLite TweenMax TimelineLite and or TimelineMax instances You can think of a TimelineLite instance like a virtual MovieClip timeline or a container where you place tweens or other timelines over the course of time TimelineLite retrieved 18 39 10 May 2010 UTC TimelineMax extends TimelineLite offering exactly the same functionality plus useful but non essential features like AS3 event dispatching repeat repeatDelay yoyo currentLabel addCallback removeCallback tweenToQ tweenFromTo getLabelAfterQ getLabelBefore and getActive and probably more in the future It is the ultimate sequencing tool Think of a TimelineMax instance like a virtual MovieClip timeline or a container where you position tweens or other timelines over the course of time TimelineMax 0251 retrieved 18 39 10 May 2010 UTC AS3 tweening platform 388 Links Greensock com 26 References 16 17 18 19 20 21 22 23 24 25 26 http blog greensock com http www greensock com tweennano http www greensock com tweenliteas3 http www greensock com tweenmaxas3 http www greensock com timelinelite http www greensock com timelinemax http www greensock com transformmanageras3 http wwww greensock com tweenliteas3 http www greensock com tweenfilterliteas3 http www greensock com tweengroup http www
558. tutorial i e learn how to do morphing animations In the same line of work as object transformation e Flash arranging objects tutorial Flash arranging objects tutorial 169 Flash arranging objects tutorial Draft Overview Learning goals Learn to align stack combine break objects in Flash CS3 Flash level CS3 However principles are the same for CS4 to CS6 Prerequisites Flash CS3 desktop tutorial Flash layers tutorial first part Flash drawing tutorial at least some of it Quality and level This text should technical people get going It s probably not good enough for beginners but may be used as handout in hands on class That is what Daniel K Schneider made it for It aims at beginners More advanced features and tricks are not explained here Snapping Snapping refers to a kind of assistance you may get for technical drawings It helps to position an object with respect to the others and without using the Align Panel You can tune the desktop to various snapping modes e Menu View gt Snapping or right click on the workspace e Then turn on off snapping modes or better click on Edit snapping usually just have these ones But more often I turn snapping off and then rather align objects with the align panel e Snap align e Snap to objects e Horizontal and Vertical Center alignment will also allow to snap against centers of objects otherwise you only can snap against sides Flash arrangin
559. two kinds of anchor points corner points and smooth points At a corner point a path abruptly changes direction At a smooth point path segments are connected as a continuous curve You can draw a path using any combination of corner and smooth points If you draw the wrong type of point you can always change it e A corner point can connect any two straight or curved segments e A smooth point always connects two curved segments Points on a path e A Four corner points e B Four smooth points e C Combination of corner and smooth points e A corner point can connect both straight segments and curved segments Corner points A path outline is called a stroke A color or gradient applied to an open or closed path interior area is called a fill A stroke can have weight thickness color and a dash pattern After you create a path or shape you can change the Flash object transform tutorial 158 characteristics of its stroke and fill Let s now see how we can use curve controls i e direction lines and direction points in order to adjust the curves When you select an anchor point that connects curved segments or select the segment itself the anchor points of the connecting segments display direction handles which consist of direction lines that end in direction points The angle and length of the direction lines determine the shape and size of the curved segments Moving the direction points reshapes
560. ty Screenshots were made with CS3 However the logic is the same for later versions CS4 5 6 This text should technical people get going and may not be good enough for self learning beginners It can be used as handout in a hands on class That is what Daniel K Schneider made it for Level It aims at beginners More advanced features and tricks are not explained here Materials None just play with your own objects Alternative version Flash CS3 object transform tutorial Flash has quite powerful object transformation tools You should learn about these in order to create more sophisticated drawings and or morphing shape tweening animations animations Typical hierarchy of an object Graphics is what the users can see Basically most Flash objects do have some graphics inside These may be grouped or layered if needed The most primitive level are shapes E g strokes do have shape inside Symbol Group s Drawing object s Shape s Various drawing strategies for complex objects 1 Create shapes Draw paint in merge mode Strokes will go in front fills made with the paing brush to the back But both will produce just shapes Once you are happy with the result group and or convert to symbol You also could union the shapes into a Drawing object Flash object transform tutorial 154 2 Create drawing objects Draw in object mode then group and or convert to symbol You can edit the shape of a drawing object by
561. u have enough space to draw If an initial size turns out to be too small or too big you simply can modify the document s size see next Modification of a document With Modify gt Document or by clicking on an empty spot in the stage and then changing the properties you can e Redefine the size of the stage e Change the background color e Give it a title and a short description What size for a Flash document Size of your Flash document depends on its purpose Since Flash documents unlike well made HTML pages have a fixed size you must find a good compromise between readability users should be able to read and distinguish all elements and the horizontal vertical space you flash clip will use Larger flash documents A default documents takes up 550x400px This makes the document viewable without scrolling on a computer with a bad screen resolution of 800x600px Do not forget that a screen also contains a tools bar in most Operating systems and that Flash is usually viewed within a web browser that also contains menu bars a bottom bar and some pixels to the left and right Anyhow most people today have bigger screen resolutions so you certainly can go bigger than 550x400 Banners and other embedded items Advice depends on their purpose Think hard about your potential target population small screens big screens mobile phones etc Configuration of the drawing environment Firstly you should know that drawing tools ex
562. undamental modes e Align distribute referring to the stage I e you may want to align a picture in the center of the stage e Align one or several objects with the first selected or distribute among the first two selected objects The align panel with to stage option unticked Color Swatches Align x Info Transform Z Align fo el T Bo Bo Distribute stage ee bb ta Oo Match size Space a i Ss adb Various align interfaces of Flash CS3 To see what each icon does move your mouse cursor over it The align panel icons convey the following kind of message 1 The line represents the border against which alignment or distribution will be made left right middle top bottom etc 2 The dark and the white rectangle represent the selected objects Match size will change the size either width height or both of smaller objects with a larger object Space works a bit like distribute Aligning objects in several frames You also may align objects in several frames For example to align letters in all frames Click on the Edit multiple frames button in the bar below the timeline fl lash cs3 frame by frame hello fla 0 ME i wo EN 1 24 150fs 15s M Edit Multiple Frames of d 0 4045 Color Swatches Align x Info Transform Saye Align i a oe T Bo Bo 7 Distribute stage 8a fb d Oo Match size Space Set fy m ll a i as ab Library
563. up a layer lock all layers unlock the bad one select all frames use SHIFT click and remove them right click menu Then restart again with a library object Flash animation summary 123 Solution You can find the solution here e http tecfa unige ch guides flash ex animation summary e File flash cs3 cloud animation solution fla P Note some vector graphics i e the trees and the cloud have been taken from the Open Clip Art Library 4 You can find the SVG files in the same directory Before importing to Flash I made some modifications with Illustrator Self revision example 2 tux and manga Tasks Complete this animation by using the existing layers and the objects in the library It should take you no more than 70 minutes about 10 minutes for each task Please complete the six tasks described below Most of the work is already done you only need to complete animations and change properties e All drawing objects you need are in the library e All layers are locked Unlock as needed e Symbol instances are on the stage and in the right frame but you may have to break these apart e Key frames are also predefined e This animation has about 110 frames In principle there is no need to go further Look at a possible solution first e flash cs3 tux manga solution html 5 Download the fla file e flash cs3 tux manga problem fla 6 1 Background animation shape tween of gradient color e At start it
564. utorial 352 e If you have an object called cat you can set both its x and y position x starts from the left and y means down Therefore x 0 y 0 means the upper left corner of the stage Example position cat at x is 100 and y is 200 pixels cat x 100 cat y 200 Example add 50 px to cat s current position cat x t 50 cat y t 50 Resize an object works with any display object e Ifyou have an object called cat Example cat will be 100 px wide and 120px tall cat width 100 cat height 120 Example cat will double its size Expression below means set cat width to old cat width times 2 Gait walclela Gaio w chea 2e Gac Ineicine Gare hergnht 25 Dragging an object works with any interactive object e If you have an object called cat you can start stop dragging Usually these are bound to MOUSE_DOWN and MOUSE_UP CaL SEEDA gt Car SEGHE N A Moving around in the timeline You can either go to a frame and play it until it encounters a stop or go there and stop If you want to go to frame 12 of the same scene gotoAndPlay 12 COP OAMES oO 2E If you want to go to frame 13 of a scene called test gotoAndPlay 13 test CGOwOAMIC SO Ol D AE ESEA Tweening and interactivity self revision examples Examples from an exam to be improved and documented at some point 2007 Exam e Frame 1 home Buttons should not lead you to frame 1 home but to the various other keyframes Als
565. utton browse to the folder to add and click OK Alternatively double click the path in the Source path list type the Flash using ActionScript libraries tutorial 371 desired path and click OK e To delete a folder from the source path select the path in the Source path list and click the Remove From Path button To set the application level source path 1 Choose Edit Preferences Windows or Flash gt Preferences Macintosh and click the ActionScript category 2 Click the ActionScript 3 0 Settings button and add the path s to the Source path list Set the Library path for ActionScript 3 0 files To set the document level Library path the procedure is similar to setting the Source path 1 Choose File Publish Settings and click the Flash tab 2 Make sure ActionScript 3 0 is specified in the Script menu and click Settings 3 In the Advanced ActionScript 3 0 dialog box click the Library path tab 4 Add the library path to the Library path list You can add folders or individual SWC files to the path list To set the Application level Library path 1 Choose Edit Preferences Windows or Flash gt Preferences Macintosh and click the ActionScript category 2 Click the ActionScript 3 0 Settings button and add the path s to the Library path list Set the External Library path for ActionScript 3 0 files To set the document level External Library path the procedure is similar to setting the Source path 1 Choose Fi
566. various ways to import these into Flash Modeling tools and engines e FreeSpin 3D 1 Enables the importing of 3D Models directly into Adobe Flash as a Flash Movie Clip object With timeline support and an Action Script interface In August 2008 this product was in Beta stage and it is free registration needed The first final version will be sold e Swift 3D Pisa popular commercial tool 250 on Aug 2008 to create 3D objects and animations for Flash and other 2D formats e Swift 3D P Wikipedia entry e 3D Flash Animator 4 3dfa is a cheap 50 3D Flash tool not tested e Rozengain Exporter to Away3D Papervision3D and Sandy3D D for the popular Blender free open source 3D content creation suite 6 Daniel K Schneider would start with this if I had to draw something e Sophie3D Mis an engine using the Flash Player that can render Wavefront 8 objects and offers some user controls A version with an advertisement is free Flash 3D 419 ActionScript 3D engines The two most popular engines seems to be Away3D and PaperVison3D Both are free Away3D D is a realtime 3D engine i e an ActionScript library for Flash Freeware you can give donations The 30 website includes tutorials a wiki downloads and examples It works together with Flashdevelop a code editor for ActionScript 2 3 and other languages e Tutorials 7 There are also examples a wiki etc e The FlashMagazine Flash 3D B
567. ve 2008 Tutorials none tested or endorsed for far General e Flash 3D Tutorials Index from Steve s Tutes site e Macromedia Flash 3D Tutorials 77 Away3D related e Flash 3D basics 1 Flashmagazine com PaperVision 3D e See Flash Papervision3D tutorial Alternativa e Alternativa Tutorial Getting Started 28 Some free 3d objects e Flash3D org 791 See Games and Free stuff Examples e Flash3D 8 Category in Best Flash V2 2 e Floorplannner 31 Papervision 3D example Websites needs some sorting deletions and additions e draw logic 32 has several Flash AS3 3D related articles Also many good links Infinite Turtles P3 by Rob Bateman Has news and demos e Flash 3D P includes both Away3D Papervision and Sophie3d information most in Italian Flash 3D 421 e Masputi h BS e Developer Connection Learn 3D animation in Flash 36 Adobe References 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 http www freespin3d com http www erain com http en wikipedia org wiki S wift3D http www 3dfa com http www rozengain com blog 2008 01 02 export your blender objects straight to away3d papervision3d and sandy http www blender org http www sophie3d com http en wikipedia org wiki http en wikipedia org wiki Wavefront_Technologies http away3d com http away3d com tutorials http www
568. ventListener MouseEvent MOUSE_DOWN startDragging E cat addEventListener MouseEvent MOUSE_UP stopDragging function startDragging event MouseEvent ActionScript 3 interactive objects tutorial 344 Carm SICA DF alg 7 function stopDragging event MouseEvent cat stopDrag message_text visible false instructions addEventListener MouseEvent CLICK messageText function messageText ev message_text visible message_text visible pe so EOR gt can t see the dog for starters brown_dog visible false hide addEventListener MouseEvent CLICK hideShow function hideShow ev we just switch visibility to the opposite cat visible cat visible brown_dog visible brown_dog visible pe SSSS playing 7 There is a little problem here If the cat movie gets bigger the motion guide also will grow big Size does not refer to the cats drawing but to the composite object Changing just the cat requires much more advanced AS playcat addEventListener MouseEvent CLICK playCat function playCat ev make sure cat is visible cat visible true brown_dog visible false cac olay p7 Notice on function definitions If you want to write clean AS 3 code you should define functions like this function growCat ev MouseEvent void Gale wlclela Car wieka 25 cat height cat height 2 ActionScript 3 inter
569. vie CTRL SHIFT ENTER Debug Movie Home Goto First Scene End Goto Last Scene Page Up Goto Previous Scene Page Down Goto Next Scene Files CTRL N New File CTRL O Open File CTRL S Save File CTRL R Import Image Sound etc CTRL SHIFT 0 Open as Library SHIFT F12 Publish CTRL SHIFT R Export to swf spl gif ete View CTRL 1 View movie at 100 size CTRL 2 Show Frame CTRL 3 Show All Generate shortcut table e Menu Edit gt Keyboard shortcuts e Click on the little icon on top right Export Set as HTML This will generate a single HTML file with several tables showing all commands that can have a shortcuts plus the shortcuts currently defined Flash CS3 keyboard shortcuts 412 Links e What Are the Flash Shortcut Keys 2 by Adobe a good short list e Flash Keyboard Shortcuts B another more recent Adobe document 2011 e Most useful Flash 8 Shortcut Keys t4 by Anders Bergmann 5 Full reference for Flash CS3 shortcuts can also be printed commercial 15 Conventions e Ona Mac replace Control by Command e In this table means hold down both usually I just use a for this Other tricks from Adobe to sort out With the arrow cursor Control Click and Drag Duplicates a shape By hitting the control key first Macintosh amp Windows and THEN clicking and dragging on a selected shape or group of shapes you will creat
570. with buttons with what you just learned The principle is simple 1 Put contents in in various frames you can use multiple layers of course We also will show how to name frames which is a good policy for that type of application 2 We will stop Flash from playing all the frames by inserting the stop instruction in frame 1 3 We then will create a button for each page X i e keyframe X and then write some code for each button that will transport the user to frame Y We show you how to do this step by by with ActionScript 3 Step 1 create pages e Create a Pages layer e Put each page into a frame text pictures videos whatever static information e If you don t want menus to overlap with contents make sure to leave an empty area for the menu on each of these pages e g on top or to the left of the picture Step 1b variant with animations e You also can add animations if you like But put these in different layers or alternatively and better create these as movie clips i e create a movie symbol first then edit it But make sure that no frames from different layers overlap The principle of a simple flash web site is that a user will jump to different frames Step 2 Create the menu e Create a new layer and call it Menu for example e Insert in frame 1 of this Menu layer all the buttons that will lead to each of the pages Extend this layer to the last frame of your pages layer hit F5 We want the naviga
571. x Components Component Inspector flash cs3 frame by frame hello fla Empty library workspace 6 amp 100 z Name Type Use Select all frames e Then you can select the frames you want to edit together by moving the sliders on top of the timeline Then select groups of objects you want to align e g different letter groups in our case then use the align pane Window gt Align but untick To stage This tool is quite dangerous since it is hard to control what happens in each frame Make sure to save your file before you engage in this Also when you are done untick the Edit multiple frames button Flash arranging objects tutorial 173 Stacking When you draw a new object it is drawn on top of the others You can move forward or backwards any selected object s e Use the right click gt Arrange menu or CTRL Up Arrow Move Ahead CTRL Down Arrow Move Behind Grouping Turning shapes into objects To combine several shapes into an object e Menu Modify gt Combine Objects gt Union To break apart an object e Menu Modify gt Break Apart or Right click gt Break Apart or CTRL B Tip This operation is not innocent i e it creates a new single editable object If you just want to group vector graphics into a composite object use grouping see below Creating a new object from others Menu Modify gt Combine Objects lets you combine objects in several ways e Union a
572. x released under the MIT License APE is written and maintained by Alec Cove Flash 10 3D Flash Player 10 PH e Flash Player beta downloads 22 released as Beta in sept 2008 This page at the bottom also has a link for the Flex SDK needed and the documentation zip file e This engine seems to offer better performance than the AS 3 libraries above and this is not surprise of course But it has less features it seems Flash 3D 420 Libraries working with ActionScript engines e FLINT particle system 1 by Richard Lord Flint is an open source project to create a versatile particle system in ActionScript 3 The aim is to create a system that handles the common functionality for all particle systems has methods for common particle behavior and lets developers extend it easily with their own custom behaviors without needing to touch the core code FLINT can as an option be used with PaperVision3D and Away3D e Paradox The Flash based first person 3D engine 23 FAQ This is still under development sept 2008 and its not clear if and when the engine will be available ActionScript editors Since all the free ActionScript engines imply that you have to code ActionScript you may consider using a good editor IDE See Flash_ActionScript 3 overview for some suggestions Links Overviews and comparisons e 3D Flash 4 Wikipedia only a stub in aug 2008 e Flash Player 10 3D versus Away3D 25 AirtightInteracti
573. x buttons intro flash cs3 simple menu site html http tecfa unige ch guides flash ex buttons intro flash cs3 simple menu site fla 9 http tecfa unige ch guides flash ex buttons intro flash cs3 image map html 10 http tecfa unige ch guides flash ex buttons intro flash cs3 image map fla 11 http tecfa unige ch guides flash ex buttons intro flash cs3 button animation html 12 http tecfa unige ch guides flash ex buttons intro flash cs3 button animation fla 13 http helpx adobe com flash using creating buttons html 14 http www learnwebdevelopment com creating slideshows html 15 http slideshowpro net Flash components overview Draft This is part of Flash tutorial series Introduction Components are prebuilt interface elements widgets that will speed up programming of interactive Flash pages Learning goals This is a high level overview e Learn where to find components e Learn about the purpose of various Flash 9 CS3 components Prerequisites Flash CS3 desktop tutorial Flash drawing tutorial Flash button tutorial not absolutely necessary Moving on This article is just a conceptual overview There are some specific component tutorials you may be interested in Flash component button tutorial Flash Video component tutorial Flash datagrid component tutorial The Flash tutorials article has a list of other tutorials Quality This text should technical people get going and may not be g
574. xchange index cfm view sn110 Flash components overview 223 42 http labs atellis com category components Flash component button tutorial Draft Introduction Learning goals Learn how to use the component button Flash level 9 ActionScript 3 Prerequisites The following tutorials are recommended but not fully necessary e Flash layers tutorial e Flash button tutorial e Flash components overview Moving on e Flash Video component tutorial Level and target population e Beginners Quality e This should get you going component buttons are fairly easy to use Alternative version Flash CS3 component button tutorial Principles In Flash CS3 to CS6 there exist three different kinds of buttons 1 Button symbols See the Flash button tutorial These button symbols classes are made with four predefined frames and can include any kind of drawing including movie clips Their visual behavior is highly customizable 2 Button components These are part of the built in components library that provides various interface components also called widgets or gadgets that are easy to use Technically speaking these buttons are a kind of embedded movie clip Graphically speaking these buttons are some kind of nice looking semi transparent rounded rectangles It is not easy to change their look 3 Any movie clip or other heavy object can be a button The difference between built in buttons and anything is t
575. y 117 Intermediate drawing Tips e Always lock other frames when you draw on one frame e For advanced drawing you should consider learning how to use the pen tool Flash pen tutorial Object transformation To transform an object or shape there are several tools most importantly The Select tool Make sure all objects are de selected then move the cursor close to a stroke of an object or a shape When the cursor changes shape you can distort it The Free Transform Tool has three different modes you can select with the options controls in the tools bar e Change size rotate skew by default you get this Move the cursor close to lines or corners and watch the cursor change form e Distort tool Envelope tool The Subselection tool lets you fine tune things you did with the above tools e Subselection Tool Distort Tool and Envelope tool let you either drag distortion points squares turn or drag curve control handles circles Additional stuff is in the Modify menu Also see the Flash CS3 keyboard shortcuts e Make sure you only selected one single object unless it s on purpose before you start transforming e Flash changes the cursor when it switches to a given transform mode and it may display additional handles There are lots and you should become familiar with these If you feel lost go back to the Flash object transform tutorial Arranging objects e To align objects work with the align panel menu Wi
576. y frame during the time the tween is active pass a reference to it here onUpdateParams Array An array of parameters to pass the onUpdate function this is optional AS3 tweening platform 378 onComplete Function If you d like to call a function when the tween has finished use this onCompleteParams Array An array of parameters to pass the onComplete function this is optional overwrite Int You can enter 4 values 0 NONE No tweens are overwritten 1 ALL All tweens of the same object are completely overwritten immediately when the tween is created 2 AUTO Searches for and overwrites only individual overlapping properties in tweens that are active when the tween begins 3 CONCURRENT Overwrites all tweens of the same object that are active when the tween begins persist Boolean If true the TweenLite instance will not automatically be removed by the garbage collector when it is complete By default it is false renderOnStart Boolean If you re using TweenLite from or runBackwards true with a delay and want to prevent the tween from rendering until it actually begins set this special property to true By default it s false which causes TweenLite from to render its values immediately even before the delay has expired runBackwards Boolean Flips the start and end values in a tween That s the same as using the from method see below TweenLite from TweenLite from target Object duratio
577. y you also may add a sky in the main timeline e g with a gradient color see the flash colors tutorial The example code is in the http tecfa unige ch guides flash ex motion tweening intro directory flash cs3 motion tweening sun html 1 flash cs3 motion tweening sun fla 8 Note we use embedded movie clips in many other tutorials E g see ActionScript 3 interactive objects tutorial or Motion tweening of an animated object chapter in the Flash animation summary or the Shape tweens of motion tween elements chapter in the Flash shape tweening tutorial I usually prefer this kind of animation since I am more interested in creating interactive application vs video clip like animations If you plan to learn this you also should learn how to stop play embedded movie clips i e trigger with the help of a button or something else an event that will movie_clip play and movie_clip stop Use of swf movie clips in motion tweens You can import ready made flash animations e g a cat that would have moving legs In the next chapter we use a simpler animation that uses a rocket Rocket making itself is described in the Flash frame by frame animation tutorial To import a Flash movie as object Use File gt Import gt Import to library You then will see the swf files as items and you can drag them on the stage With the Transform tools you then can adapt a few features like size and rotation to your needs workspace amp 4
578. yer and insert an object for animation e Create a new layer and call it animation cat for example see the Flash layers tutorial if you forgot how e Select this layer e Put an tween able object inside e g drag it from your library onto the stage or cut paste or copy paste from an other layer or fla document e In our case we cut paste the existing cat that was sitting in the lower left in the Objects layer e We move the object cat outside of the stage because the cat in our scenario will move into the scene Remember that you can not motion tween editable objects so you need to turn a drawing into a symbol first So you should see something like this Flash classic motion tweening tutorial 66 flash cs3 motion tweening fla The cat before animation It sits outside the stage and waits Now you already have a first keyframe for your animation Le the cat is waiting in keyframe to be moved Step 2 Create a second keyframe e Make sure that you still have the animation cat layer selected e Right click somewhere in the timeline e g at 20 and Insert Keyframe e This will create a new keyframe and copy the contents of the keyframe before i e contents of frame 1 just for this layer e Drag the object cat to its final position e g to the right and which can be outside the stage again Step 3 Create the motion tween e Click on a random frame between the two keyframes still i

Flash Tutorials

Contents

Download Pdf Manuals

Related Search

Related Contents