Learning code in Adobe Edge

Hello all
I'm slowly getting my head around using code within Adobe Edge.
I want to use dynamic animation using coding as opposed to always using the timeline.
Have been using Lynda.com for a basic introduction to using code and other tutorials to be found on the net.
Can anyone suggest any other sources, which will move me on from having a basic knowledge??
Thanks
S

Hi sh6ixs,
You can find a great ressources from Edgehero
starting by Targeting Symbol (ByMarie Goodwyn) on the same site.
Edgedocks site is very cool too, look at the "Creating a Parallax Effect in Edge Animate" (By Paul Trani) it's very useful to understand Relation between mousePosition/timeline
And the "javascript basics" MouseEvent tutorial.
Otherwise this lesson on Lynda.com scroll-activated animation whit edge animate (by Cris Converse)
is great for code using
By.

Similar Messages

Add an external code in Adobe Edge

I would like to add an external code in Adobe Edge, tried a few options and still having trouble.
How do I add the following code in Rectangles?
<div id="cont_2cc55146a3764e86d9f22ec81a15bf4c">
<span id="h_2cc55146a3764e86d9f22ec81a15bf4c"> Moscow Time </ span> <script type="text/javascript" src="http://www.tempo.com/wid_loader/2cc55146a3764e86d9f22ec81a15bf4c"> </ script>
</ div>
* It is a weather forecast.

Hell0,
I did this example a long time ago. Maybe this could help you.
https://www.box.com/s/ygym12tza9s9x2gfrgja

How can I embed a Jotform code on Adobe Edge Animate?

Hi everyone!
I don't have a clue where or how i can put this code in Edge:
<script type="text/javascript" src="https://secure.jotformz.com/jsform/40937757111658"></script>
I needed to load a Jotform form on my Edge singlepage website.
Thanks!

I have been trying to do just that Brad.
I'm switching from a SWF file to HTML5 and there doesn't appear to be any help on how to embed all the bagage that HTML5 brings with the Captivate output when using HTML5.
Any ideas?

Lightbox (jQuery Lightbox Evolution) made in Adobe Edge, doesn´t work in Adobe Muse (oam file)

Hi!, I got a problem that I can´t fix it, or I don´t know how to do it in Adobe Muse.
First I have the Jquery Lightbox Evolution ready to do it in Adobe Edge.
I could work the lightbox in Edge perfectly doing this:
1. I added the JS files of the Jquery Lightbox Evolution into EDGE :
2. I wrote this code in STAGE - COMPOSITIONREADY:
yepnope({load: "js/lightbox/themes/classic/jquery.lightbox.css",complete: function() {}});
3. I wrote this CLICK code into the blue box animation;
{$.lightbox("images/4.jpg");return false;};
4. Now, if I do a Preview, and if I click into the blue box animation, appears the Jquery Lightbox Evolution, like I want:
5. Perfect, I publish the project like an Animate Deployment Package (.oam) to import this into Muse.
6. Now the problems begins, I import the Edge animation into my Muse project, but when I see the preview of my page, the lightbox doesn´t work, Muse don´t recognize the lightbox CSS file because I see something like that:
The blue box animation work perfectly into Muse!, but when I click on it and when it should appear the Jquery Lightbox, happens that problem, Muse don´t recognize the CSS file and the "lightbox" appears INTO the box animation, like if I put a "_self" code.
Really I don´t know how to fix that, should import the CSS file into Muse? should write a code into Page Properties- Metadata?, write a code inserting a HTML?, change some code in Adobe Edge?
Thanks!!!!

I´m sorry, but any ideas how to fix that?

Loading external div resp. java script resp. google maps resp. php in adobe edge animate

Hi there,
I made some nice webpage with adobe edge, and additionaly I would like to implement store finder made with google maps. Any idea how I should do this?
Here the website:
http://www.heelbopps.com
And here the map:
http://www.heelbopps.com/maps/map.php
What I intend to to is to make a div between contact and disclaimer and load map.php in this div.
Here how does the look the file: map.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Google Maps AJAX + mySQL/PHP Example</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="storeLocator.js" type="text/javascript"></script>
          </head>
          <body style="margin:0px; padding: 0px;" onload="load()">
                    <div>
                              <input type ="text" id="addressInput" size="10"/>
                              <input type="button" onclick="searchLocations()" value="Suche"/>
                    </div>
                    <div><select id="locationSelect" style="width:100%; visibility: hidden"></select></div>
                    <div id="map" style="width: 100%; height: 80%"></div>
          </body>
</html>
How can I implement this code in adobe edge? Please help, because I am clueless, and it has to be done today.
Many many thanks in advance...
Stanko

Dear Stanko, did you get my private message about fixing top menu ?
Zaxist

Need help with adjusting Javascript code to work in Adobe Edge (Countdown)

