Edge Animate 1.0 and external css

Hello and Happy Friday All,
I'm having issues getting an external css to work inside my Edge Animate project.
I'm importing the css like so on the compositionReady area of the stage actions:
$("<link/>",{"rel":"stylesheet", "type":"text/css", "href":"mmt_stylesheet.css" }).appendTo("#Stage");
My css is in the same directory as the rest of my edge files.
In my css file I have things written like so:
#Stage_#testing {
font-color: rgba (255,255,255,0.6)!important;
#Stage_#testing2 {
background-color: #0F0 !important;
width: 600px !important;
In my edge file I have one text file on the stage with the instant name of testing and a symbol of a simple rectangle with the instant name of testing2.
I am not seeing any styling when I previw the edge project. Any help would be much appreciated. Thanks

IE 10 - Sorry but I am new to this and do not know what you mean by "prefixes"
I have also tried this in Chrome and Firefox and the jpg does not load.
Do you know of another way of doing this? I thought it would be easy in Animate but it just seems very complex.
If I do this in a HTML page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="mmt_stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="earth"></div>
</body>
</html>
With a css file of
@charset "utf-8";
/* CSS Document */
#earth {
width: 100px;
height: 100px;
background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
border-radius: 50%;
background-size: 210px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),
inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
@keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 210px; }
This works fine in all browsers - add this to Edge and it does not work.

Similar Messages

Adding html into edge animate text box from external js file

I have a text field in edge animate that I want to update with a score. The function that is used to click and update the score is in an enternal file so I'm trying to figure out how to get my edge animate div to be read by jquery in the external file. This is what I have so far in the external js but it isn't reading the edge animate text field properly:
external .js file:
        AdobeEdge.coinCounter += 250; // this calls the variable coinCounter which was set in edgeActions.js and updates it from the original 0 value
                alert(AdobeEdge.coinCounter); // this shows it works and updated correctly
       var comp = AdobeEdge.getComposition("EDGE-172492634");
       var stage = comp.getStage();
     stage.sym.$("gameText").html(AdobeEdge.coinCounter); // this is where things go wrong. I want this updated value to read back into the textbox called "gameText" that is in the edgeAnimate composition
      stage.sym.$("gameText").html("NewText"); // nothing reads to the "gameText" textbox; something must be wrong how I am referencing it outside of edgeActions in the external .js file
Would someone mind helping me reference the textbox "gameText" correctly so I can input my new value? Thank you!!

Thank you. The learning curve is taking me awhile. It works now:
    var checking = AdobeEdge.getComposition("EDGE-172492634").getStage().$("gameText").text();
    alert(checking); //yay!
Thanks Joel!

Drag and drop in Edge Animate (was: drag and drop)

hello friends
I have a drag and drop on edge,
I need that when you release the ad in the wrong place, my return to the starting point

You can refer to Marie's article on the same - Drag and Drop in Edge Animate l EdgeHero.
-Dharmendra

Edge Animate on Muse and Publishing Problems

i have recently made a website with Muse and i have added also an animation which i created on Edge Animate. When i published it to the Business Catalyst and went to preview, it the animation wasn't there and it only showed a text: "Bad Request". Since this is my first website i am going to publish on the web i honestly dont know what i have done wrong. Any help would be welcomed

Hi Nestaf,
Can you confirm that you followed the procedure in this doc to insert an Edge file into Muse?
http://www.adobekb.com/inserting_edge_content.html
Thanks,
Preran

Edge Animate keeps crashing and cannot find solution

Hello all,
Edge Animate is really slow for me and keeps crashing. I viewed the following thread:
https://forums.adobe.com/thread/1237275
but it hasn't solved the problem for me. is there any more recent work arounds/solutions or what should I do? I'm running Windows 8.1, also i'm running Microsoft small business server, i'm not sure if this makes a difference.
hope someone can help, look forward to your reply!
Tom

Hi Sudeshna,
Unfortunately I can't upload the log here for some reason so I have had to upload it here:
Edge Animate - crash report - Google Docs
...apologies for the vastness of it, hopefully you can glean something from it
Many thanks

Why does Edge Animate convert circles and rounded corners into "classic" rectangles?

