How to create an image slider / slide show without programming – Part III


In this video I show how to add buttons and actions to the buttons to control the flow of the slides, how to add labels to the timeline in Edge Animate to be able to refer to those positions when playing actions and more.

In the next videos I will cover how to pause playing when rolling over (the mouse) the presentation, and resume playing when rolling out; how to add left/right arrows to control the flow linearly (back and forth); then, I will cover how to make things easier to manage with symbols that include many objects and their own animation timelines and how to add automatic navigation (make the buttons to be dynamically generated). Finally, we will cover more advanced automation, by generating the slide show form XML or JSON files, so they can be updated without opening the composition.

Check part 1 here
Check part 2 here

How to create an image slider / slide show without programming – Part II


In Part I of this tutorial, I showed how to add images and text and how to animate them. I also showed how to use web fonts to make the animated text more interesting.

In this tutorial I am going to show how we can loop the animation by adding triggers on the timeline. Check the final result.

In the next video I will cover how to add interactivity to the slider, so the user can navigate from slide to slide manually.

Check Part 3 here

How to create a web site slider without programming – Part I


I have seen in some forums that people struggle using  jQuery plugins or Flash-based sliders. So, I decided to make a series of video tutorials to show how to make sliders with cool animations and custom user interactivity using a free application. The program is Adobe Edge Animate, which Adobe launched a few days ago and decided to offer it for free. Hence, anyone can download and use it to make sliders, websites and more.

In this video, part I, I show how to add images and text and add nice animations / transitions. In the next one (coming soon) I will show how to add user interaction elements, so the viewer can move forward and backwards.

Edge Animate content works on mobile devices running iOS and Android™ operating systems, as well as on modern desktop browsers.

Let me know if there is something in particular that you would like me to add in a future video.

Check part 2 here
Check Part 3 here

How to piggyback the traffic of trusted authority sites


Probably, you have heard that before. Get this, get that to profit from the traffic from trusted sites that have huge number of followers. However, what I am talking about is different. Just read on.

Rob Jones and his team have developed a tool, Trustjacker, which can funnel the traffic of other sites to your own offer. It works by including a web page (a trending article preferably) and including it in an iFrame. The user provides a link of a snipped of html code that is rendered when the user leaves the page where the article is in. Trustjacker is a WordPress plugin and as such the users need to have a self-hosted WordPress account.

Rob developed it so people can promote CPA (Cost Per Action) offers that are somehow related to the article content. For example, now that elections are a hot topic, you could look for articles related to the elections. In fact, yesterday a hot topic was Bill Clinton’s speech at Democratic National Convention, which attracted a lot of interest. A quick Google search gets many results, including one on CBS News and another at U.S. News & World Report (see screenshots below).

Then, the user grabs the URL of one of those articles and put in on Trustjacker. Then it includes a URL for the offer, if it is a link to an external site or a link to a banner that will popup, or some HTML content for the popup directly on the app. For the banner the user needs to be registered with a CPA network which should provide the banners and lead capture materials. In the case of our example the popup offer could be something like this form below, which happens to pay $1.60 for every sign up.

Next, you post the link generated by Trustjacker on the social networks, including Facebook, Twitter. Google+, LinkedIn and more. Since you are not promoting anything, but sharing a trending link, you should not expect anyone to complain. The offer appears as part of the ads that appear along with the articles in the original sites. Just ingenious.

On the member’s dashboard Rob included some additional resources that should help you identifying CPA offers and ClickBank products to promote. Hence, overall I think is a great investment for people that are promoting or interested in promoting CPA offers and/or affiliate offers. Besides ClickBank, this system could be used to promote Amazon products. In the case of Amazon, let’s say you would like to share technical articles related to HTML and JavaScript programming. Hence, you find blogs that have interesting articles worth spreading and attach a popup promoting a book related to the article. For each person that buys the book you get a commission.

I, in particular, am not into CPA or affiliate marketing (although – full disclosure – I am providing an affiliate link here to Trustjacker, because I think is a great way to get targeted traffic), but I see the program as an opportunity to promote my own products piggybacking the traffic of others. So, it’s time to experiment a little to see how it goes. I will post soon what results I am getting.

On the site, they have tons of testimonials and examples of people using it already and getting positive results.

Well, what do you think? Do you like the idea? Do you hate it? Please comment below.

Playing with Adobe CS6 While Working on the Launch of my Beta Program


As I mentioned on a previous post, I just launched a beta program for my Jewelry Assembly Management System. For the landing page, I wanted an introductory video with some cool effects, and while that was not necessary at all (the cool effects), I thought it would add some spice. I also though that using an After Effect template that I got from Envato, would make the little side project easy.

Well, I was so wrong. You see, I have the Adobe CS6 Cloud subscription, so I wanted to start playing with all my new toys (I use only a few of the programs in the suite on a regular base).

I have never used After Effects before, and it’s a huge monster. I started watching some video tutorials on the Internet, but they were going to fast. Finally I found some just right paced tutorials at

