When you’re completed designing your composition in Edge Animate, it is time to publish it. You’ve gotten a number of choices in terms of publishing, together with export codecs and choices and show choices for the net.
On this article, we’ll cowl:
Publishing your composition
Making a Down-Stage Stage
Including a preloader
Embedding a composition into an present net web page
Publishing Your Composition
To publish a composition, go to File>Publish.
Subsequent, discover the folder that incorporates your Edge Animate composition. You will note a folder named Publish.
Open the folder.
You will note a folder named Net.
Open the Net folder and you will note all of your recordsdata.
Exploring Publishing Choices
Within the final part, we discovered tips on how to publish your composition. If you publish a composition, it’s not revealed on to the Web. As a substitute, it’s revealed as a format to a folder. We selected the HTML format so we might view our recordsdata in an online browser or combine them with an online web page. Nonetheless, publishing for the net is just one choice. There are additionally two extra.
Go to File>Publish Settings.
You’ll then see the Publish Settings dialogue field.
On the left aspect of this dialogue field, you’ll be able to select a publish goal.
You possibly can publish your composition to:
Net . This shall be checked by default. The recordsdata shall be revealed for net browsers.
Animate Deployment Package deal . This publishes to a .OAM file that you would be able to import into InDesign. It may be used with the Adobe Digital Publishing Suite.
iBooks/OS X . This publishes to a WDGT file. You possibly can then import your composition into iBook Creator, then publish to iTunes.
There are further settings on the appropriate for the Net:
Goal listing is the placement of the revealed recordsdata – or the place you need them to look.
Use Google Chrome Body for IE 6, 7, and eight makes it so your composition could be seen in non-HMTL5 browsers.
About Overflow Choices
If you view your composition in a browser window, you might discover that parts that stretch off the Stage are seen whenever you view them within the browser. After all, you don’t need that to occur. You might have a picture on the Stage, however solely have half of it on the Stage, as a result of that is all you need displayed as a part of the composition. If all the picture is displayed within the browser, it will possibly break the look of all the composition.
The Overflow property in Edge Animate offers you management of things which can be off the Stage. You will see that the Overflow property within the Properties panel.
Click on to pick out the Stage component within the Parts panel.
The Overflow property within the Properties panel is circled beneath:
You possibly can select from the next choices:
Seen exhibits all parts, even when they’re off the Stage.
Hidden exhibits content material on the Stage solely.
Scroll provides browser scroll bars to the Stage.
Auto provides scroll bars when content material goes off the Stage.
Let’s check out the way it works.
Within the instance beneath, our component extends off the Stage.
If we set the Overflow property to hidden, then preview the composition in a browser window, solely the portion of the picture that’s on the Stage is proven.
Nonetheless, if we select the seen property, even the a part of the picture that’s off the Stage is displayed within the browser window:
Making a Down-Stage Stage
The animations and interplay that you just create in Edge Animate won’t seem in older, non-HTML5 browsers, equivalent to IE 6 and seven. Which means that viewers who nonetheless use the older browsers will be unable to view your composition. Edge Animate permits you show alternate content material within the type of a static picture to viewers with older browsers by providing you the flexibility to create a down-level Stage.
To create a down-level Stage, click on to pick out the Stage component within the Parts panel.
Subsequent, go to the Properties panel and click on the Edit button for Down-Stage Stage.
You might be then taken to the Down-Stage Stage, as proven beneath.
If you’re within the Down-Stage Stage, a lot of the instruments and timeline are grayed out. You might be solely allowed so as to add static photographs, in addition to textual content.
You may also see a discover that you have not but arrange your Down-level Stage.
To arrange the Stage, drag a picture from the Library panel onto the Stage.
If you wish to add textual content, you are able to do so utilizing the Textual content software. Merely click on on the Stage to insert textual content.
The weather that you just add to the Down-Stage Stage seem within the Parts panel as a baby of the Down-Stage image.
Utilizing a Single Body as Down-Stage Stage Picture
You could wish to use a body from an animation that you have created as your static picture. For an instance, check out our composition beneath. That is firstly of the timeline.
That is the Stage at a later body within the animation.
That is what we wish to use as our static picture by capturing the body and making a poster picture.
To take action, we’ll transfer the playhead to border we wish to seize.
Subsequent, we click on the Stage component within the Parts panel.
Within the Properties panel, we click on the digicam icon that seems subsequent to Poster, as circled beneath.
We then see this dialogue field:
Click on the Seize button.
Now, go to Edit Down-Stage Stage within the dialogue field proven beneath.
This allows you to know that the poster picture was saved to your library. If you wish to go forward and use this picture to your Down-Stage Stage, click on the Edit Down-Stage Stage button.
Making a Hyperlink
You possibly can hyperlink parts in your Down-Stage Stage to different content material, equivalent to extra non-HTML5 content material or a URL the place they’ll obtain a HTML5 browser.
To create a hyperlink, edit your Down-Stage Stage, then choose a textual content component in your Stage that you just wish to use to create the hyperlink.
Go to the Properties panel.
Within the Hyperlink part, choose newWindow so clicking on the hyperlink opens up a brand new browser window. Enter a URL for an internet site within the Hyperlink URL subject.
Including a Preloader
It goes with out saying that the bigger your composition is, the extra time it can take to load in a browser window. Though that is okay, and there isn’t any such a factor as a composition that is too huge, you do desire a solution to let your viewers know that the composition is loading. You do not need them considering there’s one thing incorrect, inflicting them to surrender and look elsewhere.
A preloader is a visible indicator that lets your viewers see the obtain course of. It might include detailed details about the info acquired – or it may be less complicated such because the spinning wheel. Both method, a preloader lets your viewers know that your composition is loading.
So as to add a preloader to your composition, click on the Stage component within the Parts panel.
Subsequent, go to the Properties panel.
Go to the Preloader part, then click on the Edit button.
You’ll then be taken to the Preloader Stage, as proven beneath.
Click on on the Insert Preloader Clip-Artwork button.
Select a graphic from the menu.
Click on the Insert button.
The graphic is then centered on the Stage.
The graphic can also be saved to your photographs within the Library panel as an animated GIF.
Now you’ll be able to return to the principle Stage, then preview your composition in a browser window.
Embedding a Composition into an HTML Net Web page
Let’s learn to embed your composition into an HTML web page of an internet site.
Find the folder for the web site in your laptop. Keep in mind, you wish to find the folder for the web site, not the folder to your composition.
Open the folder. The index.html file is the file that opens within the browser window.
Double click on on the index.html file to open it in a browser window.
Publish your Edge Animate composition for the net after you have added a Down-Stage Stage and preloader.
Go to a textual content or HTML editor equivalent to Adobe Dreamweaver.
Open the HTML file to your composition, in addition to the index.html file for the web site.
In your composition’s HTML doc, copy all of the code that seems between
<!- – Adobe Edge Runtime- – > opening tag and the <! – -Adobe Edge Runtime Finish- -> closing tag. You will see that these simply earlier than the </head> tag. It would look one thing like this:
Now, go to the HTML file for the web site. Paste the code between <head> and </head>. It will put your composition on the high of the web page. After all, you’ll be able to place your composition wherever you need on the web page. We’re simply utilizing the highest of the web page for example. In our instance, our composition will substitute the header picture on the high of our web page.
Now, return to the HTML file to your composition. Find the <div> tag for the Stage.
It would look one thing like this:
Go to your web site’s HTML web page. Exchange all the little bit of code for the header picture with the code you simply copied out of your composition. Once more, bear in mind, you’ll be able to place your composition wherever you need. We’re simply utilizing it for the web site header.
Now, copy all of the recordsdata and folders in your composition’s net folder into your web site’s folder – the identical folder that incorporates your web site’s HTML web page.
Making a Responsive Design
Responsive design is outlined as an method to constructing an online web page in order that the net web page can decide the viewer’s display screen measurement and orientation, then change the format of the net web page to match the display screen measurement. With out responsive design, an internet site that is designed for a 1600×900 decision monitor may not seem appropriately on one other machine, equivalent to a 7″ pill. Nonetheless, when a responsive design is created, your composition detects the scale of the show, then adjusts itself so your format is preserved and your composition shows correctly within the browser window.
On this article, we’ll focus on tips on how to:
Set the Stage for a responsive design.
Put together parts for a responsive design
Place your parts relative to the Stage
Use World or Utilized coordinates
Choose a format preset and alter the default format settings
Setting the Stage
Step one in making a responsive design is to make the Stage scalable.
To do that, go to the Properties panel. Click on the toggle for Width and set it to %. Change the worth to 100%.
As well as, go to Max W and deselect the ‘none’ choice, then set the Max W to 960 px.
You need to use the ticks that now seem on the ruler to see how your composition appears to be like when proven in several sized browsers.
Taking Care of the Parts
Now that you’ve the Stage set for responsive design, it is time to care for the weather as properly. The very last thing you need is for the photographs to get lower off when the container (browser window) will get smaller.
Go to the Parts panel. Maintain the Shift key down and choose all of the picture parts.
Subsequent, go to the Properties panel.
Go to the Place and Measurement part and click on the toggle for W to vary to %.
Now, go to the Background Picture part and click on the toggle for Top. Change it to %.
Preserve all the photographs chosen. Click on on the H property and choose Auto.
This forces the peak to remain proportionate to the width.
Subsequent, set the Y worth within the Background Picture to 50%.
You now have your picture parts and Stage arrange for responsive design.
About Relative Positioning
You might have some parts in your Stage that you do not wish to transfer. Maybe you’ve got buttons on the high of the web page. You need these to remain of their place it doesn’t matter what. To make that occur, we’re going to use the coordinate house picker within the Properties panel.
First, choose the component(s).
Go to the Properties panel.
Select the nook of the Stage the place the component is closest to as a way to hold them at a hard and fast distance from the nook.
World and Utilized Coordinates
Subsequent to the coordinate house picker you will note two tabs that characterize two modes: World and Utilized. You possibly can set the place and measurement of a component in both mode; nonetheless, let’s perceive what every is.
Coordinates are calculated relative to the Stage in World mode.
Nonetheless, coordinates are calculated relative to the component’s coordinate house in Utilized mode. What which means is that this.
If you choose a component and click on on World mode, the place could also be X= 178 px, Y = 247 px. This displays its place from the highest left Stage nook.
But when choose a component and click on on Utilized mode, the coordinates will change to R=179 px, T=147 px. This displays its personal coordinate house. It’s 179 pixels from the appropriate fringe of the Stage, then 147 pixels from the highest fringe of the Stage.
You’ve gotten lots of choices in terms of positioning and resizing parts and properties for a responsive design. It might get complicated and sophisticated. Nonetheless, Edge Animate supplies totally different presets that you need to use to make your work simpler. These presets are for widespread resizing habits for photographs. These could be very helpful when making a responsive design.
To entry the format presets, go to the Parts panel. Press Shift+Click on to pick out all photographs.
Subsequent, go to the Properties panel. Click on the Format Preset button that seems to the appropriate of the World and Utilized tabs within the Place and Measurement part.
You’ll then see the Format Preset dialogue field:
Presets are listed within the left column.
Choose the Middle Background Picture.
Click on the Apply button.
Your whole chosen parts are actually mounted at 960 px by 360 pixels. As well as, their X and Y coordinates are set at 50% of the container. This implies the photographs will keep in place, however shall be cropped because the container (or window) is resized.
The default settings whenever you create and place new parts are to make use of pixels because the measurement and to measure from the higher left nook of the Stage. Nonetheless, this may be modified by going to the Format Defaults panel within the Instruments panel, as circled beneath.
If you click on on the button, you’ll then see the Format Defaults panel:
Along with setting the unit of measurement and the purpose of reference, it’s also possible to select to make use of ‘img’ tags for photographs, in addition to set the peak and width to auto for photographs.
Everytime you make adjustments to the format defaults, the adjustments are made for the present composition solely. They aren’t saved to be used with future compositions.
Discover and Create
Take a while to discover the totally different format presets and format defaults to see how they have an effect on your responsive design. Go to File>Preview in Browser and resize the browser to see the adjustments. You may also use the ticks on the Stage.