Adobe Edge Animate CC For Dummies (2013)

Part IV

Putting Your Animation to Use

Chapter 15 Putting Your Project on the Web

In This Chapter

Publishing your project as a standalone page or site

Placing your composition into an existing web page

Embedding your composition into a Joomla! article

Finding the WordPress plug-in

Placing your composition online can mean many things to many different people. The process is different depending on the type of site to which you want to add your composition. You can use your Edge Animate project as its own stand-alone site or page. You can embed your composition into an existing web page. If you use the Joomla! content management system (CMS), you can add your animation using a wrapper module. If using WordPress is more your style, you can use an Edge Suite extension.

tip.eps No matter how you plan to use your animation online, using a good FTP (File Transfer Protocol) solution is the recommended means to uploading your files, which is necessary for most of the sections in this chapter. If you don't already use FTP, I can suggest using FileZilla (http://filezilla-project.org), which many other companies and individuals have suggested to me over the years. FileZilla is free and intuitive to use. If you have trouble figuring something out, documentation is easily available (http://wiki.filezilla-project.org/Documentation). FileZilla is continuously updated and supported as open-source software.

This book doesn't cover buying domains or getting a web host. I assume that you, or your client, already have a web host and domain. If you don't have a web host or a domain, I suggest looking into that before moving forward. Personally, I've used Bluehost (www.bluehost.com) for more than five years and have never had a problem. Its customer service is fast and responsive, and the service representatives can generally help you with any situation. You don't have to take my word for it, though; you can use WebHostingChoice (http://webhostingchoice.com) as a starting point to research the top web hosts.

Posting Your Composition as a Standalone Page

A good example of a stand-alone page or website is an informative and interactive set of graphics and text. Informative graphics can have rollovers for more information or an intuitive navigation menu that is presented using cues mixed among the text and images (as opposed to a menu bar running along the borders of the site).

Refer to Chapter 14 for how to get your animation ready for publication. Now is a good time to review how to use the publishing settings, in particular the section on using the web options.

Uploading your animation through your own hosted site

If you host your own site, simply copy and paste your files into your site's directory. The only file that you don't have to copy over is the .an file (the Animate file). If Edge Animate generates a debug.log file, you don't have to copy over that file either. For more information on the files and folders that Edge Animate creates, see Chapter 13; Chapter 14 provides information on the publishing settings for deploying to the web.

tip.eps I highly recommend using the publishing settings (see Chapter 14) and transferring the files and folders that Edge Animate generates within the publish\web folder structure to your web host. This folder structure doesn't contain the .an file. It contains only optimized files for web use.

When you copy over the files, be sure to include the images and the edge_includes folder and all of the files in those folders.

After you copy over the files and folders, your Edge Animate composition should appear online. You can find it at the URL according to how your directory is set up and based on the name of the HTML file. For example, if the name of your HTML file is slide-show-animation.html, you can find your composition at www.yourwebsiteurl.com/slide-show-animation.html.

Uploading to your hosted site through FTP

If you want to put your animation online through a web host, I recommend using good FTP software such as FileZilla. To the uninitiated, using FTP may sound a little scary, but it’s no more complicated than using folders and files just like the ones on your desktop computer.

Creating a new directory for your composition

To keep your files organized, create a new folder, or directory, in your overall site’s directory to store your animation compositions. To do so in FileZilla, simply right-click where you want the new folder to be and then choose Create Directory, as shown in Figure 15-1.

Create the new folder in the root folder that contains your site. For example, you probably have a folder called public_html, which is where you store your site's files and additional folders. Or your root folder may be simply called yoursite.com; it all depends on how your site was originally set up.

Figure 15-1: Create a new directory for your animation.

tip.eps Name your new directory something generic, like animations, that way you can use this folder again for future animation compositions.

Uploading your files

With the new folder set up, it’s time to import, or upload, your animation. If you’re using FileZilla or similar FTP software, uploading the files is a matter of a simple drag-and-drop or copy-and-paste action. You can also click File→Import on FileZilla’s menu bar.

After you create the new directory and upload the files, your directory should look similar to Figure 15-2.

Figure 15-2: Your animation directory.

Finding your animation online

Now, to find your animation online, simply follow the specific URL path that you set up. In this example, the URL is similar to

http://www.yoursite.com/slideshow-animation/slide-show-animation.html.

Adding Your Project into an Existing Web Page

Often your end goal for your animation is to embed it in an existing web page, such as an animation slideshow on a restaurant site. Here is a step-by-step guide on how to embed your animation in an existing web page:

1. Find the HTML file you want your composition to appear in.

2. Open the Edge Animate HTML file. Copy everything between  and , which is found in the <head> tags.

3. Paste the code in the <head> tags of the web page in which you want your animation to appear.

4. Copy this code, which appears between the <body> tags:

</div>

5. Paste the code into the HTML file of the web page where you want the animation to appear.

6. Save the updated HTML file.

7. Upload the Animate files and folders into the same folder as the HTML file that now contains your animation.

See the previous section on uploading your files for more information.

8. Preview, test, and fine-tune how the animation appears in the page.

When you copy over code, don't copy the <title> tag from your Animate HTML file. Doing so may conflict with the <title> tag on the HTML file that you're copying into. Also, don't copy the <body style="margin:0;padding:0;"> code from your Animate HTML file. Doing so might conflict with the <body> tag on the HTML page that you're copying into.

Don’t break the path that connects the HTML file, the JavaScript files, and the image folder. If the paths don’t remain consistent, your animation will not work properly.

There’s a very good chance that you’ll need to fine-tune the CSS or other design parameters of the web page to ensure that the animation appears as you want it to look in the page. Each web page is unique. However, whoever originally designed the web page most likely knows what to do to make sure your composition looks good on the page.

Putting Your Composition into a Joomla! Site

If you use Joomla! as a content management system (CMS), how do you get your composition to show up on your site? The answer is pretty simple: You make a wrapper module. A wrapper module in Joomla! enables you to create an iFrame. An iFrame allows you to add content from another URL into your Joomla! article. The following section explains how to do this.

The first thing you need to do is upload your Edge Animate files, as described earlier in this chapter. That effectively puts your animation online. But that doesn’t help with placing your animation in your Joomla! site; it simply appears online as though you posted it as its own page.

The easiest and quickest way to put your animation in Joomla! — for example, in an article or on the front page — is by using a wrapper module.

The following procedure creates a wrapper module for your animation and uses that module in an article to get your animation to appear on your Joomla! site.

1. To create a wrapper module, go to the Joomla! main menu and click Extensions→Module Manager (Figure 15-3).

Figure 15-3: Open the Module Manager from the main menu.

2. Click New, as shown in Figure 15-4.

Figure 15-4: Creating a new module in Joomla!.

3. Choose Wrapper from the list of available modules.

4. Configure the module as shown in Figure 15-5:

a. Fill in the Title field.

b. Name the Position.

c. Set the Status to Published.

d. Insert the URL in the appropriate field.

e. Set the Height (you can leave the Width at 100%).

f. Assign the module to all pages down at the bottom in the Menu Assignment box (not shown in Figure 15-5).

Figure 15-5: Configure the Wrapper module.

5. Click Save & Close from the top-right corner.

6. Insert this wrapper module into the article in which you want your animation to appear.

Within Joomla!, navigate to the appropriate article and then insert the wrapper module by typing {loadposition customposition} where you want the animation to appear, where customposition is the position name you used in Step 4b.

tip.eps You can find an Edge Suite plug-in for WordPress. This plug-in enables you to add your Edge Animate composition into a WordPress site. You can find the Edge Suite plug-in for WordPress at http://wordpress.org/extend/plugins/edge-suite

From that page, you can find links to helpful tutorials on how to use the plug-in.