AnimationandDrawing|4.28.16@BVEdTec
AnimationandDrawingTheAnimationandDrawingappwascreatedbyDoInkthemakersoftheGreenScreenApp.WithAnimationandDrawing,usethedrawingeditortocreateindividualdrawingsandcombinevariouselementssuchasobjectsandtexttomakeanimations.DrawingsandanimationscanbesharedviatheGallerywithintheappandaddedtothelayerswithinGreenScreen.ThisappcanbedownloadedoniOSdevices.GettingStarted
1. OpentheAnimationandDrawingApp.• ItwillopentotheGalleryview.
2. Selectthe signtobeginanewdrawingorcomposition.
CompositionFeaturesTheCompositionEditorallowsyoutocombineartworkalongwithnewpropsfromDOInkproplibrary(greatfornewusers).Thereare4primaryareasintheCompositionEditor:TheUpperToolbar,Canvas,LowerToolbarandTimeline.Additionalfeaturesarelistedbelow.
1. Select toopentheChooser.Thisholdsyourgalleryoptions.2. ViewpropsfromtheAnimationGallery.3. Addphotosfromthecameraroll.4. Addtext.5. toviewalargereditoror toviewsmaller.6. Tap toadjusttheCompositionPropertiesincludingtitle,aspectratioandbackground
color.7. Thetimelineatthebottomcontrolsthestartandstopofthedrawing.
• Noticethatonceyouscrollpastthebackgrounddrawingonthetimeline,itwilldisappearfromthecanvas.
• Theappautomaticallysetsthestartandstoptimeforthedurationofaclipbutthiscanbeadjusted.
TableofContents> GettingStarted…1> CompositionFeatures…1> CompositionTutorial…2 > DrawingFeatures…3 > Saving…5
UpperToolbar
LowerToolbarTimeline
Canvas
AnimationandDrawing|4.28.16@BVEdTec
8. Usethe buttonatanytimetocorrectamistake.9. Selectthedownarrowtoshowalllayersaccessibleonthetimeline.
• Addmultipleobjectsandbackgroundsasneeded.10. Selectthe buttontoopentheselectedelementtoolpalette.
• cutstheselectedelementtothepasteboard.• copiestheselectedelementtothepasteboard.• pastesanelementfromthepasteboardontothecanvas.• duplicatestheselectedelement.• deletestheselectedelement.• bringstheselectedelementtothefront.• bringstheselectedelementonesteptowardthefront.• sendstheselectedelementonesteptowardtheback.• sendstheselectedelementtotheback.• resetstheselectedelementtoitsoriginalstate.• resetstheselectedelement'spath.
11. Adjustthemotionpathoftheobjectusingthe buttontoadjustthemotionpath.12. Usethe toaddordeletenodesalongthemotionpath.13. The allowsyoutoadjusttherotation,opacity(transparency)andtimingoftheobject
(insertpicture).14. Whenscrollingthroughthetimelineselectthe buttontoaddakeyframe(providesa
morecomplexmotionpath).CompositionTutorialTopracticeusingtheCompositionEditor,followtheTutorialbelow.
1. TabtheStarorChooserandselectthebugclip(tutorial)withintheCompositionEditor.
2. Scrollthroughthetimelinetoseethebugwiggle.
3. Selectthe ontopofthebugtocreateapathforthebugtomove/fly.
4. Resizetheobjectbydraggingthebluecircleinside.5. Aftercreatingyourpath,selectthe icontopreviewyouranimation.
6. Tap toaddapropfromthegallery(thisshouldbeturnedoffforstudentuseasthere
areinappropriateimages).
7. Increasethetimedurationbyselectingtheobjectonthetimelineandthendraggingtheend tothedesiredlength.
8. Adjustthespeedofeachobjectbyselectingtheobjectonthetimelinefollowedby and
thendraggingthedottothedesiredrate.
AnimationandDrawing|4.28.16@BVEdTec
9. Tap icontotitleyouranimationandchangethebackgroundcolor.
10. SelecttheGallerytosaveyourwork.
11. Tapthe followedbySharetosaveyourworktotheCameraRoll(VideoorImage)ortotheDOInkLibrary(Data).
• Usethesmallestvideoorphotoformat.• TheDOInkLibrarywillworkwhenusingtheanimationingreenscreenonthe
samedevice.DrawingFeaturesTheDrawingEditorallowsyoutocreateasingleframedrawingormulti-framedrawingsequence(difficultfornewusers).TheDrawingEditorhasfourprimaryareas:UpperToolbar,Canvas,LowerToolbarandFrameSequencer.AdditionalDrawingEditorfeaturesarelistedbelow.
1. (pen)toolcreateprecisepaths.2. (pencil)toolcreatesshapesbysketchinganoutline3. (brush)toolpaintsanshape’sinterior4. (fill)toolcreatesshapesautomatically5. (rectangle)toolcreatesarectangleshape6. (ellipse)toolcreatesanellipticalshape7. (polygon)toolcreatesapolygon(100%innerradius)orastar(lessthan100%inner
radius).Usethepointstoincrease/decreasetheshapepoints.8. (flower)toolcreatesaflowerorgearshapebasedontheinnerradiuspercentage.Use
thepointstoincrease/decreasetheshapepoints.
UpperToolbar
LowerToolbar
Canvas
FrameSequencer
AnimationandDrawing|4.28.16@BVEdTec
9. (selection)and (multi-selection)toolselectsshapesandindividualpathswithinshapes.Optionsafterselectingarelistedbelow.
• cutstheselectedshapestothepasteboard.• copiestheselectedshapestothepasteboard.• pastesshapesfromthepasteboardontothecanvas.• duplicatestheselectedshapes.• deletestheselectedshapes.• selectsallshapesinthedrawing.• selectsallshapesinthecurrentlyselectedlayer.• deselectsallshapes.• groupstheselectedshapes.Groupsarediscussedindetailbelow.• ungroupstheselectedshapes.• alignstheleftedgesoftheselectedshapes.• alignsthehorizontalcentersoftheselectedshapes.• alignstherightedgesoftheselectedshapes.• alignsthetopedgesoftheselectedshapes.• alignstheverticalcentersoftheselectedshapes.• alignsthebottomedgesoftheselectedshapes.• bringstheselectedshapestothefront.• bringstheselectedshapesonesteptowardthefront.• sendstheselectedshapesonesteptowardtheback.• sendstheshapeselementtotheback.• flipstheselectedshapeshorizontally.• flipstheselectedshapesvertically.
10. (transform)toolmove,rotates,andscalesselectedshapesandpaths11. (node)tooltoaddordeletenodesalongthemotionpath12. erasesonthecanvas
13. fillcolorandgradientselectsthehue,saturationandbrightnessselectsthered,green,bluetool
selectsthecolorswatchtool
14. strokecolorandstyle
15. (eyedropper)toolpicksupthepropertiesofanexistingshapeandappliesthemtoanyselectedshaped
16. TheFrameSequencerTool: addsanewframetothedrawingsequence,insertingitafterthecurrentlyselectedframe. duplicatesthecurrentframe. deletesthecurrentframe.
AnimationandDrawing|4.28.16@BVEdTec
shows(orhides)threeadditionaleditingtools:
• cutsthecurrentframetothepasteboard.• copiesthecurrentframetothepasteboard.• pastesaframefromthepasteboard,insertingitafterthecurrentlyselected
frame.
17. managelayersandadjustlayerproperties• Tapthe buttontocreateanewlayer,insertedabovethecurrentlyselected
layer.• Tapthe buttontodeletetheselectedlayer(andallofitsartwork).• Taponanylayerinthelisttoselectit.Newshapesareaddedtotheselected
layer.• Tapthe"LayerLabel"toeditthelabel.• Tapthe buttontohideorshowthelayeronthecanvas.• Tapthe buttontolockorunlockthelayer.Lockingalayerpreventsitfrom
beingmodified.• Dragthe handletoreorderthelayers.Layershigheruponthelistare
renderedinfrontofthelayersbelow.18. editorsettings19. buttonresetsthedrawingcanvastoitsoriginalstate20. setsthepanandzoomsothatallshapeswillbevisibleonthecanvas21. playsapreviewofthedrawingsequence22. pausestheanimation23. drawingproperties
SavingAllcompositionsanddrawingsaresavedinthegallerytousewithintheanimationapp.Toexportyourcreations,followthedirectionsbelow.
1. IntheGallery,locatethecompositionordrawingyouwanttoexport.
2. TaptheactionbuttonfollowedbyShare.
3. SelectVideo,Image(PNGfile)orDatatosavetotheGreenScreenGallery.• Data(DOInk)selectsharedfolderorsavetoDropboxtouseonanother
device.• Recommendedtoselectthesmallestvideoorimagesize.