Hello
Im a newbie when it comes to working with Javascript and Adobe Edge and need a bit of help with adjusting some javascript code to work with Adobe Edge. A friend of mine helped me with making this javascript code: Edit fiddle - JSFiddle
Its a simple countdown which counts down to a certain time at a certain date. What I aim to do is to add this code as a trigger on a text-element called "countdown" (within a symbol called "count").
I have tried to do this as the code is, but it does not work. Anyone have any suggestions?
Thanks!
Mvh,
Øyvind Hermans

Hello again
I have stumbled upon a problem with these animations; They crash the browser after viewing them a little while, usually less than 30 seconds in.
Is this problem also occuring when you watch the animations?
Is the countdown-code to much for the browsers to handle?
Thanks in advance for your answers.
Sincerely,
Øyvind Hermans

How to uninstall Adobe Edge Code Preview 3 after installing Adobe Edge Code CC

After installing Adobe Edge Code CC via Creative Cloud I have noticed I still have Adobe Edge Code Preview 3 on my machine.
There is no specific uninstaller in Applications/Utilities/Adobe Installers
So how do I uninstall it?

Hey Jarrid, you can just drag it to the trash to get rid of it. The preferences are stored in ~/Library/Application Support/Adobe/Edge Code/ so you can delete that folder as well to completely remove it.
=Ryan
[email protected]

Does Anyone Knows How To Disable The "Check For Updates" Option in Adobe Edge Code and Reflow?

Does Anyone Knows How To Disable The "Check For Updates" Option in Adobe Edge Code and Reflow?
Thanks in Advance

I don't think there is a way for Edge Code. I'm not sure about Reflow.
Why don't you just upgrade? That will stop the notifications.
Randy

What is the difference between Brackets and Adobe Edge Code?

Adobe Edge Code is a distribution of the Brackets open source project optimized for professional web designers and developers. This build of Brackets includes community and Adobe-built extensions that are not part of the Brackets open source project. If you are a Creative Cloud member, this is version is made special for you.
But, we're just getting started. Currently we have support for the free Adobe Edge Web Font service. The next release will add support for previewing directly on devices as you develop with Edge Inspect CCM and we'll be adding more integrations over the next few months.

Hi Chitra,
In simple term:
SU53: Authorization i dont have
SU56: Authorization i have
Further information pls check this
diff in su53 and su56

Adobe Edge code CC

Hello, Adobe Edge Code CC does not seem to be part of my CC account, its not showing the App in the Creative Cloud application! Any suggestions as to how to get it?

Edge Code has been discontinued in favour of Brackets - A modern, open source code editor that understands web design.

Is Adobe Edge Code ready for day-to-day use?

Yes and no, as it depends on what features are needed for your workflow. We hope to have a version of Adobe Edge Code that is ready for a broader day-to-day use definition within the next couple releases going into 2014 [timeline updated based upon all your recent feedback]. Until then, we'd appreciate your help in testing it out!
If you're passionate to assist in the future of Edge Code, consider contributing directly to its base open source project Brackets.
Related: What is the difference between Brackets and Adobe Edge Code?

Manigandan,
Thank you.
Some PCs with less RAM or slower processors cannot display Flash in a smooth and fluid motion. Te motion is jerky or hesitant, with breaks an gaps.
So, can you tell me if Edge will NOT have the same jerkiness in motion as Flash does?
Will Edge retain all graphical elements and quality....and show all motions and actions as I set in Flash?

Adobe Edge code live preview is not working

I've recently downloaded Adobe Edge Code and noticed that the live preview doesn't work when i edit it and i also checked the source code and sore that it didn't change. The icon in the top right corner is yellow, i am using Windows 7 and Google Chrome.

The general rule of thumb is: only the contents of .css files are updated in real time as you're typing, in the current version of Live Preview. To see anything else, you must save your changes and reload the webpage. In the latest version of Brackets (and therefore the next upcoming release of Edge Code), we make this a little easier by automatically reloading the page when you save.
Down the road, we'd like to make .html and .js update as you're typing too -- we're just not there yet. Here are the user stories tracking those future features:
https://trello.com/card/0-live-html-editing-in-brackets/4f90a6d98f77505d7940ce88/247
https://trello.com/card/3-live-javascript-editing-in-brackets/4f90a6d98f77505d7940ce88/263
- Peter

How to use Adobe Edge Web Fonts correctly

I am a Dreamweaver newbie and am trying to learn how to use it through the tutorials. I am stuck at part 3 trying to use Adobe Edge Web Fonts correctly in my web site. As far as I can tell I have followed the instructions in the tutorial correctly, but the font style effect does not show up on my site. I am working on a Windows 7 machine and using Dreamweaver 5.5. I have copied and pasted the javascript into the correct spot in the head of the index.html page as well as included the font-family name in the CSS file and saved the whole smash. The source code for my index page looks exactly like the sample in the tutorial, and I have tried to view my site in my browser, but no dice. Doesn't display the Edge Web Font style in the web page. I believe I've done everything according to the directions, but I suppose I've missed some small detail. Any suggestions greatly appreciated