So, I create some text slides in Photoshop, put them in the template, edit a few things here and there, etc. Maria, my wife, recorded the audio and sent it to me and then I synced the video and the audio  and I added some background music. It was much more work than I would expect, but it was done. Now rendering time. Oops. It took forever, like 15 hours… and it crashed. So I have to start the rendering all over again.

I decided to render the video again at 720p instead of full HD. It took less time to render, but again it was painfully slow, around 7 to 8 hours. This time the render seemed to work OK. Time to watch it on a video player. Bummer! the video was playing OK, but it had no sound. What did I do wrong? I have no clue.

Well, I was not going to re render it on After Effects, since I din’t know the cause of the problem. Time to experiment with another possible solution. So, I started Premiere, added the video and the 2 sound tracks (the voice narration and the music background), adjusted the tracks accordingly and rendered the video again. This time it took around 3.5 hours. Al little better, but still very slow, considering I have a Intel Core i7 machine with 8GB of RAM and a good GPU. What is interesting is that the video produced by AE was around 230MB and the one produced by Premiere around 1.05GB. WOW, huge difference. But who cares. This time it worked.

Did it turn out as I expected? Not exactly, but this video was not really critical for the Beta launch. It’s just a teaser of why a jewelry designer would like to try the program. I guess the video is just OK. Once out of Beta, I will need to make my videos look more “professional”. Eventually I will get there.

Do you want to see the final result? Check it out below.

Then, it was time to make a video showing how to use the Jewelry Assembly Management System. Basically, I needed to record my screen while showing how to accomplish the tasks. I downloaded a trial version of Snagit, and recorded the video. I wanted to include a title at the beginning at another at the end and add background music. This time I decided to work with the video features in Photoshop CS6. I created a new layer and added the initial title, included it on the same group as the video, made a copy of that layer and changed a word, and added the music sound track. I rendered the video (it took around 1 hour) and all done.

Again, I am not fully satisfied with the result, but it’s not too bad. I guess practice will help improving my video editing abilities … and my narration abilities.
Here is the final video:

What do you think?

Do you have some recommendations or pointers that will allow improving the process?

Do you have good suggestions for …

… a tool to handle digital downloads for sale. I am mainly interested in handling monthly subscriptions.

On my previous post I mention the launch of the Beta program for our Jewelry Assembly Management System. Well, once the beta is over I plan to sell it, both as one time payment (as most software apps) as well as a subscription offer. I am developing the application in Adobe AIR, so I need the subscription management platform to have an API that my application can talk to, to verify that users are up-to-date with their subscriptions.

If you happen to know a tool, system, platform… preferably a hosted cloud solution, please let me know. I will appreciate the help here.

Just Launched a Beta for Our Jewelry Assembly Management System


My wife  Maria designs and makes fashion jewelry, that she sells at

She loves to do one-of-a-kind,  but for the type of products she makes and the price points she has, one-of-a-kind ‘s are not a good business model. After several discussions we agreed that she will produce copies of her designs when she gets orders.

That is all good. However, what happens when people order a design she made a while ago, let’s say a year ago. Well, does she know where did she get the findings, the beads and other materials? Probably not. You see, she sources her materials from anywhere she finds something interesting that calls her eye.

Well, that is why I decided to help her making a program to record the materials and related info (picture, vendor, component URL, etc), and include notes and instructions, so she can replicate her own designs.

Talking to other jewelry designers, we realized that most of them face with the same problem, so we decided to make a public beta. Thus, people can download the program and provide feedback to improve it.

We plan to have several iterations while in Beta, making sure we take into account the feedback from jewelry designers that join the beta program. Once the beta is over we plan to offer the program at a very attractive price point, so it will be accessible to (hopefully) all interested designers.

The nice thing about this is that non-jewelry designers that have heard us (my wife and I) talking about it, believe it can be adapted to other markets as well. Humm. maybe this is my future:)

Anyway, in case you want to check the application go to Baloka Product Assembly Management – Beta.

Let me know what do you think?


Drawing Arrows in Actionscript 3 (Flex 4) Using Simple Trigonometry


Continuing the work on the last post – Drawing Stars and Bursts in Actionscript 3 (Flex 4) Using Simple Trigonometry, today I am showing how that little application can be extended to draw arrows of different types, such as the ones on the image below.

In order to create the arrows, we can take the half right side of a burst with 4 sides and render the arrow head with it. That means drawing a quadratic Bezier curve from Po to P1 and another from P1 to P2, using the controls points according to the inner circle (as described on the previous article). See figure above. The rest of the arrow is created by drawing lines from P2 to P3, P3 to P4, P4 to P5, P5 to P6 and then closing the shape with a line from P6 to P0.

Points P3, P4, P5, and P6 can be defined setting the parameters for “Arrow Length”, “Shaft Base Offset”, and Arrow Shaft Thickness”.

Changing the inner radius affect how the head of the arrow will be rendered. Experiment with the tool to produce concave, convex or straight shaped heads.

As usual, below is the application, in case you would like to try it out. Open it in a new tab by clicking HERE.

