A. Installing Edge Animate and Edge Tools

Introduction

This appendix describes how to prepare and install Adobe Edge Animate and Edge Tools & Services. The temptation is to download the software and start the installation, but you can avoid problems by making sure your system is ready for the software. Before you install Edge Animate and its related tools and services, you need to check your system hardware and software and make several setup decisions that relate to your system. The Adobe Setup wizard walks you through the installation process.

Adobe is continually updating and enhancing Edge Animate and its related tools and services. Instead of releasing multiple updates individually, periodically Adobe releases updates, which provides all-in-one access to the most up-to-date drivers, tools, enhancements, and other critical fixes. Updates are available free for download and installation over the Internet from Adobe Creative Cloud.

Preparing for Edge Animate and Edge Tools

Along with Edge Animate, there are other tools and services you can use to develop content for the web. These tools and services include Edge Reflow, Edge Code, Edge Inspect, Edge Web Fonts, Typekit, and PhoneGap Build.

Edge Animate

With Edge Animate, you can create interactive and animated content using HTML and JavaScript.

Edge Reflow

With Edge Reflow, you can create responsive layouts and visuals with standards-based CSS. This program allows you to use the power of CSS to create designs simultaneously for all screen sizes without sacrificing your design look, quality, or capability.

Edge Code

With Edge Code, you can view and work with code content and application with HTML, CSS, and JavaScript. This program allows you to preview CSS, edit code, and use integrated visual design tools to help speed up the development process.

Edge Inspect

With Edge Inspect, you can preview and inspect your web designs on mobile devices. This program allows you to synchronize browsing in Chrome for wirelessly paired iOS and Android devices, update a device with remote inspection, and capture screenshots from all connected devices.

Edge Web Fonts

With Edge Web Fonts, you can get access to a free web font library from Adobe and Google for use in your site designs.

Adobe Typekit

With Typekit, you can browse commercial fonts by classification, properties, or recommended use, and add them to your site designs.

PhoneGap Build

With PhoneGap Build, you can build mobile apps with HTML, CSS, and JavaScript by reusing existing skills, frameworks, and tools and package mobile apps in the cloud.

Getting Edge Animate and Edge Tools & Services

Adobe Edge Animate and Edge Tools & Services are available for download on the web from Adobe Creative Cloud services at create.adobe.com or html.adobe.com/edge. After you sign up for a membership, you’ll have access to Edge Animate and other Adobe Edge Tools & Services. You can download Edge Animate and its related tools on either the Apple OS X or Windows platforms as separate programs from the site to your hard drive before you install each one on your system. Some tools may be in the development or preview status, so check with Adobe for the latest version available.

Edge Animate System Requirements

Before you can install Adobe Edge Animate and development content, you need to make sure your computer meets the minimum system requirements. You can create Edge Animate content on Windows and Macintosh computers.

For Windows Computers

You need to have a computer with the following minimum configuration:

• Intel Pentium 4 or AMD Athlon 64 processor or equivalent.

• 32-bit and 64-bit computers; the 32-bit application runs on both.

• 1 GB of RAM.

• 200 MB available disk space for installation.

• 1280x800 display resolution with 16-bit video card.

• Microsoft Windows 7 or Windows 8 operating system.

• Internet (broadband connection) required for online services.

• Languages: English, French, German, Japanese, Italian, and Spanish.

For Macintosh Computers

You need to have a computer with the following minimum configuration:

• Multicore Intel-based Macintosh.

• 32-bit and 64-bit computers; the 32-bit application runs on both.

• 1 GB of RAM.

• 200 MB available disk space for installation.

• 1280x800 display resolution with 16-bit video card.

• Mac OS X v10.6, v10.7, or v10.8 operating system.

• Internet (broadband connection) required for online services.

• Languages: English, French, German, Japanese, Italian, and Spanish.

For Browsers and Devices

You can use Edge Animate on Windows and Macintosh computers to create motion content that runs on desktop browsers, such as Mozilla Firefox, Apple Safari, Google Chrome, and Microsoft Internet Explorer 9, and mobile devices, such as Apple iOS and Android. Edge Animate content runs on WebKit enabled devices, such as Chrome, Safari, and Amazon Kindle. WebKit is a layout engine designed to allow web browsers to render web pages.

Downloading Edge Animate and Tools

Adobe Edge Animate and Edge Tools & Services are available for download on the web through Adobe Creative Cloud services at create.adobe.com or html.adobe.com/edge. After you sign up for a free or purchase plan membership, you’ll have access to Edge Animate and other Adobe Edge Tools & Services, such as Edge Inspect and PhoneGap Build. Edge Animate 1.0 is free for a limited time from Adobe; check the Creative Cloud site for the latest details and availability. You can download Edge Animate using Adobe Application Manager and its related tools as separate programs from the site to your hard drive before you install each one on your system. You can download Edge Animate and its related tools on either the Apple OS X or Windows platforms. Along with the Edge tools, you can access Edge Services, such as Edge Web Fonts, Typekit, and PhoneGap Build, which are available online through Creative Cloud.

Download Edge Animate

In your web browser, go to creative.adobe.com, and then sign in to Creative Cloud or create a new account.

• You can also access the software from html.adobe.com/edge, read the screen, and then click Get Started.

Click the Apps link, and then click the Download link for Edge Animate.

Read the alert message with download information, and then click OK.