Hello Community!
When creating animations with circles or rounded corners in it, I came across with something strange.
I published it as .oam-file for Adobe DPS and the circles and rounded corners where converted into rectangles.
Does anybody know a solution?
Thank you in advance!

Hey broekt,
If you're using the Desktop Viewer ot preview your AN content, some stuff (such as rounded rectangles) isn't supported in their version of Webkit. For true rendering make sure to always test on your iPad
Sarah

Edge Animate - Exception An error occurred. Please save your work and restart Edge Animate

I get this error every time I try to open the project I have been working on for days - I've attempted to create a new project and swap out the different pieces/parts from the previous project folder but it still causes the same exception error. I have also uninstalled/reinstalled Edge Animate CC twice, and cleared my preferences. Neither has resolved the issue.

Hello,
I had exactly the same problem and in my case I could not resolve it. It appears that somehow the file with contains the editable code gets corrupted leaving only the rendered content which cannot be reverse engineered.
I had to start all over again.
It has left a bad taste in my mouth. I do not think that the software is robust enough for professional use yet. I feel very insecure when I am working with it. Constantly expecting it to crash. I now save to two different folders but only compile in one. This helps to avoid the problem in the future.
Sorry.
David

Will an .edge file made with Adobe Edge Animate 1.0 work and load in Adobe Edge Animate 3.0?

I had the beta version of Adobe Edge Animate, and when it was released I was able to download version 1.0 for free, and it is still installed on my computer today.
The problem is I might get a new computer, and I'm just wondering if my old projects that I made with that version of Adobe Edge will work correctly if I purchase Edge Animate CC?
Does Edge Animate CC support backwards compatibility all the way back to 1.0?

Hi,
Also, sometime it depends upon the feature as well. it is deprecated in latest release then you may get error or warning.
Please download trial version of Edge Animate CC 2014 and test your project.
https://creative.adobe.com/products/download/animate
Regards,
Devendra

Edge Animate : Edge File website structure

Can the Edge Animate generated code and associated images, js, fonts, etc.
be contained in a separate folder outside the main directory.
specifically,
If I have a separate HTML file that I created and want to load in my Edge Animate project into it,
I can easily do that if all the files are on the Main directory root that contains the HTML and CSS that point to the edge DIVs.
however,
This creates a ton of files on the root.
Ideally I would like to have all my Eddge Animate projects in a separate folder,
and my HTML pages pointing to the associated projects.
something like the image attached
I can never get this to work
anyone able to figure this out?

thanks for the speedy reply. I went and did some tests, and yes
the new features in Publish settings do help out in tidying up the folder directories. (very much appreciated)
and for the most part it works
but I have found a few issues. (and there are probably more)
on my main directory folder, I have a javascript file that is doing stuff inside my edge project.
so in edge I reference that custom.js file. in the SCRIPTS panel. (nice feature)
lets say in that .js file it is just doing an alert('hello');
so when i publish and load the index.html , it loads the external edge file and does the alert.
GREAT!
if i go and change that alert in the js file on the main directory to alert('bob"),
it will show the new alert
GREAT
now however, if I go back to my edge document and republish,
it reverts back to alert('hello');
because it seems to generate another js folder and js file and still has a reference to the js file that get duplicated in the "edge" folder
2)
font issue.
i have several edge projects being loaded into this main index.html
I am using a custom font
because i am referencing the stylesheet in the main directory the font style does not show up on the stage IDE.
however, when I play the index.html the font DOES show up as expected.
it would be nice, when publishing to another folder,
to be able to point to an external .css and have it show up while working

How do you upload Edge Animate on Adobe CDN?

How do you upload Edge Animate on Adobe CDN?

Hi Darrell,
I'm using an exciting new software package called www.webflow.com and I asked the following question in a forum:
Hi,
How would you add this Edge Animate to Webflow? Is it possible?http://html.adobe.com/edge/animate/showcase/interactive-marquee/11
The files are available here: http://html.adobe.com/edge/animate/showcase.html6
Edge Animate gives you a few different option for publishing:
The drop down that you see in the image next to "Chrome Frame Installer" has three options:
Now Prompt
iFrame Prompt
Overlay Prompt
These are the files saved when only "Publish content as static HTML" is checked. See "Publish Settings" image:
Is it possible to add this animation to a Webflow site?
If yes, any suggestions on how would be greatly appreciated.
Thanks,
Todd
Here's Sergie's reply:
Hi @TStanwood, it's possible, but the only way to do it is if you host your files on Adobe CDN or if you host it on your own server and then display an iframe with the index file in Webflow.
That's the way to do it before we allow for hosting of non-image files on Webflow.
After you have them hosted on your own server you can follow these instructions found on the Adobe forums:http://forums.adobe.com/thread/1166851
You'll have to add this to your head code:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="Bannerad_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-160548878 { visibility:hidden; }
    </style>