Get Adobe Flash player


Play around and let me know what do you think. Also, please give me any suggestions you may have to improve it or to extend it.

I have some ideas of where I would like to take it next, but getting yours would be great too.

Drawing Stars and Bursts in Actionscript 3 (Flex 4) Using Simple Trigonometry

Stars and Bursts

Yesterday I showed how to create regular polygons using a simple formula. Today I will show how to extend that to draw stars and bursts as well.

Looking at the image above, we can see that to do a 4-point star we need to identify the same initial 4 points Po, P1, P2 and P3 than the ones needed to draw the 4-side polygon (square) shown on the left. For the star we need to set an inner radius that will control the position of the points P1’, P2’, P3’ and P4’. And then the formula becomes:

For point i, where i is an odd number,
Pi.x = radius * Math.sin((180 - 360*i/n + _initRot)*RADTOANGLES);
Pi.y = radius * Math.cos((180 - 360*i/n + _initRot)*RADTOANGLES);
And, for point i, where i is an even number,
Pi.x = innerRadius * Math.sin((180 - 360*i/n + _initRot)*RADTOANGLES);
Pi.y = innerRadius * Math.cos((180 - 360*i/n + _initRot)*RADTOANGLES);
Where is n is the number of sides of the star multiplied by 2.

Hence, the odd points are defining the outer points of the star, while the even points are defining the inner ones. Then, all we need to do is to draw lines from P0 to P1, from P1 to P2, …, and from Pn-1 to P0. As in the case with the regular polygons, I included a variable _initRot in case you want to position the initial point at some angle other than 0.

As you probable guessed from the title, this can be easily expanded to draw bursts as well. A burst is similar to a star but instead of connecting the point with straight lines, the outer points are connected with curves and the inner points are used as controls points to draw quadratic Bezier curves.

The image below shows a regular polygon (pentagon), a star and a burst with similar parameters.

The green circle is generated using the radius and the blue circle using the inner radius.

We can add some additional parameters to make this little application cooler. For example, we can rotate the inner circle (blue) and move the inner points for the stars and bursts accordingly to produce some nice results as shown below.

For point i, where i is an odd number,
Pi.x = radius * Math.sin((180 - 360*i/n + _innerRadiusOffset + _initRot)*RADTOANGLES);
Pi.y = radius * Math.cos((180 - 360*i/n + _innerRadiusOffset + _initRot)*RADTOANGLES);
And, for point i, where i is an even number,
Pi.x = innerRadius * Math.sin((180 - 360*i/n + _initRot)*RADTOANGLES);
Pi.y = innerRadius * Math.cos((180 - 360*i/n + _initRot)*RADTOANGLES);
Where is n is the number of sides of the star multiplied by 2.

Additionally, we can shift the center of the inner circle to produce some odd results. Check the video below for some of the figures that can be created changing parameters dynamically. You can also play around with the application (below the video). Or click HERE to open it in another browser tab.

Get Adobe Flash player


Get Adobe Flash player


In this version I added the capability to drag each shape around as well.

In the next post I will show you how to extend it even further to allow drawing some fancy arrows.

Do you have some ideas of other stuff we could do with this? If so, please share on the comments.

Drawing Regular Polygons in Actionscript 3 (Flex 4) Using Simple Trigonometry

Regular Polygons

A while ago I wrote on this blog about how to draw polygons in Actionscript, by clicking on the stage and adding points dynamically. As I said in my last post, the blog was hacked and I decided to start fresh.
Today I am showing a little application that allows the user to draw regular polygons. The user can change most of the parameters of the polygons, such as number of sides, color, stroke, etc. To allow those changes, the polygons are created using a simple formula.

From the image above is clear that to make a triangle starting from a center point, one needs to put a point P0 at x = center.x and y = center.y – radius. Then, draw a line to the next point P1, which should be at (in Actionscript):

P1.x = radius * Math.sin((180 - 360*1/3)*RADTOANGLES);
P1.y = radius * Math.cos((180 - 360*1/3)*RADTOANGLES);

Then, draw another line from P1 to P2 (the last Point), where the position of P2 is:

P2.x = radius * Math.sin((180 - 360*2/3)*RADTOANGLES);
P2.y = radius * Math.cos((180 - 360*2/3)*RADTOANGLES);

And finally, draw another line form P2 to P0 to close the polygon. As you can see from the images above, the formula can be generalized to any regular polygon as:

Pi.x = radius * Math.sin((180 - 360*i/n + _initRot)*RADTOANGLES);
Pi.y = radius * Math.cos((180 - 360*i/n + _initRot)*RADTOANGLES);

Where i is the point number, n is the number of sides on the Polygon. I included a variable _initRot in case you want to position the initial point at some angle other than 0.

The example below is done in Flash Builder (Flex), but it should be simple enough to implement the same formula in JavaScript or any other language.

Get Adobe Flash player


Click HERE if you want to try it in full size (not constrained to the space provided in the blog).

In a future post, I will show how to extend the formulas to enable creating stars and bursts in addition to regular polygons.