Adobe Application Manager is downloaded to the Downloads folder on your hard disk unless you specify another location.

Click Save to save the program to the Downloads folder or click Run to start the install.

• To save the download in another folder, click the Save list arrow, and then click Save as; your browser might differ.

Click the Close button to exit your web browser.

Download Edge Tools and Access Edge Services

In your web browser, go to creative.adobe.com, and then sign in to Creative Cloud or create a new account.

• You can also access the software from html.adobe.com/edge, read the screen, and then click Get Started.

Click the Apps link, and then follow the download instructions:

• Edge Code. Click the Download link, and then click OK.

• Edge Inspect. Click the Learn More link, click Download, and then click OK.

You also need to download the Google Chrome browser extension and install the mobile client on your devices (iOS, Android, and Kindle Fire).

• Edge Web Fonts. A service with nothing to download. Click the Learn More link to find out more and preview Edge Web Fonts.

• Typekit. A service with nothing to download; it comes with Creative Cloud. Click the Learn More link to find out more.

• PhoneGap Build. A service with nothing to download; it comes with Creative Cloud. Click the Package apps link to access the service.

Click Save to save the program to the Download folder or click Run to start the install.

• To save the download in another folder, click the Save list arrow, and then click Save as; your browser might differ.

Click the Close button to exit your web browser.

Installing Edge Animate and Tools

Edge Animate 1.0 is free for a limited time from Adobe; check the Adobe Creative Cloud site (creative.adobe.com) for the latest details and availability. To install Adobe Edge Animate, download the installer, Adobe Application Manager, from Creative Cloud to your hard drive, start it, and then follow the on-screen instructions. The installation includes all the required components you need to develop Edge Animate content. With the Adobe Application Manager, you can also install other Adobe programs that come with a Creative Cloud membership. To install Edge Tools, such as Edge Inspect and Edge Code, download the individual installers from Creative Cloud to your hard drive, start each one individually, and then follow the on-screen instructions.

Install Edge Animate

Open the Downloads folder or the location where you downloaded the Adobe Application Manager file.

Double-click the setup icon.

• Windows. Double-click the AdobeApplicationManager.exe file to start the installation of the Edge Animate program.

• Macintosh. Double-click the AdobeApplicationManager DMG file to uncompress and start the installation of the Edge Animate program.

Follow the on-screen instructions to install the product; the installer asks you to:

• Read and accept a licensing agreement; click Accept.

• Click Install to start the installation process, if necessary.

• Upon completion, click Launch App if you want to start it from Adobe Application Manager.

Click the Close button to exit Adobe Application Manager.

Install Edge Tools

Open the Downloads folder or the location where you downloaded the Adobe Application Manager file.

Double-click the setup icon.

• Windows. Double-click the Installer Package file (.msi) to start the installation of the Edge Tool program files.

• Macintosh. Double-click the Installer DMG file to uncompress and start the installation of the Edge Tool program files.

Follow the on-screen instructions to install the product; the installer asks you to:

• Read and accept a licensing agreement; click Next to continue.

• Specify where you want to install the software; typically located in the Program Files/Adobe folder (Win) or Applications folder (Mac); click Next to continue.

• Click Install to start the installation process.

• Upon completion, click Finish.

Finishing the Edge Inspect Install

Edge Edge Inspect is a tool that allows you to preview and inspect your web designs on mobile devices. This program allows you to synchronize browsing in Chrome for wirelessly paired iOS and Android devices, update a device with remote inspection, and capture screenshots from all connected devices. After you download and install the Edge Inspect program from Adobe Creative Cloud, there are still a couple of things you need to do to start using it. These include installing the Chrome extension, set up Bonjour (which provides auto discovery for devices), and install Edge Inspect device clients (iOS, Android, and Kindle Fire). Google Chrome must be installed as all interactions with devices are controlled from the Edge Inspect Chrome extension.

Finish the Edge Inspect Install

Download and install the Adobe Edge Inspect program.

Install Google Chrome and the Edge Inspect Chrome extension. In your web browser, go to the following sites.

• Google Chrome. Go to chrome.google.com.

• Edge Inspect Chrome Extension. Go to www.adobe.com/go/edgeinspect_chrome.

Click the Close button to exit your web browser.

Install Bonjour, which is available in the folder location where you installed Adobe Edge Inspect.

• Windows. Start the installer at the following default location on your computer:

Win32: Program FilesAdobeAdobe Edge InspectBonjourPSSetup.exe.

Win64: Program Files (x86)AdobeAdobe Edge InspectBonjourPSSetup.exe.

Follow the on-screen instructions to complete the installation.

• Macintosh. Bonjour is enabled by default; no action required.

For each device you want to use with Edge Inspect, navigate the device to the appropriate store and then download and install the free Edge Inspect app on your devices.

• iOS. Go to www.adobe.com/go/edgeinspect_ios.

• Android. www.adobe.com/go/edgeinspect_android.

• Kindle Fire. www.adobe.com/go/edgeinspect_amazon.

Connect your devices to your computer.

• Make sure your computer and devices are all on the same network.

• Start the Edge Inspect program on your computer and the Edge Inspect apps on each of your devices.

• Let the devices discover the computer via Bonjour, or manually connect them by entering the IP address.

• Enter the passcode for each device in the Edge Inspect Chrome extension to perform a one-time pairing process.