#Pubcoder drag and drop how to
Here, we just want to demonstrate how to access third-party APIs of an imported object in PubCoder, so we will just point out that the first line in the code gets a reference to the Hype document object - eventually replace the object id (“obj4”) and the name of the document (“fishes”)-, the second block pauses the three timelines that move the three fishes horizontally, while the third block pauses the fin movement of the three fishes. Of course, going deep into the Hype JavaScript API is not the purpose of this article, you can read their docs for this. Var fishes = hypeDocument.getSymbolInstancesByName("fish") įishes.pauseTimelineNamed("movement") HypeDocument.pauseTimelineNamed('fish 3') HypeDocument.pauseTimelineNamed('fish 2') HypeDocument.pauseTimelineNamed('fish 1') To get the window object of the iframe, thus having access to everything in it, just use: While your widget is embedded in the iframe, you can still interact with it, both using the standard PubCoder events and actions to, for example, move/hide/show the widget, and using code to interact with its content.
This technique can be used whenever you want to include HTML code in your project that you don’t want to convert to XHTML: just import your HTML file(s) and use an iframe to place them on your page! Interacting with the iframe We’re done! You can now preview your project and see the animation up and running. Remember to also add the name of the main HTML file in the Hype-exported folder to complete the path in the src attribute. This will attach the entire folder to your exported project (as shown by the clip icon), meaning that it will be included as-is at export time. To get the path, switch to the “folders” section of the Assets panel in the code editor, right-click the animation folder and select “Attach Asset and Copy URL”.
#Pubcoder drag and drop download
We will use a simplified version of one of Hype’s example projects that you can download here.
#Pubcoder drag and drop mac
Tumult Hype is a notorious Mac application that allows you to create stunning animations and export them as HTML5.Īs an example of importing HTML5 widgets in PubCoder, we are now going to import a Hype animation, step-by-step. Luckily there’s an easy workaround for this, which is using an iframe to embed your content (from a separate HTML file) in the Smart Object. That is the case with animations made with Hype, as we will see in a minute. These fixes can be trivial for small amounts of code but pretty annoying if you include a lot of code, or in case you are including ready-to-use content exported from external applications, which you do not want to edit at all. The code editor will warn you if you are writing non-XHTML code, but fixing the issue is up to you. For example, while is valid HTML, it would be required to write in XHTML.
Basically, XHTML requires that there be an end tag to every start tag and all nested tags must be closed in the right order. It does not allow omission of any tags or use of attribute minimization. XHTML is a family of XML languages which extend or mirror versions of HTML. You can write code yourself or include ready-to-use content or widgets made with external applications this can be easily achieved by importing the needed assets in your PubCoder project and using a Smart Object as a container on your page.Ī minor issue with this approach is that code from external sources is often based on HTML5 while PubCoder works with XHTML, since this format ensures compatibility with EPUB format and better tooling for code parsing and handling. One of the most loved features in PubCoder is the ability to extend its capabilities with custom code and content based on web standards like HTML, CSS and Javascript.
0 kommentar(er)