Replace Bannerad_edgePreload.js with the link to your server and the edge js file.
And in the Webflow add a div block with the class EDGE-160548878 and id stage and the .js file should inject your html animation file into this div block.
<div id="Stage" class="EDGE-160548878">
</div>
I don't have a server to upload the files to. I really don't even know what any of this means.
I'm wondering how and where I can upload the Edge Animate files to and then link to it by following the instructions above.
Any help would be appreciated.
Thanks,
Todd

Lesson for Adobe Edge Animate

Hello Everyone.
OK. Have been doing Edge Lesson's for quite nearly a year now, and wanted to share them with the community.
If you have any request or questions, please feel free to post them to the video links below, or in here, and I will
Try my best to assist you any way that I can.
Edge Animate has really come a long ways, and with the new CC, it has taken on a life of its own.
Look forward to what the future may bring with this awesome Adobe program release.
Wayne Barron
Dark Effects Production
Adding sound to Mouseover event in Adobe Edge Animate
3:42
1
Adobe Edge Animate - Add Sound in Mouseover Event
by darkeffectstv 1,987 viewsIn this video, we will learn how to add sound to a buttons Mouseover event in Adobe Edge Animate.…
Learning how to add sound to Adobe Edge Animate
7:08
2
Adobe Edge Animate Adding Sound to Project
by darkeffectstv 5,031 viewsAdobe Edge Animate Adding Sound to Project…
Remake, as the cursor was not in the last videos.
4:10
3
Adobe Edge Animate - Mirror Text Effects with Wipe On Text (Lesson 3) (Remake)
by darkeffectstv 447 viewsRemake with "Cursor" this time…
Remake, with Cursor
3:49
4
Adobe Edge Animate - Load Background Image (Lesson 3) (remake)
by darkeffectstv 1,050 viewsremake with Cursor, as Cursor was not int he original one.…
2:00
5
Adobe Edge Animate Starting Symbol at certain location
by darkeffectstv 245 viewsIn this quick tip.
We are going to stop a symbol from playing.…
6:53
6
Adobe Edge Animate Animate Logo to show and hide words
by darkeffectstv 418 viewsIn this lesson, we are going to learn how to take an Image (Like a LOGO for a company) and animate it on the screen, and show and hide words.…
5:44
7
Adobe Edge Animate Publish Files and JS Folder
by darkeffectstv 758 viewsIn this lesson, we will guide you through the ins and outs of publishing your site from Adobe Edge Animate, to a web server.…
6:19
8
Adobe Edge Animate Create a Pen and write a Line
by darkeffectstv 527 viewsIn this lesson, we are going to create a Pen, then write 2 lines.
This can be used in so many different projects, that it is endless.…
2:34
9
Adobe Edge Animate Rollover Button
by darkeffectstv 2,195 viewsIn this lesson, I will show you how to code a Rollover Button.
This is a very simple and easy way to create a Rollover Button, with very little effort.…
4:06
10
Adobe Edge Animate show Grid to fine tune your Animation
by darkeffectstv 77 viewsHave a lot of Animation in your project?
In this lesson, we are going to show you how to fine tune your animation down to the 30th of a second…
16:49
11
Adobe Edge Animate Create a Menu
by darkeffectstv 4,993 viewsIn this lesson, we are going to be creating an animated interactive menu, that is sure to grab your users attention.…
12:30
12
Adobe Edge Animate Menu Slide Down
by darkeffectstv 1,175 viewsIn this lesson, we are going to showing you how to create a Sliding Down Menu.
This was really big a few years ago, a lot of sites had these types of menus…
9:45
13
Adobe Edge Animate Menu Slide In from Left
by darkeffectstv 358 viewsIn this lesson, we are going to be creating a cool little menu that will slide in from the left.
I have never seen one like this before, and thought that I would create one, to see if it would work good,…
4:29
14
Adobe Edge Animate Pin and Timeline Indicator
by darkeffectstv 153 viewsIn this lesson, we are going to go over some basics on how to use the Pin and the timeline indicator. This will come in handy, if you have a big project and you wonder what happened, if something messes up …
16:43
15
Adobe Edge Animate Menu Button Header Footer
by darkeffectstv 905 viewsIn this lesson, we are going to be creating a Menu Button, with a Header and Footer.
This is a cool looking button, that will come in handy for some sites.…
12:56
16
Adobe Edge Animate - Shot Bullet from Gun and hit Wall
by darkeffectstv 110 viewsIn this lesson, we are going to be creating a gun, a bullet, a wall.
We are then going to shot the bullet, out of the gun, and destroy the wall.…
7:44
17
Adobe Edge Animate Menu Rollover Buttons
by darkeffectstv 1,047 viewsIn this lesson we are going to create some Rollover Menu Buttons.…
4:11
18
Adobe Edge Animate - Animate Ball Bounce Squish
by darkeffectstv 172 viewsIn this lesson, we are going to animate a ball, of which is going to bounce on the floor, and once it makes contact with the floor, it is going to squish down, just like a real ball will do.…
6:16
19
Adobe Edge Animate - Change Text when Button is clicked
by darkeffectstv 353 viewsIn this lesson, we are going to learn how to change the text of Textfield, when a button is clicked.
reusing the same Text Element over and over again, keeps the project clean and tidy.…
4:02
20
Adobe Edge Animate - Space Demonstration (Lesson coming soon!)
by darkeffectstv 49 viewsThis is a demonstration of a project that I have been working on for the last few days. This will be turned into a lesson, that will be available within the next week or so…
21:37
21
Adobe Edge Animate - Lesson 1 Space Project
by darkeffectstv 87 viewsAdobe Edge Animate space project, showing how to rotate elements around a centered element. Also, how to reuse the same text element over again…
9:32
22
Adobe Edge Animate - lesson 2 Display Planet Information using single text element
by darkeffectstv 61 viewsview lesson #1 first:
http://youtu.be/16GOY1QOD_…
1:39
23
Adobe Edge Animate - Open Link
by darkeffectstv 227 viewsIn this quick how to lesson.
We are going to create a link on Adobe Edge Animate.…
2:31
24
Adobe Edge Animate - Add Sound in MouseOut Event Part II
by darkeffectstv 192 viewsThis is a follow up to a previous lesson.
Please view the following lesson to catch up to what this is all about…
1:28
25

