Online Portfolio - trying to create overlays as buttons and trigger full screen image sequences between web pages

Beginners
1

As the title mentions, i’m building an online motion graphics, video production and photography portfolio.

My concept is to have a greyscale office that ive built in Cinema4D. When an office object (eg - flatscreen) is rolled over it will transition to a coloured overlay, and when it is clicked it will trigger an image sequence to zoom in to the screen - all of this will be rendered from C4D.

Is this possible in Pinegrow? Ive used muse and am interested in changing to pinegrow, it seems like quite a simple concept, so hopefully someone will have an idea of how to execute it.

Attached is 1 of my still frames from my draft renders

TimElkington_Index_BG_Image
TimElkington_Index_BG_Image.jpg2560×1600 216 KB

2

Hi there @timelk, well, I was waiting for someone more experienced in this to reply, but here’s some information for you as you wait.

Yes, you should be able to do this in Pinegrow.
Providing those screens are items, targeted with say javascript and here are some examples.
I assume you mean a transparent overlay ? so that you maintain your image, but it has some hue over it?
IN which case, Pinegrow has a nice gradient/transparency control set.

some examples to get you going may be found at these links.


and this above link, shows this following site

http://jsfiddle.net/as5ZU/

and here is a kitty one :slight_smile:

and yep., these effects are on :HOVER or mouseover, not on click as you actually asked but its along the same line :slight_smile:

Alos note that there is a Pinegrow Plugin available that does a bunch of funky stuff.
The Documentation is a little sketchy but it adds a pile of animation features in PG.
http://animator-pro.mhdaljuboori.me

and as for C4D - ya got me on that one! I have no idea of the relevance with regards web stuff :slight_smile: sorry.

Anyway, I hope this gets you going.
Ciao

3

Thanks for your reply, I guess coming from a motion background its hard to describe using the correct terminology… the hover effect is what im after, and then when it is clicked - I want it to trigger an animation (15-20frames) zooming in to the object.

What I had pictured in my head would be the original screen above as one page (with the hover effect adding the rollover assets), once it is clicked I guess the next page could begin with the image sequence of the zoom in before settling on the close up. The main thing here is I want it to be seamless, so no flashing between the click and the animation starting, or between the end of the image sequence and the new page… any ideas how to achieve this?

4

Have you considered "Magic*? :wink:

check out the third law :slight_smile:

we’ll apart from that tongue in cheek reply, I really like your idea.
The effects you require are all achievable with standard web coding, and since Pinegrow uses just this, with no proprietary shenanigans, your good to go.

You now just have to work out the stages you want , decide your desired manner of these to take place and - look to see if thats possible , then find one homogenous manner that deals with all of those together, or a nice elegant fudge that combines a few of them :slight_smile:

so this would zoom in on an image, Without using Javascript.

The above is just to give you some idea of what I can find, just googling around with my limited knowledge, but having some idea of what you want and how pinegrow works

but I’m assuming you would like some smooth zoom transition (not dissimilar to the way PineGrow App launches.) but a slower, and probably without the corner zoom icon in the image, but rather the whole screen receives the click.
I guess you would be back in the land of Javascript for picking up the clicks and hovers then.

so, have a play, it sounds like you have more or less worked out just what you want, so just google those effects and get the code and - stick it in Pinegrow! you have no limit with standard code languages of the web.

And, If you have the Animator Pro plugin, you get extra controls for all the funky animate possiblities and sequences - but you will have to do some work to learn them and work them out in the interface, but that sounds like it might be right up your street :slight_smile:

and the Animato Pro plugin is developed by @MhdAljuboori, so if you come up against some obstacles after learning the docs and /or no one else on here can help you, then drop him a line :slight_smile:

but… Pinegrow 5 is out this week.
He might be a little busy right now
Good luck
:slight_smile:

N.B. If this sounds a little vague its because I’m not too experienced in this myself and - I have no idea of your current coding skills, or whether your looking for draggy droopy goodness for this end result.

I may be be preaching to the converting or chatting to someone who is more familiar with finger paints :slight_smile:

I fall into the latter

1 Like
5

Back in the day, this would have been done with Flash, and vector objects. I haven’t touched Flash in over 5 years. I know it’s still around, but its use in websites is basically done and over with.

I think your best bet is to start by Googling “HTML Imagemap” and then prepare to do a crash-course in Javascript, because plain 'ol CSS isn’t going to cut it for what you’re trying to do (as far as I can understand it.)

It can be “assembled” in Pinegrow, but you’re definitely looking at using some outside resources/coding to accomplish this. Also, I don’t even want to think how you would make something like this responsive (like for a mobile device.)

6

I think I will need to rearrange the scene so it is a bit more mobile friendly, and re-render - either that or make a seperate render for mobile. At this stage it is a draft idea - I would usually charge into it and work it out as i go, but id rather get things right from the start this time - plus my demo has expired and im waiting to have my student version authorised…

I have a small amount of JS knowledge, have just completed a cert in web design which covered basic html, CSS and JS - hopefully enough to get my head around the project.

The other option is to ditch the zoom effect, but i think that will make it a bit too lacklustre for a portfolio

7

