Page 533 - Xara Designer Pro X17

Web Graphics and Websites 533

Flash files
To include a Flash animation on your website, import the Flash file (.swf). You can simply
drag and drop the file from Windows Explorer onto your web page document or else use
"FILE" > "IMPORT".

The Flash file is copied into the support folder of your design, so it will be exported and
published with your website. And a placeholder image is rendered and placed onto your
page.
You can resize Flash animations, so simply use the SELECTOR TOOL to resize the
placeholder image to the required size, and position it by dragging it around.

Preview your page to see your working Flash animation on your web page. You must
have Flash installed in order for it to play successfully.

MP3 files
Import an MP3 file to add audio to your web page. A prompt allows you to choose
whether the audio should start automatically when your page is loaded (some browsers
may restrict this) or whether it should only start when the play button is pressed on the
player.

As with the other file types above, a placeholder image showing the player is generated
and placed on your page and the MP3 file and all other files needed to make the player
work are copied to the support folder of your document and will be included in your
exported website. Preview page to see the player in action.

The player is simple and unobtrusive. You can start and stop the audio, click on the time
line to jump to different parts of the audio, adjust the volume (click on the volume
indicator line) and mute (click the speaker icon).

Technical note: The player uses the native HTML 5 capabilities of the web browser to
play the audio, if the browser supports it and if it also supports the MP3 format.
Otherwise Flash is used. This means the player will work in all major browser versions
(older browsers don’t support HTML 5 and even some modern browsers don’t directly
support MP3).

Animated GIFs
Add an animated GIF to your page just the same way as for Flash files. Import or drag
and drop the GIF file onto your page. It gets copied to your design’s support folder and a
static placeholder image is generated for it. Resize and position the placeholder, then
preview your page and you’re done!

PDF Files
You can import PDF files into a web document in two different ways. Either import it so
that the contents of the file are copied onto your page (as when importing a photo). Or
you can link to a copy of the file in your website and have the file published with your site.