Hype User Manual
Contents
1. www dropbox com Tumult Hype will publish to your public Dropbox folder so you can share your work easily with others Dropbox must first be setup in Tumult Hype s preferences To export to Dropbox choose the File gt Export as HTML5 gt Dropbox menu After uploading Tumult Hype will let you view the page or copy the URL to share with others Exporting to iBooks Author as an HTML5 Widget To export your Hype animation as an iBooks and Dashboard compatible widget file select File gt Export gt Dashboard iBooks Author Widget There are four pre defined document sizes in the Document Inspector to choose from WUMULT Tumult Hype Documentation Javascript Tumult Hype offers a JavaScript API to control various aspects of a document The API methods can be called during user generated events from within the Tumult Hype document or by a script external to the Tumult Hype document API Functions hypeDocument documentName Returns the name of the document This value is can be used in the global HYPE documents documentNamel hypeDocument sceneNames Returns a list of all scenes in the document Note scene names are not enforced to be unique as they are specified by in the scene selector interface If you are going to use the showSceneNamed function be sure that no two scenes have the same name hypeDocument currentSceneName Returns the string value for the currently shown scene hypeDocument showSce2. Opacity All Background Color Background Gradient Angle Background Gradient End Color Background Gradient Start Color Background Image Bold Animation Keyframes If you are recording See below this step is unnecessary as the properties will automatically be added for you Modifying Properties WUMULT For manipulating properties with keyframes there two rules to note 1 If the time cursor is on a keyframe for a property and that property is manipulated through the inspector the keyframe value itself will change Time Cursor on Keyframe 2 If the time cursor is not directly on a keyframe for a property that has keyframes and the property is changed then the keyframes will all be offset Time Cursor off Keyframe This is best illustrated by looking at an example involving the Origin Left property Let s say there are two keyframes to compose an animation the starting keyframe is at 2s with a property of 10px and the ending keyframe is at 3s with a property of 20px In other words the animation has a duration of one second and will move the object ten pixels to the left If the time cursor is placed at the 2s mark then it is directly on the first keyframe Setting the element to be at 15px will only manipulate the starting keyframe so now the animation will only move the object by five pixels because the end keyframe is still at 20px lf the time cursor is not placed at the 2s
3. 8 support the PNG file format IE 6 will not display transparency in PNGs IE 7 and 8 will display transparency but do not re composite the background so it is likely the results will not appear as intended Video Tumult Hype lets you embed HTML5 video Choose the Insert gt Video menu item use the Insert Elements toolbar item or drag and drop video onto the scene Tumult Hype supports importing mov ogg webm mp4 and ogv extensions though only mov and mp4 can be displayed from within Tumult Hype Unfortunately the current state of HTML5 video is fractured by browser Safari and IE support H264 mp4 while Firefox supports Theora ogv and Chrome supports VP8 webm as well as Theora ogv Luckily the video tag supports multiple sources for one element In Tumult Hype to add the different video sources select a video element and then add sources via the Element Inspector s Video property WUMULT Video C Autoplay M Controls C Loop wv Muted Sources Format Name video mp4 movie iphone mp4 video ogg movie theora ogyv video webm movie webm p Video Sources Element Inspector To convert videos into these formats we recommend using the Miro Video converter It is simple and effective You can download this from http www mirovideoconverter com There are instructions on how to use it at http diveintohtml5 info video html Box The box element is a basic element added via the Inse
4. are not shared across scenes For example when a scene is duplicated the scene contains new copies of the elements from the old scene Each scene also has at least one timeline to run animations Elements Elements are the manipulatable objects in a scene They can be text images video boxes or buttons Properties Properties are the configurable units of elements scenes and documents Style properties let you specify colors fonts borders placements and effects Action properties are for determining what should happen on mouse events keyboard events or scene events Document properties are for setting options affecting the entire document such as the overall size or supported browsers Timelines Timelines run animations Each scene has the Main Timeline which ts automatically played when the scene is shown Other timelines for the scene can be added and play when triggered by actions This capability lets you add interactivity mousing over an object could trigger a timeline to play which animates other objects in the scene Animations Animations are contained on timelines and automatically created between two keyframes For most style properties Tumult Hype will smoothly transition from the starting keyframe to the ending keyframe Animations can have different easing effects such as ease in ease out ease in out and linear Keyframes A keyframe lets you specify a style property for an element at a given time
5. file you are using instead Create enclosing folder When this is checked Tumult Hype will create a top level folder which will hold the html file and the _Resources folder Uncheck this option if you want Tumult Hype to only write these in the specified folder Show Built with Hype Tumult Hype documents will show a small Built with Hype watermark in the lower left corner If you uncheck this the watermark will not be shown WUMULT Embedding in other HTML documents A good starting point for embedding is to set the export option to save the HTML file It HTML file is relatively bare bones and contains three critical lines which will actually kick off the document lt copy these Lines to your document gt lt div id documentName_hype_container style position relative overf Low hidden width 600px height 400px gt lt script type text javascript src documentName_Resources documentName_hype_generated_script js 56206 gt lt script gt lt div gt lt end copy gt These lines can be copied and pasted into other documents documentName in this case would need to be changed A div script and close div tag is all you need They reference the _Resources folder which also needs to be placed at the same level as the HTML file Dropbox Dropbox allows you to sync your files online and across your computers automatically To learn more or sign up for a Dropbox account visit http
6. kScenefTransitionInstant hypeDocument kSceneTransitionCrossfade hypeDocument kSceneTransitionSwap hypeDocument kSceneTransitionPushLeftToRight hypeDocument kSceneTransitionPushRightToLeft hypeDocument kSceneTransitionPushBottomToTop hypeDocument kSceneTransitionPushTop loBottom Running from outside of Hype To access the Tumult Hype API from a javascript outside of the embedded document you can use the global Hype object HYPE documents documentName The document may not be an exact match for the filename To figure out the value you can look inside the exported Resources folder for the hype_generated_script js file and find the documentName there You can also call the hyoeDocument documentName function from within a javascript action to determine it Note the HYPE global may not be available immediately upon document load Make no dependencies to this existing at the time it is called General Action Export document as HTML5 Preview document in default browser Preview current scene in default browser Zoom In Zoom Out Show Javascripts Show Media Browser Show Help menu Show and hide the Inspector Show and hide the Colors window Show and hide the Toolbar Working with Elements Action Move selected element by one pixel Move selected element by 10 pixels Add elements to or remove them from previously selected elements Add range to or remove it from previously selected range Resize element Re
7. the Arrange menu Bring Forward Bring to Front Send Backward Send to Back toolbar buttons or by dragging the elements in the element list near the timeline view wy a amp Front Back Forward Backward Ordering Toolbar Items HTML Representation When output to HTML elements are generally represented as divs In some browsers image elements will be converted to automatically to img tags Each element is represented with an id which can be found in the Identity inspector You can also set alternate text for accessibility purposes WUMULT Tumult Hype Documentation Animations Tumult Hype uses a powerful keyframe based animation system to give elements motion and transitions Tumult Hype s recording functionality makes building animations a snap Animation User Interface O a e r2 700515 8 6 ee vo 4 ad Main Timeline alten ja Hood Transmission Properties v 7 Ease Out nd Light Opacity lt gt Origin Left G Origin Top gt 7 K Size Height O Size Width Animation User Interface a Animation controls left to right Jump to Start Previous Frame Next Frame Play Pause Loop Current time indicator matches time cursor Record Button Timeline Selector Popup Menu Time cursor Animatable Property Popup Menu Timing Function Popup Menu Add Keyframe Buttons Timescale zoom slider 0 Time
8. the text element First go into edit mode by double clicking on the element and then press the pencil icon that appears below You can type any HTML into this field and see the results live as you type 9UMULT This text is bold This text is italic lt div gt This text is lt b gt bold lt b gt lt div gt lt div gt This text is lt i gt italic lt i gt lt div gt Inner HTML Editor Images Tumult Hype supports importing a wide variety of web image formats including JPEG GIF PNG and SVG To import images choose the Insert gt Image menu or use the Insert Elements toolbar item You can also drag and drop images onto the scene or paste them By default new images will be set to preserve their aspect ratio when resizing This can be disabled from the Metrics Inspector by unchecking Constrain Proportions The image can also be set back to its original size if you have changed its dimensions with the Original Size button 9rUMULT Placement D Left 151 px B Top 36 px se Width 120px vi Constrain Proportions Original Size Proportion and Sizing Options Metrics Inspector If you need an image to repeat horizontally and or vertically you can choose this option from the Element Inspector s Background property Background Fill Style Image rw B a EES Repeat Repeat E Background Property Element Inspector Compatibility note While Internet Explorer 6
9. to fade in you would select the opacity property Next you can move the time cursor to where you want the animation to begin Press the Add Keyframe button This will visibly place a keyframe on the timeline At this point you ll set the value of the property you want to animate For the fade in you would go to the Element Inspector and set the Opacity value to 0 WruMuULT To add the ending keyframe move the time cursor to the point on the timeline you d like the animation to end at Click the Add Keyframe button again this will create a second keyframe on the timeline Finally you ll want to set the property to its ending value To complete the fade in set the Opacity to 100 A bar between the keyframes will appear this indicates the property is animating Setting Keyframes on Any Property By default when you click on an element in the element list the only properties that are shown in the properties list are the opacity origin and size These are the most likely properties you ll be manipulating but Tumult Hype is capable of animating most properties you can set in the inspector To add keyframes for these you ll need to add them to the property list for the element Simply click on the property dropdown choose which property you d like to animate Now this property can be selected for adding keyframes wid Pi Pills Main Timeline eai BO oO Properties P Reset to Default Animated Position
10. a new easing property is selected Ease in out will smooth the beginning and end movements of an animation To change the easing select the bar between two keyframes then select from the easing menu to the right of the timeline area You can also double click on the animation bar between two keyframes Tumult Hype supports the following Easing Animation timing functions Instant The element jumps to the property of the next keyframe Linear Consistent speed Ease In Accelerates to a steady speed Ease Out Decelerates at the end Ease In Ease Out Default Accelerates at the beginning decelerates at the end e Bounce Movement Timing Function Ease Out Start Time 00 04 24 Duration 00 00 21 Animation Properties Menu and Pop up TUMULT Tumult Hype Documentation Scenes scenes are a useful way to separate and organize content They are similar to slides in a PowerPoint presentation or cards in HyperCard Each scene contains a unique set of elements elements are not shared across scenes When a scene is duplicated the scene contains new copies of the elements from the old scene Background The background color of a scene can be selected by going to the Scene Inspector s Colors properties If you want the scene background to be transparent then go to the Document Inspector s Options category and uncheck Draw Scene Backgrounds Colors Background Cd Background Color Property Scene Insp
11. ector Adding Removing Renaming Duplicating Every Tumult Hype document starts with one scene To add more click on the Show Scenes toolbar item then press the plus button to add a scene Scenes can be removed by going to the action gear menu and choosing Delete Scene To rename a scene double click on the title Duplicating a scene can also be accomplished from the scene view s action menu or the Scene menu If you are composing a scene with complicated animations one useful item is Duplicate Scene without animations It will take the state of the scene where at the current time and copy all elements into a new scene but without any animations WruMuULT Scene Controls scenes can be rearranged by dragging and dropping The leftmost scene is always shown first in exported documents Actions to Change Scenes Actions drive scene changes For example if you wanted to change a scene on clicking a button first select the button Then in the Mouse Action Inspector go to the On Mouse Click property and set it to Jump to Scene From here you can choose which scene to navigate to and the transition Setting a Jump To Scene Action Mouse Action Inspector scene changes can be setup for any of the other Mouse Actions and also Scene actions lf you have created different scenes to represent states in what will appear to be a coherent animation then you can setup the scene to change using the Scene Inspector
12. ed difficult hand coding There were no designer friendly tools for building animated HTML5 content until Tumult Hype Tumult Hype s powerful keyframe based animations bring your content to life Tumult Hype outputs state of the art HTML5 which works on all modern browsers and mobile devices like iPhones and iPads No coding required This user guide will walk you through the entire product and give in depth details to its workings User Interface Tumult Hype Document Window A a O 5 nnn hype Scenel B ii A Insert cae hie Front Back Zoom Scene List Scene Editor Animation Controls H Record Elements NEW_Lights_OFF_NEW R CO ma Animation Timing Properties Ease In Out z Function Properties Orain Left Origin Top Size Height Size Width Add keyframe button Timeline Key Terms There are only six key terms to learn for using Tumult Hype Scenes Elements Properties Timelines Animations and Keyframes The remainder of the user guide will reference these terms and by sticking with them you ll be fluent when conversing with other Tumult Hype users Scenes Each Tumult Hype document is composed of one or more scenes Scenes are analogous to slides in a PowerPoint presentation or cards in HyperCard You can setup actions such as those triggered by buttons to move between 9UMULT scenes Each scene contains a unique set of elements elements
13. frame the left position could be 50px and it will still end up at the 20px position Or the left position could be 20px and it will not move at all for the duration of the animation With multiple timelines the first keyframe is always a relative keyframe Playing Timelines Because of the relative keyframe behavior when running timelines items will never jump to new locations but animate smoothly This also means that if a timeline changes the property of an element will not automatically change the property will stay the same If you need to move an element back to its original spot you will need to create two keyframes one is the relative keyframe and the other will indicate that it needs to go back to its original position Main Timeline Properties v Opacity z Origin Left gt LY LY Origin Top Nt 2 2 Size Height gt Size Width lt gt If the left top are in different positions they will actually animate in this timeline WruMuULT Tumult Hype Documentation Exporting Tumult Hype will export documents to HTML5 Exporting is a one way process Tumult Hype will not read back any modifications made to the exported code Generated HTML To generate HTML choose the File gt Export as HTML 5 gt Folder menu By default it will create a folder containing two items 1 a html document Open this in your browser to see your document in action If you need to put your content int
14. ge gt Align gt Left Edges Arrange gt Align gt Vertical Centers Arrange gt Align gt Horizontal Centers Arrange gt Size gt Make Same Width Arrange gt Size gt Make Same Height e Arrange gt Size gt Make Same Size Elements can also be arranged distributed or resized in the context menu Grouping Elements can be grouped by selecting one or more elements then clicking Group in the toolbar menu Grouped items appear indented under their group name in the element list Elements can also be grouped or ungrouped in the context menu New groups are named Group but can be renamed by double clicking on the name Ly Group Ungroup Grouping Toolbar Items Elements can be dragged in or out of groups Main Timeline Box2 Box6 Box Box11 A Group in the Element List WUMULT Hiding and Locking Elements Locked elements cannot be moved on the scene or selected and hidden elements are invisible on the scene and not exported Multiple elements can be locked or hidden at a time by selecting multiple elements then clicking Lock or Hide in the context menu Both elements and groups can be locked or hidden Any adjustment to locking or visibility on a group affects the state of elements within it Main Timeline image4 Box HTML Widget Hidden Locked and Unlocked Visible elements Z Ordering The stack order of elements can be changed via
15. imeline Name Duration Main Timeline 00 02 00 Hours 00 01 00 Menu 00 01 00 Directions 00 01 00 Animation Timelines Property Scene Inspector Action Properties Timelines can be recreated when setting action properties ex On Mouse Click On Mouse Over On Key Down etc After choosing to Play Timeline select the New Timeline from the Timeline menu A sheet will ask for a name and then the new timeline will automatically be selected On Mouse Over Action Play Timeline ry Timeline New Timeline B Show Timeline Add via Action Properties Removing Timelines To remove timelines reveal the Scene Inspector and go to the Animation Timelines property Select the timeline you want to remove and hit the minus button WruMuLT Changing Timelines To change timelines open the Timeline Selector Menu above the element list and select a different timeline Behavior Relative Keyframes The most important concept to understand with multiple timelines is that of relative keyframes All animations have two keyframes a starting keyframe and an ending keyframe Typically these contain specific values For example a box might be animating its left position from 10px to 20px A relative keyframe does not define a specific value it reoresents whatever the current value for the element property happens to be at the time Thus in our previous example if starting keyframe is a relative key
16. j j Tumult H Create Animate HTML 5 User Manua TUMULT Tumult Hype Documentation Index 1 Overview o Tumult Hype for HIML5 o User Interface o Key Terms 2 Elements Element Types Arrangement Distribution and Sizing Grouping Hiding and Locking Z Ordering o HTML Representation 3 Animations o Animation User Interface o Keyframes O O O O O o Recording o Easing Animation Timing Functions 4 Scenes o Background o Adding Removing Renaming Duplicating o Actions to Change Scenes o Transitions 5 Timelines o Adding Timelines o Removing limelines o Changing Timelines o Behavior 6 Exporting o Generated HTML o Export Options o Embedding in other HTML documents o Dropbox o IBooks Widget 7 Javascript o API Functions o API Constants o Running from outside of Tumult Hype 8 Keyboard Shortcut Reference WruMuULT Tumult Hype Documentation Overview Tumult Hype is the HTML5 creation app for Mac OS X Animations and interactive content made with Tumult Hype work on desktops smartphones and iPads Wow your web visitors by making beautiful animated content with Tumult Hype Tumult Hype for HTML5 Tumult Hype is an HTML5 authoring tool What is commonly referred to as HTML5 is really a platform of technologies including the latest HTML tags CSS styles and improved JavaScript performance HITML5 s capabilities allow for stunning visual effects and smooth animations but previously requir
17. k on desired scene then press Command Shift Delete Shortcut Command R Space Show Scenes click on desired scene then press Command Shift Delete Command Right Arrow Command Left Arrow Command sShift Right Arrow Command Shift Left Arrow Command Option Shift Right Arrow Command Option Shift Left Arrow Home or Function Left Arrow Command L Using the Inspector Action Shortcut Show the Document Inspector Commana 1 Show the Scene Inspector Command 2 Show the Element Inspector Command 3 Show the Metrics Inspector Command 4 Show the Text Inspector Command 5 or Command T Show the Mouse Action Inspector Command 6 Show the Identity Inspector Command 7 Additional questions lf you have any additional questions not covered here please visit the scenes support forum or ask us a question YTUMULT Information Property of Tumult Inc PDF Format Created by Threshold Media Productions
18. line View with Animations See eee ee Keyframes Keyframes are a way of specifying a value for a property at a specific point in time In traditional hand drawn animation creating frames is split between two groups of people keyframe artists and inbetweeners The keyframe artists would draw the most significant frames usually where shifts in action would occur If they were animating a bouncing ball they might draw two frames the top of the bounce and when the ball hits the ground The inbetweener would the do the more tedious work of drawing the intermediate frames to bring the ball to life You are the keyframe artist when using Tumult Hype You can specify keyframes for element properties on the timeline Unlike traditional animation Tumult Tumult Hype will automatically generate the inbetween frames for you Adding Keyframes Keyframes operate on specific properties An animation requires two keyframes a starting keyframe and an ending keyframe The inbetween frames are automatically formed and will smoothly transition the property value from the start to the end Starting Keyframe Ending Keyframe Oz O Ld Animation Animation Keyframes To add the starting keyframe first select an element in the scene editor This will also appear highlighted in the element list on the timeline In the property list below the element you can select a specific property that you want to animate For example if you wanted an object
19. neNamed sceneName optionalTransition Changes to the specified scene If the optionalTransition is not specified it will default to the instant transition See below for a list of valid transition constants hypeDocument showNextScene optionalTransition Shows the next scene based on the order in the scene selector interface If the optionalTransition is not specified it will default to the instant transition See below for a list of valid transition constants hypeDocument showPreviousScene optional Transition Shows the previous scene based on the order in the scene selector interface If the optionalTransition is not specified it will default to the instant transition See below for a list of valid transition constants WruMuULT hypeDocument playTimelineNamed timelineName Plays the specified timeline for the current scene Note timelines are user defined so they are not enforced to be unique If you are going to use this function be sure that no two timelines in any scene have the same name hypeDocument getElementByld id searches the current document for the specified id entered through the Identity inspector s Unique Element ID and returns the DOM HTML Element This is similar to the typical document getElementByld however the API version should be used instead as Tumult Hype may reassign ids in cases of collision API Constants The only constants exposed are those for scene transitions hypeDocument
20. o a different document see Embedding in other HTML documents below 2 a_Resources folder This folder contains all references images and videos along with these files HYPE js this file is the main runtime for executing Tumult Hype documents documentName_hype_generated_script js this contains the data Scenes animations etc for your document PIE htc this file is an HTML Component for Internet Explorer that extends its abilities to display gradients and rounded borders See css3pie com for more info e600 My Hype Animation SES DOES O Size Kind Y My Hype Animation_Resources Folder js HYPE js 39 KB JavaScript script js myhypeanimation_ generated_script js 4 KB JavaScript script _ PIE Ate 31 KB JavaScript source My Hype Animation html 767 bytes WUMULT Exported Folder Contents Export Options At export time there are several different options you can choose Save As MyDocument Je 1 Where 5 Desktop A Exporting will create a Filename _Resources folder containing javascripts images video and audio files M Also save html file M Create enclosing folder M Show Built with Hype Cancel Save Export Options Also save html file If this is checked it will output the HTML file mentioned above Unchecking this option is useful if you ve made modifications to the HTML file and do not want it to be overwritten or if you have a different HTML
21. on the timeline By creating two keyframes at different times an animation between the two properties will be created WruMuULT Hype Documentation Elements Elements are the manipulatable objects in a scene They can be text images video boxes or buttons Element Types Text To add text to a scene choose the Insert gt Text menu or use the Insert Elements toolbar item The text will be start by being editable to edit the text at a later point simple double click the text to get back into editing mode As you type the text field will automatically expand to fit to size If you manually resize the field then it will stay at that size specified To modify the style choose the Tools gt Text Inspector menu This will allow you to change the font size style color shadow and spacing To smoothly animate these properties select the entire element instead of a portion of the text when modifying keyframes 800 Text Inspector Alignment Font Family All Fonts Size Arial 16 px Arial Black Brush Script MT 10 Comic Sans MS ll Courier 12 Courier New 13 Georgia 14 Helvetica 16 Y Style B Z U Color Text Shadow Opx 8 Blur Opx px T Y 0px 8 Color Text Spacing Letter Spacing 0px 8 Word Spacing EN a Opx 8 Line Height y 0px f P I fle l l Text Inspector For even more styling control you can directly edit the inner HTML for
22. or 3s keyframe marks say it is at 1s and the element s left origin is now set to 15px then the keyframes are simply offset The starting keyframe will begin at 15px and the ending keyframe will be at 2opx thus the distance of ten pixels is retained WUMULT Manipulating Keyframes Keyframes support most standard manipulations they can be dragged to move multiply selected copied and pasted While keyframes are represented by diamonds in the property area the duration and span of animations are represented by the bars between keyframes To the right of the elements are animation overview bars which represent keyframes as white lines These bars can be resized and dragged to adjust animations Main Timeline 2 7 aan S a S S E Ea S ee Box O Box Oo a Animation Overview Bar and Keyframe indicators Copying and Pasting Animations To duplicate an element and its animations select the element click Copy in the Edit menu then Paste with Animations in the Edit menu This function is also in the context menu Keyframes and animations can also be copied directly from the animation area Recording Recording is an intuitive way to automatically generate keyframes for creating animations Simply hit the record button move the timeline and set the properties in the inspector you want to change WUMULT Easing Animation Timing Functions By default animations are set to ease in out until
23. rt gt Box menu or the Insert Elements toolbar item It can be repurposed to make horizontal or vertical lines background shapes and even circles with border rounding Buttons Buttons are elements which have different appearances on mouse hover and pressed states You can add a button via the Insert gt Button menu or Insert Elements toolbar item You can also convert any other element to a button via the Edit gt Show Button Controls menu item 9UMULT Insert Scene Format Arra Hype File Undo Z Redo TZ Cut X Copy aC Paste V Paste with Animations Paste and Match Style s V Delete Select All aA Duplicate 36D Edit Element Edit Element s Inner HTML Hide Button Controls Clear All Button States Find Spelling and Grammar Substitutions Transformations Speech YYYY Y Special Characters Button Items in the Edit Menu When the element is selected this will show a segmented control above letting you select the normal hover and pressed states If you do not want the element to be a button anymore you can choose Edit gt Clear All Button States and then Edit gt Hide Button Controls 9rUMULT Normal Pressed _ _ _ _ _ood Button 9 OOO Button Controls HTML Widget An HTML widget can be used to display embedded HTML in your scene or an iframe of a different web page One use for this element is to embed a code snippet that requires it
24. s On Animation Complete action property Transitions Tumult Hype supports a different effects for transitioning between scenes Instant The scene changes immediately Crossfade The scene dissolves into the next scene Swap The scenes exchange places using a 3D effect Push The scenes move simultaneously so one is shown and the other is hidden Note Crossfade Swap and Push transitions are only shown in Webkit based browsers and Firefox WrUMULT Tumult Hype Documentation Timelines A timeline runs animations Each scene has at least one timeline the Main Timeline which is run when the scene is first shown You can create other timelines which can be invoked via actions or the Javascript API Because timelines occur within a scene you can take the same elements and animate them on separate timelines This behavior can be used to add interactivity Adding Timelines There are three ways to create timelines Timeline Selector Menu Timelines can be added via the Timeline Selector Menu which is next to the Timeline Ruler Simply choose New Timeline give it a name and hit create The new timeline will automatically be selected Main Timeline Timeline Selector Menu FrUMULT Animation Timelines in the Scene Inspector Open the Scene Inspector and press the button in the Animation Timelines section You can rename timelines by double clicking on the timeline name Animation Timelines T
25. s own Javascript To add a Twitter widget for example you would click Edit Code Snippet and paste your code in the Inner HTML box shown 9UMULT Hype hypeapp hypeapp leif_ottosson Thanks for the suggestion 6 hours ago reply retweet favorite hypeapp lonseidman Thanks for sharing Let us know if you discover anything new with this implementation We ll do gt the same yesterday reply retweet favorte hypeapp mk27ja95 Can you email us at support tumultco com and we ll take a look Thanks yesterday reply retweet faworte Join the conversation o P lt script charset utf 8 sre http widgets twimg com 2 widget s gt lt script gt lt script gt new TWTR Widget version 2 type profile rpp 3 interval 30000 width 180 An HTML widget containing Twitter Widget Code To display a webpage within the HTML widget click the radio button for Specified URL and enter the full URL make sure to include http Type Embedded HTML Edit Code Snippet Specified URL Display a Web Page within an HTML widget yrumuLT Arrangement Distribution and Sizing The Arrange menu has several different ways to arrange distribute and resize Arrange gt Distribute gt Horizontally Arrange gt Distribute gt Vertically Arrange gt Align gt Top Edges Arrange gt Align gt Bottom Edges Arrange gt Align gt Right Edges Arran
26. size element from center Constrain aspect ratio when resizing element Constrain aspect ratio when resizing element from center Turn off alignment guides Duplicate selected element Paste with Animations Send element to the back send element one layer back WruMuULT Shortcut Command Shift E Command Return Command Option Return Command gt Command lt Command Shift J Command Shift L Command Shift Question Mark 7 Click Inspector in the Toolbar or Command Shift l Click Colors in the Toolbar or Command Shift C Command Option T Shortcut Arrow keys Shift Arrow keys Shift click or Command click shift drag or Command drag Drag handle Option drag handle Shift drag handle Option Shift drag handle Command drag Hold down Option and drag Command Option V Shift Command B Option Shift Command B Bring element to the front Bring element one layer forward Group Ungroup Working With Scenes Action Create new scene Select next scene Select previous scene Delete selected scene Editing Animations Action Toggle recording Play or stop and restart animation Delete selected scene Next frame Previous frame Forward 1 Second Backward 1 Second Jump to Start Jump to End Restart animation Loop playback Shift Command F Option Shift Command F Command Option G Command Option Shift G Shortcut Command Shift N Command Option Right Arrow Command Option Left Arrow Show Scenes clic
Download Pdf Manuals
Related Search