You need to add a <script> to the head of your documents like the example below. In my example, I'm using all of the aguafina-script and league-gothic fonts.

<script src="//use.edgefonts.net/aguafina-script:n4:all;league-gothic:n4:all.js"></script>
CSS:
     h1 {
     font-family: league-gothic, sans-serif;
     font-weight:bold;
     color: #639;
     font-size: 250%;
A simple way to get the correct codes is to go to Adobe Edge Web Fonts and select the font you wish to use.
https://edgewebfonts.adobe.com/fonts
NOTE: You won't see the custom web fonts displayed in Design View, Live View or when previewed locally unless you use a local testing server. An easier way to test is by uploading the page to your remote server.
Hope this helps,
Nancy O.

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

Installation Error (7) Adobe Edge Animate - Creative Cloud Desktop Application

I would greatly appreciate help with this, I have scoured the adobe forumns and google and am unable to find a solution. I am trying to download Adobe Edge Animate from the creative cloud desktop application (PC) and it gives me this error
!Installation Failed - Learn More
When I click on learn more it says
Installation failed
Errors encountered during installation.(7)
More information
However the more information button does not do anything when clicked. I have had no problems installing my other application, updates and trials with the creative cloud desktop app.
I have ignored this issue for weeks but I have reached the point in a work project where I need to use the program. The Desktop application is up-to-date and I even tried disabling my firewall/antivirus but it made no difference.
Few other details:
I ran the adobe cleaner for CS6 programs before installing the creative cloud.
The program fails at 51% Installation.
Please please please help. Thank you for any information you have and any time you can dedicate to this issue I am having.

Thank you Jeff, I followed your directions and may have found the issue yet I do now know how to resolve it.
Some Background:
When I first installed the Creative Cloud Desktop Application a couple weeks ago I had my main hard drive partitioned into C: and D:.
Because of limited space of my C drive I changed the application install directory (in the Desktop App preferences) to D:. Despite this it was still installing all the programs to the C:/default path.
I had posted concerns about this on the forumn after trying restarting and reinstalling yet nothing worked. Despite it listing D: as the install directory it would not install there.
So finally I just decided to unpartition the drive back to only C: Prior to the unpartition I was transfering the conents of D to a seperate hard drive and I changed the preferences back to C: in the Desktop app.
As I was waiting for the files to transfer I decided to start a trial install (as the transfer was taking a while.) Pushing me over the line of frustration into amusment it then proceeded to install to my D: drive. At this point it was just doing the opposite of what I wanted. Regardless I continued with the unpartition and all the applications I have downloaded installed fine since then to my new larger C drive.
When I looked into the error log for the Edge Animate I noticed this
08/09/13 15:21:39:504 | [INFO] | | OOBE | DE | | | | 4300 | - 0 fatal error(s), 1 error(s)
08/09/13 15:21:39:504 | [INFO] | | OOBE | DE | | | | 4300 | Win OS version: 6.1.0.0 64 bit Type: 1
08/09/13 15:21:39:504 | [INFO] | | OOBE | DE | | | | 4300 |
08/09/13 15:21:39:504 | [INFO] | | OOBE | DE | | | | 4300 | ERROR: DW041: INSTALLDIR Volume D:\ doesn't exist.
08/09/13 15:21:39:504 | [INFO] | | OOBE | DE | | | | 4300 |
08/09/13 15:21:39:504 | [INFO] | | OOBE | DE | | | | 4300 | Please search the above error string(s) to find when the error occurred.
08/09/13 15:21:39:504 | [INFO] | | OOBE | DE | | | | 4300 | These errors resulted in installer Exit Code mentioned below.
08/09/13 15:21:39:504 | [INFO] | | OOBE | DE | | | | 4300 | -------------------------------------------------------------------------------------
08/09/13 15:21:39:504 | [INFO] | | OOBE | DE | | | | 4300 |
08/09/13 15:21:39:505 | [INFO] | | OOBE | DE | | | | 4300 | Exit Code: 7 - Unable to complete Silent workflow.
08/09/13 15:21:39:505 | [INFO] | | OOBE | DE | | | | 4300 | Please see specific errors for troubleshooting. For example, ERROR: DW041 ...
This issue just wont leave me alone.
As I mentioned before the install directory has been set back to C since before the unpartition and all the other programs have installed fine. Are there somewhere that secret preferences are stored? This is all the more unbelievable as I prior to reading your instructions I uninstalled the creative cloud desktop app, ran the adobe cleaner for any pre-CC applications as well as a registry cleaner and reinstalled the Desktop App and tried again.
Thank you very much for directing me to the reason for the error, can you help me figure out why the CC Desktop App is doing this?

Learning code in Adobe Edge

Similar Messages

Maybe you are looking for