Here are 2 video using "Edge Hero"
Adobe Edge Animate - Edge Hero Lesson 1 - 3d Objects
by darkeffectstv 107 viewsIn this lesson, we are going to be working with a new plugin for Edge Animate called
Edge Hero…
6:55
2
Adobe Edge Animate CC Lesson #2 - Loading Video with Edge Hero
by darkeffectstv 40 viewsIn this lesson, we are going to load some video into our edge project using Edge Her…
And this is the latest video for Edge Animate CC
Adobe Edge Animate CC - Lesson #3 - Animate ball bouncing on boxes and changing colors
http://youtu.be/MxxpQspBpcw

Edge Animate will not open in Adobe Application Manager

Do I have to buy a monthy subscription?

You do not have to buy a subscription.
From the Edge Animate FAQ at http://html.adobe.com/edge/animate/faq.html under Pricing & Availability:
How much is Edge Animate and how do I get it?
As a limited-time introductory offer, a perpetual, non-expiring license of Edge Animate is available for free. Edge Animate is therefore available to both free and complete Creative Cloud members.
Edge Animate is valued at $499 USD (perpetual license) or $14.99/month (single product subscription).
Why is Edge Animate free?
During the preview period for Edge Animate we received tremendous feedback that helped shape the tool into what it is today. To thank our community for actively participating in the development of Edge Animate we are offering the first full release of the product for free.
How long will Edge Animate be free? What will it cost later?
After the free introductory offer ends, we anticipate that future versions of Edge Animate will be available to complete Creative Cloud members, as a perpetual license and as a monthly single product subscription.
Is Edge Animate only available as a subscription product?
No. Once the current version of Edge Animate is downloaded and installed, it is available to use at any time, without an ongoing subscription.