draggy/droppy would be ideal if its a possibility! I have a small amount of coding experience, but im definitely not a natural!

8

A nice idea and fun to figure out how to do this.
I would solve this with different layers/divs (same size) stacked on top of each other.

Layer 1 : Background image “greyscale” Office
Layer 2 : Control/triggers
Layer 3 : Animations
Layer 4 : Portfolio content (page)

Layer 1
Contains your “greyscale” office image.

Layer 2 (transparent)
Define and control the areas for the mouseover and click events.

Layer 3
To play and show/hide the animations in.

Layer 4
Showing your portfolio/page content, (which can be controlled/shown as multiple pages).

Colored Overlays (MouseOver)

Show in the “defined” areas, with Hover/MouseOver a colored overlay image (in layer 2).
On MouseOut will hide the colored overlay part.

Clickable Objects (OnClick)

I assume you want all office objects to be interactive, picture frames on the wall, flatscreen on wall, laptop, monitor (left), monitor (right). Make some JS funtions/objects to control/trigger for each office object.

ShowPictureFrame()
HidePictureFrame()

ShowFlatScreen()
HideFlatScreen()

ShowLaptop()
HideLaptop()

ShowScreenLeft()
HideScreenLeft()

ShowScreenRight()
HideScreenRight()

Showing an Office Object

  • Show layer 3 and play the corresponding “zoom in” animation. (play frame xx till frame xx, and stop)
  • Show layer 4 (fade in) with portfolio/page content.

Hiding an Office Object

  • Hide layer 4 (fade out effect).
  • show and play in layer 3 the corresponding “zoom out” animation. (play frame xx till frame xx, and stop)
  • Hide layer 3
  • Layer 1 is back in view, with the “greyscale” Office. Ready for the next action!

To make it all seamless, preload the “animation files”, or maybe put all the animations in one preloaded (video) file, and control which frames to show each time.

And like @Printninja mentioned, you have to think how to handle different screen sizes (responsive).

Hopefully you can follow this little guidance.
Good luck and have fun, nice challenge!

2 Likes
9

There’s no way you’re going to create something this complex using drag-n-drop tools. I like @Marf’s idea of using layers/divs on top of each other, and then maybe using the CSS visibility combined with Javascript.

TBH, back when I was just cutting my teeth on Flash, I would have actually enjoyed figuring out how to do this, not because I liked flash, but because it was a tool I was getting accustomed to, and I saw a lot of potential to jazz up some of my websites with interactive animations and such.

Now, simple animations can be done with CSS, but any sort of interactivity requires Javascript, and I only use Javascript to accomplish specific things that clients request. I’ve never bothered to actually learn it completely, but it’s definitely on my “to-do” list.

1 Like
10

ok, have got my trial sorted and now waiting for my student account to be set up.

Just wondering - where do i start with this project? Basic html or should i be using one of the other templates - bootstrap etc? (ive never used any of these so not sure whether I should use them or not?)

11

If you want your site to be responsive, I’d probably start with a framework like Bootstrap 4, since it’s well-supported and you can find answers to most any questions you might have by Googling. CSS Grid is also very powerful, but could be harder to find support/tutorials for online.

I’d recommend that you first watch all the videos and read the tutorials on using Pinegrow.

12

thats a lot of content to get through - the basic overview is 30minutes, so i dread to think how long it would take me to get through it all… but i guess if its a must do, i should get cracking.

Re: responsiveness… I just re made my scene in cinema, and made the objects sit within a 640x480 portrait screen. Hopefully this means if i pull the camera out to a high res wide shot it should give me enough to work with for both landscape and portrait

13

I’m not sure how you’re intending to implement your concept on mobile devices (assuming you even are), where screen sizes can vary quite a bit. You’re also dealing with a tall narrow display on mobile (or a short, wide one in portrait mode) which doesn’t translate well into 640x480.

Coming from a static layout mindset to a responsive one is a big switch conceptually. You can’t think in fixed dimensions anymore, but rather you have to imagine how your layout can shift to adapt to a variety of screen sizes, which may vary from very large 16 x 9 TV displays to 12" laptops, to smaller tablets, all the way down to small phone displays. And depending on how the devices are oriented (portrait or landscape) can change everything as well. It’s very difficult to make a fixed concept like what you’ve described work seamlessly on so many different screens, so you may ultimately choose (or be forces) to not support certain screen sizes or orientations.

I’d consider this project to be medium to hard difficulty to cut your teeth on in terms of learning responsive design, plus the javascript and CSS you’ll need to implement the animation and interactivity, but if you’re good at teaching yourself, and determined, you should be able to do it.

1 Like
14

cheers - yeah, i’m by no means underestimating the complexity of this - particularly for a novice and first time user of Pinegrow!

I definitely want a unique eye catching portfolio, and I want to build it myself to showcase my (yet to be learnt) skills! haha, perhaps a bit ambitious with this, but I think I should be able to crack it - @Marf has given me a pretty good base to start from, and as mentioned earlier I have a small amount of javascript and CSS knowledge, hopefully enough to conjure up a design that works.

I’ll update this post when/if i get something worthwhile sharing.

