Edgehero.js Version 0.2 Released!                                    IMPORTANT

Like Major Carter would say in Stargate SG1:

"Colonel, This is an amazing piece of technology!"

Good job, Rob!

You are amaizing man , Always i use your function , this is very easy and efficace ,

GOOD JOB ROB

Thanks for the update!! Great product!!

Now for the questions. I tried "backgroundvideo_1 autoplay loop" without the quotes in a class for a rectangle, & pointed backgroundvideo_1 to the video. On a PC the video plays automatically and loops but not on my droid smartphone - any ideas? did i forget something? It doesn't play at all on the smartphone. Thanks

Bob

adding "controls"  to the class allows the video to play on my smartphone after the user clicks on the play > triangle, but i really want it to play by itself. I used an After Effects created video to get a lightning effect with thunder (sound) for a banner ad and I want it to play automatically for all users. I learned Edge Animate for smartphones and I can't get it to do want I need it to do. Any ideas? In Flash I made something very similar into an app and that played automatically on a smartphone, but I want to avoid having a user required to install an app. Thanks

Hi Robboerman,

Good Job, you are really rocking. It’s so nice to see the custom controls.

Will it control the timeline animation with audio?

Hi Robboerman,

Thanks for the fast replay. Here is the sample swf file:

https://app.box.com/files/0/f/0/1/f_10121207437

In that file I can play pause and drag with audio. I want like that controls in Edge Animate CC. will u help me for this.

https://app.box.com/s/cme9tiajwmvw5swss69b

Hi robboerman,

For the video files its working nice. But I m having the animation in main timeline and audio in outer folder which will syncing with that animation. Here is the sample worked file (see it in chrome):

https://app.box.com/files/0/f/0/1/f_10135168567

In that file I want custom controls. It should control the animation in main timeline and also the audio when we drag it. When we pause it should pause both the animation and audio.

https://app.box.com/s/8c3y6qwel21l05bfiw2w

i'm gettig the notice that i have to upgrade to a newer version of edge....adobe update program says, everything is up-to-date???

Any have thanks for your help robboerman. If u done that Please let us know.

This sounds like just what I need, thanks for doing this!

Add backgroundvideo_1 or backgroundvideo_2 as class to a div, then link it with a variable in Stage actions creationComplete.

This video file needs to be linked to an .mp4 file.

Kinda new to this...How to link it with a variable in stage actions AND how to get cross platform browser support for the video.

Thanks!

..."link those at stage complete" That's what I don't understand. Doesn't a raw .mp4/.ogg have to be in a folder somewhere in the root AND also be referenced as some sort of "src=..." sort of thing?

And also, any advice as to what dimensions the initial video file should be so as to not to have a strretch out or oversized videoin the browser? Example: Having a video not only play but stay fixed in the area "above the fold" while I can scroll my site vertically. Here is an exmaple of what I am talking about:

http://wearespry.com/

All you need to do is add this:

videolink_1_mp4='yourvidelonameandpath.mp4';

yourvidelonameandpath: if you have a folder add the folder path too.

And what about this?

Having a video not only play but stay fixed in the area "above the fold" while I can scroll my site vertically. Here is an exmaple of what I am talking about:

http://wearespry.com/

Pretty cool site!

Let me try to make a mock up today. I will get back with you.

What next for Edge Hero?

I apologize in advance if there are already solutions out there or already in your simple but powerful Edge Hero.

1. I would like some text effects - like After Effects has - spin in by word, spin in by character, pulsating text (I think these are called Bubble Pulse, Twirl on Each Word, Rotate Chars, Rotate Per Word)  or whatever you can do. I would like more than scaling, easing, opacity  

2. Effects like the sparkle & lightning special effects from After Effects

3. Smartphone detection redirecting to another Edge Animate version that e.g., has video with controls whereas the original does not with autoplay -  I tried the several of the solutions at http://www.designyourway.net/blog/resources/detecting-and-redirecting-mobile-users/ with mixed results and mobilizr does NOT do autoplay

Feel free to tell me that I need to do some or all of this myself. I admit I am a newby and I need more skills.  Thanks for listening

Bob

Their video takes WAY too long to load to be relevant of the "wow factor" in the first time experiencing the site BUT nonetheless there are some cool techniques implemented throughout.

I appreciate the time you're taking to figure this one out.

Standing by anxiously.

P.S. (To anyone reading this) I would LOVE to see more than one youtube video tutorial on the functionality and implementation of edgehero.js. It seems so easy and so cool to use.

You should use the videobackground to do something like their site. The video loaded fast on my PC.

http://www.edgehero.com/examples/background_video/backgroundvideo.html

The example to download is on the examples page: http://www.edgehero.com/examples.html

Use this format:

backgroundvideo_1 ='video/yourvideoname.mp4';

the scrolling down can be added in Edge with paralax or something similar.

I saw that video shortly after posting. Thank you!

I'll go ahead and play around with the video formatting and start my search for parallax in edge. I think I saw you have to use edge commons to do such a thing? Also remember seeing some sort of conflict with edge commons and edgehero.

Looks like today will be filled with trial and error experimentation : )

Just add the fixed  class  after a space in the class box.

S/B:

backgroundvideo_1 autoplay muted loop fixed

FIXED! Amazing! Went ahead and fumbled through the darkhorse tutorial (why the hell so much grouping and nesting, that's lost on me and he offers no explanation as to why he nests so many divs into other divs : / )

But my last question remains...How to pick a resolution for your video so as not to stretch the native aspect ratio? I mean, I can create any sized video tailored for the website but is there an already set parameter for constraining proportions evenly?

Sorry for so many newbie questions but if I can do it once successfully and I will remember forever.

I followed the instructions for mp4 video NOT just the generic videobackground tag (btw what's the difference?), inserting edge hero in compositioncomplete. As you can see I have a box (612px x 612px, the size of my mp4 video) centered on my stage (1024px x 768px) and when I preview I get my video way oversized and cut off at the top. Nothing seems right here except that this problem is recurring.

Any suggestions?

Thank you in advance.

Correction 412x412 is my video and also the size of the rectangle on my stage.

Here's what my stage code looks like:

select the div for the video and select percentag 100% instead of px.

I went ahead and did that for just the div on a set stage of 1024x768 and my video does extend the full width of the browser but still very much cut off, like the video starts a the halfway mark of the actual video at the top of the browser. So I went ahead then and made my stage 100% x 100% with  my div at 100% by 100% and All I got was the exact same cut off as before but now just larger, the size of my browser. Seems to be the running issue for my video experiments in edge. Blind to no control of aspect ratio of my video : /

Nor does the loop class work. Autoplay does, but not loop.

I am no expert but I saw this on a video at Edge Commons It is a 5 minute video.

try this <iframe width = "'+container.width()+'" height="'+container.height()+'"  see his complete code below

from video at http://edgedocks.com/content/mix-it-baby-extending-edge-animate

in creation complete

var container = sym.$("container");

var map = '<iframe width = "'+container.width()+'" height="'+container.height()+'" src = "http://www.website.com/video/myvideo.mp4" rest of iframe stuff goes here</iframe>

container.html(map);

After work tomorrow I am going to try this and see if i can get it to work for me.

Good Luck

Bob

Good idea but that strays entirely from edgehero...I'm looking for simplicity which I thought Edge was more design less code but I find that I EASILY have to code far more in Edge than I ever had to in dreamweaver : /