Adobe Edge Animate CC crashes when using big SVG images

Hi!
When I import SVG files to Edge Animate it freezes and I can't do something with that.
I tried to import one file at a time and it worked fine but when I save project and close program and then open my project again Edge Animate just crashes.
Also I tried to import very small images (100px x 100px) and then scale them to size I need and it causing app crash too.
I'm using Mac OS X 10.9.4

I already found cause of this problem.
When you import SVG to Edge Animate it gives your SVG width and height 10 times more then original size of image and transform: scale(0.1). So when you import 5 SVG images 500x500 Adobe Edge makes them 5000x5000.
So that's cause app freezing and bad SVG displaying in browsers.
Always change scale(0.1) to scale(1) and reduce size from 5000px to 500px for example.
Best regards,
Alexey Prilovski.

Typekit font not displaying in iPad DPS app (created by Indesign) in Web Content (Edge Animate)

I think I have tried every permutation to make this work, but I am probably missing something.
I am creating a single DPS iPad app with InDesign, and I am using a Typekit font throughout. So far so good.
I have created an Edge Animate project using the same Typekit font. In preview mode, it is fine as well.
However, when I place the Edge Animate project into a frame in InDesign and use the Web Content Folio Overlay (regardless of whether I use the .oam file or link directly .html output published by Animate), the Typekit font will not show up in the Edge Animate portion of the DPS app and will instead use a fallback font.
Can anyone suggest a way to make Typekit fonts in Edge Animate work when embedded in a DPS app? (For what it's worth, I have the same problem when embedding html output from Tumult Hype, so it seems unlikely that this is an issue with Edge Animate at all and probably has more to do with something in the way the DPS app is dealing with embedded html content.)
Thanks in advance for any assistance.

Believe me, I understand the pain. Unfortunately there's only so much we can do at Adobe as the EULAs provided by the foundries for their respective fonts are very explicit in where you can and can not use them.
For example, packaging an InDeisgn file and sending it off for pre-press with the fonts included in the package is in direct violation of most font EULAs. In a studio environment, you're only allowed to have a font installed on n number of computers and need to have multiple licenses to accomidate >n number of seats. When creating a PDF, fonts explicitly have to be subsetted before embedding into the PDF.
That's just to paint a picture of the fragile state of using fonts in print, usage in digital mediums is just another bee in your bonnet when it comes to considering when you can and cannot use a font.
Services like Typekit Desktop are trying to make this easier by removing a lot of those pain and condierations for you, by blanketing all these fonts under a single license you're free to use for print and the web. There's still some gotchyas, but we're aiming to greatly reduce how much you have to think about it where we can.
So yes there's a bit of education when it comes to mixing embedded HTML content/fonts with DPS, but at least there's options
Sarah

Do I need to pay to use Edge Animate

I hace a paid account I'm still in the 30 days I close my paid account do I need to pay to use Edge Animate ?

No you do not need to pay currently use Edge Animate.
From the Edge Animate FAQ at http://html.adobe.com/edge/animate/faq.html under Pricing & Availability:
How much is Edge Animate and how do I get it?
As a limited-time introductory offer, a perpetual, non-expiring license of Edge Animate is available for free. Edge Animate is therefore available to both free and complete Creative Cloud members.
Edge Animate is valued at $499 USD (perpetual license) or $14.99/month (single product subscription).
Why is Edge Animate free?
During the preview period for Edge Animate we received tremendous feedback that helped shape the tool into what it is today. To thank our community for actively participating in the development of Edge Animate we are offering the first full release of the product for free.
How long will Edge Animate be free? What will it cost later?
After the free introductory offer ends, we anticipate that future versions of Edge Animate will be available to complete Creative Cloud members, as a perpetual license and as a monthly single product subscription.
Is Edge Animate only available as a subscription product?
No. Once the current version of Edge Animate is downloaded and installed, it is available to use at any time, without an ongoing subscription.

Edge Animate 1.0 and external css

Similar Messages

Maybe you are looking for