and thanks for all the input so far, much appreciated!

1 Like
15

There is nothing wrong with something ambitious, nice to have a challenge and learn new things.

I would advice you to explore Pinegrow first before you start with your project, just play a bit with it, to get to know the interface first. Start with a (bootstrap) template, and select some page elements to see what happens with all “panels” and “visual helpers”, and see what info, settings and options will become available.

And when you find your way a bit in Pinegrow and feel confident, start building your idea step by step.

Have fun !!!

2 Likes
16

ok so i think i am going to create this in muse… i played around with PineGrow and I dont think its for me…

I’ve managed to do what I want to do in muse in 15minutes compared to painstakingly trying to wade through tutorials and get something working, also the lack of reply when i tried to purchase the software has put me off.

I think if i get this working in muse i might bring it over to pinegrow and then have a play, and clean up the code a bit. Its a shame that muse is being discontinued, Pinegrow was meant to be the next best alternative from what i read online, but its a totally different beast

17

Hello Tim,

I’m a bit surprised with your statement as from what I see on the Pinegrow support system, we had a 5 messages conversation and your last word was “Perfect, thanks I will try this tomorrow” :slight_smile:

However, Pinegrow can have a steep learning curve and I can understand that you feel better with another application that you already know very well.

Best regards.

18

ive had no response abut the status of my student version since my first email about it last week… not even a simple “we’re quite busy and are waiting to process this” or “it takes x days to process”, so this is a bit disappointing… particularly when i wanted to take advantage of the deals you currently offer.

I do hope to learn pinegrow, but the learning curve is steep as you mentioned. I even started to use dreamweaver instead as i felt that with the amount of coding and css required to do what i want was something that would be better done in something im more familiar with.

Perhaps when i have a bit more time to play around with pinegrow ill reconsider… theres a lot to like about it and perhaps the idea i have is a bit full on for a first project

19

Inviting our potential customers to try the application through our free 7 days trial before proceeding to a purchase is something we do on a regular basis, even when we run promotions.

There are some benefits on both side:

  • You can fully try the complete application without any limitation before spending any precious money and be sure that it’s all right for your needs and more.
  • We prevent immediate refund requests which are not really the interesting part of our mission.

The current situation has proven that this way to proceed is not that bad.

1 Like
20

Yep! well done on noticing that @timelk mate :slight_smile:

and the beauty of that horror of that whole learning thing, when you just want to get stuff done is

That YOU end up as the next best Web coding thing and …become a totally different and enhanced beast too :slight_smile:

want to edit some horror. you missed on your site, but your on the road … so don’t have you apps, fine! you have learnt HOW to do something as you have just been forced to learn the latest greatest framework, say via Pinegrow, which. you now don’t have access too.
…well, Then just flip open Notepad, or Textedit , because you now UNDERSTAND all that gobbledegook… you can do stuff with yOUR BRAIN and whatever tools you have to hand because you UNDERSTAND.

You are NO LONGER… limited by your tools :slight_smile:
Whatever they are.

Interfaces, yep, I will give you that, now THEY speed up/slow down processes and workflows dramatically, Pinegrow is just one tool in a workflow, we have had all sorts of discussions about that on here over the past :slight_smile:

but once you have LEARNT a tool… to use to UNDERSTAND the code, -which is the Backbone, soul, essence of the ENTIRE THING you are trying to create,

You are free’d up baby! :slight_smile:

So, use the tool of your choice (you have already learnt the Muse interface, I guess you didnt immediately create your dream sites in it WITHOUT first learning ITS interface)

To get stuff done, or to STUDY THE UNDERLYING … stuff!

if you never understand the underlying stuff, you are forever both enhanced and limited by your tool of choice.

If it cant do it, well, then neither can you.

Forever googling plugins, add ons, scripts, extensions, since you cant make them yourself and if no one else has made one, then you aint gonna have it.

Having said that, yep. PG is a different beast, it REALLY helps to go into it with SOME UNDERSTANDING of just HOW the whole Code things works - even if you don’t know the syntax of stuff,

Just how so then you will have some idea of WHERE to look for something as you now how it works and , well roughly where it should be. … with the added bonus of draggy droppy stuff and some frameworks . (bootstrap and foundation are built in.)

And as a disclaimer… I too struggle with stuff sometimes, forever forget where things are, mix up the styles panel with the FRAMEWORK styles panel, and forget syntax like it was my friends children,s birthdays!

SO, this is some encouragement to start wandering down that long path of … gulp… learning. When we have NO TIME for that. as I need to GET SOMETHING DONE… NOW!

in the end it pays off.
Makes note to self…now I REALLY NEED to learn more in order to GET STUFF DONE
(that’s for me , not you :slight_smile: )

Finally, well done on getting it done in 15 minutes in Muse.
Now that is SUPERB! well impressed.

is it up somewhere for us to see?
I’d love to see it, even if you do get some code slagging for what comes out of Muse, but
excellent on doing it.
I love the idea. Even though you may well fall on your own sword, as @Printninja said with regards RESPONSIVENESS

BUT

You had a vision,
you have created it!
With WHATEVER TOOL.

now THAT is fab! :slight_smile: