object follow a path in animation html5 palette

Ask questions about creating HTML5 Publications using QuarkXPress 2016. HTML5 Publications allow you to create online publications with near-WYSIWYG typography and design and app-like interactivity – at no extra cost.

object follow a path in animation html5 palette

Postby Lisascarlet » 01 Jun 2016, 04:30

Hi, I am drawing a path with the line tool as an animation, and saving as path1. when I assign an object to use the path, it doesn't follow it. I have to use a instruction from the drop down such as fly in from right. So therefore it just does that and ignores the path - can any one help?
Posts: 10
Joined: 05 May 2011, 06:00

Re: object follow a path in animation html5 palette

Postby QuarkXPressUser » 01 Jun 2016, 11:27

A couple of things to note first:
1. The preview in HTML5 palette doesn't show the motion on path, it only shows for predefined presets
2. QuarkXPress only supports the motion on a line between two points, it doesn't move object on a curved path if you chose one. It just moves the object from one end-point of 'path' object to another end-point in a straight line. Though it supports growing\rotating objects while its moving.

Here are the steps for 'Object that follow a path in animation':
1. Create a box, e.g. a picture box with some image - This is the object that you want to follow a path.
2. Create a line - This is the path that object will follow
3. Open the HTML5 palette if not already open and select the line (path) if not already selected.
5. In HTML5 palette Name field, give the name to line e.g. Path1
6. Select the box (object) created in step1 and click on Animation button in HTML5 palette to apply animation interactivity.
7. In path popup select 'Path1'
Now just click on Preview HTML5 publication near horizontal scrollbar to preview the layout in your default browser.

You can change the direction of motion by clicking the tiny button next to path popup which is enabled once you select the path.
If you want the object to grow while its moving just change the 'Animate To' scale accordingly.
Posts: 157
Joined: 20 Oct 2008, 23:49

Return to HTML5 Publications – from scratch and convert from Print

Who is online

Users browsing this forum: No registered users and 1 guest